Vue连接后台账号登陆

阳光穿透心脏的1/2处 2021-09-17 02:56 384阅读 0赞

# Vue连接后台账号登陆 #

以下是我的学习总结，由于时间仓促省略了部分操作、、、  
**要求：输入框输入账号和密码进行数据库匹配，正确则跳转至其他页面，失败则不跳转。**  
![在这里插入图片描述][20181127154010189.png]![在这里插入图片描述][20181127154007310.png]

需要工具/软件：vue-router、vue-resource、XAMPP  
  
  
**首先安装vue-router、vue-resource：  
代码：  
cnpm install vue-resource –save  
cnpm install vue-router –save  
备注：在main.js引用**

![在这里插入图片描述][20181127154040935.png]  
import VueRouter from ‘vue-router’  
import VueResource from ‘vue-resource’;  
Vue.use(VueResource);

## 下面是我绘画的一个示意图，为表思路清晰： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]

# 1: Vue登陆页面 #

第一步：在main.js插入以下代码  
![在这里插入图片描述][20181127155300548.png]

Vue.http.interceptors.push(function(request, next) {
    　	//拦截器
    	// 跨域携带cookie
     	request.credentials = true;
    	next();
    });

第二步：新建Vue文件  
备注：就是登陆页面，因为是用来做测试所以外观比较简单

![在这里插入图片描述][20181127155449482.png]

第三步：连接数据库  
备注：登陆页面的数据要传给数据库进行匹配

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 1]

methods:{
    			submit(){
    				var str = {
    					name:this.name,
    					password:this.password
    				};
    				// 使用post方式数据传输
    				this.$http.post("http://localhost:8005/phpvue/admin.php",str,{emulateJSON:true}).then((succes)=>{
    					// console.log(succes);
    					let str=succes.body;
    					// 登陆成功则跳转index页面，index前提是要加载到路由
    					if(str=="登陆成功"){
    						this.$router.push({path: '/index'});
    					}
    					// 失败则不跳转
    					else{
    						alert("用户或密码错误");
    					}
    				},(err)=>{
    					console.log(err);
    				})
    			}
    		}

# 2：PHP连接数据库 #

备注：我是使用模块式的连接方式，图片一是连接该数据库，作为一个模板。只需新建php文件在头部使用inclide_once(“路径”)代码引用模板就可以了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 2]

<?php
    	//header() 函数向客户端发送原始的 HTTP 报头
    	header('Access-Control-Allow-Origin: http://localhost:8080');			//跨域资源访问
    	header("Content-type: text/html; charset=utf-8");	//将该页面强制转化成utf-8格式
    	header("Access-Control-Allow-Methods:*");
    	header("Access-Control-Allow-Headers:x-requeseted-with,content-type");
    	header('Access-Control-Allow-Credentials: true');
    	function noc(){
    		$url = "localhost";//连接数据库的地址					//定义变量
    		$user = "root"; //账号								//定义变量
    		$password = "";//密码								//定义变量		
    		$dbdata="mycms";//数据库名称							//定义变量
    		$dbms="mysql";										//定义变量
    		$dsn="$dbms:host=$url;dbname=$dbdata";				//定义变量
    		//try{}catch(){}语法是异常处理
    		try{
    			$dbh=new PDO($dsn,$user,$password);				//为php对象
    			$dbh->query("set names utf8");					
    		}catch(PDOException $e){
    			die("错误");
    			exit;
    		}//PDO对象介绍：PHP 数据对象 （PDO） 扩展为PHP访问数据库定义了一个轻量级的一致接口。PDO 提供了一个数据访问抽象层，这意味着，不管使用哪种数据库，都可以用相同的函数（方法）来查询和获取数据。
    		return $dbh;
    	}
    	$dbh=noc();	//函数noc()负值给$dbh
    
    ?>

备注：图片二的第二行session_start()代码后面是做了登陆成功后的，所跳转到的页面多少分钟后再次刷新页面则回到登录页面，需要重新登录的操作。
    由于时间问题，在下一篇发。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 3]

<?php
    	session_start();	//传输成功才能到session
    	include_once("../Include/connect.php");
    	$name=$_POST['name'];
    	$password=$_POST['password'];
    	// 不能传输数据
    	// echo json_encode($_POST);
    	$sql="SELECT * FROM admin WHERE name = '$name' AND password = '$password'";
    	//数据库指令
    	$query=$dbh->prepare($sql);
    	$query->execute();
    	$result=$query->fetchAll(PDO::FETCH_ASSOC);
    	$dbh=null;
    	// 进行登陆才执行下面代码
    	if($result!=[]){
    		$_SESSION['name']=$name;
    		// 设置时间
    		$_SESSION['time1']=time();
    		echo "登陆成功";
    
    	}
    	else{
    		echo "登陆失败";
    	}
    
    
    
    ?>

[20181127154010189.png]: https://img-blog.csdnimg.cn/20181127154010189.png
[20181127154007310.png]: /images/20210724/c1a49dcc30a048d891f352598dbe3c0f.png
[20181127154040935.png]: /images/20210724/1b156a3187f54852b0cb8c974c7eae04.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]: /images/20210724/ac415997fecd4f86b5c5b29e4a369092.png
[20181127155300548.png]: /images/20210724/e344094429414eaba784bb256032012f.png
[20181127155449482.png]: /images/20210724/9671815511544beea2a8743c3f08fdb2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 1]: /images/20210724/f0e6499d03b343388f1ddaae029d2dfc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 2]: /images/20210724/ae7cdf97f9cb4922afd6e6d2feedffdc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 3]: /images/20210724/9798f2497863464e998df3b48139b949.png