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

╰+哭是因爲堅強的太久メ 2024-04-06 14:55 87阅读 0赞

#### 后端数据的加载输入 ####

*   *  1.1 在src目录下创建一个utils文件夹，创建了一个request.js文件,然后下载axios。
     *  1.2 在request.js中添加以下代码，已解决前后端连接时产生的跨域问题
     *  1.3 在自己创建的vue文件中添加methods中的queryUserList()方法用来获取后端数据
     *  1.4 调用aixo方法实现异步加载， 在main.js文件中加入代码：
     *  1.5成功传输

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

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

![在这里插入图片描述][5e5948aa30fa4277aed38e68643e2ed1.png]

### 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' //在请求时可以省略掉本地地址并直接使用相对路径

如图所示：  
![在这里插入图片描述][f709c240f2d54d52a9e5993210376971.png]

最后，如果运行时出现了如下警告。这个警告提示说在 ./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 是该模块的具名导出项。这样就可避免警告提示了。

![在这里插入图片描述][87c2190a5160407bb1842ad365654d6b.png]  
修改：  
![在这里插入图片描述][edc699e636e749b59008afdb21f4c2b0.png]

### 1.5成功传输 ###

![在这里插入图片描述][a0e25a31eee34197b6d70fc036a412ee.png]

[vue_idea]: https://blog.csdn.net/H12345667/article/details/134280745
[5e5948aa30fa4277aed38e68643e2ed1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0fb2398ee6204ee7bd0a38084ad5c6f2.png
[f709c240f2d54d52a9e5993210376971.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/4fccb08d55894c0e9b111e7adc308be1.png
[87c2190a5160407bb1842ad365654d6b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/195ceb41238e43a7881f565d717ae27b.png
[edc699e636e749b59008afdb21f4c2b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/c6d778e10232450ba018a1c6bd4358fd.png
[a0e25a31eee34197b6d70fc036a412ee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/86ccf5e3029b4381be507c7e9688e7f8.png