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

ok，有了基础的环境，就可以写功能了，首先要实现的功能就是 登陆验证，这个时候我们还需要建一个数据库，我在本地建了个数据库，添加了一个简单的表 user：

user 表的 name 字段是用来存储用户的名字的，而 username 和 password 则是对应的账号密码，考虑到大多数人反感填太多注册信息，只留了个手机号的字段，为之后可能存在的逻辑做预留。
之前细心的童鞋可能发现我用了两个域名，yii.com 和 vue.com ，于是在愉快地 ajax 通讯前还需要解决一下跨域问题。
利用 yii2 的 Cors过滤器：
home/controllers/SiteController.php

<?phpnamespace 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 中：

<?phpreturn [    'class' => 'yii\db\Connection',    'dsn' => 'mysql:host=localhost;dbname=test',    'username' => 'root',    'password' => 'root',    'charset' => 'utf8',];

至于 request 组件的配置是关闭 yii2 默认的 表单验证和cookie验证的，这两个在前后端分离的情况下没啥用，不关则会影响 ajax 。数据库配置好就要建 AR 类了，这个等明天再讲好了。