vue+elementUI+node实现登录模块--验证用户名是否正确

简介: 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;


相关文章
|
1月前
|
缓存 JSON JavaScript
Node.js模块系统
Node.js模块系统
16 1
|
12天前
|
JavaScript IDE 开发工具
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
37 3
|
15天前
|
JavaScript 前端开发
node.js 导入导出模块(CommonJS模块化规范,ES6模块化规范)
node.js 导入导出模块(CommonJS模块化规范,ES6模块化规范)
13 1
|
20天前
|
JavaScript
Vue没有node_modules怎么办
Vue没有node_modules怎么办
|
1月前
|
JavaScript 应用服务中间件 Apache
Node.js Web 模块
Node.js Web 模块
19 2
|
1月前
vue.js+node.js+mysql在线聊天室源码
vue.js+node.js+mysql在线聊天室源码 技术栈:vue.js+Element UI+node.js+socket.io+mysql
118 3
|
12天前
|
JavaScript
Vue如何查看node版本---- package.json 文件中的 engines
Vue如何查看node版本---- package.json 文件中的 engines
|
14天前
|
JavaScript 前端开发 API
vue 报错【解决方案】/sockjs-node/info?t=
vue 报错【解决方案】/sockjs-node/info?t=
16 0
|
15天前
|
JSON JavaScript 前端开发
死磕Node模块兼容性,ESM和CJS我全都要!
死磕Node模块兼容性,ESM和CJS我全都要!
18 0
|
15天前
|
JSON JavaScript 前端开发
前端 JS 经典:node 的模块查找策略
前端 JS 经典:node 的模块查找策略
11 0