vue+elementUI+node實現登錄模塊--驗證用戶名是否正確

驗證用戶名是否正確

1==》// 引入qs               import qs from 'qs';

2===》收集用戶賬號后， 發送請求 把參數發給后端（把用戶名和密碼發給后端 驗證是否存在這個賬號）

3===》

<template>
  <div>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用戶名" prop="user">
        <el-input v-model.number="ruleForm.user"></el-input>
      </el-form-item>

      <el-form-item label="密碼" prop="pass">
        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="確認密碼" prop="checkPass">
        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
      </el-form-item>

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

　　

<script>
// 引入qs
import qs from "qs";

export default {
data() {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error("用戶名不能為空"));
}

//它的意思是 當符合要求的條件的時候，就觸發回調函數。這個回調的函數是顯示成功的標識
setTimeout(() => {
callback();
}, 500);
};

var validatePass = (rule, value, callback) => {
if (value === "") {
callback(new Error("請輸入密碼"));
} else {
if (this.ruleForm.checkPass !== "") {
this.$refs.ruleForm.validateField("checkPass");
}
callback();
}
};

var validatePass2 = (rule, value, callback) => {
if (value === "") {
callback(new Error("請再次輸入密碼"));
} else if (value !== this.ruleForm.pass) {
callback(new Error("兩次輸入密碼不一致!"));
} else {
callback();
}
};
return {
// 存放用戶的數據是 ruleForm 而不是data
ruleForm: {
pass: "",
checkPass: "",
user: ""
},
rules: {
pass: [{ validator: validatePass, trigger: "blur" }],

checkPass: [{ validator: validatePass2, trigger: "blur" }],

user: [{ validator: checkAge, trigger: "blur" }]
}
};
},

methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert("submit!");
//獲取用戶的數據哦
//console.log(this.ruleForm.user, this.ruleForm.pass )

//用一個對象 username是存放的名字哦 用的是一個爹對象將他們存起來
let params = {
username: this.ruleForm.user,
password: this.ruleForm.pass
};
console.log(params);
// 發送請求 把參數發給后端（把用戶名和密碼發給后端 驗證是否存在這個賬號）
this.axios
.post("http://127.0.0.1:666/login/checklogin", qs.stringify(params))
.then(response => {
// 接收后端返回的數據
let { error_code, reason } = response.data;
// 判斷
if (error_code === 0) {
// 彈成功提示
this.$message({
type: "success",
message: reason
});
// 跳轉到后端首頁
this.$router.push("/");
} else {
// 彈失敗提示
this.$message.error(reason);
}
})
.catch(err => {
console.log(err);
});
} else {
// 否則就是false
alert("前端驗證失敗 不能提交給后端！");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
</script>

　　

　　

后端node.js代碼
const express = require("express");
const router = express.Router();

// 引入連接數據庫的模塊
const connection = require("./connect");

// 統一設置響應頭 解決跨域問題
router.all("*", (req, res, next) => {
  // 設置響應頭 解決跨域(目前最主流的方式)
  res.header("Access-Control-Allow-Origin", "*");
  next();
});

/* 
  驗證用戶名和密碼是否正確的路由 
*/
router.post("/checklogin", (req, res) => {
  // 接收用戶名和密碼
  let { username, password } = req.body;
  // 構造sql（查詢用戶名和密碼是否存在）
  const sqlStr = `select * from account where username='${username}' and password='${password}'`;
  // 執行sql語句
  connection.query(sqlStr, (err, data) => {
    if (err) throw err;
    // 判斷
    if (!data.length) {
      // 如果不存在
      res.send({ error_code: 1, reason: "請檢查用戶名或密碼!" });
    } else {
      res.send({ error_code: 0, reason: "歡迎您!登錄成功！" });
    }
  });
});

module.exports = router;