background note
This article assumes that you are familiar with both Yii and Vue, at least they have been used in the project. In addition, the author is a newcomer, and I will post some dry goods from time to time in the future. Program Yuan is welcome to pay attention.
Yii is a PHP full-end framework. The typical project structure of mvc. The back-end interface is a controller with many actions. Each action is an interface that can return JSON or render an html5 page. These pages are the views of mvc, which are compact and strongly coupled.
Vue is a front-end framework, the main idea is SPA (single page application), and component development is its fundamental purpose.
How to combine the two to achieve the easiest development and easiest maintenance of the project is a question worth thinking about. The editor combines the project requirements and designs a set of architectures that use the two to build front-end and back-end separation projects
Yii project structure
Take a look at what the project directory looks like
There are multiple projects such as bapp, bmanager, bshare, etc. The file structure in each project is like this
Vue project structure
Front-end and back-end separation ideas
Now that we have considered the front-end and back-end separation, we don't need the view layer in Yii, similar to the code of these views
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> <span class="mobile"><?php echo $mobilephone; ?></span></div><div class="mark">备注:<?php echo $notes; ?></div>
This ugly looking code will not be allowed in the project. Vue is a complete front-end SPA project that can be run independently on the server. Then we consider packaging this project in the web directory of bapp (the bapp project is used as an example below), because this web directory is the root directory of the corresponding site in Yii, (for example, the domain name of the bapp project is bapp.stock.com, Put a picture in the web directory, then the remote path of this picture should be http://bapp.stock.com/IMG_1383.JPG)
There is a key point here. Our entire project is called bapp, then the back-end project in Yii is named bapp, and the Vue front-end project is also named bapp, so that it can be kept corresponding and easy to understand. This is a specification to abide by. .
This is the file after vue has been successfully built, which is stored under web/bapp. For a vue-cli initialized project, you can now use the url: http://bapp.stock.com/bapp to access your front-end project
Complete implementation of vue-yii architecture
The above idea basically implements a simple front-end and back-end separation process. In the actual project, we still have a lot of places that need to be standardized and paid attention to. Let's further design this architecture based on the three main problems we need to solve
-
The build project of vue is automatically placed in the web directory of yii
This is very important for this development mode with front-end and back-end separation. The default build path of vue-cli is placed under dist. Now, the build files must be automatically placed under the yii web under other paths. Here you need to modify The default configuration
Since the vue project is stored in the root directory of the site by default, that is, all files generated after compilation must be placed under trunk/bapp/web. There are some other files in this directory. It is best not to throw them directly and create a new directory. trunk/bapp/web/bapp to store these files would be clearer. In this way, you will find a new problem, the project you build will not run under web/bapp, and the file path will not be found. This requires modifying the running root directory of vue to solve the problem that the vue project cannot run in sub-sites. It is very simple, just modify the base of the route.
-
Development environment production environment deployment how to solve
There are dev.env.js, test.env.js, prod.env.js in the config of the Vue project, you can set your APIURL here, and use process.env.APIURL to get the request interface. In this mode , we need to publish different webapp packages in different environments, similar to the app development mode of Android and ios. This method is not advisable for us, because PHP has configured sites in each environment, and the vue project is under the PHP project, so we need to obtain the current running environment from PHP, which shows the ease of our architecture. Maintain it. The specific idea is to parse the current url acquisition environment in vue.
Do this in main.js of vue
Use document.location.href to obtain the running environment, store the api site in vuex, and take the place where the request interface is needed directly from vuex. After parsing the apiurl in the above code, there is a process of parsing the route, which will be discussed below.
-
How does a native client request a vue page
The vue project may contain many pages, some pages may be a large module, such as all pages of the mall system, and some pages may be a single page that users need to know something, and the client browser needs to call these pages according to the module. to call. Here, it is required that the vue project must follow the specification of establishing different routes under the route of different modules during the development process, which is not only conducive to the fragmentation of the front-end code, but also to the convenience of client calls.
In trunk/bapp/controllers/ in the backend controller I have a BuserController controller and add an action to this controller
This action is very important and is the key to the separation of front and back ends
This action is very important and is the key to the separation of front and back ends
This action is very important and is the key to the separation of front and back ends
The name of this action also needs to follow the specification and is called webapp. In other projects on the backend, such as my project, there is a capp project. I can also add the action of this webapp in the CuserController under capp.
$url = Yii::$app->params['bUrl'] . "bapp/#/{$page}?route={$route}&{$query}&" . $this->sessionQueryString();
This line of code is more critical. This url is actually the address of the vue project of bapp/web/bapp.
Yii::$app->params['bUrl']
is the domain name address configured in PHP
bapp / # / {$ page}
It is the calling method of vue's hash routing. For details, please refer to the official vue documentation.
$this->sessionQueryString();
is the sessionid taken, this reader can be changed to the login tag in his own system
All h5 displayed by the client are obtained through this interface. It is necessary to focus on the parameters of this interface. The webapp receives three input parameters.
-
route (required)
The route parameter is defined by the front-end. For example, there is a mall module on the front-end called mall, then there should be a mall.js under the vue router, which manages the page distribution of all malls. The client wants to display the mall page when calling the webapp. route=mall, for example, there is a module activity with an active page in the front end, then there will be an activity.js under the router of vue to manage the distribution of all active pages. The client must pass route=activity to display the active page.
2.page (optional)
For a complete module like mall, the client may only need to display the home page of the mall, then the page does not need to be passed, and automatically enters the default page of vue's router/mall.js. If it is like an active module, the Pages may not be related, there may be pages such as activity1, activity2, acitivity3, etc. If the client wants to display the activity2 page, it must pass page=activity2
3.addition (optional)
Additional parameters are passed in addition. When the client calls a page, it may bring some user information, such as mobile phone number, token, session, etc. These parameters are placed in the addition
The native client can call this interface to get the page through get or post. Briefly, the difference between the two calling methods
GET: Here you need to pay attention to how the additional parameter of addition is spelled into the url, for example, there is this kind of json
{
"mobile":"18512331232",
"info":{
"name":"jimmy",
"sex":"mail"
}
}
Many students don't know the get parameter of two-dimensional array, pay attention
http://xxx.xxx?addition[mobile]=18512331232&addition[info][name]=jimmy&addition[info][sex]=mail
This address can be directly loadedUrl in the native webview
POST: All parameters are placed in the post body, and the interface returns the code of the h5 page that needs to be displayed eventually.
webview needs loadHtml to display
Summarize the specification
-
The names of the vue project and the yii project must be the same
-
Vue's build project must be placed under the new file under yii's web, and the folder name must be the same as the project name
-
The action of the Webapp is established in the yii project controller as the only entry for the client to access the H5 page
-
Vue routing needs to create routing files according to the module name
concluding remarks
The core of the back-end code is actionWebapp,
Front-end code for your reference: https://github.com/ahuchjm/Vue_Bapp.git
Celebration is fun! !! !!