前后端分离之评论功能前端（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
所需环境

前端：vue+element+axios
后端：
python3.8
django3.1.4
mysql8.0
软件
（1）前端：vs code
需要插件：

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

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

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

菜鸟教程

Element文档

创建这三个文件接下来会用到

在index.html下输入代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><!-- import Vue before Element --><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 导航菜单

找到想要的图案
放入到body中
编写vue组件

<!-- 创建vue组件 -->
<script>const app=new Vue({el:'#app'})
</script>

效果;

2.2 输入框

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

2.3 按钮

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

2.4 显示评论

代码

  <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>

效果显示

如果还要修改样式可以查看element的基本配置

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

完整代码

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

请给我点个赞鼓励我吧

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

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇：JS对象字面量this
缘起书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战：Vuex 其实很简单
前言哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...
springboot前后端分离项目MultipartFile获取前端传的file为null问题
[问题描述] springboot+vue 前后端分离项目,在对接上传文件功能时,一直显示文件为空. [分析] 查找了很多博客,解决方法五花八门,但原因应该还是 springboot自带的org.sp ...
前后端分离-小项目-1前端布局
技术栈前后端分离开发,前端主体框架Vue3+后端基础框架Spring-Boot 1.前端技术栈:Vue3+Axios+ElementPlus 2.后端技术栈:Spring Boot+MyBatis ...
开发SpringBoot+Jwt+Vue的前后端分离后台管理系统VueAdmin - 前端笔记
1. 前言而接下来,我们即将开发一个前后端分离的后台管理系统VueAdmin.权限框架采用spring security,然后相对来说权限模块开发就多点代码,也仅此而已了.对了前端的系统界面也是我们 ...
H5 微信公众号授权登录前后端分离篇(资料准备+前端01)
实现微信公众号授权登录,很简单,但是注意的地方要细心,小伙伴们跟着我的思路一起实现吧! 文章目录一.帐号申请 1. 正式账号 2. 测试帐号二.微信文档 2.1. 文档主页 2.2. 授权流程 2 ...
Spring Boot + Vue前后端分离（一）前端Vue环境搭建
你好,[程序职场]专注于:Spring Boot ,微服务和前端APP开发,闲暇之余一起聊聊职场规划,个人成长,还能带你一起探索副业赚钱渠道,在提升技术的同时我们一起交流敏捷流程提高工作效率 ...
elementui 按钮表单_前后端分离，文件上传下载（springBoot+vue+elementUI）
1.介绍本文主要是介绍前后端分离的上传下载,后端使用的是SpringBoot,持久层用的是mybatis-plus,前端用的Vue,UI用的elementUI,测试了一下,文本,图片,excel,都 ...
springboot jwt token前后端分离_基于Spring Boot+Spring Security+JWT+Vue前后端分离的开源项目...
一.前言最近整合Spring Boot+Spring Security+JWT+Vue 完成了一套前后端分离的基础项目,这里把它开源出来分享给有需要的小伙伴们功能很简单,单点登录,前后端动态权限配 ...