最近公司赶项目，要求做一个后台管理系统，静态半天，接口一天，测试一天。
看了一下需求，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 }); 因为工期赶得及，也没做什么复杂的操作， 这样一个简单的后台管理系统的登录页就完工了，如果觉得看了有所帮助，欢迎留言转载于:https://www.cnblogs.com/baiin925/p/9945083.html
相关资源：后台管理系统界面设计