本文是自學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