最近公司趕專案，要求做一個後臺管理系統，靜態半天，介面一天，測試一天。

看了一下需求，10個頁面，16+介面，雖說調取資料的比較多，實際寫起來感覺東西還是蠻多的，也在網上查閱了很多資料，感覺都是一些開箱即用的後臺管理系統，一開始我也是想拿來修改一下就好，結果看了好幾個github上面的，感覺並不是很貼合需求，所以決定寫一篇部落格，以供自己和我這樣沒寫過後臺管理系統的萌新使用。

首先其實就是核對需求，和ui圖，這些都是做專案之前的基本工作，需求的話，分為幾個模組，使用者模板，釋出模板，列表模板，和列表詳情。

差不多就是登入，登出，涉及到的也比較基本，比如動態繫結，v-for，v-if,v-show 做完一個後臺管理系統，感覺對熟悉框架是很好的一個途徑。

 

使用者模板部分：

<el-form :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm"> <el-form-item label="使用者名稱:" prop="name"> <el-input v-model="username"></el-input> </el-form-item>
<el-form-item label="密碼:" prop="pas"> <el-input v-model="password"></el-input> </el-form-item>   <el-button type="primary" @click="submitForm('ruleForm')">登入</el-button>   element自帶的驗證： rules: { username: [ { required: true, message: "請輸入使用者名稱", trigger: "blur" }, { min: 3, max: 5, message: "長度在 3 到 5 個字元", trigger: "blur" } ], passsword: [ { required: true, message: "請輸入密碼", trigger: "blur" }, { min: 3, max: 5, message: "長度在 3 到 5 個字元", trigger: "blur" } ] }   提交部分做了幾個簡單的操作 （1）本地儲存 localStorage.setItem("userId", res.data.data.username); （2）index部分，寫在Head元件裡的，使用者名稱的顯示隱藏處理 if (this.username) { this.showname = true; } else { this.showname = false; } （3）簡單的跳轉 vm.$router.push({ path: "/index" });   （4）錯誤提示 this.$message({ type: "error", message: data.message });   因為工期趕得及，也沒做什麼複雜的操作， 這樣一個簡單的後臺管理系統的登入頁就完工了，如果覺得看了有所幫助，歡迎留言