本文详细介绍了如何使用Vue.js、Express和MySQL构建登录注册功能。项目采用vue-cli搭建，借助webpack管理，利用vue-router、v-model、v-show:class和sessionStorage实现页面交互和数据持久化。在登录注册过程中，通过Express处理HTTP请求并与MySQL数据库进行交互，验证用户信息。同时，文章还展示了首页、登录页和注册页的代码实现，以及登录注册时的逻辑判断。最后，给出了实际效果展示和项目运行提示。
vue.js+express+mysql实现登录注册
本次的项目练习中，在登录注册中，需要运用了vue-cli搭建项目，通过webpack静态模块打包工具对项目进行管理，通过express+mysql等依赖实现vue项目对本地数据库的连接，在登录注册功能中，通过vue-router\v-model\v-show:class\sessionstorage等相关功能对页面进行操作。
vue.js对数据库的增删改查操作，请看下面链接博客：
Vue.js + express +mysql实现数据库增删改查
1、项目目录文件夹如下图所示：
2、sessionstorage和localstorage
3、首页Home.vue
4、登录页Login.vue
5、注册页Register.vue
6、登录时用户名密码的判断
7、用户是否注册成功判断
8、效果展示
9、提示
1、项目目录文件夹如下图所示：
2、sessionstorage和localstorage
运用sessionstorage对用户登录成功的用户名进行保存，只有当页面关闭的情况下才会删除用户名数据，反正数据将一直保存。
保存数据
sessionStorage.setItem(“username”, this.username);
提取数据
this.username = sessionStorage.getItem(“username”);
localstorage操作的数据将永久保存，即使页面关闭也不会删除数据，除非手动删除数据。
保存数据
window.localStorage.setItem(“username”, this.username);
提取数据
this.username = window.localStorage.getItem(“username”);
3、首页Home.vue
在首页中，主要包括导航栏跟内容部分。在导航栏部分，包括图片logo，标题，登录注册按钮，还包括用户名显示，退出系统按钮。通过v-show对登录注册和退出按钮、用户名显示进行切换，如果登录成功则显示退出按钮和用户名，否则显示登录注册按钮。又用过v-show对登录注册页面进行切换而不用跳转更新整个页面。
<template>
<div>
<!-- 顶部导航栏-->
<div class="header">
<img :src="logo" alt="系统logo">
<span>医药管理信息系统</span>
<div class="header-input">
<input type="button" value="登录"
class="header-input-button"
v-show="flag===0"
@click="btnClick1(1)">
<input type="button" value="注册"
class="header-input-button"
v-show="flag===0"
@click="btnClick2(2)">
<span style="font-size: 30px; color: red;" v-show="flag===1">欢迎：{{this.username}}</span>
<input type="button" value="退出"
v-show="flag===1"
class="header-input-button">
</div>
</div>
<!-- 中间内容部分-->
<div class="main">
<button>顾客信息</button>
<button>药品信息</button>
<button>员工信息</button>
</div>
<div :class="{active: message===1 || message===2}">
<login v-show="message===1" @btnLogin="successLogin($event)"></login>
<register v-show="message===2" @btnRegister="successRegister($event)"></register>
</div>
</div>
</template>
<script>
import Login from "../Login/Login";
import Register from "../Register/Register";
export default {
name: "Home",
data(){
return {
logo: require('../../assets/logo.png'),
flag: 0,
message:0,
username: ''
}
},
components: {
Login,
Register
},
methods: {
btnClick1(index){
this.message=index
},
btnClick2(index){
this.message=index
},
successLogin(index){
this.flag=index;
this.message=0;
this.username = sessionStorage.getItem("username");
},
successRegister(index){
this.message=index;
}
}
}
</script>
4、登录页Login.vue
在登录页面中，通过v-model对数据进行双向绑定，通过判断用户输入的数据是否为空，为空则给出提示，不为空则跳转到数据库是否存在该账号密码，存在则登录成功，不存在则给出提示。如果登录成功，则保存用户名。
<template>
<div class="loginBody">
<div class="loginContent">
<div class="loginDiv">
<span>账号：</span>
<input type="text" v-model="username" placeholder="输入账号..."/>
</div>
<div class="loginDiv">
<span>密码：</span>
<input type="password" v-model="password" placeholder="输入密码...">
</div>
<button class="btnHover" @click="btnLogin()">登录</button>
</div>
</div>
</template>
<script>
export default {
name: "Login",
data(){
return {
username: '',
password: ''
}
},
methods:{
btnLogin(){
if(this.username === "" || this.password === ""){
window.alert("账号或密码不能为空！");
return;
}
var username = this.username;
var password = this.password;
this.$http.post('/api/user/queryUser', {
username: username,
password: password
},{}).then((response) => {
console.log(response);
if(response.body.length===0){
window.alert("账号或密码错误！");
}
else {
window.alert("登录成功！");
sessionStorage.setItem("username", this.username);
this.$emit('btnLogin', 1);
}
})
}
},
}
</script>
5、注册页Register.vue
与登录功能类似，注册功能也是需要对数据进行双向绑定和判断，如果注册成功则显示登录页面，否则系统给出提示。在注册过程中还不需要对用户名进行保存。
<template>
<div class="loginBody">
<div class="loginContent">
<div class="loginDiv">
<span>账 号：</span>
<input type="text" v-model="username" placeholder="输入账号..."/>
</div>
<div class="loginDiv">
<span>密 码：</span>
<input type="password" v-model="password" placeholder="输入密码...">
</div>
<div class="loginDiv">
<span>确认密码：</span>
<input type="password" v-model="password1" placeholder="确认密码...">
</div>
<button class="btnHover" @click="btnRegister()">注册</button>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import layer from 'vue-layer'
Vue.prototype.$layer = layer(Vue);
export default {
name: "Login",
data() {
return {
username: '',
password: '',
password1: ''
}
},
methods: {
btnRegister(){
if(this.username === "" || this.password === "" || this.password1 === ""){
window.alert("用户名或密码不能为空！");
return;
}
if(this.password !== this.password1){
window.alert("请再次确认密码！");
return;
}
var username = this.username;
var password = this.password;
this.$http.post('/api/user/addUser', {
username: username,
password: password
},{}).then((response) => {
console.log(response);
window.alert("注册成功！");
this.$emit("btnRegister", 1);
});
}
}
}
</script>
6、登录时用户名密码的判断
根据用户输入的数据，在数据库中查找，如果存在则返回对应的数据。
// 登录判断
router.post('/queryUser', (req, res) => {
var params = req.body;
var sql = " select * from user where username = ? and password = ?";
console.log(params);
conn.query(sql, [params.username,params.password], function(err, result) {
if (err) {
console.log(err);
}
if (result) {
console.log(result.length);
if(result.length === 0 ){
console.log("不存在该用户");
jsonWrite(res, result);
}
else {
console.log("存在该用户");
jsonWrite(res, result);
}
}
})
});
7、用户是否注册成功判断
// 增加用户接口
router.post('/addUser', (req, res) => {
var params = req.body;
var sql = 'insert into user(username, password) values (?, ?)';
console.log(params);
conn.query(sql, [params.username, params.password], function(err, result) {
if (err) {
console.log(err);
// console.log("params的值：",req.body.username,req.body.password);
}
if (result) {
console.log(result);
jsonWrite(res, result);
}
})
});
8、效果展示：
扫一扫
1197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
