xiaojincai
/
yrxinterview


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猿人学面试</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/axios.min.js"></script>
    <script src="js/vue.js"></script>
</head>
<style>
    .banner{
        margin: 16px auto;
    }
</style>
<body>
    <section id="app">
        <header>
            <div class="left_nav">
                <img @click="show=!show" class="phone" width="30" src="img/menu.png" alt="">
                <img class="logo" src="img/logo.png" alt="logo">
            </div>
            <div class="nav">
                <a class="act" href="/index.html">主页</a>
                <a href="">爬虫比赛</a>
                <a href="">关于猿人学</a>
            </div>
            <div class="login">
                <div class="pc">
                    <!-- <img width="30px" src="img/logo.jpg" alt="logo"> -->
                    <div v-if="userInfo" class="menu">
                        {{userInfo.name}}
                        <ul>
                            <li><a href="/record.html">我的刷题记录</a></li>
                            <li @click="logout"><a>退出登录</a></li>
                        </ul>
                    </div>
                    <a v-else href="/login.html">请先登录</a>
                </div>
                <div class="phone">
                    <span v-if="userInfo">{{userInfo.name}}</span>
                    <a v-else href="/login.html">请先登录</a>
                </div>
            </div>
        </header>
        <transition name="slide">
            <div class="slide" v-if="show">
                <a class="act" href="/index.html">猿人学面试</a>
                <a href="">爬虫比赛</a>
                <a href="">关于猿人学</a>
                <a v-if="userInfo" href="/record.html">我的刷题记录</a>
                <a v-if="userInfo" @click="logout">退出登录</a>
            </div>
        </transition>
        <div class="content index" >
            <div class="left" >
                <div class="banner">
                    <img width="100%" height="100%" :src="img[0]" alt="">
                </div>
            </div>
            <div class="right">
                <div class="banner">
                    <img width="100%" height="100%" :src="img[1]" alt="">
                </div>
            </div>
            <div class="left" v-if="list.length>0">
                <div class="part">
                    <h1 class="title"><span>JS逆向面试题</span></h1>
                    <ul class="list">
                        <li v-for="item in list[0].list">
                            <div>
                                <a :href="'/detail.html?cat=js&id='+item.interviewId">{{item.name}}</a>
                            </div>
                        </li>
                    </ul>
                    <a href="/list.html?cat=js" class="more">更多JS逆向面试题</a>
                </div>
                <div class="part">
                    <h1 class="title"><span>安卓逆向面试题</span></h1>
                    <ul class="list">
                        <li v-for="item in list[1].list">
                            <div>
                                <a :href="'/detail.html?cat=android&id='+item.interviewId">{{item.name}}</a>
                            </div>
                        </li>
                    </ul>
                    <a href="/list.html?cat=android" class="more">更多安卓逆向面试题</a>
                </div>
                <div class="part">
                    <h1 class="title"><span>爬虫面试题</span></h1>
                    <ul class="list">
                        <li v-for="item in list[2].list">
                            <div>
                                <a :href="'/detail.html?cat=crawler&id='+item.interviewId">{{item.name}}</a>
                            </div>
                        </li>
                    </ul>
                    <a href="/list.html?cat=crawler" class="more">更多爬虫面试题</a>
                </div>
            </div>
            <div class="right">
                <div class="part">
                    <h2 class="sec_title"><span>面试排行榜</span>  <a href="">更多</a></h2>
                    <ul class="list list_100">
                        <li v-for="item in top"><a :href="'/record.html?cid='+item.cid">{{item.cname}}</a><span>{{item.count}}</span></li>
                    </ul>
                </div>
                <div class="part">
                    <h2 class="sec_title"><span>贡献面试题</span></h2>
                    <form class="form">
                        <input v-model="name" type="text" placeholder="面试题目">
                        <textarea v-model="content"></textarea>
                        <button type="button" @click="post">提交</button>
                    </form>
                </div>
            </div>
        </div>
        <footer></footer>
    </section>
    <script src="js/public.js"></script>
    <script>
        const { createApp } = Vue;
        createApp({
            data() {
                return {
                    show:0,
                    list:[],
                    img:[],
                    top:[],
                    name:'',
                    content:'',
                    userInfo:{}
                }
            },
            created(){
                const userInfo = JSON.parse(localStorage.getItem('userInfo'));
                this.userInfo = userInfo;
                this.getData();
            },
            methods:{
                logout(){
                    localStorage.removeItem('userInfo');
                    localStorage.removeItem('token');
                    this.userInfo = null;
                },
                getData(){
                    axios.get(url+'/api/yrx/que/top').then(res=>{
                        this.list = res.data.data;
                    })
                    axios.get(url+'/api/yrx/banner/list?position=index_left').then(res=>{
                        this.img[0] = res.data.data[0].img;
                    })
                    axios.get(url+'/api/yrx/banner/list?position=index_right').then(res=>{
                        this.img[1] = res.data.data[0].img;
                    })
                    axios.get(url+'/api/yrx/que/user/top').then(res=>{
                        this.top = res.data.data;
                    })
                },
                post(){
                    const token = localStorage.getItem('token'); // 获取token
                    if(!token){
                        window.location.href="/login.html";
                        return;
                    }
                    if (!this.name || !this.content) {
                        alert('面试题目和内容不能为空');
                        return;
                    }
                    axios.post(url+'/api/yrx/que/user/post', { name: this.name, content: this.content }, {
                        headers: {
                            'Authorization': `${token}` // 添加token到header
                        }
                    })
                    .then(res => {
                        if(res.data.code === 0){
                            alert('提交成功');
                            this.name = '';
                            this.content = '';
                        }
                    })
                    .catch(err => {
                        alert('提交失败，请重试');
                        console.error(err);
                    });
                }
            }
        }).mount('#app');
    </script>
</body>
</html>