|
|
@@ -1,5 +1,6 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
+
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
@@ -9,16 +10,19 @@
|
|
|
<script src="js/vue.js"></script>
|
|
|
</head>
|
|
|
<style>
|
|
|
- .search_left{
|
|
|
+ .search_left {
|
|
|
width: 30%;
|
|
|
}
|
|
|
- .search_left .list li{
|
|
|
+
|
|
|
+ .search_left .list li {
|
|
|
width: 100%;
|
|
|
}
|
|
|
- .part{
|
|
|
+
|
|
|
+ .part {
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
- .search input{
|
|
|
+
|
|
|
+ .search input {
|
|
|
width: 100%;
|
|
|
height: 30px;
|
|
|
border: 1px solid #ccc;
|
|
|
@@ -28,14 +32,17 @@
|
|
|
outline: none;
|
|
|
text-align: center;
|
|
|
}
|
|
|
- .detail_right{
|
|
|
+
|
|
|
+ .detail_right {
|
|
|
width: 69%;
|
|
|
}
|
|
|
- .tag{
|
|
|
+
|
|
|
+ .tag {
|
|
|
margin-top: 10px;
|
|
|
/* padding-left: 20px; */
|
|
|
}
|
|
|
- .tag span{
|
|
|
+
|
|
|
+ .tag span {
|
|
|
background-color: #000;
|
|
|
color: #fff;
|
|
|
display: inline-block;
|
|
|
@@ -44,22 +51,26 @@
|
|
|
font-size: 12px;
|
|
|
border-radius: 2px;
|
|
|
}
|
|
|
- .tag a{
|
|
|
+
|
|
|
+ .tag a {
|
|
|
color: #333;
|
|
|
float: right;
|
|
|
}
|
|
|
- .discuss{
|
|
|
+
|
|
|
+ .discuss {
|
|
|
text-align: center;
|
|
|
background-color: #f5f5f5;
|
|
|
padding: 40px 20px;
|
|
|
border: 1px solid #ccc;
|
|
|
}
|
|
|
- .answer{
|
|
|
+
|
|
|
+ .answer {
|
|
|
padding: 20px;
|
|
|
line-height: 26px;
|
|
|
text-align: left;
|
|
|
}
|
|
|
- .detail_right button{
|
|
|
+
|
|
|
+ .detail_right button {
|
|
|
width: 150px;
|
|
|
height: 40px;
|
|
|
border: none;
|
|
|
@@ -69,259 +80,275 @@
|
|
|
border-radius: 3px;
|
|
|
outline: none;
|
|
|
}
|
|
|
- .user{
|
|
|
+
|
|
|
+ .user {
|
|
|
margin-bottom: 10px;
|
|
|
color: #999;
|
|
|
font-size: 13px;
|
|
|
}
|
|
|
- .ans{
|
|
|
+
|
|
|
+ .ans {
|
|
|
line-height: 25px;
|
|
|
margin-bottom: 10px;
|
|
|
color: #333;
|
|
|
}
|
|
|
- .login_div{
|
|
|
+
|
|
|
+ .login_div {
|
|
|
height: 300px;
|
|
|
- background-image: linear-gradient(90deg,#0B0B0A,#E1CAA0);
|
|
|
+ background-image: linear-gradient(90deg, #0B0B0A, #E1CAA0);
|
|
|
text-align: center;
|
|
|
padding-top: 140px;
|
|
|
border-radius: 10px;
|
|
|
}
|
|
|
</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.jpg" 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>
|
|
|
+ <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.jpg" alt="logo">
|
|
|
</div>
|
|
|
- <div class="phone">
|
|
|
- <span v-if="userInfo">{{userInfo.name}}</span>
|
|
|
- <a v-else href="/login.html">请先登录</a>
|
|
|
+ <div class="nav">
|
|
|
+ <a class="act" href="/index.html">猿人学面试</a>
|
|
|
+ <a href="">爬虫比赛</a>
|
|
|
+ <a href="">关于猿人学</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">
|
|
|
- <p class="navtation"><a href="/index.html">回到首页</a> - <a href="/list.html">
|
|
|
- <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">
|
|
|
- <div class="part">
|
|
|
- <p class="search">
|
|
|
- <input type="text" v-model="searchKeyword" @input="search" placeholder="题目搜索">
|
|
|
- </p>
|
|
|
- <ul class="list">
|
|
|
- <li v-for="item in list" :key="item.interviewId"><a :href="'/detail.html?id='+item.interviewId">{{item.name}}</a></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 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>
|
|
|
- </div>
|
|
|
- <div class="right detail_right">
|
|
|
- <div class="part">
|
|
|
- <b>{{detail.name}}</b>
|
|
|
- <p class="tag">
|
|
|
- <span>{{detail.category}}</span>
|
|
|
- <a href="">分享给朋友</a>
|
|
|
- </p>
|
|
|
+ </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>
|
|
|
- <div class="part">
|
|
|
- <h2 class="sec_title"><span>答题讨论</span></h2>
|
|
|
- <div class="discuss answer" v-if="userInfo">
|
|
|
- {{detail.content}}
|
|
|
+ </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">
|
|
|
+ <div class="part">
|
|
|
+ <p class="search">
|
|
|
+ <input type="text" v-model="searchKeyword" @input="search" placeholder="题目搜索">
|
|
|
+ </p>
|
|
|
+ <ul class="list">
|
|
|
+ <li v-for="item in list" :key="item.interviewId"><a
|
|
|
+ :href="'/detail.html?cat='+param.category+'&id='+item.interviewId">{{item.name}}</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
- <div class="discuss" v-else>
|
|
|
- <button @click="login">请登录</button>
|
|
|
+ <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="part">
|
|
|
- <h2 class="sec_title"><span>网友热议</span></h2>
|
|
|
- <template v-for="(item,index) in comment">
|
|
|
- <template v-if="index == 0">
|
|
|
- <p class="user">
|
|
|
- {{item.cname}} {{item.ctime}}
|
|
|
- </p>
|
|
|
- <p class="ans">
|
|
|
- {{item.content}}
|
|
|
- </p>
|
|
|
- </template>
|
|
|
- <template v-else-if="index > 0 && userInfo">
|
|
|
- <p class="user">
|
|
|
- {{item.cname}} {{item.ctime}}
|
|
|
- </p>
|
|
|
- <p class="ans">
|
|
|
- {{item.content}}
|
|
|
- </p>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <div class="login_div" v-if="!userInfo">
|
|
|
- <button @click="login">登录后查看全部</button>
|
|
|
+ <div class="right detail_right">
|
|
|
+ <div class="part">
|
|
|
+ <b>{{detail.name}}</b>
|
|
|
+ <p class="tag">
|
|
|
+ <span>{{detail.category}}</span>
|
|
|
+ <a href="">分享给朋友</a>
|
|
|
+ </p>
|
|
|
</div>
|
|
|
- <div class="comment" v-if="userInfo">
|
|
|
- <textarea v-model="form.content" placeholder="留下你的想法..."></textarea>
|
|
|
- <button style="width: 100px;" @click="sendComment">提交评论</button>
|
|
|
+ <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>
|
|
|
+ <template v-for="(item,index) in comment">
|
|
|
+ <template v-if="index == 0">
|
|
|
+ <p class="user">
|
|
|
+ {{item.cname}} {{item.ctime}}
|
|
|
+ </p>
|
|
|
+ <p class="ans">
|
|
|
+ {{item.content}}
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="index > 0 && userInfo">
|
|
|
+ <p class="user">
|
|
|
+ {{item.cname}} {{item.ctime}}
|
|
|
+ </p>
|
|
|
+ <p class="ans">
|
|
|
+ {{item.content}}
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <div class="login_div" v-if="!userInfo">
|
|
|
+ <button @click="login">登录后查看全部</button>
|
|
|
+ </div>
|
|
|
+ <div class="comment" v-if="userInfo">
|
|
|
+ <textarea v-model="form.content" placeholder="留下你的想法..."></textarea>
|
|
|
+ <button style="width: 100px;" @click="sendComment">提交评论</button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-</section>
|
|
|
-<script src="js/public.js"></script>
|
|
|
-<script>
|
|
|
- const { createApp } = Vue;
|
|
|
- createApp({
|
|
|
- data() {
|
|
|
- return {
|
|
|
- name: '',
|
|
|
- content: '',
|
|
|
- userInfo: {},
|
|
|
- id: '',
|
|
|
- detail: {},
|
|
|
- comment: [],
|
|
|
- form: {
|
|
|
+ </section>
|
|
|
+ <script src="js/public.js"></script>
|
|
|
+ <script>
|
|
|
+ const { createApp } = Vue;
|
|
|
+ createApp({
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ name: '',
|
|
|
content: '',
|
|
|
- interviewName: '',
|
|
|
- interviewId: ''
|
|
|
- },
|
|
|
- searchKeyword: '', // 添加 searchKeyword 变量
|
|
|
- list: [], // 添加 list 变量用于存储题目列表
|
|
|
- show: 0 // 添加 show 变量
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.id = new URLSearchParams(window.location.search).get('id') || '';
|
|
|
- // 获取本地存储的用户ID并赋值给cid
|
|
|
- const userInfo = JSON.parse(localStorage.getItem('userInfo'));
|
|
|
- this.userInfo = userInfo;
|
|
|
- this.getData();
|
|
|
- this.getComment();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- login() {
|
|
|
- window.location.href = '/login.html';
|
|
|
- },
|
|
|
- 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;
|
|
|
+ userInfo: {},
|
|
|
+ id: '',
|
|
|
+ detail: {},
|
|
|
+ comment: [],
|
|
|
+ form: {
|
|
|
+ content: '',
|
|
|
+ interviewName: '',
|
|
|
+ interviewId: ''
|
|
|
+ },
|
|
|
+ searchKeyword: '', // 添加 searchKeyword 变量
|
|
|
+ list: [], // 添加 list 变量用于存储题目列表
|
|
|
+ show: 0, // 添加 show 变量,
|
|
|
+ param: {
|
|
|
+ page: 1,
|
|
|
+ page_size: 10
|
|
|
}
|
|
|
- });
|
|
|
- // 获取题目列表
|
|
|
- axios.get(url + '/api/yrx/que/list').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方法
|
|
|
- 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);
|
|
|
- });
|
|
|
+ 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();
|
|
|
},
|
|
|
- search() { // 添加 search 方法
|
|
|
- axios.get(url + '/api/yrx/que/list', {
|
|
|
- params: {
|
|
|
- name: this.searchKeyword,
|
|
|
- category:this.detail.category,
|
|
|
- page:1,
|
|
|
- page_size:1000
|
|
|
+ methods: {
|
|
|
+ login() {
|
|
|
+ window.location.href = '/login.html';
|
|
|
+ },
|
|
|
+ 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;
|
|
|
}
|
|
|
- })
|
|
|
- .then(res => {
|
|
|
- if (res.data.code === 0) {
|
|
|
- this.list = res.data.data.list;
|
|
|
+ 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;
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
- logout() { // 添加 logout 方法
|
|
|
- localStorage.removeItem('userInfo');
|
|
|
- localStorage.removeItem('token');
|
|
|
- this.userInfo = null;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- }).mount('#app');
|
|
|
-</script>
|
|
|
+ }).mount('#app');
|
|
|
+ </script>
|
|
|
</body>
|
|
|
+
|
|
|
</html>
|
xiao
