分析一个项目(微信小程序篇)三

目录

接下来分析接口方面:

home接口:

categories接口:

details接口:

login接口:


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

接下来分析接口方面:

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

home接口:

javascript 复制代码
 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如下:

javascript 复制代码
// 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如下:

javascript 复制代码
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接口:

javascript 复制代码
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接口:

javascript 复制代码
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
        }
    })
})

登录成功后,将数据渲染到页面:


相关推荐
Nan_Shu_61437 分钟前
Web前端面试题(2)
前端
知识分享小能手43 分钟前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
00后程序员张1 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
蚂蚁RichLab前端团队2 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光2 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5202 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
海绵宝宝不喜欢侬2 小时前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106322 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
Days20502 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端3 小时前
vue2 常用内置指令总结
前端·vue.js