vue vue-router vuex element-ui axios的學習筆記（十六）寫express Server

時間 2019-11-16

標籤 vue router vuex element axios 學習筆記十六 express server 简体版

原文原文鏈接

想到一個辦法，直接使用webpack的proxy代理，讓這個項目直接訪問server獲取數據。

實現步驟

一、在learn項目修改修改配置實現代理

打開config下面的index.js
在proxyTable添加如下代碼node

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

二、修改api.js

let base = '/learn'

這樣的話，每當請求/learn就至關於請求/localhost：8088

以登陸接口爲列子webpack

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()

這樣這個項目的改寫就完成了ios

四、寫node-server

一、初始化git

npm init

二、先說一下大概用到的包github

package.jsonweb

{
  "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.jsmongodb

/**
 * 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.jsexpress

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.jsnpm

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)，這樣能夠減小代碼量，具體怎麼作到的，我不知道，請大佬解惑