最近公司赶项目，要求做一个后台管理系统，静态半天，接口一天，测试一天。
看了一下需求，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
});
因为工期赶得及，也没做什么复杂的操作，
这样一个简单的后台管理系统的登录页就完工了，如果觉得看了有所帮助，欢迎留言