Node.js   发布时间:2022-04-24  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了vue vue-router vuex element-ui axios的学习笔记(十六)写express Server大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

实现步骤

1、在learn项目修改修改配置实现代理

打开config下面的index.js
在proxyTable添加以下代码

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

2、修改api.js

let base = '/learn'

登录接口为列子

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})
}

3、 @L_6_0@main.js

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

这样这个项目的改写就完成了

4、写node-server

1、初始化

npm init

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

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"
  }
}

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

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,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,next) => {
    const newuser = new User(req.body)
    const adduser = await newuser.save()
    res.status(200).send({
      adduser: adduser
    })
  },// 登录
  login: async (req,next) => {
    const user = await User.findOne(req.query)
    res.status(200).json({
      code: 200,msg: '登录成功',user: user
    })
  }
  
  /**
   * CallBACk
   */
  // newuser: (req,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,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,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 scheR_687_11845@a = mongoose.scheR_687_11845@a

UserscheR_687_11845@a = new scheR_687_11845@a({
  _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',UserscheR_687_11845@a)

productsscheR_687_11845@a = new scheR_687_11845@a({
  _id: {
    type: String,type: String,name: String,prods: [{
    type: scheR_687_11845@a.Types.ObjectId,ref: 'Prods'
  }]
})
const Product = mongoose.model('Product',productsscheR_687_11845@a)

prodsscheR_687_11845@a = new scheR_687_11845@a({
  _id: {
    type: String,price: number,desc: String,selling: Boolean,info: String
})
const Prods = mongoose.model('Prods',prodsscheR_687_11845@a)

sendsscheR_687_11845@a = new scheR_687_11845@a({
  _id: {
    type: String,sendname: String,sendaddr: String,sendtel: number,recepname: String,recepaddr: String,receptel: number,sendprod: String,sendmsg: String,sendprice: number,sendcode: number,sendstauts: String,sender: {
    type: scheR_687_11845@a.Types.ObjectId,ref: 'User'
  }
})
const Sends = mongoose.model('Sends',sendsscheR_687_11845@a)


module.exports = {
  User,Product,Prods,Sends
}

7、简单说一下理解

5、测试

1、 先打开mongodb

sudo service mongod start

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

2、 启动我们写的server,确定成功

npm run start

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

3、启动我们的项目learn

npm run dev

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

4、开始测试
先打开robo3t,看一下数据库里面的user

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

没有数据

注册一个用户

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

成功返回了

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

再看一下数据库

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

再看一下我们的server

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

再测试一下登录功能

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

同样的也成功了

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

看看server

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

后续规划

github地址

learn:https://github.com/lyttonlee/...
server: https://github.com/lyttonlee/...

大佬总结

以上是大佬教程为你收集整理的vue vue-router vuex element-ui axios的学习笔记(十六)写express Server全部内容,希望文章能够帮你解决vue vue-router vuex element-ui axios的学习笔记(十六)写express Server所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。