node.js 之 express框架+MongoDB(前端使用vue)

1. 下载安装node环境,Mac、linux、windows各不相同

2. 安装后输入: node -v查看,出现版本号则安装成功

3. 打开terminal,安装express框架,(为了更快速,更易安装成功,建议先安装淘宝镜像,使用cnpm)

淘宝镜像地址:http://npm.taobao.org/mirrors/node

4. 开始安装

cnpm install -g express-generator
express server
cd server
cnpm install

bin:可执行文件,做封装,通过http模块创建server,监听端口、启动服务,通过www启动项目

app.js:入口,本身依赖express;

           path自带模块;

           favion浏览器logo;

           logger:日志输出;

           cookie-parser:cookie信息进行转化;

           bodyParser对返回值进行转化;

           先加载index再加载user两个路由

           express.static(path.jion)设置静态目录

public:静态文件js、css

routes:路由,浏览器访问地址,代表controller

views:jade或其他模版文件,运行时自动加载view文件夹中文件,模板引擎可以换成ejs或html等

package.json

  • 将模板引擎改为html(jade用起来还是不太习惯):将jade文件删掉,修改app.js
    app.engine('.html',ejs.__express);
    app.set('view engine', 'html');
    var ejs = require('ejs');
    
    
    • 回到上层菜单:cd ..
    • cnpm install ejs --save
    • 在views文件夹下建立一个index.html
    • 编辑app.js文件:
    • 启动npm start
5. 自动重启:cnpm install supervisor

启动命令:supervisor ./bin/www

在地址栏:localhost:3000启动


6. MongoDB,这个参考之前发的MongoDB环境搭建

7,基于express开发

安装Mongoose:cnpm install mongoose --save

创建model:在server中创建一个models文件夹

var mongoose = require('mongoose')
var Schema = mongoose.Schema;

var productSchema = new Schema({
  "productId":{type:String},
  "productName":String,
  "salePrice":Number,
  "checked":String,
  "productNum":Number,
  "productImage":String
});

module.exports = mongoose.model('Good',productSchema);

首先引入mongoose,然后定义model(productSchema)然后exports,后定义路由

创建路由:

1) 先在app里面定义一级路由,

var goods = require('./routes/goods')
app.use('/goods', goods);
2) 在 routes设置子路由,goods.js

var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var Goods = require('../models/goods');//加载模型表

//连接MongoDB数据库
mongoose.connect('mongodb://127.0.0.1:27017/dumall');

mongoose.connection.on("connected", function () {
  console.log("MongoDB connected success.")
});

mongoose.connection.on("error", function () {
  console.log("MongoDB connected fail.")
});

mongoose.connection.on("disconnected", function () {
  console.log("MongoDB connected disconnected.")
});

//查询商品列表数据
router.get("/list", function (req,res,next) {
  let page = parseInt(req.param("page"));
  let pageSize = parseInt(req.param("pageSize"));
  let priceLevel = req.param("priceLevel");
  let sort = req.param("sort");
  let skip = (page-1)*pageSize;
  var priceGt = '',priceLte = '';
  let params = {};
  if(priceLevel!='all'){
    switch (priceLevel){
      case '0':priceGt = 0;priceLte=100;break;
      case '1':priceGt = 100;priceLte=500;break;
      case '2':priceGt = 500;priceLte=1000;break;
      case '3':priceGt = 1000;priceLte=5000;break;
    }
    params = {
      salePrice:{
          $gt:priceGt,
          $lte:priceLte
      }
    }
  }
  let goodsModel = Goods.find(params).skip(skip).limit(pageSize);
  goodsModel.sort({'salePrice':sort});
  goodsModel.exec(function (err,doc) {
      if(err){
          res.json({
            status:'1',
            msg:err.message
          });
      }else{
          res.json({
              status:'0',
              msg:'',
              result:{
                  count:doc.length,
                  list:doc
              }
          });
      }
  })
});

