vue实现前后端项目分离与交互②

vue框架搭建看上一个博客：vue与idea实现前后端项目分离与交互①

1.1 在src目录下创建一个utils文件夹，创建了一个request.js文件,然后下载axios。

1.2 在request.js中添加以下代码，已解决前后端连接时产生的跨域问题

import axios from 'axios'

export function request(config) {
    const request = axios.create({
        baseURL: 'api', // 后端请求端口设置，根据自己的端口进行设置
        timeout: 4000 // 超时时间
    })

    // request 请求拦截
    // 可以在请求发送前对请求做一些处理
    // eg.统一加上token，对请求参数统一加密
    request.interceptors.request.use(config => {
        config.headers['Content-Type'] = 'application/json;charset=utf-8';
        // console.log(config);
        // config.headers['token'] = user.token;  // 设置请求头
        return config
    }, error => {
        console.log(error);
    });

    // response 响应拦截
    // 可以在接口响应后统一处理结果
    request.interceptors.response.use(
        response => {
            let res = response.data;
            // console.log(res);
            // 如果是返回的文件
            if (response.config.responseType === 'blob') {
                return res
            }
            // 兼容服务端返回的字符串数据
            if (typeof res === 'string') {
                // 如果是json字符串，将json字符串转换为json对象
                res = res ? JSON.parse(res) : res
            }
            return res;
        },
        error => {
            console.log('err' + error) // 控制台打印错误信息，用于调试

        })
    // 直接返回
    return request(config)
}

// export default request

1.3 在自己创建的vue文件中添加methods中的queryUserList()方法用来获取后端数据

<template>
<div>
  <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="id序号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="180">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { request } from "../../utils/request";
export default {
  data(){
    return{
       tableData: [{
               
            }],

       
    }
  },
  methods:{
        //获取服务器上的用户列表，并将列表呈现到前端页面中的表格中
        //向服务器发送一个名为 userServlet 的请求，获取用户列表
        queryUserList(){
            request({
            url: '/userServlet'  //请求的 URL 是 /userServlet
        }).then(res => {
            console.log(res);   //当响应结果返回并成功时，函数将服务器响应的数据赋值给 this.tableData
            this.tableData = res; //，this.tableData 将会被用来呈现在前端的表格中，用于显示用户数据
        }, err => {
            console.log(err);  //如果请求出现错误，该函数将会输出错误信息。
        })
      }
    },
    mounted() {
    
        this.queryUserList();// 钩子，页面加载时调用此方法。

    }
    } 
  
</script>

<style>

</style>

1.4 调用aixo方法实现异步加载， 在main.js文件中加入代码：

import axios from 'axios'
import request from "@/utils/request"; //用于封装 axios 进行更高层次的请求处理的工具函数
Vue.prototype.request = request //将 request 工具函数在整个 Vue 实例中访问和调用。
Vue.prototype.$axios = axios  //将 axios 在整个 Vue 实例中访问和调用。
axios.defaults.baseURL = '/api' //在请求时可以省略掉本地地址并直接使用相对路径

如图所示：

最后，如果运行时出现了如下警告。这个警告提示说在 ./src/main.js 中，你使用了 import request from "@/utils/request"，
但是在文件路径 @/utils/request 中没有找到名为 default 的导出项。这意味着在 @/utils/request 模块中没有使用 
export default 将 request 导出，而是使用了 export const request 这种方式导出的。

为了解决这个警告，你可以在 ./src/main.js 文件中将 import request from "@/utils/request"
 修改为 import { request } from "@/utils/request"，因为 request 是该模块的具名导出项。这样就可避免警告提示了。

修改：

1.5成功传输