一个 Yii + vue 项目（3）解决跨域、数据库配置

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 类了，这个等明天再讲好了。

一个 Yii + vue 项目（3） 解决跨域、数据库配置

猜你喜欢

一个 Yii + vue 项目（3）解决跨域、数据库配置