vue vue-router vuex element-ui axios的学习笔记（十六）写express Server

想到一个办法，直接使用webpack的proxy代理，让这个项目直接访问server获取数据。

实现步骤

一、在learn项目修改修改配置实现代理

打开config下面的index.js
在proxyTable添加如下代码

'/learn': {
        target: 'http://localhost:8088',
        changeOrigin: true,
        pathRewrite: {
          '^/learn': '/'/
        }
      }

二、修改api.js

let base = '/learn'

这样的话，每当请求/learn就至关于请求/localhost：8088

以登陆接口为列子

import axios from 'axios'
let base = '/learn'
// 注册接口
export const ReginUser = params => {
  return axios.post(`${base}/regin`, params)
}
// 登陆接口
export const LoginUser = params => {
  return axios.get(`${base}/login`, {params: params})
}

未使用代理时，咱们访问登陆接口，实际请求的地址是：locaihost:8080/learn/login
这样代理以后，咱们访问登陆接口，真正的请求地址是：
localhost:8088/login

三、 修改main.js

取消mock数据的使用

// 引入mock并初始化
// import Mock from './data/mock'
// Mock.init()

这样这个项目的改写就完成了

四、写node-server

一、初始化

npm init

二、先说一下大概用到的包

package.json

{
  "name": "nodeserver",
  "version": "1.0.0",
  "description": "express mongoose node-server",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon app.js"
  },
  "author": "lytton",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.18.2",
    "express": "^4.16.2",
    "express-promise-router": "^2.0.0",
    "formidable": "^1.1.1",
    "mongoose": "^4.13.7",
    "morgan": "^1.9.0",
    "nodemon": "^1.14.1",
    "shortid": "^2.2.8"
  }
}

由于我写的时候使用async，请保证安装的node版本至少时7.6，node -v查看，若是是7.6如下请升级

三、写app.js

/**
 * author: lytton
 * date: 2017-12-21
 * email: lzr3278@163.com
 */
const express = require('express')
const logger = require('morgan')
const mongoose = require('mongoose')
const bodyParser = require('body-parser')
// 链接数据库 mongodb
mongoose.Promise = global.Promise
mongoose.connect('mongodb://localhost/learn', {useMongoClient: true})
const connection = mongoose.connection;  
connection.on('error',err => {  
    if(err){  
        console.log(err);  
    }  
});  
connection.on('open', () => {  
    console.log('opened MongoDB');  
});  

// routes
const route = require('./routes/route')
// app
const app = express()

// middlewares
// 日志记录
app.use(logger('dev'))
// body-parser
app.use(bodyParser.json())

// routes
const base = ''
app.use(base, route)


// catch 404 err and then to err handler
app.use((req, res, next) => {
  const err = new Error('Not Found 404')
  err.status = 404
  next(err)
})
// err handler
app.use((err, req, res, next) => {
  const error = app.get('env') === 'development' ? err : {}
  const status = err.status || 500
  res.status(status).json({
    error: {
      message: error.message
    }
  })
  console.error(err)
})
// listen port
const port = app.get('port') || 8088
app.listen(port, () => {
  console.log('your server are listening at localhost:'+ port)
})

四、写route.js

const express = require('express')
const router = require('express-promise-router')()
// const router = express.Router()

const Controller = require('../controllers/control')
// 注册
router.route('/regin')
  .post(Controller.regin)
// 登陆
router.route('/login')
  .get(Controller.login)
module.exports = router

五、写control.js

const {User, Product} = require('../models/model')
const formidable = require('formidable')
const form = new formidable.IncomingForm()

