前后端分离之使用axios进行前后端交互实现评论显示（3）——django+mysql+vue+element

你的名字 2022-10-14 10:59 5阅读 0赞

### Axios进行前后端交互 ###

*   *  一. 修改vue存在的文件路径
     *  二. 解决跨域问题
     *  三. 渲染数据到前端
     *  四. 完整代码
     *   *   *  js
             *  html

教学视频：

[5. axios请求后台——评论功能][5. axios]  
[6. 解决跨域问题cors——评论功能][6. _cors]  
[7. 前端界面显示——评论功能][7.]

前言：

> 作者：神的孩子在歌唱  
> 这是我听老师讲课做的笔记  
> 大家好，我叫**陈运智**，大家可以叫我**智**

[Axios文档][Axios]

## 一. 修改vue存在的文件路径 ##

将vue代码放入到index.js文件里  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70]  
放入  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 1]

在最底下引入js文件

<script src="js/index.js"></script>

![在这里插入图片描述][20210521120645170.png]  
看axios文档

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 2]

> 通过创建函数，get获取路由，then获取后端返回的json数据

运行会出现以下错误

> 跨域问题

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

## 二. 解决跨域问题 ##

原因：由于ajax跨越了两台计算机，只要跨越计算就会受到cors policy阻止，防止跨站攻击，本地的后端资源只能自己访问

安装包

pip install django-cors-headers

#添加cors配置
    #设定白名单，指定的客户端ip才可以访问
    CORS_ORIGIN_WHITELIST=('http://127.0.0.1:5500',)#输入前端ip端口
    #设置cors Cookie
    CORS_ORIGIN_ALLOW_ALL=True
    CORS_ALLOW_CREDENTIALS=True

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 3]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 4]

'corsheaders.middleware.CorsMiddleware',

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 5]

设置成功后就可以获取后端数据库数据了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 6]

> 接下来我们弄一下显示

## 三. 渲染数据到前端 ##

注意：我们后端如果获取数据库数据成功就会有一个code=1字段返回，我们可以通过这个字段判断是否有数据

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

//请求成功后返回执行函数
    if(response.data.code==1){ //如果成功
           //把获取的数据给contents
           this.contents=response.data.data;
       }

我们这里可以找一个提示框

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 7]  
目前代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 8]

可是这样还无法使用

在前端界面表格地方引用contents

![在这里插入图片描述][20210521152826561.png]  
刷新界面发现还无法显示，这是为什么呢？

需要将this赋值给that

let that = this

为什么要这样子赋值：axios在异步请求后会让this变成`undefined`，所以就不指向app这个对象了，所以在contents里的赋**值操作**都没用。`this`是一个重要的标签，它指向的是vue的这个app的对象  
**解决**：在执行axios前，把this指向的地址给保存下来

> 通过上面操作，表格数据就可以从数据库里面取出来刷新展示了

## 四. 完整代码 ##

#### js ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 9]

#### html ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 10]

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 11]

> 本人博客：[https://blog.csdn.net/weixin\_46654114][https_blog.csdn.net_weixin_46654114]  
> 转载说明：跟我说明，务必注明来源，附带本人博客连接。

请给我点个赞鼓励我吧  
![在这里插入图片描述][20210605110341695.png]

[5. axios]: https://live.csdn.net/v/166118
[6. _cors]: https://live.csdn.net/v/166121
[7.]: https://live.csdn.net/v/166124
[Axios]: http://www.axios-js.com/zh-cn/docs/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70]: /images/20221014/cdd938c116dc4e418a799c396a22e854.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 1]: /images/20221014/1520391ee2bc4d649113c58b81d5a939.png
[20210521120645170.png]: /images/20221014/d616661cc7744af794bf8b7f1ccaefb4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 2]: /images/20221014/8ba4973e75184b5aa63fe60d43b3cf47.png
[20210521123726877.png]: /images/20221014/85b42b77fa7e463a9fef1f0e0d020f93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 3]: /images/20221014/d20d1703d4d8431386e2718eb11cf1db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 4]: /images/20221014/fad2c17576e14b98830ccdad0622b72a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 5]: /images/20221014/1891810b6dfa43b18bc00a4b8fbd1380.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 6]: /images/20221014/04915f54f7434e91adbd8d9cd502a748.png
[20210521125643246.png]: /images/20221014/27b26420be6e439ca84337d6a01d172f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 7]: /images/20221014/e81b5e2e0cac4618b9e891ec1db14461.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 8]: /images/20221014/306e9834efd347e0b319a872150cf28d.png
[20210521152826561.png]: /images/20221014/3c35e8f5e21b402480c5ca463593162e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 9]: /images/20221014/6d02bc2980bd4f1bba62f54e1af6e049.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 10]: /images/20221014/42b1139989ce4797a55224b9a0c56e24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 11]: /images/20221014/7ad4f321e0c646dbb3bc14199a6b20b1.png
[https_blog.csdn.net_weixin_46654114]: https://blog.csdn.net/weixin_46654114
[20210605110341695.png]: /images/20221014/2bd852af1a12427db632612811395e91.png