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 文件夹就是当前服务端项目的根目录,在命令行中切换到该目录下:
#解决跨域问题
cmpn i cors --save
#操作数据库
cnpm i mongoose --save
第4步:优化项目结构
- public
-db
- index.js 用于连接数据库的模块
- crud
-index.js 用于封装增删改查函数的模块
- routers 用于路由管理的目录
-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 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 # 安装axios cnpm 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