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

评论系统前端

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

前言:

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

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

  1. 前端:vue+element+axios
  2. 后端:
    python3.8
    django3.1.4
    mysql8.0
  3. 软件
    (1)前端:vs code
    需要插件:前后端分离之评论功能前端(1)——django+mysql+vue+element+axios_第1张图片

(2)后端:pycharm(我这里用的是官方版)

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

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

菜鸟教程
前后端分离之评论功能前端(1)——django+mysql+vue+element+axios_第2张图片

Element文档

前后端分离之评论功能前端(1)——django+mysql+vue+element+axios_第3张图片
创建这三个文件接下来会用到
前后端分离之评论功能前端(1)——django+mysql+vue+element+axios_第4张图片

在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. 找到想要的图案
    前后端分离之评论功能前端(1)——django+mysql+vue+element+axios_第5张图片
  2. 放入到body中
  3. 编写vue组件

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

前后端分离之评论功能前端(1)——django+mysql+vue+element+axios_第6张图片
效果;
在这里插入图片描述

2.2 输入框

前后端分离之评论功能前端(1)——django+mysql+vue+element+axios_第7张图片


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

前后端分离之评论功能前端(1)——django+mysql+vue+element+axios_第8张图片

2.3 按钮

前后端分离之评论功能前端(1)——django+mysql+vue+element+axios_第9张图片


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

2.4 显示评论

前后端分离之评论功能前端(1)——django+mysql+vue+element+axios_第10张图片
代码

  <template>
            <el-table  :data="tableData" style="width: 100%">
            
              <el-table-column label="内容" width="1000" prop="content">el-table-column>
              <el-table-column label="名字" width="200" prop="name">el-table-column>
              <el-table-column label="日期" width="100" prop="name">el-table-column>
              
            el-table>
        template>

前后端分离之评论功能前端(1)——django+mysql+vue+element+axios_第11张图片

效果显示

前后端分离之评论功能前端(1)——django+mysql+vue+element+axios_第12张图片
如果还要修改样式可以查看element的基本配置

前后端分离之评论功能前端(1)——django+mysql+vue+element+axios_第13张图片

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

完整代码

前后端分离之评论功能前端(1)——django+mysql+vue+element+axios_第14张图片

本人博客:https://blog.csdn.net/weixin_46654114
转载说明:跟我说明,务必注明来源,附带本人博客连接。

请给我点个赞鼓励我吧
在这里插入图片描述

你可能感兴趣的:(#,评论功能,python,vue)