vue+express+mongoose项目构建

时间  2019-11-09
标签 vue+express+mongoose vue express mongoose 项目 构建 栏目 MongoDB 繁體版
原文   原文链接

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

1. 运行环境构建（基于macOS Sierra 10.12.4）

  • 全局安装node（v6.9.4)vue

    安装过程略

  • 配置cnpm（npm的淘宝镜象）node

    sudo npm install -g cnpm --registry=https://registry.npm.taobao.org`

  • 全局安装vue官方脚手架工具vue-cli（vue官网文档）webpack

    cnpm install --global vue-cli

2. 建立项目

  • 基于 webpack 模板建立web

    vue init webpack tifi-music

    建立配置按需，我除了安装router以外其余都选了noajax

  • 运行与打包测试mongodb

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

3. 配置express

  • 在项目根目录下建立server.js文件，内容以下vue-cli

    //用于获取路径
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

    //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，说明所有的基础建设已经搞好了，能够进行下一步的开发了！
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程