vue-cli 登录注册的实现

本文章给大家介绍使用vue.js完成简单的登录注册功能

功能概览

未登录状态

登录界面，登录用户不存在提示用户进行注册

前往注册页面进行注册注册成功后自动跳转到浏览博客页面

可以看到这时候数据表中已有数据

登录测试：
登录用户密码错误测试

登录成功测试

点击退出登录按钮，实际上就是删除了cookie，界面就会恢复未登录状态。

代码展示：

首先设置公共方法cookie，当用户登录成功时，会保存cookie

/*用export把方法暴露出来*/
/*设置cookie*/
export function setCookie(c_name,value,expire) {var date=new Date()date.setSeconds(date.getSeconds()+expire)document.cookie=c_name+ "="+escape(value)+"; expires="+date.toGMTString()console.log(document.cookie)
}
/*获取cookie*/
export function getCookie(c_name){if (document.cookie.length>0){let c_start=document.cookie.indexOf(c_name + "=")if (c_start!=-1){ c_start=c_start + c_name.length+1 let c_end=document.cookie.indexOf(";",c_start)if (c_end==-1) c_end=document.cookie.lengthreturn unescape(document.cookie.substring(c_start,c_end))} }return ""
}
/*删除cookie*/
export function delCookie(c_name){setCookie(c_name, "", -1)
}

登录功能代码，引入cookie，使用vue-resource将数据post到后台

