vue vue-router vuex element-ui axios的学习笔记(十六)写express Server

前端开发 简书

想到一个办法,直接使用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: [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

选区_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

简书稿源:简书 (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » vue vue-router vuex element-ui axios的学习笔记(十六)写express Server

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录