正文

Yii框架和Vue的完美结合完成前后端分离项目

IP云
IP云V管理员/6 阅读
08/12
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

背景说明

本文假设你对Yii和Vue都比较熟悉，至少都在项目里用过，另外笔者新人，以后不定时放一些干货，欢迎程序媛关注

Yii是一个PHP全端框架，典型的mvc的项目结构，后端接口都是一个控制器里放了很多的action，每个action都是一个接口，可以返回JSON，也可以render出一个html5页面，这些页面就是mvc的view，结构紧凑强耦合。

Vue是一个前端框架，主要思想就是SPA（单页面应用），组件化开发是其根本目的。

这两者怎么去结合使用才能达到工程的最易开发和最易维护是一个很值得思考的问题，小编结合项目需求，设计了一套利用这两者来构建前后端分离项目的架构

Yii项目结构

看一下项目目录的样子

这里有bapp、bmanager、bshare等等多个项目，每个项目里的文件结构是这样的

Vue项目结构

前后端分离思路

既然我们已经考虑前后端分离了，那么Yii里面的view层，我们就不需要了，类似于这些view的代码

return $this->render('baseinfo', ['phone' => $contact['mobilephone'], 'isdel' => $isdel]);

var host = "<?= Yii::$app->params['bUrl']?>";var mobilephone="<?php echo $phone ?>";var isdel="<?php echo $isdel ?>";

<div class="base"><span class="name"><?php echo $name; ?></span>&ensp;<span class="mobile"><?php echo $mobilephone; ?></span></div><div class="mark">备注:<?php echo $notes; ?></div>

这些看上去非常丑陋的代码将不允许出现在项目里。Vue是一个完整的前端SPA项目，放在服务器上可以独立运行。那么我们考虑把这个项目打包放在bapp的web目录下（下面以bapp项目为案例说明），因为这个web目录就是Yii里边对应站点的根目录，（例如bapp项目的域名为bapp.stock.com,在web目录下放一张图片，那么这张图片的远程路径就该是http://bapp.stock.com/IMG_1383.JPG）

这里有一个关键的地方，我们整个项目叫做bapp，那么Yii里面的后端项目取名就叫做bapp，vue前端项目取名也叫bapp，这样能保持对应，便于理解，这是一个要遵守的规范。

这个是vue成功build之后的文件，存放在web/bapp下，对于一个vue-cli初始化构造的项目，现在就可以使用url：http://bapp.stock.com/bapp来访问你的前端项目了

vue-yii架构完整实现

上面的思路基本就实现了一个简单的前后端分离过程。实际项目中我们还有很多需要规范和注意的地方。下面依据我们需要解决的三个主要问题来进一步设计这个架构

  • vue的build项目自动放在yii的web目录下

这一点对于这种前后端分离的开发模式很重要，vue-cli默认的build路径是放在dist下，现在必须要让build的文件自动放在其他路径下的yii的web下，这里就需要修改默认的配置了

由于vue项目默认是存放在站点的根目录下，也就是编译后生成的所有文件必须放在trunk/bapp/web下，这个目录原本有一些其他文件，最好不要直接扔过去，建一个新目录trunk/bapp/web/bapp来存放这些文件将会更加清晰。这样你会发现一个新问题，你build的项目放在web/bapp下会无法运行，会找不到文件路径。这就要修改vue的运行根目录，用来解决vue项目在子站点里无法运行的问题，很简单，修改路由的base即可

  • 开发环境生产环境部署怎么解决

Vue项目的config下有dev.env.js、test.env.js、prod.env.js，你可以在这里设置你的APIURL,请求接口的地方使用process.env.APIURL来获取，这种模式下，我们需要在不同环境发布不同的webapp包，类似于Android和ios的app开发模式。这种方法在我们这并不可取，因为PHP在各个环境里已经配置了站点，vue项目在php项目下，所以我们要从php来获取当前的运行环境，这才显示出我们这种架构的易维护呀。具体思路就是在vue里解析当前的url获取环境了。

