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，说明全部的基础建设已经搞好了，可以进行下一步的开发了！