Use vue3, vite, less, flask, python to learn Silicon Valley takeaway from scratch (Episodes 16-40)

Solemn statement!
Let me say something important again. This article is for sharing only. The article and code are open source. It is strictly prohibited to make profits from this. It is strictly prohibited to infringe on any rights of the original video of Shang Silicon Valley. I know that people who learn programming have various thoughts. But this is not a reason for you to infringe on the open source community!
Episode 16: The teacher talked a lot in this episode. The core is just two sentences. One is to re-encapsulate axios, and the other is to re-encapsulate the promise result so that it can directly obtain data. The teacher's code should be able to use. This writing method only has get and post, but it is not important anymore. We will rewrite it if necessary in the future. Programmers just have to be lazy.
Episode 17: There is actually no need to encapsulate this episode. . . It is specifically made into a variable for the convenience of calling the interface. . . But I still learned something here. The param parameter is in the path. Where is the query parameter? Back. As you can see here, the query parameter is the same as the way to make an ajax request written in the body request body. But you can't mix the two.
Episode 18: This episode is about uploading code to GitHub, but this is divided into three steps: create a local warehouse and associate the remote warehouse. But first set the source code to master, and every subsequent change will be set as a branch, so You can return to the status at any time. Git init initializes the git warehouse locally. git add * will include all local files (except those specified in .gitignore) into the warehouse. git commit -m "init gshop" will submit the warehouse and name it init gshop.
Episode 20: This chapter is actually a simple cross-domain, but the video is incomplete and a section is skipped in the middle. It doesn’t matter. We write it directly in vite. Of course, we can set the response header in the backend, but we are the front-end, so we use vite. Proxy server to do it.
Insert image description here

The default port after our yarn dev is 5174. The cross-domain principle is that we request /api on the browser side instead of http://localhost:3000. The browser will automatically splice it into http://localhost:5174/api, which is done through vite Configuration, the locally enabled server requests http://localhost:3000. You can also add a path after the api, and then return the request, which is equivalent to letting the local server transfer it.
Episode 21: The introduction of state management is similar to the introduction of vue-router before. It can be modified slightly. It is divided into state, mutations, actions, and getters just to facilitate management when there is a lot of content. They can be written directly in index.js. no problem.
Insert image description here

Episode 22: This episode is about copying code as usual. Some are highly encapsulated (the teacher's favorite writing method) and read several times. Some are destructuring and assignment, and some are abbreviations for object attribute values.
Episode 23: There are basically no problems in this episode. If there is a problem, you can deduce it according to the code logic. My problem is that the backend interface is written wrong and the data cannot be obtained. Just change it and it will be fine.
Episode 24, Episode 25: No problem as written.
Episode 26: This episode is a bit confusing. First of all, this picture interface has been abandoned. I directly used the online interface to replace it. According to this interface data, if only the data of shops.json is considered, this can only return one according to the longitude and latitude. Merchant, forget it, we will change the interface directly and return all merchants.
Episodes 27-31: There is no difficulty, just type it.
Episode 32, 33: Simple anti-shake throttling, there is nothing to say. You can do it without adding brackets outside ${}.
Episodes 34 and 35: Just follow the writing. One knowledge point is the bubbling delivery of custom events. Another thing is that the front desk can only do legality verification, but not security verification. Review of Episode 35, generally obtain data asynchronously in mounted. Open the network to see the ajax request. For this, you can read the ajax or promise course in Silicon Valley.
Episode 36: Compared with the teacher in this episode, my background did not return a dynamic verification code. I searched for some information and changed it. Write and update the interface.
Insert image description here
Insert image description here

In this way, the graphical verification code can be returned. The idea here is to generate a verification code picture under the image folder each time and return it, and then clear the picture under the image folder the next time the path is accessed, and then generate the return. If you want to be more complete, you can even create the image folder in the code, but python is not the focus of the front end, so I won’t go into details here.
The name will be changed in episode 37.
Episode 38: Good guys, the SMS verification code interface has been launched again. I tried node sms_util.js with a glimmer of hope, and sure enough it reported an error. To send Buddha to the West, I will also write the python SMS backend interface.

I forgot to save the notes for the next two episodes. It’s not a big problem. You can ask me in the comment area and I will send you the adjusted source code.

Guess you like

Origin blog.csdn.net/returnadsss/article/details/128991843