vue工程实现与后端的交互 axios 及vue引入element UI

说明

前端使用的是Vue+Webpack搭建的工程，工程已经搭建好（具体搭建可查看我前面的一篇关于搭建vue工程的文章，文章链接），这里写如何实现与后端的交互。

与后端交互这里使用的是axios，具体的axios的概念定义可移驾官网进行查阅：
官网地址：http://www.axios-js.com/

安装配置

说下在vue工程中使用axios想后端发送请求，具体步骤如下：
1、下载安装axios
下载命令：npm install axios

2、基础配置
在main.js中做如下配置：

import axios from 'axios'
//注册VUE全局对象
Vue.prototype.axios=axios
axios.defaults.baseURL = "http://localhost:8081/SSM01";//此处地址是后端工程请求地址

vue工程引入elementUI需要先下载，下载命令：

npm i element-ui -s

下载完成后，需要在main.js中引入elementUI

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

如此即可使用elementUI的组件和样式。

发送请求

向后端发送请求，编写请求方法，这里后端接口已写好。
在前端页面添加如下方法：

代码如下：

	mounted(){
          this.selectList();
        },
        methods: {
          selectList(){
            this.axios.post('/user/selectList').then(response => {//user/selectList是后端接口地址

            console.log('方法请求成功返回');
            var res = response.data;//返回数据
            this.formList = res.data;//这里data是后端的包装数据
          })
          }
        }

页面简单添加一个列表，这里列表是用的elementUI的组件，如果没有安装elementUI的可以用HTML标签配合vue指令也可以：

<template>
  
  <div class="bd">
    <el-table :data="formList">
      <el-table-column label="id" width="120">
        <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.id }}</span>
      </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.userName }}</span>
      </template>
      </el-table-column>
      <el-table-column label="pwd" width="180">
        <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.pwd }}</span>
      </template>
      </el-table-column>
      <el-table-column label="性别" width="180">
        <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.sex }}</span>
      </template>
      </el-table-column>
      <el-table-column label="age" width="180">
        <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.age }}</span>
      </template>
      </el-table-column>
      <el-table-column label="工作" width="180">
        <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.job }}</span>
      </template>
      </el-table-column>
      <el-table-column label="手机号码" width="180">
        <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.phone }}</span>
      </template>
      </el-table-column>
    </el-table>
  </div>

</template>

页面显示如下：

如此即完成了前后端的请求交互，如果有跨域的问题可以查看我前面的一篇关于跨域的文章。