vue后台管理系统搭建与登录

说一下后台管理系统的登录功能，这里需要用的辅助工具有vue架手架和elelment-ui。那下面简单的捋一下。
1⃣，首先，我们先安装好vue最新的架手架
2⃣，然后安装element-ui，在项目里进行配置。
3⃣，使用element框架写登录的样式代码，这里需要注意的是，如果我们的输入框需要按逻辑操作，
就要现在data里写一个空的表单规则，
ruleForm: {
username: “”,
password: “”
},
然后新设置一个规则，在规则里写你表单规则的逻辑，
rules: {
username: [
{ required: true, message: “请输入用户名”, trigger: “blur” },
{ min: 5, max: 25, message: “长度在 6到 25 个字符”, trigger: “blur” }
],
password: [
{ required: true, message: “请输入密码”, trigger: “blur” },
{ min: 6, max: 25, message: “长度在 6 到 25 个字符”, trigger: “blur” }
]
}
最后在表单的代码里v-module等于这个表单规则。


这一步就配置好了一个表单输入的规则。
4⃣，那么下一步就是当我们点击登录时的操作。首先我们要判断写的登录信息是否符合规则，符合的话调用登录接口，（封装接口思路为在src下新建一个http文件夹，在文件夹下新建两个文件，一个配置总接口，一个写配置总接口具体访问页面的方法。然后在请求数据的页面import引入方法，在请求方法里直接 ‘这个方法. then（）’），否则报错。
判断是否符合规则思路：
当点击登录时，表单通过element-ui给的validate表单验证方法来检测信息是否合法：
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … this.http .post( “https://www.liulongbin.top：8888/api/private/v1/login”, this.ruleForm
) .then(result => {
console.log(“登录成功返回的数据：”, result);
｝
否则return fales。
请求接口的话就比较简单，大概思路就是请求到数据接口以后，拿到登录的token，把token存到本地，为了下次登录直接使用。如果想要做是否登录判断时，我们可以使用全局前置钩子函数，beforeRouter，在这个钩子函数里写逻辑，检测到本地有我们的token数据，就next（）方法执行下一步，如果我们没有登录直接访问登录过的页面，就会同意哦next（）自动跳到登录页。