91热爆蜜桃,亚洲人妻字幕色

想到一個(gè)辦法，直接使用webpack的proxy代理，讓這個(gè)項(xiàng)目直接訪(fǎng)問(wèn)server獲取數(shù)據(jù)。

實(shí)現(xiàn)步驟

1、在learn項(xiàng)目修改修改配置實(shí)現(xiàn)代理

打開(kāi)config下面的index.js
在proxyTable添加以下代碼

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

2、修改api.js

let base = '/learn'

這樣的話(huà)，每當(dāng)請(qǐng)求/learn就相當(dāng)于請(qǐng)求/localhost：8088
以登錄接口為列子

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

未使用代理時(shí)，我們?cè)L問(wèn)登錄接口，實(shí)際請(qǐng)求的地址是：locaihost:8080/learn/login
這樣代理之后，我們?cè)L問(wèn)登錄接口，真正的請(qǐng)求地址是：
localhost:8088/login

3、修改main.js

取消mock數(shù)據(jù)的使用

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

這樣這個(gè)項(xiàng)目的改寫(xiě)就完成了

4、寫(xiě)node-server

1、初始化

npm init

選區(qū)_003.png

2、先說(shuō)一下大概用到的包
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"
  }
}

因?yàn)槲覍?xiě)的時(shí)候使用async，請(qǐng)保證安裝的node版本至少時(shí)7.6，node -v查看，如果是7.6以下請(qǐng)升級(jí)

選區(qū)_004.png

3、寫(xiě)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')
// 連接數(shù)據(jù)庫(kù) 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)
})

4、寫(xiě)route.js

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

const Controller = require('../controllers/control')
// 注冊(cè)
router.route('/regin')
  .post(Controller.regin)
// 登錄
router.route('/login')
  .get(Controller.login)
module.exports = router

5、寫(xiě)control.js


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

module.exports = {
  // 注冊(cè)
  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)
  // }
}

6、寫(xiě)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
}

7、簡(jiǎn)單說(shuō)一下理解

這樣整個(gè)server就差不多可以簡(jiǎn)單使用了，作為一個(gè)新手，簡(jiǎn)單說(shuō)下有些我新理解的知識(shí)：
1、nodemon的作用，使用nodemon app.js這一句主要是使得整個(gè)server可以熱重載，就是可以不重啟server就可以加載修改過(guò)的內(nèi)容
2、使用的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，這樣在整個(gè)過(guò)程中都可以自動(dòng)catch(err)，這樣可以減少代碼量，具體怎么做到的，我不知道，請(qǐng)大佬解惑