VUE前后端分离之数据交互（简单项目作为演示）

不念不忘少年蓝@ 2023-09-30 08:49 13阅读 0赞

#### 文章目录 ####

*  一、添加后端访问依赖
 *  二、建立后端
 *  三、配置前端

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

`提示:这里重点演示前端如何访问后端，对于前、后端的建立不作为重点`

## 一、添加后端访问依赖 ##

1.  进入前端vue项目，进入内部或外部终端
2.  输入如下代码并安装
    
        cnpm install axios --save
        cnpm install qs --save
3.  安装好之后可以在package.json中看到添加的依赖  
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16]
4.  在main.js中引入添加的依赖（main,js中存储组件的公共依赖，在此文件中添加依赖后无需再在各组件文件里单独添加依赖）
    
    1.  引入依赖  
        ![在这里插入图片描述][256d63af932a40ac8baa196fb354b358.png]
    2.  设置别名  
        ![在这里插入图片描述][81a0a25f6d404066a68c31627d4d1732.png]
    3.  在组件文件中通过 this.$axios.xxx 等即可使用依赖

## 二、建立后端 ##

后端的建立可参考[基于 Spring Mvc 一个简单项目的基本流程 ＜用户注册功能＞(校正版)][Spring Mvc _]的第一、二步，建立符合自己前端的后端。  
**处理跨域问题** ：前后端分离开发后，前后端的访问最主要的问题即跨域，即对于http的请求，为了安全，禁止ip地址和不同端口的程序项目访问，准确说仅可以访问但不响应。由于采用SpringBoot，所以通过在控制器中添加注解来解决。  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 1]

## 三、配置前端 ##

直接上前端的JS处代码

重点在于参数的目的地是 “http://localhost:8088/vue/emp/findByParam” ，这串链接的来源如下：

http://localhost:8088/vue  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
/emp/findByParam  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 3]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/2aba053ea37a4a59ba4807214ea51e5f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA57qn5paw55Sf,size_20,color_FFFFFF,t_70,g_se,x_16
[256d63af932a40ac8baa196fb354b358.png]: https://img-blog.csdnimg.cn/256d63af932a40ac8baa196fb354b358.png
[81a0a25f6d404066a68c31627d4d1732.png]: https://img-blog.csdnimg.cn/81a0a25f6d404066a68c31627d4d1732.png
[Spring Mvc _]: https://blog.csdn.net/weixin_45928161/article/details/119833037
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/a2a73aeaa1d04ba7a2325cf266f3d6d1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA57qn5paw55Sf,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/441e9bb7426d4db09ce925c5ac006e0e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA57qn5paw55Sf,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/fc152a0f52494bcfa2953b1dd79c2322.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA57qn5paw55Sf,size_20,color_FFFFFF,t_70,g_se,x_16