record.html 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>面试题</title>
  7. <link rel="stylesheet" href="css/index.css">
  8. <script src="js/axios.min.js"></script>
  9. <script src="js/vue.js"></script>
  10. </head>
  11. <style>
  12. .record li{
  13. width: 95%;
  14. line-height: 30px;
  15. border-bottom: 1px solid #d9d9d9;
  16. padding-bottom: 20px;
  17. margin-top: 20px;
  18. }
  19. .record li span{
  20. color: #999;
  21. font-size: 12px;
  22. }
  23. </style>
  24. <body>
  25. <section id="app">
  26. <div style="background-color: #FDC606;box-shadow: 0px 0px 4px 0 rgba(0,0,0,.5);">
  27. <header>
  28. <div class="left_nav">
  29. <img @click="show=!show" class="phone" width="30" src="img/menu.png" alt="">
  30. <img class="logo" src="img/logo.png" alt="logo">
  31. </div>
  32. <div class="nav">
  33. <a class="act" href="/index.html">主页</a>
  34. <a href="https://match.yuanrenxue.cn/" target="_blank">爬虫逆向比赛</a>
  35. <a href="https://match.yuanrenxue.cn/" target="_blank">采集进阶课程</a>
  36. <a href="https://tool.yuanrenxue.cn/" target="_blank">采集分析工具</a>
  37. <a href="https://appmatch.yuanrenxue.cn/" target="_blank">APP题目</a>
  38. <a href="https://www.yuanrenxue.cn/" target="_blank">关于猿人学</a>
  39. </div>
  40. <div class="login">
  41. <div class="pc">
  42. <!-- <img width="30px" src="img/logo.jpg" alt="logo"> -->
  43. <div v-if="userInfo" class="menu">
  44. {{userInfo.name}}
  45. <ul>
  46. <li><a href="/record.html">我的刷题记录</a></li>
  47. <li @click="logout"><a>退出登录</a></li>
  48. </ul>
  49. </div>
  50. <a v-else href="/login.html">请先登录</a>
  51. </div>
  52. <div class="phone">
  53. <span v-if="userInfo">{{userInfo.name}}</span>
  54. <a v-else href="/login.html">请先登录</a>
  55. </div>
  56. </div>
  57. </header>
  58. </div>
  59. <transition name="slide">
  60. <div class="slide" v-if="show">
  61. <a class="act" href="/index.html">主页</a>
  62. <a href="https://match.yuanrenxue.cn/" target="_blank">爬虫逆向比赛</a>
  63. <a href="https://match.yuanrenxue.cn/" target="_blank">采集进阶课程</a>
  64. <a href="https://tool.yuanrenxue.cn/" target="_blank">采集分析工具</a>
  65. <a href="https://appmatch.yuanrenxue.cn/" target="_blank">APP题目</a>
  66. <a href="https://www.yuanrenxue.cn/" target="_blank">关于猿人学</a>
  67. <a v-if="userInfo" href="/record.html">我的刷题记录</a>
  68. <a v-if="userInfo" @click="logout">退出登录</a>
  69. </div>
  70. </transition>
  71. <div class="content">
  72. <p class="navtation"><a href="/index.html">首页</a> - 刷题记录</p>
  73. <div class="left" style="min-height: 68vh;">
  74. <div class="part">
  75. <p><b style="font-size: 15px;">{{userInfo.name}}</b>的面试刷题</p>
  76. <ul class="list record">
  77. <li v-for="(item,i) in list"><a :href="'/detail.html?cat='+item.category+'&id='+item.interviewId">
  78. {{i+1}}.{{item.name}} <br>
  79. <span>{{item.ctime}}</span>
  80. </a></li>
  81. </ul>
  82. <p class="page" v-show="pages>0">
  83. <button :disabled="parm.page==1?'disabled':false" @click="parm.page--,getData()">上一页</button>
  84. <span><b>{{parm.page}}</b>/{{pages}}</span>
  85. <button :disabled="parm.page==pages?'disabled':false" @click="parm.page++,getData()">下一页</button>
  86. </p>
  87. </div>
  88. </div>
  89. <div class="right">
  90. <div class="part">
  91. <h2 class="sec_title"><span>贡献面试题</span></h2>
  92. <form class="form">
  93. <input v-model="name" type="text" placeholder="面试题目">
  94. <textarea v-model="content"></textarea>
  95. <button type="button" @click="post">提交</button>
  96. </form>
  97. </div>
  98. </div>
  99. </div>
  100. <footer>
  101. <ul>
  102. <li>
  103. <b>爬虫比赛</b> <br>
  104. <a href="https://appmatch.yuanrenxue.cn/" target="_blank">APP题目</a>
  105. <a href="https://match.yuanrenxue.cn/" target="_blank">爬虫逆向比赛</a>
  106. <a href="https://tool.yuanrenxue.cn/" target="_blank">采集分析工具</a>
  107. </li>
  108. <li>
  109. <b>爬虫课程</b> <br>
  110. <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>
  111. <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>
  112. <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>
  113. </li>
  114. <li>
  115. <b>关于猿人学</b> <br>
  116. <a href="https://www.yuanrenxue.cn/tricks" target="_blank">Python技术杂谈</a>
  117. <a href="https://www.yuanrenxue.cn/earn-money" target="_blank">Python爬虫挣钱</a>
  118. </li>
  119. <li class="contact" style="display: flex;line-height: 30px;">
  120. <img style="margin-right: 10px;" width="100" height="100" src="img/wx.jpg" alt="">
  121. 扫一扫加我微信 <br>
  122. 备注面试题 <br>
  123. 拉你进面试交流群
  124. </li>
  125. </ul>
  126. <p>成都老猿智能科技有限公司Copyright @ 2025 猿人学面试 蜀ICP备2022000052号-2</p>
  127. </footer>
  128. </section>
  129. <script src="js/public.js"></script>
  130. <script>
  131. const { createApp } = Vue;
  132. createApp({
  133. data() {
  134. return {
  135. list:[],
  136. parm:{
  137. cid:'',
  138. page:1,
  139. page_size:20
  140. },
  141. total:0,
  142. name: '',
  143. content: '',
  144. userInfo:{},
  145. show: 0 // 添加 show 变量
  146. }
  147. },
  148. computed:{
  149. pages(){
  150. return Math.ceil(this.total/20);
  151. }
  152. },
  153. created(){
  154. // 获取本地存储的用户ID并赋值给cid
  155. const userInfo = JSON.parse(localStorage.getItem('userInfo'));
  156. if (!userInfo) {
  157. window.location.href = 'login.html';
  158. }
  159. this.userInfo = userInfo;
  160. this.parm.cid = userInfo ? userInfo.id : '';
  161. const curCid = new URLSearchParams(window.location.search).get('cid');
  162. if(curCid){
  163. this.parm.cid = curCid;
  164. }
  165. this.getData();
  166. },
  167. methods:{
  168. getData(){
  169. // 列表
  170. axios.get(url+'/api/yrx/que/user/records', { params: this.parm }).then(res=>{
  171. this.list = res.data.data.list;
  172. this.total = res.data.data.total;
  173. })
  174. },
  175. post(){ // 添加post方法
  176. if (!this.name || !this.content) {
  177. alert('面试题目和内容不能为空');
  178. return;
  179. }
  180. const token = localStorage.getItem('token'); // 获取token
  181. axios.post(url+'/api/yrx/que/user/post', { name: this.name, content: this.content }, {
  182. headers: {
  183. 'Authorization': `${token}` // 添加token到header
  184. }
  185. })
  186. .then(res => {
  187. if(res.data.code === 0){
  188. alert('提交成功');
  189. this.name = '';
  190. this.content = '';
  191. }
  192. })
  193. .catch(err => {
  194. alert('提交失败,请重试');
  195. console.error(err);
  196. });
  197. },
  198. logout() { // 添加 logout 方法
  199. localStorage.removeItem('userInfo');
  200. localStorage.removeItem('token');
  201. this.userInfo = null;
  202. }
  203. }
  204. }).mount('#app');
  205. </script>
  206. </body>
  207. </html>