vue.js连接接口实现登录验证

vue,js 廖佳星
文章标签: 登录验证

1.首先需要在项目中安装axios,在main.js中引入

2.在需要使用的项目引用 import axios from 'axios'  //引入axios

3.在data(){

return {

ruleForm2: {

pwd: '',

name: ''

}}}                //里面定义两个空值,用来接收从接口请求过来的,“账号” “密码”,

var that = this;

//此处是通过axios连接到接口http://127.0.0.1:8081/login 把里面的name    pwd赋给本地的那两个空值

axios.post('http://127.0.0.1:8081/login?name=' + that.ruleForm2.name + '&pwd=' + that.ruleForm2.pwd + '')

.then((res) => {          //此处是node.js对mysql数据库进行的操作,下列有node.js这部分的代码

console.log(res.data)

if(res.data.length > 0) {

//弹出注册成功    此处用的element框架的消息提示,可自行更改提示信息

this.$message({

message: '恭喜你,登录成功',

type: 'success'

});

//路由跳转至首页

that.$router.push("/homepage")

} else {

//elment框架提示信息,可自行更改

this.$message.error('用户名不存存在,或者密码错误!');

}

})

node。js登录处代码,

//登陆
server.post('/login', function (req, res, next) {
var name = req.query.name; //获取login.html文件中的用户输入框数据
var pwd = req.query.pwd; //获取login.html文件中的用户密码框数据
console.log(name);
console.log(pwd);
var selectSQL = "select * from user where zhanghao = '" + name + "' and mima = '" + pwd + "'";
// console.log(selectSQL);
sql.query(selectSQL, function (err, rs) {
if (err) {
console.log(err);
}
res.send(rs);
console.log(rs);
});
});

还能输出{{restrictNumber}}个字符  
  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :