Talk about my recent vUE project and make a summary of the problems in this project. Although it is not the first time to use VUE for development, there is no time to summarize the problems encountered. In order to prevent recurrence in the future, I specially summarize them and will update them irregularly in the future

(1) Post request pit in AXIos request. The initial pitfall was that data was intercepted using axios’s POST method and never made it to the back end. Later, I checked the document and learned that AXIos has the interception function for POST requests, so I need to judge by myself or use qs method proposed to send data to the back end for further processing.

(2) Routing parameter function pit. We’ve been using route parameters, but when this page refreshes, there are no parameters on the page because they were passed in from the previous page. Solution: Use cache, and VUEX state management. But since the project is not very large, the cache is used the most.

(3) pit of page cache. There is a page for filling in information, and some information needs to be filled in. When entering the search protocol page, the information on the page needs to be retained. Solution: Use vUE to provide keep-alive, to complete the page cache.

(4) Pit for dynamic loading of VUE components. Because the layout of the front page is uncertain, and then you think, let the component display dynamically, based on the data that comes in from the back end, the data that comes in from that component will display that component. Solution: Negotiate with the back end for a logo. The front end dynamically displays components based on identification. Used in vUE, at first I thought is not the same as native JS using append can be directly inserted into it, but later found that it is not possible, the idea is possible, but the implementation is not feasible. Because append must be inserted after a node, not a component. Then I went to the VUE documentation.

(5) Parse the pit of the map format data returned by the back end. When you parse the data before, you can just take it and render the page and use it. But this time, the back end returns data in map format, which has to be parsed. Example: body[‘1’]. According to the returned format, parse to the data format you need.

(6) Update the file cache pit. Every time you pack up a file for a back-end update, the last version is left on the user’s phone, and every time you have to clear the cache, the latest version of the data is displayed. Later, the teacher I make a suggestion, the back-end to return an updated version of the interface, the front every time updated version, would give the back-end incoming timestamps, and the back-end judgment and garage after receive timestamp is the same, the same return don’t need to be updated, it is not the same, returns to update, and then the front side of the processing method is: To update, clear the cache and refresh the page.

It’s ok to add a timestamp to the.js. CSS file, but the entry to the page, index.html, is the same every time, so… Will not update, baidu some said on the nginx server, write mandatory update, but because the company server files are a lot of, in case of error that trouble

(7) Get the parameters in the home page link. Fetch is available, as long as it does not jump off the page of the project, but the project is linked to many external links, so sometimes when returned, the page will be blank because there is a problem with the retrieved parameters. Solution: set the parameters into a cache, but the speed of return is fast, the home page will also appear to get parameters, the problem.

Solution: Write the templateId that gets the connection to the Home page

    
if (templateId) {
    this.$store.commit('updateTemplatedId',templateId);
    window.localStorage.setItem('templateId', templateId);
    console.log('store===templateId'.this.$store.state.templateId)
}else{
    setTimeout(function() {
        window.location.reload()
    }, 1500);
}
Copy the code