評論系統前端
- 一. 匯入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
轉載說明：跟我說明，務必注明來源，附帶本人博客連接，
請給我點個贊鼓勵我吧
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/286317.html
標籤：python