ok,有了基础的环境,就可以写功能了,首先要实现的功能就是 登陆验证,这个时候我们还需要建一个数据库,我在本地建了个数据库,添加了一个简单的表 user:
user 表的 name 字段是用来存储用户的名字的,而 username 和 password 则是对应的账号密码,考虑到大多数人反感填太多注册信息,只留了个手机号的字段,为之后可能存在的逻辑做预留。
之前细心的童鞋可能发现我用了两个域名,yii.com 和 vue.com ,于是在愉快地 ajax 通讯前还需要解决一下跨域问题。
利用 yii2 的 Cors过滤器:
home/controllers/SiteController.php
<?php
namespace app\home\controllers;
use yii\filters\Cors;
use yii\helpers\ArrayHelper;
use yii\web\Controller;
class SiteController extends Controller
{
public $defaultAction = 'test';
public function behaviors()
{
return ArrayHelper::merge([
[
'class' => Cors::className(),
'cors' => [
'Origin' => ['http://vue.com'],
'Access-Control-Allow-Credentials'=> true,
],
],
], parent::behaviors());
}
public function actionTest(){
echo 'Hello World';
}
}
如果对 yii2 过滤器还不了解的点这里,至于这里用到的 ArrayHelper 助手类,也建议了解一下。
ok,后端搞定了,前端也要配合用跨域提交,我在 src/assets/js/ 添加了一个公用的 js 文件 public.js
import $ from 'jquery';
export const $post = (url, data)=>{
return $.ajax({
url: url,
data: data,
type: 'post',
crossDomain: true,
xhrFields: {
withCredentials: true
}
})
}
export const $get = (url) => {
return $.ajax({
url: url,
type: 'get',
crossDomain: true,
xhrFields: {
withCredentials: true
}
})
}
然后在 app.vue 中引用:
<template>
<div id="app">
<button @click='post'>点击</button>
</div>
</template>
<script>
import {$post, $get} from './assets/js/public'
export default {
name: 'app',
methods: {
post (){
$post('http://yii.com', {data: 'msg'})
.then(console.log)
}
}
}
</script>
点击效果如图,完美解决跨域问题。
跨域解决了,还需要配置一下数据库,在yii config/web.php 中加入数据库组件:
<?php
$params = require(__DIR__ . '/params.php');
$db = require(__DIR__ . '/db.php');
$config = [
'id' => 'demo', // 应用id
'params' => $params, // Yii::$app->params 的值
'language' => 'zh-CN', // 语言中文
'basePath' => dirname(__DIR__), //
'bootstrap' => [], //
'defaultRoute' =>'home', // 默认路由
'components' => [
/* 请求处理组件 */
'request' => [
'enableCookieValidation' => false,
'enableCsrfValidation' => false,
],
/* 路由美化组件 */
'urlManager' => [
'enablePrettyUrl' => true,
'showScriptName' => false,
],
/* 数据库组件 */
'db' => $db,
],
'modules' => [
/* home模块 */
'home' => 'app\home\module'
]
];
return $config;
真正的数据库配置在同目录 db.php 中:
<?php
return [
'class' => 'yii\db\Connection',
'dsn' => 'mysql:host=localhost;dbname=test',
'username' => 'root',
'password' => 'root',
'charset' => 'utf8',
];
至于 request 组件的配置是关闭 yii2 默认的 表单验证和cookie验证的,这两个在前后端分离的情况下没啥用,不关则会影响 ajax 。数据库配置好就要建 AR 类了,这个等明天再讲好了。