【Vue】如何请求后台数据

男娘i 2023-07-10 11:27 32阅读 0赞

背景：为了方便项目管理，现在前后端分离成为了主流形式。在搭建完 Vue 的前端框架之后，如何请求接口来获取数据？

示例：

*  前端模板使用了 git 上非常热门的后台管理系统模板 [vue-elemnt-admin（文档）][vue-elemnt-admin]
 *  展示工具使用优秀的开源表格项目 vxe-table（文档），引入 & 配置可[点这里][Link 1]

--------------------

**效果图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70][]

--------------------

### 1、在 api 文件夹下，建立接口 js 文件（ 示例为：vxetable.js ） ###

### 2、确定 **baseURL（接口地址，如没有服务器，可为本地） **和 **url 后缀（即控制层中的接口路径）**（ 示例中的 jokerls.cn:9090 为示例接口地址 ） ###

注意：此处后端应已经开启 **跨域 cors** ，否则无法访问，前端跨域访问配置可以[点这里][Link 2]查看

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 1][]

### 3、在需要获取数据的页面按以下步骤进行 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 2][]

[vue-elemnt-admin]: https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/#%E5%89%8D%E5%BA%8F%E5%87%86%E5%A4%87
[Link 1]: https://blog.csdn.net/weixin_42678675/article/details/104629310
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200302123347816.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ==,size_16,color_FFFFFF,t_70
[Link 2]: https://blog.csdn.net/weixin_42678675/article/details/104629854
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200302122518865.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200302122827977.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ==,size_16,color_FFFFFF,t_70