xiaojincai
/
yrxinterview


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516
							<!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>
    .search_left {
        width: calc(25% - 20px);
    }

    .search_left .list li {
        width: 100%;
        line-height: 30px;
    }

    .part {
        border-radius: 5px;
    }

    .search input {
        width: 200px;
        height: 32px;
        border: 1px solid #ccc;
        border-radius: 3px;
        padding: 0 10px;
        margin-bottom: 15px;
        outline: none;
        text-align: center;
    }
    .search{
        position: relative;
        width: 200px;
        margin: 0 auto;
    }
    .search img{
        position: absolute;
        right: 5px;
        top: 5px;
        cursor: pointer;
    }
    .detail_right {
        width: 75%;
    }

    .tag {
        margin-top: 10px;
        /* padding-left: 20px; */
    }

    .tag span {
        background-color: #A9ABAD20;
        color: #666;
        display: inline-block;
        width: 60px;
        line-height: 25px;
        margin-right: 10px;
        font-size: 14px;
        border-radius: 10px;
        text-align: center;
    }

    .tag a {
        color: #333;
        float: right;
        cursor: pointer;
    }

    .discuss {
        text-align: center;
        /* background-color: #f5f5f5; */
        padding: 40px 20px;
        /* border: 1px solid #ccc; */
    }
    .discuss button{
        background-color: #2268D0 !important;
        border-radius: 20px !important;
        width: 200px !important;
    }
    .answer {
        padding: 20px;
        line-height: 26px;
        text-align: left;
    }

    .detail_right button {
        width: 150px;
        height: 40px;
        border: none;
        background-color: #000;
        color: #fff;
        font-weight: 600;
        border-radius: 3px;
        outline: none;
    }

    .user {
        margin-bottom: 10px;
        color: #999;
        font-size: 13px;
    }

    .ans {
        line-height: 25px;
        margin-bottom: 10px;
        color: #333;
    }

    .login_div {
        /* background-image: linear-gradient(90deg, #0B0B0A, #E1CAA0); */
        text-align: center;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0px 0px 4px 0 rgba(0,0,0,.1);
        margin-bottom: 15px;
    }
    .login_div button{
        width: 300px;
        background-color: #E8E8E8;
        color: #000;
        font-weight: 500;
    }
    .login_div button span{
        color: #0065D7;
        font-weight: 600;
    }
    #list li{
        line-height: 30px;
        padding: 10px 0;
        font-size: 14px;
        border-bottom: 1px solid #BBBBBB20;
    }
    #list li a{
        color: #0065D7;
        display: flex;
    }
    .part{
        padding: 25px;
    }
    .sec_title{
        color: #0065D7;
        font-size: 28px;
    }
    .sec_title span{
        border-bottom: 3px solid #0065D7;
        line-height: 30px;
    }
    .avatar{
        width: 44px;
        height: 40px;
        border-radius: 50%;
        background-color: greenyellow;
        margin-right: 15px;
        line-height: 40px;
        text-align: center;
        font-weight: 600;
        font-size: 13px;
    }
