The company has a PC-side background management system of vue + element ui + axios + webpack. The browser required to run is IE 11. During the development process, many pits were stepped on, and the following problems were recorded.
Question 1: Two seemingly equal strings in js, such as "Test Card 1", are judged by "==" and "===", both are false. The results after processing with encodeURIComponent() are: %E6%B5%8B%E8%AF%95%E5%8D%A11 and %E6%B5%8B%E8%AF%95%E5%8D%A11%00 , Obviously different.
Solution: Use the localeCompare() method to compare two strings. The localeCompare() method has three return values: 0-equal, -1 and 1 are not equal.
Question 2: Through get request to obtain background data, it is found that the Chinese received in the background is garbled.
Solution: Use encodeURI() on the front end to encode Chinese characters and then transfer them to the background.
Question 3: The list page refreshes the data only when the page loads, and neither the page return nor the click on the query button on the page refresh the data.
Solution: The investigation found that the keep-alive component was used and the page cache did not request data from the background. Finally, adding a current timestamp to the axios request interceptor makes each get request a new request, which solves this problem.
Question 4: When you press Enter in the input box of the form, the page jumps.
Solution: As the W3C standard stipulates: when there is only one input box in a form element, pressing enter in the input box should submit the form. <el-form>Adding on the label @submit.native.preventcan prevent the form submission.