目录
接下来分析接口方面：
home接口：
categories接口：
details接口：
login接口：
分析一个项目讲究的是如何进行对项目的解析分解，进一步了解项目的整体结构，熟悉项目的结构，能够知道每个组件所处在哪个位置，发挥什么作用。
接下来分析接口方面：
首先对于基础接口定义为本地接口：$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
}
})
}
})接口请求成功后，将数据渲染到页面:
login接口：
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
}
})
})登录成功后，将数据渲染到页面：
