简介
本篇主要实现以下目标：
- 新建goods路由
- 使用mongoose连接数据库
- 实现商品列表查询
1. 新建goods路由
在routes下面新建goods.js文件
var express = require('express');
var router = express.Router();
/* GET goods */
router.get('/', function (req, res, next) {
res.send('welcome to goods');
});
module.exports = router;
另外，app.js作如下修改：
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var goodsRouter = require('./routes/goods');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/goods', goodsRouter);
运行后台代码：
DEBUG=six-tao-server:* npm start
如下：
2. 使用mongoose连接数据库
step1 下载mongoose
npm install mongoose --save
step2 连接mongodb数据库
修改goods.js如下：
var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
mongoose.connect('mongodb://127.0.0.1:27017/six_tao');
mongoose.connection.on('connected', () => {
console.log('mongodb connected success');
});
mongoose.connection.on('error', () => {
console.log('mongodb connected error');
});
mongoose.connection.on('disconnected', () => {
console.log('mongodb disconnected')
})
/* GET goods */
router.get('/', function (req, res, next) {
res.send('welcome to goods');
});
module.exports = router;
当然，数据库连接的逻辑可以不写在goods.js中，但我们暂时先这样写。
step3 启动mongodb服务
brew services start mongodb
step4 运行代码
DEBUG=six-tao-server:* npm start
3. 实现商品列表查询
step1 先建goods集合对应的model
在根目录下新建一个目录models存放所有的model，新建good.js:
image.png
good.js内容如下：
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var productScheme = new Schema({
"productId": String, // 商品Id
"productName": String, // 商品名
"salePrice": Number, // 售价
"checked": String, // 是否被选中（在购物车中）
"productNum": Number, // 选购数量
"productImage": String // 商品图片名称
});
// 一定要将model()方法的第一个参数和其返回值设置为相同的值，否则会出现不可预知的结果
module.exports = mongoose.model('Good', productScheme);
step2 从goods查找数据并返回
修改goods.js文件如下：
var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var Good = require('../models/good');
mongoose.connect('mongodb://127.0.0.1:27017/six_tao');
mongoose.connection.on('connected', () => {
console.log('mongodb connected success');
});
mongoose.connection.on('error', () => {
console.log('mongodb connected error');
});
mongoose.connection.on('disconnected', () => {
console.log('mongodb disconnected')
})
/* GET goods */
router.get('/', function (req, res, next) {
Good.find({}, (err, doc) => {
if (err) {
res.json({
code: '900',
msg: err.message || '服务器错误'
})
} else {
res.json({
code: '000',
msg: '',
result: doc
})
}
})
});
module.exports = router;
step3 重启服务器
DEBUG=six-tao-server:* npm start
ps：这里你可以下载一个json格式化的插件，我使用的是jsonview。
3. 实现商品列表查询
进入six-tao仓库。
step1 配置接口代理地址
将'/api/'接口转发到'http://localhost:3000/'。修改config/index文件如下：
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://localhost:3000',
changeOrign: true,
pathRewrite: {
'/api': ''
}
}
},
...
}
step2 将mock请求修改为api请求
修改GoodsList.vue文件的getPrdList方法如下：
getPrdList () {
queryPrdObj = Object.assign(queryPrdObj, this.filterPrice, {sort: this.sortChecked})
axios.get('/api/goods', {params: queryPrdObj}).then((res) => {
console.log('res', res)
let data = (res && res.data) || {}
if (data.code === '000') {
this.prdList = data.result || []
console.log('prdList', this.prdList)
} else {
alert(`err:${data.msg || '系统错误'}`)
}
})
}
step3 运行客户端
npm start
客户端成功拿到数据库数据并展示。
总结
其实，到此，我们的基本流程已经全部走通了，剩下的不过是前后端逻辑的丰富以及线上部署而已。我们见两个仓库的改动提交。
- six-tao
git status
git diff
git commit -am 'change mock to api'
git push
- six-tao-server
git status
git diff
git add .
git status
git commit -am 'add model good and route good'
git push
参考
mongoose-文档
Mongoose基础入门
webpack+vue-cil 中proxyTable配置接口地址代理