第一次看到掘金-2020人气创作者榜的时候，感觉整体的界面效果给人耳目一新的感觉，于是花了点时间思考如何实现.目前实现的功能包括：列表显示、搜索、无限加载（与原网站有些不同，增加了加载效果）、事件介绍、标签页切换。通过这些，对vue3.0的组合api有了一定的了解，一起来看看吧！ps：个人认为原网站应该是用react.js写的，直接请求网站的数据接口，应该会报跨域问题。于是想到了一种通过node.js爬取数据的方法。我们看一下代码：节点后端爬取数据代码如下：constsuperagent=require('superagent');constexpress=require('快递');constapp=express();常量端口=8081；functionisObject(value){returnvalue&&typeofvalue==='object';}functiongetApi(url,params,method){returnnewPromise((resolve)=>{if(!isObject(params)){返回解析(setResponse(400,null,'请传入参数！'));}else{letparamMethod=method.toLowerCase()==='post'?'send':'query';superagent(method,url)[paramMethod](params).set('X-Agent','Juejin/Web').end((err,supRes)=>{if(err){returnresolve(setResponse(400,null,err));}让data=JSON.parse(supRes.text);resolve(setResponse(data.err_no===0?200:data.err_no,data.data,data.err_msg));});}})}app.use(express.json());app.all("*",function(req,res,next){//设置允许允许跨域域名，*表示允许任意域名跨域res.header("Access-Control-Allow-Origin","*");//允许的报头类型res.header("Access-Control-Allow-Headers","content-type");//跨域允许的请求方法res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");if(req.method.toLowerCase()=='options'){res.send(200);}else{下一个（）；}});functionsetResponse(code,data,message){return{code:code,data:data,message:message}}app.post('/info',(req,res)=>{constparams=req.body;getApi('https://api.juejin.cn/list_api/v1/annual/info',params,'post').then(data=>{res.send(JSON.stringify(data));})})app.post('/list',(req,res)=>{constparams=req.body;getApi('https://api.juejin.cn/list_api/v1/annual/list',params,'post').then(data=>{res.send(JSON.stringify(data));});})app.get('/user',(req,res)=>{constparams=req.query;getApi('https://api.juejin.cn/user_api/v1/user/get',params,'get').then(data=>{res.send(JSON.stringify(data));})})app.listen(port,()=>console.log(`Exampleapplisteningonport${port}!`))上面只爬了三个主要的界面，list界面，info界面，user界面，当然还有login尚未编写的功能。金应使用cookie技术来判断用户是否登录。当从掘金打开并跳转到网站时，会在浏览器的cookie中存储用户相关的登录信息。如下图所示：你只需要知道这个功能的实现思路，源码不会实现。然后去网站获取cookie，并将参数传递给用户界面，获取登录相关信息。上面代码的思路也很简单，就是通过搭建一个本地服务器，然后爬取网站的三个主要界面，superagent库主要用于爬取。相关API请参考superagent文档。然后它允许跨域设置，使用节点框架express。没有技术困难。Web前端技术要点：vue3.0、typescript、vue-cli4.0、axios、less首先分析页面，主要分为首页和活动介绍页面。毫无疑问，Header和Footer组件被视为一个公共组件。当然，这两个组件的代码都比较简单，我们就不用分析了。如下：Header
