想到一个办法，直接使用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
选区_003.png
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以下请升级
选区_004.png
3、写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)
})
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
选区_005.png
2、 启动我们写的server，确定成功
npm run start
选区_006.png
3、启动我们的项目learn
npm run dev
选区_007.png
4、开始测试
先打开robo3t,看一下数据库里面的user
选区_008.png
没有数据
注册一个用户
选区_009.png
成功返回了
选区_010.png
有错误是因为这个页面还请求了其它数据，但并没有写好接口，所以出错
再看一下数据库
此时这条数据已经成功插入了
选区_011.png
再看一下我们的server
选区_012.png
可以看出请求注册是成功了的，出错的是请求其它数据出错，因为根本就还没有写接口！！！
再测试一下登录功能
选区_013.png
同样的也成功了
选区_014.png
看看server
选区_015.png
登录功能同样是成功了的
后续规划
把如今写了的功能两边同步完善
github地址
learn：https://github.com/lyttonlee/learn
server： https://github.com/lyttonlee/express-server-for-learn
网友评论