前后端分离之评论功能前端（1）——django+mysql+vue+element+axios

客官°小女子只卖身不卖艺 2023-01-23 01:05 11阅读 0赞

### 评论系统前端 ###

*   *  一. 导入vue和element用到的组件
     *  二. 使用element设计页面
     *   *  2.1 导航菜单
         *  2.2 输入框
         *  2.3 按钮
         *  2.4 显示评论

前言：

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

**教学视频**：  
[1. 简单介绍][1.]  
[2. 前端界面的搭建][2.]  
[3.一小时带你手写评论功能——python+django+mysql+vue+element+axios][3._python_django_mysql_vue_element_axios]  
**所需环境**

1.  前端：vue+element+axios
2.  后端：  
    python3.8  
    django3.1.4  
    mysql8.0
3.  软件  
    （1）前端：vs code  
    需要插件：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70]

（2）后端：pycharm（我这里用的是官方版）

> 可以去微信软件管家或者pycharm官网下载

## 一. 导入vue和element用到的组件 ##

[菜鸟教程][Link 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 1]

[Element文档][Element]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 2]  
创建这三个文件接下来会用到  
![在这里插入图片描述][20210520211119518.png]

在index.html下输入代码

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      
      <script src="https://unpkg.com/vue/dist/vue.js"></script>
      
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
      
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    </head>
    <body>
    </body>
    </html>

## 二. 使用element设计页面 ##

### 2.1 导航菜单 ###

1.  找到想要的图案  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 3]
2.  放入到body中
3.  编写vue组件

<script> const app=new Vue({ el:'#app' }) </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 4]  
效果;  
![在这里插入图片描述][20210520212731612.png]

### 2.2 输入框 ###

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

<el-input type="textarea" :rows="5" v-model="input" placeholder="请输入内容"></el-input>

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

### 2.3 按钮 ###

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

<el-button type="primary">点击评论</el-button>

### 2.4 显示评论 ###

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

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

效果显示

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 10]  
如果还要修改样式可以查看element的基本配置

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

> 到这里前端基本完成了，接下来我们编写后端代码

完整代码

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

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

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

[1.]: https://live.csdn.net/v/165949
[2.]: https://live.csdn.net/v/165952
[3._python_django_mysql_vue_element_axios]: https://www.bilibili.com/video/BV1Hh411e727
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70]: /images/20221020/6dd80efc99614999af77cff1912adba3.png
[Link 1]: https://www.runoob.com/vue2/vue-install.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 1]: /images/20221020/d405be762eea42ea9a4d9d5386ddc89b.png
[Element]: https://element.eleme.cn/#/zh-CN/component/installation
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 2]: /images/20221020/61868fab84e64a5ca6c55dd0f848daea.png
[20210520211119518.png]: /images/20221020/a05a2aa218a346c09c6c22399d96d6b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 3]: /images/20221020/e6fd9148becc417ab6634c41cdf48779.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 4]: /images/20221020/2e8a66977c7f433cbb836ad50918319b.png
[20210520212731612.png]: /images/20221020/67a496084c97492096cf753f4def4b3f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 5]: /images/20221020/a87e6b3d692d4f298a9593cc5d8d954c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 6]: /images/20221020/d740b0cec1bd4d3d9ba12f238454df79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 7]: /images/20221020/a6d6cd455d1e41bf9a296f54549f9f92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 8]: /images/20221020/64d7181387374c86ae280ff9ba59acaf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 9]: /images/20221020/9aefef295e29408aaa8fe38a7d877efa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 10]: /images/20221020/fd2c0f2417dc4f929d40b07e2ee43bc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 11]: /images/20221020/679b38c61023453faf8a7e42e1502e36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 12]: /images/20221020/a700a6426d9446a8ab156d47a018e311.png
[https_blog.csdn.net_weixin_46654114]: https://blog.csdn.net/weixin_46654114
[20210605110341695.png]: /images/20221020/cb8c1e9aea0f4de68177c602caf3c7b1.png