如何利用vue和php做前后端分离开发

发布网友发布时间：2022-04-21 13:45

共2个回答

懂视网时间：2022-05-10 05:47

下面由thinkphp框架教程栏目给大家介绍thinkphp5.1和php、vue.js实现前后端分离和交互，希望对需要的朋友有所帮助！

主要目标是使用vue.js把前端获取的账号和密码传到后台，然后使用tp5.1框架获取前端的值，并返回token等一些值。然后使用localStorage.setItem()把数据存入前端。在之后的访问中，把localStorage.setItem()保存的值返回到后台，使后台获取相应的值，并根据这个值获取数据库的值，并判断这个值是否成立，最后把成功或者失败的指令或者值返回到前端。前端根据获得的值实现某项操作，或者跳转。

1.准备工作，在前端login.html调用vue.js和axios.js。这里还调用了饿了吗的一些简单ui的使用。

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>//vue.js的使用
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>//axios的使用

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>//饿了吗ui js和css的调用。

vue.js和axios.js的详细使用。详细可看https://cn.vuejs.org/v2/guide/ vue.js教程和https://www.kancloud.cn/yunye/axios/234845

axios.js的教程。前端login.html传值代码如下：

<script>//返回信息到前端
		
			const app = new Vue({
				el: '#app',//对应使用id="app"获取信息。
				data() {
					return {
						admin: "",
						password: "",
						dd:"",//定义是三个变量初始化都为空可在id="app"的页面编写{{admin}}返回admin的值
					}
				},
				methods: {//参数的传递
					login: function () {
						var $this = this;
						console.log("登录触发");//打印返回
						axios({
						method: 'post',
						url: 'http://127.0.0.1/xiangbb/tp5/public/user',
						data: {
							admin: this.admin,
							password: this.password
						}
						})//使用axios根据地址把data的数组值根据post进行传输，this.admin和this.password是定义<input v-model="admin">获取
						.then(function (response) {//成功400或401 执行。
							//$this.dd = response.data;//获取后台数据
							//console.log(response.data.access_token);
							localStorage.setItem('token', response.data.access_token);//本地存储token值
							window.location.href="../index/index.html";//跳转页面
						})
						.catch(function (error) {
							$this.$message.error('账号或密码错误！');//失败，出现错误，返回弹窗
							console.log(error);

						});

					}
				},
				mounted() {//在模板渲染成html后调用,这里未使用，配套的created在模板渲染成html前调用
					
				}
			})
		</script>

还需设置config配置文件 app.php

'default_return_type' => 'json',

在database.php连接数据库

下面是后台获取数据，对数据进行操作。这里面主要使用了tp5.1的请求和模型，还有就是对jwt的使用，详细看https://github.com/firebase/php-jwt

<?php
namespace appindexcontroller;//表示放置位置
use thinkController;//控制器基类
use FirebaseJWTJWT;//调用库 jwt 类
use thinkRequest;//请求对象类
use appcommonmodelUser as Muser;//模型
class User extends Controller
{
 public function user()
 {
 
 //echo $_COOKIE["user"];//前端传参到这里
 $admin=input('post.admin');
 $password=input('post.password');//获取前端
 $user=db('user')->where('admin',$admin)->where('password',$password)->find();//删选
 //dump($user);
 if($user)//使用jwt方法
 {
  $key = config("app.jwt_key");//key值，唯一保密,在config的app下的jwt_key
  $token = array(
  "iss" => "http://127.0.0.1/xiangbb/tp5/public/user",// 签发地址
  "aud" => "http://127.0.0.1/xiangbb/qian/login/login.html#",//面向对象地址
  "iat" => time(),//创建时间
  "nbf" => time(),//生效时间
  'exp' => time() + 3600, //过期时间-10min
  'sub' => $user['id'],//传递的id值
  );
  
  $jwt = JWT::encode($token, $key);//加密
  //$decoded = JWT::decode($jwt, $key, array('HS256'));//解密
  return [
  "access_token" => $jwt,//加密数据
  "token_type" => "Bearer",//类别
  "expires_in" => 3600,// 过期时间
  ];//返回数组

 }
 return response()->code(401);//如找不到 返回401指令
 
 }
}

