Springboot+vue的前后端分离项目开发 第2步(vue基本搭建+页面开发)

本次开发计划

搭建vue并开发页面，为紫卡数据更新做准备，vue的开发环境搭建如node，webpack，全局设置这里就不写了，网上有很多解决方法。

---

1、初始化项目

首先要在cmd中cd到创建项目的目录，然后执行以下命令。

 

完成后使用webstorm打开

---

2、安装相关组件

1. element-ui

具体安装步骤看Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

这里简单说一下就是使用npm安装

npm i element-ui -S

然后在main.js文件中的import的部分加入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

接着导入ElementUI

Vue.use(ElementUI);

     2. axios跨域请求

同样的具体使用步骤请看官方Axios 中文说明

这里同样使用npm安装

$ npm install axios

接着配置跨域请求的相关配置

首先在index.js中配置proxyTable属性，重点

proxyTable: {'/': {
        target: 'http://localhost:8081',
        changeOrigin: true,
        pathRewrite: {
          '^/': ''
        }
      },},

为了更好的使用axios，它的相关配置和封装我选择了微人事前后端分离的人力资源管理系统项目中的axios请求封装文件，文件位置放置在src.utils.api.js，代码如下：

import axios from 'axios'
import {Message} from 'element-ui'
axios.interceptors.request.use(config => {
  return config;
}, err => {
  Message.error({message: '请求超时!'});
  // return Promise.resolve(err);
})
axios.interceptors.response.use(data => {
  if (data.status && data.status == 200 && data.data.status == 500) {
    Message.error({message: data.data.msg});
    return;
  }
  if (data.data.msg) {
    Message.success({message: data.data.msg});
  }
  return data;
}, err => {
  if (err.response.status == 504 || err.response.status == 404) {
    Message.error({message: '服务器被吃了⊙﹏⊙∥'});
  } else if (err.response.status == 403) {
    Message.error({message: '权限不足,请联系管理员!'});
  } else if (err.response.status == 401) {
    Message.error({message: err.response.data.msg});
  } else {
    if (err.response.data.msg) {
      Message.error({message: err.response.data.msg});
    }else{
      Message.error({message: '未知错误!'});
    }
  }
  // return Promise.resolve(err);
})
let base = '';
export const postRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    transformRequest: [function (data) {
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
}
export const uploadFileRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
}
export const putRequest = (url, params) => {
  return axios({
    method: 'put',
    url: `${base}${url}`,
    data: params,
    transformRequest: [function (data) {
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
}
export const deleteRequest = (url) => {
  return axios({
    method: 'delete',
    url: `${base}${url}`
  });
}
export const getRequest = (url) => {
  return axios({
    method: 'get',
    url: `${base}${url}`
  });
}

接着需要在main.js中配置相关代码，main.js最终代码如下

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import {getRequest} from './utils/api'
import {postRequest} from './utils/api'
import {deleteRequest} from './utils/api'
import {putRequest} from './utils/api'


// Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.prototype.getRequest = getRequest;
Vue.prototype.postRequest = postRequest;
Vue.prototype.deleteRequest = deleteRequest;
Vue.prototype.putRequest = putRequest;


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

---

3、前端页面请求后端数据接口并显示

首先要对HelloWorld.Vue页面改造，加入element Table 表格组件，然后调用在main.js中注册的各个axios方法

<template>
  <div class="hello">
    <el-table
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号">
      </el-table-column>
      <el-table-column
        prop="itemtype"
        label="类型">
      </el-table-column>
      <el-table-column
        prop="compatibility"
        label="名称">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  var data1
export default {
  name: 'HelloWorld',
  mounted: function () {
    this.getRivenInfoList();
  },
  data () {
    return {
      tableData:[]
    }
  },
  methods:{
    getRivenInfoList: function () {
      this.getRequest("/riven/rivenInfoList").then((res) =>{
        this.tableData = res.data
      })
      console.log("tableData:"+this.tableData)
    }
  }

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

这里要注意这一行代码，是我的低级错误

getRivenInfoList: function () {
      this.getRequest("/riven/rivenInfoList").then((res) =>{
        this.tableData = res.data
      })
      console.log("tableData:"+this.tableData)
    }

getRivenInfoList: function () {
      this.getRequest("/riven/rivenInfoList").then(function(res){
        this.tableData = res.data
      })
      console.log("tableData:"+this.tableData)
    }

当使用function时，回调函数处于其它函数的内部this不会与任何对象绑定，为undefined

所以要用箭头，箭头函数的定义的环境是一直不变的。

---

4、页面成果

5、接下来安排

使用element完成导航页面，或者上网找一些好看的模板

完成后台登陆和安全管理（这方面比较困难，要学的东西比较多）