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