关于前端:vuenodeexpress做中间层开发一

前提条件装置：

• vue v2.9.6
• vue-cli
• iview
• node v15.4
• express v4.16.1
• axios v0.18.0
• cors

采纳的构造为前端 Vue 我的项目，内包一个 node 服务

vue 端

vue init webpack vueapp // 新建一个 vueapp 我的项目，采纳默认配置即可

执行 npm run dev启动 vue

$ npm run dev

> vueapp@1.0.0 dev /Users/mac/dongzhiqin/vueapp
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 13% building modules 32/37 modules 5 active ...ers/mac/dongzhiqin/vueapp/src/App.vue{parser: "babylon"} is deprecated; we now treat it as {parser: "babel"}.
 95% emitting                                                       i
 DONE  Compiled successfully in 4924ms                      6:48:54 PM

 I  Your application is running here: http://localhost:8080

引入 iview 和 axios，在 main.js 文件中编辑

import axios from 'axios'
import ViewUI from 'view-design'
import 'view-design/dist/styles/iview.css'
Vue.prototype.$axios = axios // 把 axios 注册为原型属性
Vue.use(ViewUI)

编辑 helloworld.vue 文件

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <button type="button" name="button" v-on:click="getmsg">send</button>
    <button type="button" name="button" v-on:click="postmsg">send</button>
    <Button>Default</Button>
    <Button type="primary">Primary</Button>
    <Button type="dashed">Dashed</Button>
    <Button type="text">Text</Button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {msg: 'Welcome to Your Vue.js App'}
  },
  methods: {getmsg () {this.$axios.get('/api/request?dong=123').then(function (res) {console.log('res=', res)
      })
    },
    postmsg () {this.$axios.post('/api/postrequest', {name: '123'}).then(function (res) {console.log('post res =', res)
      })
    }
  }
}
</script>

此时用到了 iview 组件 button，并且设置了两个数据调用的办法，界面如下图

node 端

装置 npm install -g express-generator@4
在 vueapp 下新建 server 文件夹，切换到 server 文件夹，执行express node_api && cd node_api，会新建一个 node_api 的我的项目，而后装置依赖npm install。

执行 npm start 启动 express

$ npm start

> node-api@0.0.0 start /Users/mac/dongzhiqin/vueapp/server/node_api
> node ./bin/www

在页面 server/node_api/routes/index.js 配置路由

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {res.render('index', { title: 'Express'});
});

router.get('/hi', function(req, res, next) {
  req.name = 'kim';
  next();})

router.get('/hi', function(req,res) {res.send(`hello ${req.name}`)
})

router.get('/request', function(req,res,next){res.send(req.query)
})

router.post('/postrequest', function(req, res, next){res.send(req.body)
})

router.get('/user', function(req, res, next) {console.log('req:',req)
  res.send({
    name: 'kim',
    address: '广州海珠区',
  })
})

module.exports = router;

用浏览器或者 postman 拜访 localhost:3000(默认端口是 3000)，能够看到有返回了

装置 nodemon 实现 nodejs 热启动 npm install --save-dev nodemon，用 nodemon 指令提到 node 指令即可
装置 cross-env 实现环境变量设置 npm install --save-dev cross-env，编辑server/node_api/package.json：

{
  "name": "node-api",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start:dev": "cross-env NODE_ENV=development nodemon ./bin/www",
    "start:prod": "cross-env NODE_ENV=production node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "cors": "^2.8.5",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1"
  },
  "devDependencies": {
    "cross-env": "^7.0.3",
    "nodemon": "^2.0.6"
  }
}

解决跨域

此时前端展现有了，后端数据也有了，还须要解决跨域问题，因为端口一个是 8080，一个是 3000。
在 express 的 app.js 文件内编辑：

// 跨域问题解决方面
const cors = require('cors');  
app.use(cors({origin:['http://localhost:8080'],
    methods:['GET','POST'],
}));
// 跨域问题解决方面
app.all('*',function (req, res, next) {res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
 next();});

设置 vue 的代理，编辑config/index.js：

    proxyTable: {
      '/api': {
        target: 'http://localhost:3000/',
        ChangeOrigin: true,
        pathRewrite: {'^/api': ''}
      }
    },

重启一下 express，此时在界面点击按钮，即可看到服务器回传的数据了

后续

接下来能够做的事

1. 用 express 实现接口转发的性能
2. 把 express 中间层独立进去
3. 服务端也应用 axios，和前端对立