最近公司趕項目，要求做一個后台管理系統，靜態半天，接口一天，測試一天。
看了一下需求，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
});
因為工期趕得及，也沒做什么復雜的操作，
這樣一個簡單的后台管理系統的登錄頁就完工了，如果覺得看了有所幫助，歡迎留言