用VUE做框架，配合elementUI作UI，以AXIOS实现AJAX，用代理解决服务数据问题。最基本的框架

安装

vue creat vue-el //选vue2
cd vue-el
npm i element-ui -S
npm install axios

引用

main.js:

import Vue from 'vue'
import ElementUI from 'element-ui';  //added
import 'element-ui/lib/theme-chalk/index.css';  //added
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

Vue.use(ElementUI);  //added

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14

开发模式下的开启PROXY进行调试

根目录下建立vue.config.js

const isProduction = process.env.NODE_ENV === 'development';

module.exports = {
  publicPath: isProduction ? './' : '/',//为项目中的所有资源(js、css、img)指定一个基础路径
  devServer: {
    proxy: {
      '/api': {//根据请求路径，匹配所有以/a开头的路径
        target: 'http://127.0.0.1:5214',//需要代理的服务器地址
        secure: false,  // 如果是https开头，要设置为true
        changeOrigin: true,  //为true时，发送请求头中的host会设置成target。为false，则不变。默认为true
        pathRewrite: { '/api': '' },// 发送请求时，请求路径重写：将 /a/xxx --> /xxx （去掉/a）
        cookiePathRewrite: {//重写cookie路径
          '/fund': '/'
        },
      }
    },
    port: '8090'//可自己修改端口
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

更改HOME.VUE

/views/home.vue中加入el按钮，引入 axios，添加响应代码，获取API数据显示在页面上

<template>
  <div class="home">
  
    <el-button type="primary" @click="al">主要按钮el-button>
    <div>{{name}}div>
  div>
template>

<script>
//引入axios
import axios from 'axios'
export default {
  name: 'Home',
  data: function () {
    return {
      name: 'my'
    }
  }, 
  methods: {
    al: function () {
    //ajax调用
      axios
        .get('/api/info')
        .then(response => (this.name = response.data))
        .catch(function (error) { // 请求失败处理
          console.log(error);
        });
    }
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

编译，用NGIX做WEB服务，启用反向代理重定向API

以宝塔面板为例，建立网站(NGIX)，在网站配置中启用反向代理

如果需要替换路径，就需要进一步修改配置文件，比如，我想把
http://mydomain/api/getinfo
代理到
http://proxydomain/getinfo，也就是说要去掉api字样，就要配置一下rewrite规则:

location ~* ^/(api)
{
	rewrite ^/api/(.*)$ /$1 break;
    proxy_pass http://127.0.0.1:5214;
1
2
3
4

API编写此处不涉及