module.exports = {
  // 注册
  regin: async (req, res, next) => {
    const newuser = new User(req.body)
    const adduser = await newuser.save()
    res.status(200).send({
      adduser: adduser
    })
  },
  // 登陆
  login: async (req, res, next) => {
    const user = await User.findOne(req.query)
    res.status(200).json({
      code: 200,
      msg: '登陆成功',
      user: user
    })
  }
  
  /**
   * Callback
   */
  // newuser: (req, res, next) => {
  //   const newuser = req.body
  //   const adduser = new user(newuser)
  //   adduser.save((err, user) => {
  //     if (err) {
  //       next(err)
  //     } else {
  //       res.status(200).json(newuser)
  //     }
  //   })
  // }

  /**
   * Promise
   */ 
  // newuser: (req, res, next) => {
  //   const newuser = req.body
  //   const adduser = new user(newuser)
  //   adduser.save().then(newuser => {
  //       res.status(200).json(newuser)
  //     }).catch(err => {
  //       next(err)
  //     })
  // }

  /**
   * async
   */
  // newuser: async (req, res, next) => {
  //   const newuser = new User(req.body)
  //   const adduser = await newuser.save()
  //   res.status(200).json(adduser)
  // }
}

六、写model.js

const mongoose = require('mongoose')
const shortid = require('shortid')
const Schema = mongoose.Schema

UserSchema = new Schema({
  _id: {
    type: String,
    'default': shortid.generate
  },
  username: String,
  password: String,
  email: String,
  tel: Number,
  avatar: {
    type: String,
    'default': 'http://diy.qqjay.com/u2/2014/1027/4c67764ac08cd40a58ad039bc2283ac0.jpg'
  },
  date: Date,
  name: String
})
const User = mongoose.model('User', UserSchema)

productsSchema = new Schema({
  _id: {
    type: String,
    'default': shortid.generate
  },
  type: String,
  name: String,
  prods: [{
    type: Schema.Types.ObjectId,
    ref: 'Prods'
  }]
})
const Product = mongoose.model('Product', productsSchema)

prodsSchema = new Schema({
  _id: {
    type: String,
    'default': shortid.generate
  },
  name: String,
  price: Number,
  desc: String,
  selling: Boolean,
  info: String
})
const Prods = mongoose.model('Prods', prodsSchema)

sendsSchema = new Schema({
  _id: {
    type: String,
    'default': shortid.generate
  },
  sendname: String,
  sendaddr: String,
  sendtel: Number,
  recepname: String,
  recepaddr: String,
  receptel: Number,
  sendprod: String,
  sendmsg: String,
  sendprice: Number,
  sendcode: Number,
  sendstauts: String,
  sender: {
    type: Schema.Types.ObjectId,
    ref: 'User'
  }
})
const Sends = mongoose.model('Sends', sendsSchema)


module.exports = {
  User,
  Product,
  Prods,
  Sends
}

七、简单说一下理解

这样整个server就差很少能够简单使用了，做为一个新手，简单说下有些我新理解的知识：
一、nodemon的做用，使用nodemon app.js这一句主要是使得整个server能够热重载，就是能够不重启server就能够加载修改过的内容
二、使用的router是
const router = require('express-promise-router')()
而不是
// const router = express.Router()
咱们都知道，使用Promise 或者 async,都是须要catch(err)的，
promise then().catch(err =>{}),
async try{}.catch(err => {})，
而咱们使用express-promise-router，这样在整个过程当中均可以自动catch(err)，这样能够减小代码量，具体怎么作到的，我不知道，请大佬解惑

五、测试

一、 先打开mongodb

sudo service mongod start

二、 启动咱们写的server，肯定成功

npm run start

三、启动咱们的项目learn

npm run dev

四、开始测试
先打开robo3t,看一下数据库里面的user

没有数据

注册一个用户

成功返回了

有错误是由于这个页面还请求了其它数据，但并无写好接口，因此出错

再看一下数据库

此时这条数据已经成功插入了

再看一下咱们的server

能够看出请求注册是成功了的，出错的是请求其它数据出错，由于根本就尚未写接口！！！

再测试一下登陆功能

一样的也成功了

看看server

登陆功能一样是成功了的

后续规划

把现在写了的功能两边同步完善

github地址

learn：https://github.com/lyttonlee/...
server： https://github.com/lyttonlee/...