一个从0开始的vue项目(第二天:登陆注册的实现)
项目前端:一:首页的开发在上一篇文章中,开发环境和首页的login已经开发完毕,不出意外的话,我们已经有了一个基本的登陆界面,和昨天不同的是这里加了一个注册按钮,展示效果如下图这里我们新建一个register.vue文件,将注册的按钮绑定事件click,然后改变路由跳转到register组件见面中:zhuce(){this.$router....
·
项目前端:
一:首页的开发
在上一篇文章中,开发环境和首页的login已经开发完毕,不出意外的话,我们已经有了一个基本的登陆界面,和昨天不同的是这里加了一个注册按钮,展示效果如下图
这里我们新建一个register.vue文件,将注册的按钮绑定事件click,然后改变路由跳转到register组件见面中:
zhuce(){
this.$router.replace('/register');
}
//-------------------------
// 在router/index.js中添加路由配置如下
{
path: '/register',
component: RegisterCompont
}
接下来贴出register.vue文件
<template>
<div>
<div class="title">
后台注册
</div>
<div class="input_group">
<label>用户名:</label>
<input class="myinput" type="text" placeholder="请输入用户名" v-model="username" />
</div>
<div class="input_group">
<label>密码:</label>
<input class="myinput" type="password" placeholder="请输入密码" v-model="userpass" />
</div>
<button class="ok_btn" @click="register">注册</button>
<button class="cancel_btn" @click="backLogin">{{backText}}</button>
</div>
</template>
<script>
import {
Toast
} from 'mint-ui'
export default {
data() {
return {
backText: '返回',
username: '',
userpass: ''
}
},
methods: {
backLogin() {
this.$router.replace('/login')
},
register() {
var vm=this;
this.$reqs.post('users/register', {
username: this.username,
password: this.password
}).then(function (res) {
if (res.data.status !== true) {
Toast(res.data.errMsg);
} else {
let instance = Toast('注册成功,请登录!');
setTimeout(() => {
instance.close();
vm.$router.replace('/login');
}, 2000);
}
})
}
}
}
</script>
<style scoped>
/*同样的style文件 大家自由发挥,也可以去我的github上看源码*/
</style>
这里没什么好说的,只有一个将this绑定到vm上,为了能在ajax中取到vue实例中的data
前端这里使用了mint-ui,可以查看文档
mint-ui官方文档
项目后端:
项目中使用mysql数据库,所以首先安装sql包并来一个数据库的配置.js
const mysql = require('mysql');
const HOST = '127.0.0.1';
const USER = 'root';
const PASS = '123456';
const DATABASE = '20160626';
const PORT = 3306
const db = mysql.createPool({
host: HOST,
user: USER,
password: PASS,
database: DATABASE,
port: PORT,
multipleStatements:true
});
module.exports={
db:db,
}
这里还可以继续封装数据库操作~~,但是一步一步来 先知暴露出去一个db供数据库使用,最后一行multipleStatements:true 是为了mysql能多个查询
然后在后端我们也要使用路由分发请求,这里新建一个文件夹router和index.js
module.exports = function (app) {
//模块
var login = require('./../www/users/login');
app.use('/users', login);
var news = require('./../www/news/newslist');
app.use('/news', news);
var comment = require('./../www/comment/comment');
app.use('/comments', comment);
....
}
在我们的后端入口文件app.js中
//引入路由模块并使用
const routes = require('./router/index');
routes(app);
这样我们就可以分发请求比如处理用户的注册和登陆,就可以都在login这个文件中进行
下面新建users文件夹,下面再建一个login.js文件
var express = require('express');
var router = express.Router();
const sqlhelper = require('./../../mysqlhandler');
const mdb = sqlhelper.db;
//处理登录的逻辑
router.post('/login', function (req, res) {
let userinfo = req.body;
var sql = `select * from userinfo where username="${userinfo.username}"`;
//需要验证用户名和密码
mdb.query(sql, function (err, data) {
if (err) {
console.log(err);
} else {
let result = validata(userinfo, data[0]);
res.send(result);
}
})
})
//处理注册的逻辑
router.post('/register', function (req, res) {
let userinfo = req.body;
//第一步 首先查看存在该用户
var sql = `select * from userinfo where username="${userinfo.username}"`;
mdb.query(sql, function (err, data) {
if (err) {
console.log(err);
} else {
if (data.length > 0) {
let result = {
status: false,
errMsg: '该用户已被注册'
}
res.send(result);
} else {
registerInfo(userinfo, res);
}
}
})
})
function registerInfo(userinfo, res) {
var sql = `insert into userinfo(username,userpass,usestate) values("${userinfo.username}","${userinfo.userpass}",0)`;
mdb.query(sql, function (err, data) {
if (err) {
console.log(err);
} else {
let result = {
status: true
}
res.send(result);
}
})
}
function validata(postuser, dbuser) {
//格式这里不做验证
let result = {};
if (postuser.password !== dbuser.userpass) {
result.status = false;
result.errMsg = '用户名密码不符';
} else {
result.status = true
}
return result;
}
module.exports = router;
这里的处理都做的非常简单,没有过多的验证,只当练手node和vue项目~,这样我们的项目就已经可以使用注册和登陆功能了~
数据库
到这里只设计了一张表,比较简单 只有 username userpass status 和id(主键),大家自由发挥~
更多推荐
已为社区贡献3条内容
所有评论(0)