</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="https://match.yuanrenxue.cn/" target="_blank">爬虫逆向比赛</a>
                <a href="https://match.yuanrenxue.cn/" target="_blank">采集进阶课程</a>
                <a href="https://tool.yuanrenxue.cn/" target="_blank">采集分析工具</a>
                <a href="https://appmatch.yuanrenxue.cn/" target="_blank">APP题目</a>
                <a href="https://www.yuanrenxue.cn/" target="_blank">关于猿人学</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="https://match.yuanrenxue.cn/" target="_blank">爬虫逆向比赛</a>
                <a href="https://match.yuanrenxue.cn/" target="_blank">采集进阶课程</a>
                <a href="https://tool.yuanrenxue.cn/" target="_blank">采集分析工具</a>
                <a href="https://appmatch.yuanrenxue.cn/" target="_blank">APP题目</a>
                <a href="https://www.yuanrenxue.cn/" target="_blank">关于猿人学</a>
                <a v-if="userInfo" href="/record.html">我的刷题记录</a>
                <a v-if="userInfo" @click="logout">退出登录</a>
            </div>
        </transition>
        <div class="content">
            <p class="navtation"><a href="/index.html">回到首页</a> - <a :href="'/list.html?cat='+param.category">
                    <span v-if="detail.category=='crawler'">爬虫</span>
                    <span v-else-if="detail.category=='js'">JS</span>
                    <span v-else>安卓</span>面试题</a> - {{detail.name}}</p>
            <div class="left search_left pc">
                <div class="part">
                    <p class="search">
                        <img @click="search" width="20" src="img/search.png" alt="">
                        <input  type="text" v-model="searchKeyword" @input="search" placeholder="题目搜索">
                    </p>
                    <ol class="list" id="list">
                        <li v-for="(item,i) in list" :key="item.interviewId" v-show="i<10">
                            <a
                                :href="'/detail.html?cat='+param.category+'&id='+item.interviewId">
                                <span>{{i+1}}、</span>{{item.name}}</a>
                        </li>
                    </ol>
                </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 class="right detail_right">
                <div class="part">
                    <b style="font-size: 28px;color: #000;">{{detail.name}}</b>
                    <p class="tag">
                        <span>{{detail.category}}</span>
                        <a @click="copy"><img style="position: relative;top: 5px;" width="20" src="img/share.png" alt=""> 分享给朋友</a>
                    </p>
                </div>
                <div class="part">
                    <h2 class="sec_title"><span>优秀回答</span></h2>
                    <div class="discuss answer" v-if="userInfo">
                        {{detail.content}}
                    </div>
                    <div class="discuss" v-else>
                        <button @click="login">点击登录查看完整内容</button>
                    </div>
                </div>
                <div class="part">
                    <h2 class="sec_title"><span>讨论回答</span></h2>
                    <div style="display: flex;">
                        <span class="avatar"  :style="{background:getColor()}">
                            {{userInfo.name?userInfo.name[0]:'x'}}
                        </span>
                        <div class="login_div" v-if="!userInfo" style="width: 90%;">
                            <button @click="login">你需要<span>注册/登录</span>才可以分享内容哦</button>
                        </div>
                        <div class="comment" v-else style="width: 90%;margin-bottom: 15px;">
                            <textarea v-model="form.content" placeholder="留下你的想法..."></textarea>
                            <button style="width: 100px;" @click="sendComment">提交评论</button>
                        </div>
                    </div>
                    <template v-for="(item,index) in comment">
                        <template v-if="index == 0">
                            <div style="display: flex;">
                                <span class="avatar"  :style="{background:getColor()}">{{item.cname[0]}}</span>
                                <div>
                                    <p class="user">
                                        <b style="color: #000;">{{item.cname}}</b>
                                    </p>
                                    <p class="ans">
                                        {{item.content}}
                                    </p>
                                    <p class="user">
                                       {{item.ctime}}
                                    </p>
                                </div>
                            </div>
                        </template>
                        <template v-else-if="index > 0 && userInfo">
                            <div style="display: flex;">
                                <span class="avatar"  :style="{background:getColor()}">{{item.cname[0]}}</span>
                                <div>
                                    <p class="user">
                                        <b style="color: #000;">{{item.cname}}</b>
                                    </p>
                                    <p class="ans">
                                        {{item.content}}
                                    </p>
                                    <p class="user">
                                       {{item.ctime}}
                                    </p>
                                </div>
                            </div>
                        </template>
                    </template>
                    
                    
                </div>
            </div>
            <div class="left search_left phone">
                <div class="part">
                    <p class="search">
                        <img @click="search" width="20" src="img/search.png" alt="">
                        <input  type="text" v-model="searchKeyword" @input="search" placeholder="题目搜索">
                    </p>
                    <ol class="list" id="list">
                        <li v-for="(item,i) in list" :key="item.interviewId" v-show="i<10">
                            <a
                                :href="'/detail.html?cat='+param.category+'&id='+item.interviewId">
                                <span>{{i+1}}、</span>{{item.name}}</a>
                        </li>
                    </ol>
                </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>
            <ul>
                <li>
                    <b>爬虫比赛</b> <br>
                    <a href="https://appmatch.yuanrenxue.cn/"  target="_blank">APP题目</a>
                    <a href="https://match.yuanrenxue.cn/"  target="_blank">爬虫逆向比赛</a>
                    <a href="https://tool.yuanrenxue.cn/"  target="_blank">采集分析工具</a>
                </li>
                <li>
                    <b>爬虫课程</b> <br>
                    <a href="https://shop45147253.m.youzan.com/wscgoods/detail/2okabph85ypv1?banner_id=f.86209928~goods.2~1~rVebiaQ5&alg_id=0&slg=0&components_style_layout=0&reft=1744878857227&spm=f.86209928&sf=wx_sm"  target="_blank">爬虫逆向进阶课</a>
                    <a href="https://shop45147253.m.youzan.com/wscgoods/detail/2xli2kj7ku3a5zk?banner_id=f.86209928~goods.2~2~lWrtebiJ&alg_id=0&slg=0&components_style_layout=0&reft=1744878880491&spm=f.86209928&sf=wx_sm"  target="_blank">反爬&风控对抗课</a>
                    <a href="https://shop45147253.m.youzan.com/wscgoods/detail/361rmliyhfwr184?banner_id=f.86209928~goods.2~3~25r4gDL2&alg_id=0&slg=0&components_style_layout=0&reft=1744878921640&spm=f.86209928&sf=wx_sm"  target="_blank">0基础+爬虫逆向课</a>
                </li>
                <li>
                    <b>关于猿人学</b> <br>
                    <a href="https://www.yuanrenxue.cn/tricks"  target="_blank">Python技术杂谈</a>
                    <a href="https://www.yuanrenxue.cn/earn-money"  target="_blank">Python爬虫挣钱</a>
                </li>
                <li class="contact" style="display: flex;line-height: 30px;">
                    <img style="margin-right: 10px;" width="100" height="100" src="img/wx.jpg" alt="">
                    扫一扫加我微信 <br>
                    备注面试题 <br>
                    拉你进面试交流群
                </li>
            </ul>
            <p>成都老猿智能科技有限公司Copyright @ 2025 猿人学面试 蜀ICP备2022000052号-2</p>
        </footer>
    </section>
    <script src="js/public.js"></script>
    <script>
        const { createApp } = Vue;
        createApp({
            data() {
                return {
                    name: '',
                    content: '',
                    userInfo: {},
                    id: '',
                    detail: {},
                    comment: [],
                    form: {
                        content: '',
                        interviewName: '',
                        interviewId: ''
                    },
                    searchKeyword: '', // 添加 searchKeyword 变量
                    list: [], // 添加 list 变量用于存储题目列表
                    show: 0, // 添加 show 变量,
                    param: {
                        page: 1,
                        page_size: 10
                    }
                }
            },
            created() {
                this.id = new URLSearchParams(window.location.search).get('id') || '';
                this.param.category = new URLSearchParams(window.location.search).get('cat') || 'js';
                // 获取本地存储的用户ID并赋值给cid
                const userInfo = JSON.parse(localStorage.getItem('userInfo'));
                this.userInfo = userInfo;
                this.getData();
                this.getComment();
            },
            methods: {
                login() {
                    window.location.href = '/login.html';
                },
                getColor() { 
                    // 生成随机饱和度低的颜色
                    const r = Math.floor(Math.random() * 128)+120; // 随机生成 0-127 的红色值
                    const g = Math.floor(Math.random() * 128)+120; // 随机生成 0-127 的绿色值
                    const b = Math.floor(Math.random() * 128)+120; // 随机生成 0-127 的蓝色值
                    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
                },
                getData() {
                    // 列表
                    axios.get(url + '/api/yrx/que/info?interviewId=' + this.id).then(res => {
                        if (res.data.code === 0) {
                            this.detail = res.data.data;
                            this.form.interviewId = this.detail.interviewId;
                            this.form.interviewName = this.detail.name;
                        }
                    });
                    // 获取题目列表
                    axios.get(url + '/api/yrx/que/list', { params: this.param }).then(res => {
                        if (res.data.code === 0) {
                            this.list = res.data.data.list;
                        }
                    });
                },
                getComment() {
                    axios.get(url + '/api/yrx/que/comments/list?interviewId=' + this.id).then(res => {
                        if (res.data.code === 0) {
                            this.comment = res.data.data.list;
                        }
                    });
                },
                sendComment() {
                    if (!this.form.content) {
                        alert('评论内容不能为空');
                        return;
                    }
                    const token = localStorage.getItem('token'); // 获取token
                    axios.post(url + '/api/yrx/que/comments', this.form, {
                        headers: {
                            'Authorization': `${token}` // 添加token到header
                        }
                    })
                        .then(res => {
                            if (res.data.code === 0) {
                                alert('评论成功');
                                this.form.content = '';
                                this.getComment();
                            }
                        })
                        .catch(err => {
                            alert('评论失败，请重试');
                            console.error(err);
                        });
                },
                post() { // 添加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);
                        });
                },
                search() { // 添加 search 方法
                    axios.get(url + '/api/yrx/que/list', {
                        params: {
                            name: this.searchKeyword,
                            category: this.detail.category,
                            page: 1,
                            page_size: 1000
                        }
                    })
                        .then(res => {
                            if (res.data.code === 0) {
                                this.list = res.data.data.list;
                            }
                        })
                },
                logout() { // 添加 logout 方法
                    localStorage.removeItem('userInfo');
                    localStorage.removeItem('token');
                    this.userInfo = null;
                },
                copy(){
                    const text = window.location.href;
                    navigator.clipboard.writeText(text)
                        .then(() => {
                            alert('链接已复制，求分享给好友吧！');
                        })
                        .catch((error) => {
                            alert('复制失败，请重试。');
                            console.error('复制失败：', error);
                        });
                }
            }
        }).mount('#app');
    </script>
</body>

</html>