다음 thinkphp프레임워크 튜토리얼 칼럼에서는 thinkphp5.1과 php 및 vue.js가 프런트엔드와 백엔드 분리 및 상호작용을 어떻게 구현하는지 소개합니다. 도움이 필요한 친구들에게 도움이 되기를 바랍니다!
주요 목표는 vue.js를 사용하여 프런트엔드에서 얻은 계정과 비밀번호를 백엔드로 전송한 다음 tp5.1 프레임워크를 사용하여 프런트엔드 값을 얻고 다음과 같은 일부 값을 반환하는 것입니다. 토큰. 그런 다음 localStorage.setItem()을 사용하여 프런트 엔드에 데이터를 저장합니다. 이후 방문에서는 localStorage.setItem()에 의해 저장된 값이 백그라운드로 반환되므로 백그라운드는 해당 값을 얻고, 이 값을 기반으로 데이터베이스의 값을 얻고, 최종적으로 값이 설정되었는지 여부를 판단합니다. 성공 또는 실패한 명령 또는 값이 프런트엔드로 반환됩니다. 프런트엔드는 획득된 값을 기반으로 연산이나 점프를 구현합니다.
1. 프론트엔드 login.html에서 vue.js 및 axios.js 호출을 준비합니다. Are You Hungry의 몇 가지 간단한 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>또한 구성 구성 파일 app.php
'default_return_type' => 'json',
database.php에서 데이터베이스에 연결
설정해야 하는 배경은 다음과 같습니다. 데이터를 사용하고 데이터를 조작합니다. 이는 주로 tp5.1의 요청 및 모델과 jwt의 사용을 사용합니다. 자세한 내용은 https://github.com/firebase/php-jwt
<?php
namespace app\index\controller;//表示放置位置
use think\Controller;//控制器基类
use \Firebase\JWT\JWT;//调用库 jwt 类
use think\Request;//请求对象类
use app\common\model\User 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 app\http\middleware;//文件位置
use think\Request;//请求
use \Firebase\JWT\JWT;//jwt
use app\common\model\User;//模型
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;//返回对应数据
}이때 간단한 프론트엔드와 백엔드 계정과 백엔드 분리는 비밀번호 입력 및 로그인이 완료되었습니다. 코드가 충분히 엄격하지 않아 최적화가 필요합니다.
위 내용은 thinkphp5.1은 프론트엔드와 백엔드 분리 및 php와 vue.js와의 상호작용을 실현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
