Application design of MPVUE in front-end project

With three front-end projects developed simultaneously, it is inevitable that most of the work will overlap. I believe that friends who do development should also understand that front-end interface development, simulated data interaction and other work can be directly artificial pile out. However, when the interface joint adjustment is encountered and the business joint adjustment is added, most of the changes will be caused by the imperfect design, which will be time-consuming in the construction period. So this time I want to unify the interface of the three projects. Therefore, in order to achieve unity, the first thing we need to solve is the interface request of wechat applet and Web.

Here is not going to introduce the micro channel small program technology in detail, but also put a picture (from the Internet) out, first understand why to achieve unity.

Small program diagram

Wechat applet is also a kind of Hybird App in nature, so the familiar window and Document object is disappeared, of course, also can not find XMLHttpRequest, Ajax ghost. Therefore, network requests can only be made through the official Wx. request interface. Our goal is unification, so the code is only compatible with Wx. request and XMLHttpRequest. An open source project called fly.js is recommended for use as HttpClien.

Fly.js is designed to separate the API request logic from the actual request execution (engine). The developer only needs to invoke.get(),.post() and other functions to initiate the request. Is the configuration of our bottom, and the specific business code is not the least bit associated with the request to invoke the logic of the upper layer, a good shielding of the bottom request execution.

Idle white: in the past PC era, I have always liked desktop tool development, like to do some small tools for everyone to play. From C# pure desktop development to WinFrom + WebKit, to Silverlight, WPF, Microsoft has not given up the update, but always feel learning, has never been applied, ha ha ha, am I too far from the hole? Up to now, Nodejs cross-platform technology, mobile terminal WebView and other cross-platform technology, in fact, the idea is mostly the same, but has been updated and optimized.

After the overall scheme is determined, it is in accordance with the corresponding process to draw an overall design map

Overall design drawing

From left to right

• Micro channel small program based on MPVue development, PC version using iView-admin development, respectively to complete the interface development and data interaction. Vue provides interface rendering by binding data from the Store.
• StoreforVuexState (data) management, throughactionsandmutationsProvide corresponding business logic processing. inactionsIn the callServicesTo complete API requests.
• ServicesModule service invocation inFly.jsTo complete the API request execution.

One area that needs to be considered in practice is the separation of Store and Services.

The HttpClient(fly.js) can be used directly in the Store to request the interface, and then complete the response data parsing. In the end, we decided to split it up because we didn’t want to have too much response data parsing logic in the Store, and we wanted to focus more on business data logic processing, which could also be quickly tested by simulating data in the Services layer as a thin data access (protocol) layer.

Here is a concrete example code.

// The Article module import config from '.. /config' import http from '.. /util/HttpClient' // import interface configuration const {list} = config.article; Export default {// declare query interface async query(params){//POST parameter, Const {status,content} =await http.post(list, params) // Filter out interface parameters, If (http.isok (status)) {return content} throw http.error(status); }}Copy the code

Import articleService from '.. /.. /service/ArticleService' //Vuex state const state = { listData: []} //actions declare const actions ={/** * query list */ async query ({commit, dispatch, state}, {op = 0}){const queryResult = await articleService. Query (state.query); / /... }}Copy the code

/ / the vue components using the export default {computed: {listData () {return this. $store. The state. Article. ListData}}}Copy the code

The overall code module hierarchy can be represented like this:

Overall hierarchy diagram

As you can see, we initialize the Store in each project and then use Vuex’s Module mode to freely combine business modules as needed.

In the Store fragment in the applet A sample code:

Import Vue from 'Vue' import Vuex from 'Vuex' Import UserModule from './modules/user' // public module, Can be Shared with other projects import Activity from 'XXXX/store/modules/Activity' import Article from 'XXXX/store/modules/Article' import EnumModule from 'XXXX/store/enum' // vue. use(Vuex) export default new vuex. store ({modules: { user: UserModule, activity: Activity, article: Article, enum: EnumModule } })Copy the code

Once the overall design is clear, it’s time to look at how the structure of the project should be organized. In accordance with the above, 5 projects are divided, with the specific structure as follows:

Project figure

As you can see, there are three main projects (upper level) and two supporting projects (lower level). The supported projects are public projects, such as XXXX-front-API and MP-common, which are dependent and referenced by applets A, B and Web management platform in the way of NPM Module.

• XXXX – front – API:This project is mainly business public project, including commonVuex Module,Services for each module,Fly. Js encapsulationAs well asThe commonly used UtilsAnd so on.
• Mp – common:This project is mainly for wechat small program project development, small program API encapsulation, small program APIsuccessThe callback converts toPromiseTo supportasync/awaitWay. Offer sharedApplets component,style,Utility classAnd so on.

The next step is to discuss some of the issues that need to be noted in the construction of a nodeJS project. The creation of a NodeJS project is not covered here, but the specific NPN init or scaffolding of the relevant framework.

Git neutron project use

First, we use Git to create the five projects we plan. There are two public module projects, so we need to use Git submodule to manage in the main project. The structure is as follows:

Git /mp-b /mp-b /mp-b /xxx-front-api. Git /mp-common /mc.git /xxx-front-api.gitCopy the code

Nodejs is used by local modules

In Java Maven, MVN install is usually used to complete the installation of local modules, while in nodeJS project, node_modules file is mainly used to place dependencies. Therefore, we can create the soft connection of the local module through the soft connection of the system or directly use NPM link. This allows changes to dependent projects in any of the three main projects to be used synchronously with other projects.

# NPM install mp-common or yarn add mp-common # # NPM install mp-common # # yarn add mp-commonCopy the code

In front of the main introduction of small program selection MPVUE, cross-platform API request, vuEX based project design, as well as the construction of the project in the process of attention, this time mainly design, specific MPVue in the development of the use and problems, let’s listen to the next decomposition.