在线商城项目10-基于mongoose实现商品列表查询

简介

本篇主要实现以下目标:

  1. 新建goods路由
  2. 使用mongoose连接数据库
  3. 实现商品列表查询

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

客户端成功拿到数据库数据并展示。

总结

其实,到此,我们的基本流程已经全部走通了,剩下的不过是前后端逻辑的丰富以及线上部署而已。我们见两个仓库的改动提交。

  1. six-tao
git status
git diff
git commit -am 'change mock to api'
git push
  1. 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配置接口地址代理

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏有趣的django

RESTful API 设计指南

简介 REST(英文:Representational State Transfer,简称REST)描述了一个架构样式的网络系统,比如 web 应用程序。它首次...

3195
来自专栏Jackson0714

sys.dm_db_wait_stats

34412
来自专栏潇涧技术专栏

How to get performance data in Android

读取文件节点/proc/loadavg,分别是1min/5min/15min内CPU的负载情况。 读取方式的代码示例:

782
来自专栏转载gongluck的CSDN博客

Brpc学习:简单回显服务器/客户端

sudo apt-get install git g++ make libssl-dev sudo apt-get install realpath libgf...

1.9K6
来自专栏比原链

Derek解读Bytom源码-protobuf生成比原核心代码

Gitee地址:https://gitee.com/BytomBlockchain/bytom

1101
来自专栏后端之路

activeMq消息转投rabbitMq研究

在研究activemq转投消息到rabbitmq的过程中还是发现了很多有趣的细节。 消息发送端分为PERSISTENT与NON_PERSISTENT,该类型表示...

2718
来自专栏云霄雨霁

死锁、饥饿和活锁

2904
来自专栏向前进

vue-cli脚手架npm相关文件解读(7)dev-server.js

系列文章传送门: 1、build/webpack.base.conf.js 2、build/webpack.prod.conf.js 3、build/webp...

4147
来自专栏菩提树下的杨过

mybatis 3.x 缓存Cache的使用

mybatis 3.x 已经支持cache功能了,使用很简单,在mappper的xml文件里添加以下节点: 1 <mapper namespace="com....

22210
来自专栏一名合格java开发的自我修养

javaOOM该分析dump文件而不是看异常log日志原因

应用程序出现OOM异常,你是否仍然通过看日志的方式去排查问题(该方式定位解决问题是大概率的巧合而已)?正确的排查方案是进行dump文件分析,你知道为什么吗?

3314

扫码关注云+社区

领取腾讯云代金券