vue+django+mysql前後端分離的課程管理系統
本文是自學vue和django,邊學邊做和立馬上手做的專案的一些記錄,只是為了備忘+回顧,行文有些混亂,寫的程式碼肯定有不少bug,並且肯定有很多不對的地方
後端
建立專案
填寫應用名後會自動生成應用檔案
生成目錄大致如下
在新建的應用的settings.py中新增
設定允許訪問地址,因為前後端都在我本機上,設定地址為本機地址
解決跨域問題
安裝pip install django-cors-headers
在新建的應用的settings.py中加入註冊
在settings的INSTALLED_APPS中新增,如下圖所示,因為我以後的應用沒有傳cookie,也直接粗暴把這個防止跨站攻擊的選項登出了
新增允許訪問的白名單,如下
配置資料庫
在models.py中建立資料庫表的結構,其中db_name為表的名字,其中欄位的詳細含義介紹參考https://blog.csdn.net/bbwangj/article/details/79939269
關於資料庫檢視的操作,可以先在資料庫中新建檢視,然後,在models中配置,managed設定為false,必須有主鍵
最後通過通過以下命令生成表結構
python manage.py makemigrations
Python manage.py migrate
編寫處理介面
在views.py中編寫處理函式
讀取資料
get方式的請求可以通過request.GET.get得到相應的資料
post方式的請求可以通過json.loads(request.body.decode('utf-8'))得到資料
當然也有其它的方法
處理
其中大部分涉及到資料庫的操作可以參考
https://www.cnblogs.com/zgf-666/p/9119126.html
https://www.cnblogs.com/yangxinpython/p/11553188.html
- 增:構造好一個物件後,使用save()方法儲存
- 刪:對查詢到的物件使用delete()方法刪除
- 改:對查詢到的物件的各個欄位修改後,使用save()方法儲存
- 查:有all、first、get、filter等方法,對於複雜查詢也可以使用Q查詢
返回資料
通過JsonResponse的形式以json格式返回資料
並在urls.py中配置,首先要引入views,接著如下圖配置,其中第一項為訪問的連結,第二項為處理的函式
開啟服務
通過命令 python manage.py runserver (也可以後面跟 ip:埠 這樣指定偵聽的ip和埠)開啟服務
前端
專案生成
官網說的很詳細https://cli.vuejs.org/zh/
下載vue cli
可以通過vue ui命令,使用圖形化介面生成專案
選擇建立專案的路徑,然後在此建立新專案
然後選擇相應的選項
選擇手動配置需要的功能
按照提示一步步來就可
最後會生成這樣的檔案結構,在src檔案中,assets存放圖示,components存放元件,router配置路由,views儲存檢視
最後建立各個vue檔案
配置element-ui
官網說的很詳細https://element.faas.ele.me/#/zh-CN
下載好element-ui後,在生成的專案的main.js檔案中引入element-ui
配置axios
下載axios,然後在main.js中引入
axios的使用方法https://blog.csdn.net/qq_31837621/article/details/80688854
執行
點選執行,再點選啟動,就可開啟前端服務,在輸出中可以檢視報錯資訊
前端分頁操作
在element-ui元件中選擇分頁的元件,複製貼上,然後主要在js中實現如下的邏輯實現分頁功能
getPageStudent: function () {
this.pageTableData = [];
for (let i = (this.currentPage - 1) * this.pagesize; i < this.total; i++) {
this.pageTableData.push(this.tableData[i]);
if (this.pageTableData.length === this.pagesize) break;
}
},
handleSizeChange(val) {//頁面大小改變,獲得一頁顯示多少資料
this.pagesize = val;
this.getPageStudent();
},
handleCurrentChange(val) {//頁面改變,獲得現在顯示第幾頁
this.currentPage = val;
this.getPageStudent();
},
前端登入介面
登入之後跳轉可以使用路由that.$router.push('/home')
壓入對應的頁面
規則驗證
可以在data中編寫相應規則
rules: {
username: [
{ required: true, message: '請輸入使用者名稱', trigger: 'blur' }
],
password: [
{ required: true, message: '請輸入密碼', trigger: 'blur' }
]
}
然後在表單上:model :rules ref進行繫結
<el-form style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)" :model="loginForm" :rules="rules" ref="loginForm">
<el-form-item prop="username">
<el-input prefix-icon="el-icon-user" v-model="loginForm.username" placeholder="請輸入使用者名稱" ></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input prefix-icon="el-icon-lock" type="password" v-model="loginForm.password" placeholder="請輸入密碼"></el-input>
</el-form-item>
<el-form-item>
<el-button style="width: 300px" type="primary" @click="login">登入</el-button>
</el-form-item>
</el-form>
在函式中通過this.$refs.loginForm.validate(valid => {})
進行驗證
前端資訊儲存
返回資訊cooKie,session等儲存 可以通過localStorage.名字 = 資訊儲存到前端,但localStorage是全域性的
也可以通過window.sessionStorage.setItem(鍵值對形式)儲存
退出登入時通過localStorage.clear()或sessionStorage.clear()刪除即可
使用django自帶的session資料庫
還可以使用django自帶的session資料庫,用於登入。
需要引入from django.contrib.sessions.models import Session
建立session
request.session['username'] = data['username']
request.session.save()
通過request.session.session_key
得到對應的sessionID
刪除sessionID
sess = Session.objects.get(pk=sessionID)
sess.delete()
前端路由配置
通過如圖所示可以匯入相應Vue檢視
path表示使用者請求什麼路徑,component表示要載入的頁面,通過children可以設定子路由,紅框中表示如果使用者請求的路徑沒有匹配的,一律顯示預設起始頁面
程式碼
所有前後端程式碼和資料庫檔案連結
提取碼:1c4r