Amateur recently helped a friend do vue two projects, one is user-oriented pure show series (collectively, after A project), a back-end management system like (collectively, the B project). Both technically no difficulty, where problems encountered in the development process, and so do a trade-off section.
About project set up
Currently vue-cli scaffolding has been very mature, very easy to create a project, according to the official website of the appropriate documentation or online tutorial to quickly set up ( https://cli.vuejs.org/zh/guide/deployment.html )
Advantages: Fast, easy, zero-configuration, scalability, flexibility
Disadvantages: For small projects is concerned, is not enough to build a leaner, extra packages installed by default (such as default in accordance with the jest, nightwath, these testing frameworks are generally not used)
PS: If the test is useful to the cell and run locally, needs to add the two fields jest.config.js configuration :
About http request
Using Axios, http request to unify the results after treatment, the column returned as result of the request to return the desired value code data directly after processing 200, processing 200 non actual situation, such a unified playing toast or jump, and redirection.
About UI framework
A program using iview, B project uses elementUI
From the comfort of use is concerned, elementui victory iview. Its components cited more convenient, more flexible custom style, closer to the event binding vue develop habits.
iview reason to experience poor are:
1. button components, as well as menuitem and other components under the menu click event to bind @ click.native need written form, or click on the event may not take effect;
2. Press the official website of the documents introduced iview-loader, not all components are referenced by way of direct component name, such as menuitem under the menu components still have to be written as i-menuitem to take effect (In this regard, since the document was official website as described later but did not meet the expectations, and therefore do not trust it ...)
About Non-Route login redirection
Here are two options:
1. Save logged in, log in state routing target page judgment, if not logged in, redirect
2. In the routing management office, do login detected by navigation routing guard, if not logged in, redirect (recommended in this way, to achieve refer to https://github.com/vuejs/vue-router/blob/dev/examples/ Flow-the auth / app.js )
A, logged isLogin B projects are mounted on vue example,. $ Root.isLogin globally accessible through this. LocalStorage value from its value in the key named loginState. LoginState value is set at the time of login or logout success. Its drawback is that when the value of loginState be manually modified, then the state will show along with the changes. But the interfaces are subject to rights, and the corresponding page in the routing or processing done, so little effect. [The reason is useless cookie, for user safety reasons, the server cookie will be set to read-only, can not get the local cookie, to some extent, the defense attacked the xxs]
About cross-domain file upload component upload problem
Because the use of elementui or iview upload file upload component is its underlying axios request, if the local interface address and under its action attribute domain name or ip not unified, cross-domain cookie will be problematic. The solution is a unified domain name or ip.
About elmentui upload component has deleted when prompted, termination file upload will prompt "Delete file xxx" the bug detour
When do elementui upload file upload component type restrictions, there are two options:
1. Set directly accept its properties in the allowed file types to upload (recommend this)
2. Make the type of judgment in its beforUpload, if desired type, returns true allowed to upload, otherwise it returns false, terminate the upload.
Option 2 would have been no problem, but if the introduction of this $ confirm in beforeRemove function ( 'OK to delete xxxxx') ?, there will be bug:. BeforUpload returns false, the task will show file upload component upload upload progress and success, and at the same pop-up "Erase xxxxx" message box. Here file does not upload, upload upload speculate on display may be an illusion, but somehow give people the feeling, in order to avoid this problem, do beforeRemove in a judgment that: When only allowed to upload a file to call this $ comfirm method, or not treated.
About menu item is activated with the current routing solutions match
As two kinds of ideas UI frame to elementui example, the router mode is set, the corresponding value of index attribute el-menu-item of a target route name, such as '/ dashboard', it will automatically navigate to the menu item is clicked destination routing. We want to click on the menu item, the menu is activated state, menu has a property as a default-active, dynamic value of the attribute route name on the line, assuming default-active = 'activeIndex', by monitoring the current route values can coumputed :
computed: {
activeIndex () {
return this. $ route.path // here recommended route name in lowercase unity, when the value of the route will get letters in lower case, or the name of the case will affect the activation state of inconsistent display
}
}
Style settings for individual selected after traversing the array
There are two options,
1. After the rear end of field returns selected state value, it is assumed true for the selected, to false to select, click on the front end, this value is inverted
2. The front end of a curIndex variable, then click on Copy the current index to curIndex, do the conditions in the html fragment in judgment, if curIndex === index, then show the selected style.
About content block as course modules (involving chapter, section title) add, delete, modify development
Conventional thinking might think click Add, delete, etc. will operate accordingly dom nodes directly, which is actually less desirable. Because the more the new module, it is hard to manage consumption is relatively large. However, the direct use of the characteristics of data vue, add, delete its course module array, change will be much easier.