vue+express+mongoose项目构建

注(2018-2-12):仅做记录使用,又不舍得删除,推荐使用koa2,koa2相关资料很多的~

1. 运行环境构建(基于macOS Sierra 10.12.4)

  • 全局安装node(v6.9.4)

    安装过程略
  • 配置cnpm(npm的淘宝镜象)

    sudo npm install -g cnpm --registry=https://registry.npm.taobao.org`
  • 全局安装vue官方脚手架工具vue-cli(vue官网文档

    cnpm install --global vue-cli

2. 创建项目

  • 基于 webpack 模板创建

    vue init webpack tifi-music

    创建配置按需,我除了安装router之外其他都选了no

  • 运行与打包测试

    cd tifi-misic
    //安装依赖包
    cnpm i
    //运行
    npm run dev
    //打包
    npm run build

3. 配置express

  • 在项目根目录下创建server.js文件,内容如下

    //用于获取路径
    const path = require('path')
    //用于读写文件流
    const fs = require('fs')
    const express = require('express')
    //无需cnpm安装,因为是express的中间件bodyParser
    //用于解析客户端请求的body中的内容,内部使用JSON编码处理,url编码处理以及对于文件的上传处理.
    //bodyParse可以接受客户端ajax提交的json数据,以及url的处理,不使用这个中间件将导致无法接收客户端的json数据
    const bodyParser = require('body-parser')
    //需要cnpm安装,cookieParser中间件用于获取web浏览器发送的cookie中的内容.
    //在使用了cookieParser中间件后,代表客户端请求的htto.IncomingMessage对象就具有了一个cookies属性
    //该属性之为一个对象的数组,其中存放了所有web浏览器发送的cookie,每一个cookie为cookies属性值数组中的一个对象.
    const cookieParser = require('cookie-parser')
    //serve-favicon中间件用于请求网站的icon用法如下
    //express().use(favicon(__dirname + '/public/images/favicon.ico'))
    const favicon = require('serve-favicon')
    //morgan中间件是日志中间件,用于node的日志输出
    //进阶用法见http://www.cnblogs.com/chyingp/p/node-learning-guide-express-morgan.html
    const logger = require('morgan')
    //获取后端路由.我设置在根目录下的server文件,读取下面的index.js
    const routes = require('./server/router')
    //用于管理配置的插件.统一管理后端服务端口和数据库连接地址等,默认配置在config目录下的default.js中
    const config = require('config-lite')
    //compression 中间件用于压缩和处理静态内容
    //例子:app.use(express.static(path.join(__dirname, 'public')))
    const compression = require('compression')
    //实例化express对象,用于连接中间件
    const app = express()
    
    
    app.use(logger('dev'));
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(cookieParser());
    
    app.use(compression({ threshold: 0 }))
    app.use('/api', routes)
    
    
    app.use(express.static(path.resolve(__dirname, './dist')))
    // 因为是单页应用 所有请求都走/dist/index.html
    app.get('*', function(req, res) {
        const html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8')
        res.send(html)
    })
    app.listen(config.port, function () {
        console.log(`Server running in port ${config.port}`)
    })
    
  • 解决npm run dev时即开发模式下跨域问题
    打开根目录下的config目录下的index文件,配置proxyTable如下:

    proxyTable: {
        '/api': {
            //这里的target填服务端的端口的接口地址
            target: 'http://localhost:3000/api/',
            changeOrigin: true,
            pathRewrite: {
                '/api': ''
            }
        }
    }
  • 创建router
    server.js文件中写了const routes = require(‘./server/router’)
    这里require的路径就是我们需要创建router的路径
    在根目录下创建server文件夹,并在其目录下创建router.js文件,内容如下:

    //express的路由中间件,引入等待从controller中添加路由
    const router = require('express').Router()
    //引入node的文件路径模块path和文件处理模块fs
    const path = require('path')
    const fs = require('fs')
    //读取controller文件下的所有控制器,为了实现动态读取控制器,有空再研究更好的写法
    const controllers = fs.readdirSync(path.resolve(__dirname, './controller'))
    //遍历获取到的文件,动态添加express的路由信息:url、type、response即请求路径、请求方式、响应处理函数
    controllers.forEach((file) => {
        //获取到具体到控制器
      let controller = require('./controller/' + file)
        //遍历控制器携带的信息
      for (let o in controller) {
            //获取请求路径,未取到则取默认路径 为'/'+文件名(不包括后缀)
        let url = controller[o].url ? controller[o].url : ('/' + o)
            //获取请求方式,未取到则取默认方式 为'get'
        let type = controller[o].type ? controller[o].type : 'get'
            //响应处理函数,未取到则使用默认的处理
        let response = controller[o].response ? controller[o].response : (req, res) => {
          res.json({
            success: false,
            info: '没有处理响应的无效路由'
          })
        }
            //设置路由信息
        router[type](url, response)
      }
    })
    //使用动态设置好的路由
    router.use(router)
    //输出路由
    module.exports = router
    
  • 创建controller
    router.js文件中写了获取同级目录controller下的所有文件
    所以我们只需要在server文件夹下的controller中创建一个user的控制器
    即创建user.js文件,内容如下:

    const userName = [{
        name: '测试用户名0'
      },
      {
        name: '测试用户名1'
      }
    ]
    //'输出待添加的路由信息对象
    //每个对象中可设置三个属性:url、type、response(不设置的话均做了默认处理)
    module.exports = {
      users: {
        response: (req, res) => {
          res.json(userName)
        }
      },
      reg: {
        type: 'post',
        response: (req, res) => {
          res.json('reg')
        }
      }
    }
  • 运行express

    • 前面文件创建完成之后,要运行express首先安装依赖包

      cnpm i cookie-parser morgan serve-favicon morgan config-lite –save-dev
    • 另外修改文件时需要频繁的重启服务器,全局安装nodemon可以实现自动重启

      cnpm install -g nodemon 
    • 然后配置package.json中的scripts添加start命令

      "scripts": {
          "dev": "node build/dev-server.js",
          "build": "node build/build.js",
          "start": "nodemon server.js"
      }
    • 执行npm run build打包项目用于生产环境
    • 最后命令行里输入node start就可以运行了,命令行输出Server running in port 3000表示express成功启动了,浏览器访问http://localhost:3000/api/users看到输出的测试数据就是成功配置好express了

配置mongoose

  • 安装mongodb并启动(过程省略)
  • 安装mongoose

    cnpm install mongoose --save-dev
  • 连接mongodb

    • 编写入口:在server文件下新建一个文件夹名为db,并在其下新建一个文件db.js,内容如下:

      //引入node的文件路径模块path和文件处理模块fs
      const path = require('path')
      const fs = require('fs')
      const mongoose = require('mongoose')
      
      
      // mongodb 连接?
      mongoose.connect('mongodb://localhost/tifi-music')
      // 此处防止 node.js - Mongoose: mpromise 错误
      mongoose.Promise = global.Promise;
      let db = mongoose.connection;
      db.on('error', console.error.bind(console, 'Connect error'))
      db.once('open', function() {
          console.log('Mongodb started successfully')
      })
      //声明待添加的model对象
      let model = {}
      //读取方式和router一样
      const schemas = fs.readdirSync(path.resolve(__dirname, './model'))
      schemas.forEach((file) => {
          //设置数据库表名为读取到的文件名(去除后缀名)
          let name = file.substring(0,file.lastIndexOf("."))
          //获取到的对象就是数据库字段
          let schema = require('./model/' + file)
          //使用mongoose.Schema和mongoose.model完成对数据库表和字段的创建
          model[name] = mongoose.model(name, mongoose.Schema(schema))
      })
      //输出model对象
      module.exports = model
    • 编写model:也在db文件夹下新建一个文件夹名为model,并在其下新建user.js,内容如下:

      module.exports = {
        //设计数据库字段,先简单的设置一些常用的字段
        name: String,
        phone: String,
        email: String,
        password: String,
        createTime: Date
      }
      
    • 修改controller:修改controller文件下单user.js为:

      //'引入mongoose的model
      const model = require('../db/db')
      //加密用户的密码
      const sha1 = require('sha1')
      //mogodb会自动的为我们添加_id字段,类型为objectid,我们要把它转换成创建该用户的时间
      const objectIdToTimestamp = require('objectid-to-timestamp')
      
      
      module.exports = {
        //获取所有用户
        users: {
          response: (req, res) => {
            model.User.find({}, (err, doc) => {
              if (err) console.log(err)
              res.send(doc)
            })
          }
        },
        //用户注册
        reg: {
          type: 'post',
          response: (req, res) => {
            console.log(req.body);
            let userRegister = new model.User({
              email: req.body.email,
              password: sha1(req.body.password),
            })
            // 将 objectid转换为用户创建时间,使用是的UTC国际标准时间
            userRegister.createTime = objectIdToTimestamp(userRegister._id)
      
            //查询邮箱是否已存在于数据库
            model.User.findOne({
              email: (userRegister.email)
                .toLowerCase()
            }, (err, doc) => {
              if (err) console.log(err)
              if (doc) {
                res.json({
                  success: false,
                  info: '该邮箱已被注册'
                })
              } else {
                userRegister.save(err => {
                  if (err) console.log(err)
                  console.log(new Date(), 'register success')
                  res.json({
                    success: true,
                    data: {
                      email: userRegister.email
                    }
                  })
                })
              }
            })
          }
        }
      }
      
  • 运行mongoose与测试查询与插入

    • 确定连接mongod成功,如果之前配置好nodemon的话,控制台会有Mongodb started successfully
    • 测试插入数据,打开postman进行post请求,成功之后如下图:
![图片描述][3]
- 测试查询数据,打开[postman][2]进行get请求,成功之后如下图:
![图片描述][5]
- 如果前面都成功了,说明已经成功的连接了mongoose,说明全部的基础建设已经搞好了,可以进行下一步的开发了!

    原文作者:xiecp
    原文地址: https://segmentfault.com/a/1190000009010750
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