想到一个办法，直接使用webpack的proxy代理，让这个项目直接访问server获取数据。
实现步骤
1、在learn项目修改修改配置实现代理
打开config下面的index.js
在proxyTable添加以下代码
'/learn': {
target: 'http://localhost:8088',
changeOrigin: true,
pathRewrite: {
'^/learn': '/'/
}
}2、修改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
3、 修改main.js
取消mock数据的使用
// 引入mock并初始化
// import Mock from './data/mock'
// Mock.init()这样这个项目的改写就完成了
4、写node-server
1、初始化
npm init
2、先说一下大概用到的包
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以下请升级
3、写app.js
/**
* author: lytton
* date: 2017-12-21
* email: [email protected]
*/
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)
})4、写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
5、写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)
// }
}6、写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、简单说一下理解
这样整个server就差不多可以简单使用了，作为一个新手，简单说下有些我新理解的知识：
1、nodemon的作用，使用nodemon app.js这一句主要是使得整个server可以热重载，就是可以不重启server就可以加载修改过的内容
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，这样在整个过程中都可以自动catch(err)，这样可以减少代码量，具体怎么做到的，我不知道，请大佬解惑
5、测试
1、 先打开mongodb
sudo service mongod start
2、 启动我们写的server，确定成功
npm run start
3、启动我们的项目learn
npm run dev
4、开始测试
先打开robo3t,看一下数据库里面的user
没有数据
注册一个用户
成功返回了
有错误是因为这个页面还请求了其它数据，但并没有写好接口，所以出错
再看一下数据库
此时这条数据已经成功插入了
再看一下我们的server
可以看出请求注册是成功了的，出错的是请求其它数据出错，因为根本就还没有写接口！！！
再测试一下登录功能
同样的也成功了
看看server
登录功能同样是成功了的
后续规划
把如今写了的功能两边同步完善
github地址
learn：https://github.com/lyttonlee/...
server： https://github.com/lyttonlee/...