文章目录
创建项目
基于node的项目的脚手架 : express koa 等
// 确保安装 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
一 express 初始化项目
1 express admin-app
2 cd .\admin-app\
3 yarn / npm i / cnpm i 安装项目依赖(node_modules)
二 nodemon / supervisor
1 npm i supervisor -g
2 修改 package.json
三 运行项目
1 cnpm / npm run dev
四 创建相应的接口文件
在项目的根目录下创建 api 文件夹，用于存放接口文件
为什么不在routes下创建接口文件
api ---- 接口文档 — 前端开发人员
routes — 界面–运维人员
- 首页 - 搜索、轮播图、nav导航、热推产品、产品的列表（下拉刷新，上拉加载、回到顶部）
五 编写接口文档
- 安装需要的依赖
cnpm / npm i apidoc -g - 在public文件夹内部生成接口文档 - apidoc的文件夹
- 修改package.json文件，添加如下代码
- api/pro.js中配置接口文档
- 运行如下命令，生成接口文档
apidoc -i api/ -o public/apidoc/
浏览器访问 http://localhost:3000/apidoc/ 查看接口文档
创建相应的数据库集合
- 项目根目录下创建 sql/db.js
- 打开数据库的连接池，找到mongodb的安装目录，找到bin目录下，指定数据库存放的位置 （d:\data\db）,运行命令如下
mongod --dbpath d:\mongodata
- 项目安装 mongoose,封装数据库连接模块
yarn add mongoose -S
- 创建需要的集合
sql/col 文件夹下创建对应的 接口的 数据库集合
col/banners.js - 轮播图数据库集合
col/pros.js - 数据列表的集合
导入基本基本的数据至数据库
- 准备工作：数据excel表格， 如何导入 - express
- 安装导入的模块
yarn add node-xlsx -S - 添加一个导入数据的接口 — 不提供给前端客户 – 不写接口文档
// api/pro.js
- 引入的包
- 遍历读取的excel文档 存入数组 。 字段名需要按照excel表格中
- sql / index.js 中封装的插入数据方法
- excel 表格
- 在前端接口调用
- robo 3T 可以看到数据成功导入
编写查询产品的接口
- 封装查询数据的接口 sql/index.js
- 接口中请求数据 api/pro.js
轮播图接口 （事先使用了假数据存入mongod数据库）
[
{ 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: '' }
]
- 通过命令行插入轮播图数据
- 浏览器测试
添加查看详情数据接口
- 编写接口
- 编写接口文档
- 重新生成接口文档并且测试
实现注册功能
- 创建用户的集合 sql/col/users.js
- 编写注册接口 api/users.js
- 密码加密 crypto、md5
yarn add md5 -S
- 注册接口文档
- 生成接口文档并且测试
实现登陆功能
- 编写登陆接口 /api/users.js
- 登陆操作
- 编写接口文档
- 测试接口
接入token
yarn add jsonwebtoken -S
- api.js