<script>
import {setCookie,getCookie} from "../assets/js/cookie.js"
export default {name:"Login",props:['islogin'],data(){return{username:'',password:'',tishi:'',showTishi:false,currentState:this.islogin,current:false}},mounted(){if(getCookie('username')){this.$router.push({path:'/'})window.location.reload();}},methods:{login:function(){if(this.username == '' && this.password == ''){this.showTishi=true,this.tishi="请输入用户名和密码"}else if(this.username !== '' && this.password == ''){this.showTishi=true,this.tishi="请输入密码"}else if(this.username =='' && this.password !==''){this.showTishi=true,this.tishi="请输入用户名" }else{var data={username:this.username,password:this.password}this.$http.post('http://localhost/blogdata/login.php',data).then((res)=>{console.log(res);if(res.data == 3){   //这里的data是后台返回的数据  要在后台编写this.showTishi=true,this.tishi="请先注册！"}else if(res.data == 1){setCookie('username',this.username,1000*60)setTimeout(function(){this.$router.push({ path:'/'})window.location.reload();}.bind(this),1000)// window.location.reload();}else{this.showTishi=true,this.tishi="密码错误！"}})}}}
}
</script>

注册功能代码，实际上与登录功能是类似的

<script>
import {setCookie,getCookie} from "../assets/js/cookie.js"
export default {name:"Register",data(){return{username:'',password:'',tishi:'',showTishi:false}},methods:{register:function(){if(this.username=='' && this.password==''){this.showTishi=true,this.tishi="请输入用户名和密码"}else if(this.username!=='' && this.password==''){this.showTishi=true,this.tishi="请输入密码"}else if(this.username=='' && this.password!==''){this.showTishi=true,this.tishi="请输入用户名"}else if(this.username !=='' && this.password !== ''){let data={'username':this.username,'password':this.password}this.$http.post("http://localhost/blogdata/register.php",data).then((res)=>{console.log(res);if(res.data == 2){   //这里的data是后台返回的数据  要在后台编写this.showTishi=true,this.tishi="该用户名已存在！"}else if(res.data == 1){setCookie('username',this.username,1000*60)setTimeout(function(){this.$router.push({ path:'/'})window.location.reload();}.bind(this),1000)// window.location.reload();}else{this.showTishi=true,this.tishi="注册失败！"}})}}}
}
</script>

附上登录注册按钮和登录成功后用户名退出按钮的显示与否的控制代码，使用的是 v-if和v-else 需要转化时只要改变“ok”的true false就可以啦

<nav><ul id="blogcenter"><li><router-link to="/" exact>博客</router-link><router-link to="/add" exact>写博客</router-link></li></ul><div id="registerLogin" v-if='ok'><router-link to="/login" exact>登录</router-link><router-link to="/register" exact>注册</router-link></div><div id="registerLogin" v-else><span>{{name}}</span> <span @click="quit" type='button'>退出登录</span></div></nav>

最后就是php接口的代码啦，使用xampp很方便，里面有自带的数据库管理库
登录接口代码

<?php
$request_body = file_get_contents('php://input');
$data = json_decode($request_body,true);     // 接收前台传过来的数据$username=$data['username'];
$password=$data['password'];// # 创建连接$mysqli=new mysqli("localhost","root","","people");#设置编码格式$mysqli->query("set names utf8");if($mysqli->connect_errno){die("数据库连接失败:".$mysqli->connect_errno);}else{$sql2="select username from user where username='$username'";$result2=$mysqli->query($sql2);   // $number=mysqli_num_rows($result);$number2=mysqli_num_rows($result2);if($number2){$sql="select username,password from user where username='$username' and password='$password'";$result=$mysqli->query($sql);   //这里的sql语句应该是检测数据库中是否存在用户输入的用户名和密码$number=mysqli_num_rows($result);echo $number;}else{echo 3;}   }$mysqli->close();
?>

注册接口代码

<?php
$request_body = file_get_contents('php://input');
$data2 = json_decode($request_body,true); // $data['content']$username=$data2['username'];
$password=$data2['password'];// # 创建连接$mysqli=new mysqli("localhost","root","","people");#设置编码格式$mysqli->query("set names utf8");if($mysqli->connect_errno){// die($mysqli->connect_error);die("数据库连接失败:".$mysqli->connect_errno);}else{$sql1="select username from user where username='$username'";$result1=$mysqli->query($sql1);$number=mysqli_num_rows($result1);if($number){echo 2;    //用户名已存在} else{$sql2="INSERT INTO `user` (`id`,`username`,`password`) VALUES (NULL,'$username','$password')";$result2=$mysqli->query($sql2);   echo $result2;    // 1}}$mysqli->close();
?>

好啦！到这里就结束了基本的登录注册功能的实现，小可爱点个赞哦！

参考文章链接

vue-cli 登录注册的实现相关推荐

vue+elementui 登录注册页面实现
1.实现效果 2. 代码实现 2.1使用elementUI文档中Tabs标签页 2.2在components中新建两个文件 login.vue register.vue ...
Vue实现登录注册功能
1.效果展示 2.注意:vue登录注册用到了 Vuex + localstorage+router等,使用了vue2,创建项目 3.先是在router中的index.js中写路由配置 import V ...
Vue登录注册，并保持登录状态
关于vue登录注册,并保持登录状态,是vue玩家必经之路,网上也有很多的解决方法,但是有一些太过于复杂,新手可能会看的一脸懵逼,现在给大家介绍一种我自己写项目在用而且并不难理解的一种方法. 项目中有一 ...
Vue登录注册，并保持登录状态 1
关于vue登录注册,并保持登录状态,是vue玩家必经之路,网上也有很多的解决方法,但是有一些太过于复杂,新手可能会看的一脸懵逼,现在给大家介绍一种我自己写项目在用而且并不难理解的一种方法. 项目中有一 ...
Vue登录注册，并保存登录状态
项目中有一些路由是需要登录才可以进入的,比如首页,个人中心等等有一些路由是不需要登录就可以进入,比如登录页,注册页,忘记密码等等那如何判断路由是否需要登录呢? 在router.js中添加meta区 ...
快速上手Springboot项目（登录注册保姆级教程）
本文章对SpringBoot开发后端项目结构做了简单介绍,并示范了使用SpringBoot+MySQL实现登录的后端功能,与本博客的另一篇文章 Vue 实现登录注册功能(前后端分离完整案例) | Ma ...
22/10/08 vue2项目，登录注册路由守卫
写在router/index.js文件内 //导航守卫,前置处理 router.beforeEach((to, from, next) => {let isAuthenticated = !!l ...
基于 Vue + Koa2 + MongoDB + Redis 实现一个完整的登录注册
项目地址:https://github.com/caochangkui/vue-element-responsive-demo/tree/login-register 通过 vue-cli3.0 + ...
cli3解决 ie11语法错误 vue_基于 Vue + Koa2 + MongoDB + Redis 实现一个完整的登录注册...
项目地址:https://github.com/caochangkui/vue-element-responsive-demo/tree/login-register 通过 vue-cli3.0 + ...
antd vue关闭模态对话框_Vue.extend 登录注册模态框
模态框是我们 UI 控件中一个很重要的组件,使用场景有很多种,我们在 Vue 组件中创建模态框组件而用到的一个知识点是利用 Vue.extend 来创建.文档中的解释是在最近在做一个常用的类似下面 ...

vue-cli 登录注册的实现

功能概览

代码展示：

vue-cli 登录注册的实现相关推荐

最新文章

热门文章