关于Vuex管理-用户登陆

开始之前，需要一些环境的准备，我这里是用nodejs搭建的环境，也需要搭配vue中axios来做一些交互操作
做了一个简单用户登陆管理系统

完整代码

  <el-form :model="loginform" status-icon :rules="rules" ref="loginform" class="demo-loginform">
    <el-form-item label="账号" prop="username">
      <el-input type="text" v-model="loginform.username" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="loginform.password" autocomplete="off"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm('loginform')">提交</el-button>
      <el-button @click="resetForm('loginform')">重置</el-button>
    </el-form-item>
  </el-form>

上面代码我用到了一些UI的框架，具体不做详细的解释，非常的简单，建议可以使用element-UI和vant

export default {
  data() {
    return {
      loginform: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 5, max: 18, message: "长度在 5 到 18 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 5, max: 18, message: "长度在 5 到 18 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let _this = this;
          this.$axios.post("/apitwo/checklogin", {
                username:_this.loginform.username,
                password:_this.loginform.password
            }).then(res => {
              console.log("接受后台响应登陆请求的数据", res.data);
              if(res.data.length){
                alert("验证成功")
              }else{
                alert("验证失败")
              }
            });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};

到这里已经获取到数据，但是肯定会报错404

但我们可以在network中看见用axios提交出去的请求：



接下来我们在vue的根目录下创建一个后台的端口文件

在根目录下我们cmd打开终端输入express server -e指令来创建一个名字叫server的文件

如果显示了上面的问题 可以百度一下安装一下依赖

好！这样我们就已经创建好了：如下图

我们打开views的app.js，在尾部添加一个服务器接口

app.listen(888,()=>{
  console.log("服务器已经启动...")
})

然后我们也同样可以查看一下是否成功，在cmd中我们nodemon app

就能够看见

现在我们访问localhost：8080能够看见服务器端

接着，为了顺利地提交到后台里，我们需要做一个跨域的代理

在我们vue文件中找到config中的index.js 然后在proxyTable花框号中写入跨域代理

'/api': {
        // 测试环境
        target: 'http://localhost:888',  // 接口域名
        changeOrigin: true,  //是否跨域   
        pathRewrite:{
          '^/api':''
        } 
      }

这样我们就已经完成了跨域。

然后我们回到后台文件routes中的index.js 添加一下代码

router.post('/checklogin',(req,res)=>{
  //接收用户的登陆信息
  let {input,pass}=req.body;
  console.log(input,pass)
  //去数据库查询是否存在此账号和密码
  res.send('ok')
})

这样一来我们再次post后我们就会得到成功OK

---

OK！现在接口就已经实现成功了

现在后台也成功的拿到了数据，接下来我们需要去验证后台中有没有我们输入的用户名和密码，如果有那当然就进入登陆成功界面中去，但如果没有那就失败。

到此，我们需要有数据库来存储我们的用户名和密码等等数据，

我用到了PHPStudy工具，这个可以自行百度下载安装，如下图：

再到cmd中我们输入mysql -hlocalhost -uroot -proot 我们能看到当前数据库中的数据

** ！但是它也可能会报错，那么我们就需要在->我的电脑->右键属性->高级系统设置->高级->环境变量->双击path->添加你的mysql的bin文件即可

好！然后创建一个我们保存用户名和密码的表：

create table users(
id int primary key auto_increment,
username varchar(50),
password varchar(50)
);

再向表中添加数据

insert into users(username,password) value(‘admin’,‘123456’);

这样我们就有了一条用户名密码分别为admin ，123456 的数据

已经创建好了数据库，接下来当然就是要链接它了。

---

链接数据库首先我们要注意的是需要站点磁盘文件系统是NTFS而不是FAT32

FAT32会影响我们与数据库的正常链接，如果是FAT32的话 可以百度一下如何去更改这个格式 so easy！

接着我们我们需要在server下routes文件夹中创建一个conn.js文件，它用来链接数据库的操作：

const mysql = require('mysql')
var connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : 'root',
  database : 'vuexms'
});
 
module.exports=connection;

然后我们回到index.JS中实现链接响应

var express = require('express');
var router = express.Router();

const connection = require('./conn');
connection.connect(()=>{
  console.log('数据库链接成功')
})
  res.send('ok')
})

module.exports = router;

到这些 我们在前台登陆的话 后台就是获取到token 并且返回给前台


这样一来 我们数据库就链接成功，也并实现了与后台的交互，现在我们就只需要用我们先前数据库中存储的那一条与我zhe们输入的值做比对，如果输入的数据的确存在与我们的数据库中 那么就登陆成功，并且跳转到登陆成功后的操作界面，但如果不存在，那么就返回登陆失败