在vue的main.js里来做这个工作

利用document.location.href获取运行环境，把api站点存在vuex里，需要请求接口的地方从vuex里直接取，上面代码里解析完apiurl之后有一个解析路由的过程，这个下面再讲

  • 原生客户端怎么去请求vue页面

vue项目可能会包含很多页面，有的页面可能是一个较大的模块，比如商城系统的所有页面，有的页面可能就是一个用户须知什么的单页面，客户端浏览器在调用这些页面需要按照模块来调用。这里就要求vue项目在开发过程中必须按照不同模块在route下建立不同路由的规范去做，这样既有利于前端代码碎片化，也有利于客户端调用更加方便。

在后端控制器里trunk/bapp/controllers/里我有一个BuserController的控制器，在这个控制器里添加了一个action

这个action非常重要，是前后端分离的关键

这个action非常重要，是前后端分离的关键

这个action非常重要，是前后端分离的关键

这个action名字也需要遵循规范都叫做webapp,在后端其他项目里，比如我的工程里还有capp项目，我也可以在capp下的CuserController里添加这个webapp的action。

$url = Yii::$app->params['bUrl'] . "bapp/#/{$page}?route={$route}&{$query}&" . $this->sessionQueryString();

其中这行代码比较关键，这个url其实就是bapp/web/bapp的vue项目的地址，

Yii::$app->params['bUrl']

是配置在PHP里的域名地址

bapp/#/{$page}

是vue的hash路由的调用方式，具体可参看vue官方文档

$this->sessionQueryString();

是取的sessionid，这个读者可以改成自己系统里的登录标记

客户端显示的所有h5都通过这个接口获取，对这个接口的参数有必要重点说明，webapp接收三个入参

  1. route（必传）

route参数由前端定义，比如前端有一个商城的模块叫做mall，那么vue的router下应该会有一个mall.js，里面管理所有商城的页面分发，客户端想显示mall的页面就在调用webapp时用route=mall，再比如前端有一个活动页面的模块activity，那么vue的router下会有一个activity.js来管理所有活动页面的分发，客户端要显示活动页面必须传route=activity

2.page（非必传）

对于像mall这样的完整模块，客户端可能只需要显示mall的首页就可以了，那么page就不需要传，自动进入到vue的router/mall.js的默认页面，如果像活动模块，这里面的页面可能都不关联，可能有activity1、activity2、acitivity3等页面，客户端想显示activity2页面，就必须传page=activity2

3.addition（非必传）

用addition传的是附加参数，客户端在调用某个页面时，可能会带上一些用户信息，比如手机号，token，session等，这些参数都放在addition中

原生客户端通过get或post都可以调用这个接口取到页面，简单说下两种调用方式区别

GET：这里需要注意addition这个附加参数怎么拼到url里，例如有这种json

{

"mobile":"18512331232",

"info":{

"name":"jimmy",

"sex":"mail"

}

}

二维数组的get传参很多同学都不知道，注意一下

http://xxx.xxx?addition[mobile]=18512331232&addition[info][name]=jimmy&addition[info][sex]=mail

这个地址在原生的webview里直接loadUrl即可

POST：所有参数都放在post体里边，接口返回的是最终需要显示的h5页面的代码，原生在取到这个h5代码之后

webview需要loadHtml显示

总结一下规范

  1. vue项目和yii项目的命名必须一致

  2. vue的build项目必须放在yii的web下的新建文件下，文件夹名称必须和项目名称相同

  3. yii项目控制器里建立Webapp的action作为客户端访问H5页面的唯一入口

  4. vue的路由需要按照模块名称建立路由文件

结束语

后端代码核心就是actionWebapp，

前端代码给大家参考一下：https://github.com/ahuchjm/Vue_Bapp.git

祝生活愉快！！！