xiaojincai
/
yrxinterview


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
							<!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>
    #list li{
        width: 95% !important;
        line-height: 55px;
        font-size: 14px;
        border-bottom: 1px solid #BBBBBB20;
    }
    #list li a{
        color: #0065D7;
        display: flex;
    }
</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" style="margin-top: 16px;">
            <div class="left">
                <div class="banner" style="align-items: anchor-center;display: flex;padding: 0 10px;">
                    <!-- <img align="left" width='100' height="100" :src="img[0]" alt=""> -->
                     <div style="width: 100px;height: 100px;text-align: center;line-height: 100px;background: black;">{{categoryInfo.categoryName}}</div>
                    <p style="color: #333;text-align: left;padding: 10px;">
                        {{categoryInfo.content}}
                    </p>
                </div>
            </div>
            <div class="right">
                <div class="banner">
                    <img width="100%" height="100%" :src="img[1]" alt="">
                </div>
            </div>
            <p class="navtation"><a href="/index.html">回到首页</a> - 
                <span v-if="parm.category=='crawler'">爬虫</span>  
                <span v-else-if="parm.category=='js'">JS</span>
                <span v-else>安卓</span>  
                面试题</p>
            <div class="left">
                <div class="part">
                    <ul class="list" id="list">
                        <li v-for="(item,i) in list">
                            <a :href="'/detail.html?cat='+parm.category+'&id='+item.interviewId">
                                <span>{{i+1}}、</span>{{item.name}}</a>
                        </li>
                    </ul>
                    <p class="page">
                        <button :disabled="parm.page==1?'disabled':false" @click="parm.page--,getData()">上一页</button>
                        <span><b>{{parm.page}}</b>/{{pages}}</span>
                        <button :disabled="parm.page==pages?'disabled':false" @click="parm.page++,getData()">下一页</button>
                    </p>
                </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="">{{item.cname}}</a><span>{{item.count}}</span></li>
                    </ul>
                </div>
                <div class="part">
                    <h2 class="sec_title"><span>贡献面试题</span></h2>
                    <form class="form" action="">
                        <input v-model="name" type="text" placeholder="面试题目">
                        <textarea v-model="content"></textarea>
                        <button type="button" @click="post">提交</button>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <script src="js/public.js"></script>
    <script>
        const { createApp } = Vue;
        createApp({
            data() {
                return {
                    list:[],
                    parm:{
                        category:'js',
                        page:1,
                        page_size:20
                    },
                    total:0,
                    img:[],
                    top:[],
                    name: '',
                    content: '',
                    show: 0, // 添加 show 变量
                    userInfo: {}, // 添加 userInfo 变量
                    categoryInfo:{}
                }
            },
            computed:{
                pages(){
                    return Math.ceil(this.total/20);
                }
            },
            created(){
                this.parm.category = new URLSearchParams(window.location.search).get('cat') || 'js'; // 获取URL中的cat参数并赋值给category
                this.getData();
                const userInfo = JSON.parse(localStorage.getItem('userInfo')); // 获取本地存储的用户信息
                this.userInfo = userInfo;
            },
            methods:{
                getData(){
                    // 首页
                    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;
                    })
                    // 列表
                    axios.get(url+'/api/yrx/que/list', { params: this.parm }).then(res=>{
                        this.list = res.data.data.list;
                        this.total = res.data.data.total;
                        this.categoryInfo = res.data.data.category;
                    })
                    
                },
                post(){ // 添加post方法
                    if (!this.name || !this.content) {
                        alert('面试题目和内容不能为空');
                        return;
                    }
                    const token = localStorage.getItem('token'); // 获取token
                    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);
                    });
                },
                logout() { // 添加 logout 方法
                    localStorage.removeItem('userInfo');
                    localStorage.removeItem('token');
                    this.userInfo = null;
                }
            }
        }).mount('#app');
    </script>
</body>
</html>