想到一个办法,直接使用 webpack 的 proxy 代理,让这个项目直接访问 server 获取数据。
打开 config 下面的 index.js
在 proxyTable 添加以下代码
- '/learn': {
- target: 'http://localhost:8088',
- changeOrigin: true,
- pathRewrite: {
- '^/learn': '/' /
- }
- }
- 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
取消 mock 数据的使用
- // 引入mock并初始化
- // import Mock from './data/mock'
- // Mock.init()
这样这个项目的改写就完成了
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),这样可以减少代码量,具体怎么做到的,我不知道,请大佬解惑
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
登录功能同样是成功了的
把如今写了的功能两边同步完善
learn: https://github.com/lyttonlee/learn
server: https://github.com/lyttonlee/express-server-for-learn
来源: http://www.jianshu.com/p/f43e6abc52d5