文章目录
- 1、开发环境搭建
- 1.1、服务端环境搭建
- 1.2、前端环境搭建
- 1.2.1、后台管理系统(PC端后台)
- 1.2.2、WebAPP应用(移动端前台)
- 2、服务端接口开发
- 2.1、服务端项目结构设计
- 2.1.1、设计路由
- 2.1.2、设计数据库模块
- 3、后台管理系统开发(PC)
- 4、WebAPP开发(移动端)
- 5、服务端部署上线
- 6、打包APP(Android)
1、开发环境搭建
1.1、服务端环境搭建
服务端技术栈:Node、Express、CORS、mongoose、multer
第1步:安装脚手架
命令如下:
# 全局安装,一台计算机只需要执行一次即可
cnpm i -g express express-generator
第2步:创建项目
例如:D:\project\
启动 cmd
,执行以下命令:
express -e eshop-server
命令执行成功后,会创建 D:\project\eshop-server
文件夹,eshop-server
文件夹就是当前服务端项目的根目录,在命令行中切换到该目录下:
# 切换到项目根目录
cd eshop-server
# 初始化所有依赖
cnpm i
第3步:安装相关依赖
命令如下:
# 解决跨域问题
cnpm i cors --save
# 操作数据库
cnpm i mongoose --save
# 文件上传
cnpm i multer --save
简化命令:
cnpm i cors mongoose multer --save
第4步:优化项目结构
初始项目结构:
- public
- db
- index.js 用于连接数据库的模块
- models 用于管理文档对象的目录
- crud
- index.js 用于封装增删改查函数的模块
- routes 用于路由管理的目录
- index.js
- views 视图模板引擎管理目录
- app.js 项目入口文件
- package.json NPM管理文件
第5步:完善项目代码
设置服务器的热启动,安装 nodemon
模块,命令如下:
# 开发环境安装
cnpm i nodemon --save-dev
# 或者
cnpm i nodemon -D
修改 package.json
文件,代码如下:
{
"scripts": {
"start": "nodemon ./bin/www"
}
}
配置跨域,在 app.js
入口文件中添加下面代码:
const cors = require('cors')//需要在路由的前面引入 corsapp.use(cors())
第6步:连接数据
在 db/index.js
文件中添加以下代码:
const mongoose = require('mongoose')/** * 连接数据库的方法 */function dbConnect(){ mongoose.connect('mongodb://localhost:27017/eshop2',{ useNewUrlParser: true, useUnifiedTopology: true }).then(()=>{ console.log('数据库连接成功') }).catch(err=>{ console.log('数据库连接失败') })}module.exports = dbConnect
在 app.js
中添加数据库连接的相关代码:
var dbConnect = require('./db');dbConnect()
1.2、前端环境搭建
1.2.1、后台管理系统(PC端后台)
PC端后台系统技术栈:Vue2、VueRouter、Vuex、ElementUI、axios、wangEditor、ECharts、vuex-persistedstate
第1步:安装脚手架
# 全局安装,一台计算机只需要安装一次cnpm i -g @vue/cli
第2步:创建项目
例如:D:\project\
启动 cmd
,执行以下命令:
vue create eshop-admin
进入到项目:
# 进入项目cd eshop-admin# 启动项目npm run serve
第3步:安装相关依赖
# 安装组件库cnpm i element-ui -save# 安装axioscnpm i axios --save# 安装富文本编辑器cnpm i wangeditor --save# 安装数据可视化图表插件cnpm i echarts --save
简化命令:
cnpm i element-ui axios wangeditor echarts --save
第4步:简化项目结构
- public- src - http 用于管理HTTP异步请求的模块 - index.js - router 用于管理路由的模块 - index.js - routes.js 路由对象模块 - beforeEach.js 全局守卫模块 - store 状态管理模块 - index.js - components 公共组件管理目录 - views 视图组件管理目录 - App.vue 根组件文件 - main.js 项目入口文件- package.json
第5步:全局引入组件库
在 main.js
文件中引入 element-ui
组件库:
import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);
1.2.2、WebAPP应用(移动端前台)
WebAPP前台技术栈:Vue2、VueRouter、Vuex、Vant、axios、vuex-persistedstate
操作步骤参考 1.2.1
安装依赖:
# 安装组件库cnpm i vant -save
在 main.js
文件中引入 Vant
组件库:
import Vant from 'vant';import 'vant/lib/index.css';Vue.use(Vant);
2、服务端接口开发
2.1、服务端项目结构设计
2.1.1、设计路由
在 routes
目录下创建当前模块的路由文件,例如 routes/goods.js
商品模块的路由,示例代码如下:
var express = require('express')var router = express.Router()//处理get请求router.get('/find', (req,res)=>{ //接收参数 let {id} = req.query //响应数据 res.json({ msg: '查询成功' })})//处理post请求router.post('/add', (req,res)=>{ //接收参数 let g = req.body //响应数据 res.json({})})module.exports = router
在 app.js
入口文件引入路由
var express = require('express')var goodsRouter = require('./routes/goods') //引入路由var app = express()app.use('/goods', goodsRouter)
当前商品模块的路由访问地址为:
http://localhost:3000/goods/add (post请求)http://localhost:3000/goods/find (get请求)
2.1.2、设计数据库模块
在 models
目录下创建模块文件,例如 models/goods.js
文件,示例代码如下:
var mongoose = require('mongoose')//创建商品文档对象var schema = new mongoose.Schema({ title: String, price: Number})var Goods = mongoose.model('goods',schema)
文档对象的API(以 Goods
为例):
//添加数据,create(g)参数为要添加的对象,执行成功后返回的是添加成功的对象Goods.create(g).then(rel=>{}).catch(err=>{})//修改数据,updateOne()参数1为修改条件,参数2为要修改的新对象,返回修改的结果对象,当 rel.n > 0 时表示修改成功Goods.updatOne(where,params).then(rel=>{}).catch(err=>{})//删除数据,findOneAndDelete()参数为删除条件,返回删除成功的对象Goods.findOneAndDelete(where).then(rel=>{}).catch(err=>{})//查询所有,find()参数为查询条件Goods.find(where).then(rel=>{}).catch(err=>{})//排序查询所有,sort()参数为排序条件 {price: 1}为价格升序,{price: -1}为价格降序,多条件语法 {price:1, sal: -1}Goods.find().sort({price: -1}).then(rel=>{}).catch(err=>{})//分页查询,start表示查询的起始位置(索引),pageSize表示每页查询的条数//start = (当前页码 - 1) × 每页条数Goods.find().skip(start).limit(pageSize).then(rel=>{}).catch(err=>{})//查询总记录数,find()参数为查询条件,返回当前数据的总数量//总页数 = Math.ceil(count/pageSize)Goods.find(where).count().then(rel=>{}).catch(err=>{})Goods.find(where).countDocuments().then(rel=>{}).catch(err=>{})//模糊查询,查询对象为一个包含正则表达式的条件对象Goods.find({title: {$regex: /['裤']|['男']/}}).then(rel=>{}).catch(err=>{})//比较查询,查询条件中 $gt表示大于,$lt表示小于Goods.find({price: {$gt: 200, $lt: 300}}).then(rel=>{}).catch(err=>{})
在路由文件中引入当前的文档对象,例如:在 routes/goods.js
路由文件中引入 models/goods.js
,示例代码如下:
var express = require('express')var router = express.Router()var Goods = require('../models/goods') //引入商品文档对象,使用Goods对象操作数据库//查询所有router.get('/find', (req,res)=>{ //接收参数 let {_id} = req.query //操作数据库 Goods.find({_id}).then(result=>{ res.json({ msg: '查询成功' }) }).catch(err=>{ res.json({ msg: '查询时出现异常' }) }) })//查询单条数据router.get('/findOne', (req,res)=>{ })//添加router.post('/add', (req,res)=>{ })//修改router.post('/update', (req,res)=>{ })//删除router.get('/del', (req,res)=>{ })module.exports = router
3、后台管理系统开发(PC)
4、WebAPP开发(移动端)
5、服务端部署上线
6、打包APP(Android)