index.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  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. .banner{
  13. margin: 16px auto;
  14. }
  15. </style>
  16. <body>
  17. <section id="app">
  18. <div style="background-color: #FDC606;box-shadow: 0px 0px 4px 0 rgba(0,0,0,.5);">
  19. <header>
  20. <div class="left_nav">
  21. <img @click="show=!show" class="phone" width="30" src="img/menu.png" alt="">
  22. <a href="/index.html"><img class="logo" src="img/logo.png" alt="logo"></a>
  23. </div>
  24. <div class="nav">
  25. <a class="act" href="/index.html">主页</a>
  26. <a href="https://match.yuanrenxue.cn/" target="_blank">爬虫逆向比赛</a>
  27. <a href="https://match.yuanrenxue.cn/" target="_blank">采集进阶课程</a>
  28. <a href="https://tool.yuanrenxue.cn/" target="_blank">采集分析工具</a>
  29. <a href="https://appmatch.yuanrenxue.cn/" target="_blank">APP题目</a>
  30. <a href="https://www.yuanrenxue.cn/" target="_blank">关于猿人学</a>
  31. </div>
  32. <div class="login">
  33. <div class="pc">
  34. <!-- <img width="30px" src="img/logo.jpg" alt="logo"> -->
  35. <div v-if="userInfo" class="menu">
  36. <span class="user_avatar">{{userInfo.name[0]}}</span>
  37. {{userInfo.name}}
  38. <ul>
  39. <li><a href="/record.html">我的刷题记录</a></li>
  40. <li @click="logout"><a>退出登录</a></li>
  41. </ul>
  42. </div>
  43. <a v-else href="/login.html">请先登录</a>
  44. </div>
  45. <div class="phone">
  46. <span v-if="userInfo">{{userInfo.name}}</span>
  47. <a v-else href="/login.html">请先登录</a>
  48. </div>
  49. </div>
  50. </header>
  51. </div>
  52. <transition name="slide">
  53. <div class="slide" v-if="show">
  54. <a class="act" href="/index.html">主页</a>
  55. <a href="https://match.yuanrenxue.cn/" target="_blank">爬虫逆向比赛</a>
  56. <a href="https://match.yuanrenxue.cn/" target="_blank">采集进阶课程</a>
  57. <a href="https://tool.yuanrenxue.cn/" target="_blank">采集分析工具</a>
  58. <a href="https://appmatch.yuanrenxue.cn/" target="_blank">APP题目</a>
  59. <a href="https://www.yuanrenxue.cn/" target="_blank">关于猿人学</a>
  60. <a v-if="userInfo" href="/record.html">我的刷题记录</a>
  61. <a v-if="userInfo" @click="logout">退出登录</a>
  62. </div>
  63. </transition>
  64. <div class="content index" >
  65. <div class="left" >
  66. <div class="banner">
  67. <img width="100%" height="100%" :src="img[0]" alt="">
  68. </div>
  69. </div>
  70. <div class="right">
  71. <div class="banner">
  72. <img width="100%" height="100%" :src="img[1]" alt="">
  73. </div>
  74. </div>
  75. <div class="left" v-if="list.length>0">
  76. <div class="part">
  77. <h1 class="title"><span>JS逆向面试题</span></h1>
  78. <ul class="list">
  79. <li v-for="item in list[0].list">
  80. <div>
  81. <a :href="'/detail.html?cat=js&id='+item.interviewId">{{item.name}}</a>
  82. </div>
  83. </li>
  84. </ul>
  85. <a href="/list.html?cat=js" class="more">更多JS逆向面试题</a>
  86. </div>
  87. <div class="part">
  88. <h1 class="title"><span>安卓逆向面试题</span></h1>
  89. <ul class="list">
  90. <li v-for="item in list[1].list">
  91. <div>
  92. <a :href="'/detail.html?cat=android&id='+item.interviewId">{{item.name}}</a>
  93. </div>
  94. </li>
  95. </ul>
  96. <a href="/list.html?cat=android" class="more">更多安卓逆向面试题</a>
  97. </div>
  98. <div class="part">
  99. <h1 class="title"><span>爬虫面试题</span></h1>
  100. <ul class="list">
  101. <li v-for="item in list[2].list">
  102. <div>
  103. <a :href="'/detail.html?cat=crawler&id='+item.interviewId">{{item.name}}</a>
  104. </div>
  105. </li>
  106. </ul>
  107. <a href="/list.html?cat=crawler" class="more">更多爬虫面试题</a>
  108. </div>
  109. </div>
  110. <div class="right">
  111. <div class="part">
  112. <h2 class="sec_title"><span>面试排行榜</span> </h2>
  113. <ul class="list list_100">
  114. <li v-for="item in top"><a :href="'/record.html?cid='+item.cid">{{item.cname}}</a><span>{{item.count}}</span></li>
  115. </ul>
  116. </div>
  117. <div class="part">
  118. <h2 class="sec_title"><span>贡献面试题</span></h2>
  119. <form class="form">
  120. <input v-model="name" type="text" placeholder="面试题目">
  121. <textarea v-model="content"></textarea>
  122. <button type="button" @click="post">提交</button>
  123. </form>
  124. </div>
  125. </div>
  126. </div>
  127. <footer>
  128. <ul>
  129. <li>
  130. <b>爬虫比赛</b> <br>
  131. <a href="https://appmatch.yuanrenxue.cn/" target="_blank">APP题目</a>
  132. <a href="https://match.yuanrenxue.cn/" target="_blank">爬虫逆向比赛</a>
  133. <a href="https://tool.yuanrenxue.cn/" target="_blank">采集分析工具</a>
  134. </li>
  135. <li>
  136. <b>爬虫课程</b> <br>
  137. <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>
  138. <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>
  139. <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>
  140. </li>
  141. <li>
  142. <b>关于猿人学</b> <br>
  143. <a href="https://www.yuanrenxue.cn/tricks" target="_blank">Python技术杂谈</a>
  144. <a href="https://www.yuanrenxue.cn/earn-money" target="_blank">Python爬虫挣钱</a>
  145. </li>
  146. <li class="contact" style="display: flex;line-height: 30px;">
  147. <img style="margin-right: 10px;" width="100" height="100" src="img/wx.jpg" alt="">
  148. 扫一扫加我微信 <br>
  149. 备注面试题 <br>
  150. 拉你进面试交流群
  151. </li>
  152. </ul>
  153. <p>成都老猿智能科技有限公司Copyright @ 2025 猿人学面试 蜀ICP备2022000052号-2</p>
  154. </footer>
  155. </section>
  156. <script src="js/public.js"></script>
  157. <script>
  158. const { createApp } = Vue;
  159. createApp({
  160. data() {
  161. return {
  162. show:0,
  163. list:[],
  164. img:[],
  165. top:[],
  166. name:'',
  167. content:'',
  168. userInfo:{}
  169. }
  170. },
  171. created(){
  172. const userInfo = JSON.parse(localStorage.getItem('userInfo'));
  173. this.userInfo = userInfo;
  174. this.getData();
  175. },
  176. methods:{
  177. logout(){
  178. localStorage.removeItem('userInfo');
  179. localStorage.removeItem('token');
  180. this.userInfo = null;
  181. },
  182. getData(){
  183. axios.get(url+'/api/yrx/que/top').then(res=>{
  184. this.list = res.data.data;
  185. })
  186. axios.get(url+'/api/yrx/banner/list?position=index_left').then(res=>{
  187. this.img[0] = res.data.data[0].img;
  188. })
  189. axios.get(url+'/api/yrx/banner/list?position=index_right').then(res=>{
  190. this.img[1] = res.data.data[0].img;
  191. })
  192. axios.get(url+'/api/yrx/que/user/top').then(res=>{
  193. this.top = res.data.data;
  194. })
  195. },
  196. post(){
  197. const token = localStorage.getItem('token'); // 获取token
  198. if(!token){
  199. window.location.href="/login.html";
  200. return;
  201. }
  202. if (!this.name || !this.content) {
  203. alert('面试题目和内容不能为空');
  204. return;
  205. }
  206. axios.post(url+'/api/yrx/que/user/post', { name: this.name, content: this.content }, {
  207. headers: {
  208. 'Authorization': `${token}` // 添加token到header
  209. }
  210. })
  211. .then(res => {
  212. if(res.data.code === 0){
  213. alert('提交成功');
  214. this.name = '';
  215. this.content = '';
  216. }
  217. })
  218. .catch(err => {
  219. alert('提交失败,请重试');
  220. console.error(err);
  221. });
  222. }
  223. }
  224. }).mount('#app');
  225. </script>
  226. </body>
  227. </html>