后台User.php根据获取的数据跟数据库进行比对，但账号密码正确时，返回一串带有那个账户的唯一id和别的数据返回到前端，前端保存该值，并使用该值获取该用户的相应数据并显示在前端。一样，把那几个js调用，然后js代码如下：

	<script>
		const app = new Vue({
				el: '#app',
				data() {
					return {
						
						token: "",
						http: {},
						}
						
						
					},
				methods: {
				},
				created() {
				
					this.token = localStorage.getItem('token');//在登录页面验证成功而保存的token值，进行获取
					this.http = axios.create({//整理token的值
							
							baseURL: 'http://127.0.0.1/xiangbb/tp5/public/',
							timeout: 5000,
							headers: {'Authorization': "Bearer "+this.token}
					});
					if(!this.token)//若this.token不存在时返回登录页面
					{
						window.location.href="../login/login.html";
					}
					else
					{
						this.http.get('/user')//调用上面的http，把值传回后台
						.then(function (response) {
							console.log(response);
						})
						.catch(function (error) {//token错误返回登录页面
							window.location.href="../login/login.html";
							console.log(error);
						});
					}
				}
			})
	</script>

路由route.php接收，并跳转到中间件，对传递的值进行验证，以此判断是否进入控制器，进行以后的操作，使用中间件，方便以后判定不需要在控制器每个函数上都写上方法。

Route::rule('user','index/user/show','GET')->middleware('verify_user');//路由接收，跳转中间件判断

中间件VerifyUser.php代码如下：

<?php

namespace apphttpmiddleware;//文件位置
use thinkRequest;//请求
use FirebaseJWTJWT;//jwt
use appcommonmodelUser;//模型
class VerifyUser
{
 public function handle(Request $request, Closure $next)//使用模型
 {
 $Authorization = $request->header('Authorization');//获取前端传递的值
 if(!isset($Authorization)) return response()->code(401);//检测变量是否存在，不存在返回401
 $key =config("app.jwt_key");//key值 定义在config下的app的jwt_key
 $token_type = explode(" ",$Authorization)[0];//根据空格隔开获取第零个字符串
 $token = explode(" ",$Authorization)[1];//根据空格隔开获取第一个字符串
 
 if($token_type == 'Bearer')//判断$token_type是否正确
 {
  
  try {
  $decoded = JWT::decode($token, $key, array('HS256'));//解密
  $request->user = $user = User::get($decoded->sub);//获取解密后的用户id
  if(!$user||$decoded->exp<time())//如果id不存在或者时间超出，返回401
   return response()->code(401);
  }catch(Exception $e) { //捕获异常，返回401，可能解密失败，$e可返回失败原因
  return response()->code(401);
  }
 }
 else {//$token_type错误也返回401
  return response()->code(401);
 }
 return $next($request);//当没有执行401时，执行到下一个请求，可能有多个中间件或者路由。
 }
 
}

当中间件执行完，则跳转到控制器User.php

 public function show(Request $request)//请求，依赖注入
 {
 $user = Muser::get($request->user['id']);// 模型，获取数据库id相同的表数据，默认表名为Muser的原名 User
 return $user;//返回对应数据
 }

至此，一个简单的关于账号密码输入登陆的前后端分离制作好了，代码中应该还不够严谨，还需要优化。

热心网友时间：2022-05-10 02:55

你都说了是前后端分离，就不需要把vue嵌套php代码里。前后端用纯接*换数据，找后端同事定义好restful接口，清楚返回的数据结构，接下来前端这块你就可以自己mock数据进行开发了。

至于如何搭建环境，看你也是个新手，还是直接用vue-cli，基本满足你的开发需求。记得打包的时候，npm run build一下，打包好的文件夹就是后台那边需要的。

前端一点都不懂后台，这是简直不可想象的，劝你有时间还是要了解下后台的基本概念。
这样解决就可以了，简单粗暴，个人建议还是去后盾网去经常看看教学视频学习学习吧