分析一个项目（微信小程序篇）三

接下来分析接口方面：

home接口：

categories接口：

details接口：

分析一个项目讲究的是如何进行对项目的解析分解，进一步了解项目的整体结构，熟悉项目的结构，能够知道每个组件所处在哪个位置，发挥什么作用。

接下来分析接口方面：

首先对于基础接口定义为本地接口：$http.baseUrl='http://localhost:3000'

home接口：

 const {data: res} = await uni.$http.get('/home')if (res.meta.status !== 200) {return uni.$showMsg();}// 对数据进行处理res.message.forEach(floor => {floor.product_list.forEach(prod => {prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1]})})this.floorList = res.message

接口为：http://localhost:3000/home/swiper

使用node创建本地服务器端：

index.js如下：

// 1.导包
const express = require("express")
// 2.创建服务器
const app = express()
//3.编写接口get方法
app.get("/home",(req,res)=>{res.send({"message": [{"floor_title": {"name": "测试","image_src": "https://tse2-mm.cn.bing.net/th/id/OIP-C.7BGLFWgbSBaoawzV_Gp7VQHaNK?w=208&h=326&c=7&r=0&o=5&dpr=1.3&pid=1.7"},"product_list": [{"name": "爆款清仓","image_src": "https://tse1-mm.cn.bing.net/th/id/OIP-C.IYo1y_dmp-LOIyvc7rpPrgHaHa?w=193&h=193&c=7&r=0&o=5&dpr=1.3&pid=1.7","image_width": "233","open_type": "navigate","navigator_url": "/pages/goods_list?query=爆款"},]},{"floor_title": {"name": "户外活动","image_src": "https://tse2-mm.cn.bing.net/th/id/OIP-C.7BGLFWgbSBaoawzV_Gp7VQHaNK?w=208&h=326&c=7&r=0&o=5&dpr=1.3&pid=1.7"},"product_list": [{"name": "冲锋衣系列","image_src": "https://tse4-mm.cn.bing.net/th/id/OIP-C.8G_dgft7677mOGaUSu01fQHaID?w=159&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7","image_width": "273","open_type": "navigate","navigator_url": "/pages/goods_list?query=冲锋衣"}]},],"meta": {"msg": "获取成功","status": 200}})
})
// 4.监听端口
app.listen(3000,()=>{console.log("启动成功");
})

接口请求成功后，将数据渲染到页面：

categories接口：

index.js如下：

app.get("/categories",(req,res)=>{res.send({"message": [{"cat_id": 1,"cat_name": "大家电","cat_pid": 0,"cat_level": 0,"cat_deleted": false,"cat_icon": "/full/none.jpg","children": [{"cat_id": 21,"cat_name": "盒子","cat_pid": 3,"cat_level": 2,"cat_deleted": false,"cat_icon": "https://api-hmugo-web.itheima.net/full/e65bab9fcb64c336a3f5fba3b2174fef41f12330.jpg"}]},]},],"meta": {"msg": "获取成功","status": 200}})
})

接口请求成功后，将数据渲染到页面：

details接口：

app.get("/goods/details",(req,res)=>{const id=req.query.goods_id;if(id==1){res.send({"message": {"goods_id": 1,"cat_id": 1000,"goods_name": "卡奇莱德汽车车载空气净化器负离子除甲醛PM2.5除烟异味车用氧吧双涡轮出风（红色）","goods_price": 168,"goods_number": 100,"goods_weight": 100,[{"goods_id": 1,"attr_id": 8570,"attr_value": "17*12.5*3.8","add_price": 0,"attr_name": "规格-产品尺寸（长*宽*高","attr_sel": "only","attr_write": "manual","attr_vals": "17*12.5*3.8"}]},"meta": {"msg": "获取成功","status": 200}})}})

接口请求成功后，将数据渲染到页面:

app.get("/login",(req,res)=>{res.send({"message": {"user_id": 12,"user_email_code": null,"is_active": null,"user_sex": "男","user_qq": "","user_tel": "","user_xueli": "本科","user_hobby": "","user_introduce": null,"create_time": 1525402223,"update_time": 1525402223,"token": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjEyLCJpYXQiOjE1MjU0MDIyMjMsImV4cCI6MTUyNTQ4ODYyM30.g-4GtEQNPwT_Xs0Pq7Lrco_9DfHQQsBiOKZerkO-O-o"},"meta": {"msg": "登录成功","status": 200}})
})

登录成功后，将数据渲染到页面：