//加入到购物车
router.post("/addCart", function (req,res,next) {
  var userId = '100000077',productId = req.body.productId;
  var User = require('../models/user');
  User.findOne({userId:userId}, function (err,userDoc) {
    if(err){
        res.json({
            status:"1",
            msg:err.message
        })
    }else{
        console.log("userDoc:"+userDoc);
        if(userDoc){
          var goodsItem = '';
          userDoc.cartList.forEach(function (item) {
              if(item.productId == productId){
                goodsItem = item;
                item.productNum ++;
              }
          });
          if(goodsItem){
            userDoc.save(function (err2,doc2) {
              if(err2){
                res.json({
                  status:"1",
                  msg:err2.message
                })
              }else{
                res.json({
                  status:'0',
                  msg:'',
                  result:'suc'
                })
              }
            })
          }else{
            Goods.findOne({productId:productId}, function (err1,doc) {
              if(err1){
                res.json({
                  status:"1",
                  msg:err1.message
                })
              }else{
                if(doc){
                  doc.productNum = 1;
                  doc.checked = 1;
                  userDoc.cartList.push(doc);
                  userDoc.save(function (err2,doc2) {
                    if(err2){
                      res.json({
                        status:"1",
                        msg:err2.message
                      })
                    }else{
                      res.json({
                        status:'0',
                        msg:'',
                        result:'suc'
                      })
                    }
                  })
                }
              }
            });
          }
        }
    }
  })
});

module.exports = router;

实现功能:与前端交互时,因为vue用的是8080端口


改成以下,访问接口时转发到3000的node接口


  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
非常高兴能够为您介绍基于Node.jsExpressMongoDBVue、Element-ui的后台管理系统项目的答辩讲解。 首先,该项目是一个基于Node.jsExpressMongoDBVue、Element-ui的后台管理系统,旨在为用户提供一个可靠、高效、易于使用的后台管理平台。 下面我们将从以下几个方面进行讲解: 1. 项目概述 2. 技术架构 3. 功能介绍 4. 项目展示 5. 总结与展望 ### 1. 项目概述 该项目是一个后台管理系统,主要包括用户管理、商品管理、订单管理、数据统计等模块。用户可以通过登录系统,查看、添加、修改和删除相关信息,以及通过数据统计模块查看业务数据。 ### 2. 技术架构 该项目使用了以下技术: - 前端框架Vue.js - 前端UI框架:Element-ui - 后端框架Express - 数据库:MongoDB - 其他组件:axios、echarts等 ### 3. 功能介绍 该项目主要包括以下几个模块: - 用户管理模块:管理员可以查看、添加、修改和删除用户信息。 - 商品管理模块:管理员可以查看、添加、修改和删除商品信息。 - 订单管理模块:管理员可以查看订单信息,包括订单状态、订单详情等。 - 数据统计模块:管理员可以通过数据统计模块查看业务数据,包括销售额、用户量等。 ### 4. 项目展示 以下是该项目的部分截图展示: - 登录页面 ![登录页面](https://i.imgur.com/9bFdXHj.png) - 用户管理页面 ![用户管理页面](https://i.imgur.com/3GjXJRG.png) - 商品管理页面 ![商品管理页面](https://i.imgur.com/9dbC4oi.png) - 订单管理页面 ![订单管理页面](https://i.imgur.com/d2tP8Vj.png) - 数据统计页面 ![数据统计页面](https://i.imgur.com/4dQG1lX.png) ### 5. 总结与展望 该项目是一个基于Node.jsExpressMongoDBVue、Element-ui的后台管理系统,实现了用户管理、商品管理、订单管理、数据统计等功能。通过该项目的开发,我们学习了Vue.js、Element-ui、ExpressMongoDB等技术,提高了我们的前端和后端开发能力。 未来,我们将继续完善该项目,增加更多功能,提高用户体验,同时也会不断学习新技术,为后续的开发工作做好准备。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值