express电商项目接口

express电商项目之-接口

4.1 创建项目

基于node的项目的脚手架： koa express

// 确保安装 express 脚手架  ----  只需要一次即可
cnpm / npm install express-generator -g

// 创建项目  ---  需要选择模板语言 ejs / jade / pug .....
express admin-app

cd admin-app
// 安装依赖   ----  比不可少（查看有无node_modules文件夹）
cnpm / npm i         /   yarn

// 运行项目  ----  查看package.json ，找到运行命令 scripts
cnpm / npm run start    /    yarn start

// 当修改源文件时，每次都需要重新启动服务器  nodemon / supervisor

cnpm / npm i supervisor -g // 只需一次

// 修改package,json 添加运行命令  dev

"scripts": {
    "start": "node ./bin/www",
    "dev": "supervisor ./bin/www"
},

// 运行命令
cnpm / npm run dev

4.2 创建相应的接口文件

在项目的根目录下创建 api 文件夹，用于存放接口文件

？？？ 为什么不在routes下创建接口文件

api ---- 接口文档 --- 前端开发人员

routes --- 界面--运维人员

• 首页 - 搜索、轮播图、nav导航、热推产品、产品的列表（下拉刷新，上拉加载、回到顶部）

search、banner、nav、pro

• 分类 - 大分类 - 品牌分类 - 产品列表

category

分类页面点击某一个选项 进入 搜索页面 ---- 排序或者筛选的相关接口

筛选页面点击进入 产品的详情 --- 商品简单介绍、评价、图文详情、猜你喜欢

comment

加入购物车，必须得先登陆，必须得先注册，购物车操作、提交订单,支付、评论

users、cart、order

让这些接口文件全部生效 --- app.js中引入接口以及注册接口 - 记得重新启动服务器

浏览器输入测试接口的可用性

4.3 编写接口文档

• 安装需要的依赖

cnpm / npm i apidoc -g

• 在public文件夹内部生成接口文档 - apidoc的文件夹

• 修改package.json文件，添加如下代码

• api/pro.js中配置接口文档
  

运行如下命令，生成接口文档

apidoc -i api/ -o public/apidoc/

浏览器访问 http://localhost:3000/apidoc/ 查看接口文档

4.4 创建相应的数据库集合

• 项目根目录下创建 sql/db.js
  

• 打开数据库的连接池，找到mongodb的安装目录，找到bin目录下，指定数据库存放的位置 （d:\data\db）,运行命令如下
  

mongod --dbpath d:\data\db

• 项目安装 mongoose,封装数据库连接模块

cnpm i mongoose -S

补充：-g --global -S --save -D --save-dev

• 创建需要的集合

sql/col 文件夹下创建对应的 接口的 数据库集合

col/banners.js - 轮播图数据库集合

col/pros.js - 数据列表的集合

// 作业 补全其他的 接口的 数据库集合

4.5 导入基本的数据至数据库

• 准备工作：数据excel表格， 如何导入 - express

• 安装导入的模块

cnpm i node-xlsx -S

• 添加一个导入数据的接口 --- 不提供给前端客户 -- 不写接口文档
  // api/pro.js

• 插入数据库，但是发现少了产品的唯一值 proid

• 唯一值 ----- uuid

cnpm i node-uuid -S

• 数据插入数据库 --- 封装数据库操作 -- promise
  

• 插入操作

• 浏览器运行
  

4.6 编写查询产品的接口

• 封装查询数据的接口 sql/index.js
  

• 接口中请求数据 api/pro.js

4.7 轮播图接口

[{ bannerid: 'banner_1', img: 'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/89951/22/13835/67854/5e64a4b8E84c207d9/7367dad332fe905b.jpg!cr_1125x445_0_171!q70.jpg.dpg', href: '', alt: '' }, { bannerid: 'banner_2', img: 'https://imgcps.jd.com/ling4/1670651/6Z2i6Iac55yB5b-D55yB5Yqb/5ZOB6LSo5rqQ5LqO5Y2T6LaK/p-5c13869682acdd181deeff08/2d409b2d/cr_1125x445_0_171/s1125x690/q70.jpg', href: '', alt: '' }, { bannerid: 'banner_3', img: 'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/88149/40/14147/100076/5e6229a8Ef51e1321/54e2c5dd2c357e1e.jpg!cr_1125x445_0_171!q70.jpg.dpg', href: '', alt: '' }, { bannerid: 'banner_4', img: 'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/93827/39/13300/60640/5e561c60Edd0d8e34/73428f511893f63e.jpg!cr_1125x445_0_171!q70.jpg.dpg', href: '', alt: '' }]

• 通过命名航插入轮播图数据

浏览器测试

4.8 添加查看详情数据接口

• 编写接口
  

• 编写接口文档
  

• 重新生成接口文档并且测试

4.9 实现注册接口

• 创建用户的集合 sql/col/users.js
  

• 编写注册接口 api/users.js
  

• 密码加密 crypto、md5

cnpm i md5 -S

• 注册接口文档
  

生成接口文档并且测试

• 手机号首位去除空格 - 空字符作为了用户名和密码 - 去除 - 删除数据库的废数据

4.10 实现登陆功能

• 编写登陆接口 /api/users.js

• 登陆操作
  

• 编写接口文档
  

测试接口

4.11 token接入

token

客户端使用用户名密码登录。

服务端收到请求，去验证用户名与密码。

验证成功后，服务端会签发一个 Token，把这个 Token 发送给客户端。

客户端将收到的Token存储起来。（cookie或者localStorage）

客户端每次需要登录验证的请求都需要带着Token发送给服务器端。

服务器端收到请求后先验证Token，如果成功，返回数据。

• 安装token的模块 --- jsonwebtoken

cnpm i jsonwebtoken -S

• 验证登陆 -- app.js

5、接口状态码以及含义

状态码	备注
200	找到相关的数据
10404	没有查找到相关的数据
10606	该用户已注册
10400	请完善表单信息
10666	注册成功
10808	注册未成功
10888	登陆成功

 

 

 

-------------------------------------------------------文章来自吴大勋（大勋说）