vue+axios+php+MySql实现登录全栈开发

本文内容源自于本人的毕业设计项目的登录实现模块。在这个模块中开发思路如下：
源码地址: https://gitee.com/loveucrazy/travel.git
前端技术：vue-cli3.0脚手架，axios数据请求，element-ui框架搭登录界面。编辑器用的HBuilder，UI界面我用的是element-ui框架，在客户端实现登录名或密码是否为空的验证。若两者之一为空则提醒用户用户名和密码不能为空。反之用axios请求在本地部署的后端接口文档也就是那个php文件进行服务端验证用户名或密码是否正确，错误则提示错误，反之提示登录成功0.6秒后跳转路由。

后端技术：用php集合MySql实现服务器端验证，并返回数据
php运行环境搭建-Warmserver，编辑器我用的Notepad++，数据库用的是Warmserver里自带的MySql
Login.vue文件核心代码：

methods:{
			Login(params){
				this.$refs[params].validate((resp)=>{
					// 用validdate实现客户端异步验证,若条件为真进行服务器端验证，否则ERROR
					if(resp){
						this.$axios({
						    method: 'post',
						    url: '/Login.php',
						    headers: {
						        'Content-type': 'application/x-www-form-urlencoded'
						    },
						    params: {
						         'username':this.Form.username,
						         'password' : this.Form.password
						    }
						})
						.then((resp) => {
						    this.user=resp.data;
						    	console.log(resp)
						    	localStorage.userId=resp.data[0].password
								if(resp.data!=''){
									Toast('登录成功')
								}
						    	setTimeout(resp=> {
						    		this.$router.push('/')
						    	}, 600);
						})
						.catch((error) => {
						    Toast('登录失败！')
						   }
						);
					}
					else{alert('ERROR')}
				})
			}
		}

php文件的代码：

<?php
$db = new mysqli('localhost', 'root', '123456', 'tourism');
if(!mysqli_connect_errno())
{
	error_reporting(0);
	$user=array();
    $username = $_GET['username'];
    $password = $_GET['password'];
	$sql = "select username,password from user where username = 
	'$_GET[username]' and password = '$_GET[password]'";
	$result = $db->query($sql);
	$number = mysqli_num_rows($result);
	if ($number) {
			$row=mysqli_fetch_assoc($result);
			$user[]=$row;
	   echo (json_encode($user));
	} 
	else {
	   echo '用户名或密码错误';
	}
}
else {echo "无法连接数据库";}
?>

返回数据如图所示：
数据表如图所示：