Vue in action—create your own takeout system
1. New version based on Vue; 2. The project is about a front-end and back-end separation Web App for takeout business. The functional modules include merchants, products, shopping carts, user management and other modules; 3. The background application technology architecture is: Node + Express + Mongodb + Mongoose; 4. The front-end application technology architecture is: vue + vuex + vue-router + webpack + ES6; 5. Adopt modular, componentized and engineering model development;
122889
person learning
82
class hour
2022-01-19
update time
18 Hours38 minutes31 seconds
Total course duration
有朋自远方来，虽远必诛！
You will learn
1. New version based on Vue; 2. The project is about a front-end and back-end separation Web App for takeout business. The functional modules include merchants, products, shopping carts, user management and other modules; 3. The background application technology architecture is: Node + Express + Mongodb + Mongoose; 4. The front-end application technology architecture is: vue + vuex + vue-router + webpack + ES6; 5. Adopt modular, componentized and engineering model development;
Vue in action—create your own takeout system
Section1 Project function demonstration
11 minutes23 seconds
Section2 Project development preparation
18 minutes58 seconds
Section3 Create project and run
12 minutes36 seconds
Section4 Resource preparation
08 minutes55 seconds
Section5 Project source code directory design
05 minutes20 seconds
Section6 stylus use
07 minutes28 seconds
Section7 component coding
13 minutes29 seconds
Section8 Introduce vue-router
08 minutes38 seconds
Section9 FooterGuide component
13 minutes11 seconds
Section10 Each navigation routing component (static)
16 minutes05 seconds
Chapter1 Chapter One
Section1 HeaderTop component
10 minutes33 seconds
Section2 Use swiper to implement product classification list carousel
08 minutes43 seconds
Section3 ShopList component (static)
06 minutes23 seconds
Section4 Login component (static)
16 minutes58 seconds
Section5 Start the background application and test the interface
18 minutes40 seconds
Section6 Encapsulate ajax request function
13 minutes17 seconds
Section7 Encapsulate interface request function
11 minutes20 seconds
Section8 Use git for version control of projects
04 minutes52 seconds
Section9 review
22 minutes39 seconds
Section10 Configure the proxy to implement cross-domain ajax requests
08 minutes09 seconds
Chapter2 Chapter two
Section1 Create the overall structure of vuex
08 minutes15 seconds
Section2 Use vuex to manage homepage data
21 minutes10 seconds
Section3 Asynchronously display the current address
08 minutes24 seconds
Section4 Display food category carousel list asynchronously
25 minutes34 seconds
Section5 Use watch and $nextTick to solve carousel bugs
11 minutes04 seconds
Section6 Display merchant list asynchronously
11 minutes16 seconds
Section7 Use svg to display the loading prompt interface
07 minutes25 seconds
Section8 Star component
22 minutes44 seconds
Section9 Registration and login function demonstration instructions
09 minutes02 seconds
Section10 Login interface effect 1_switch login method
07 minutes09 seconds
Chapter3 third chapter
Section1 Login interface effect 2_Mobile phone number check
08 minutes01 seconds
Section2 Login interface effect 3_countdown effect
13 minutes00 seconds
Section3 Login interface effect 4_switch the display and hiding of passwords
12 minutes35 seconds
Section4 Login interface effect 5_front desk expression verification
21 minutes31 seconds
Section5 review
22 minutes28 seconds
Section6 Dynamic one-time graphic verification code
09 minutes19 seconds
Section7 Define interface request function
08 minutes45 seconds
Section8 Login_Send SMS verification code
18 minutes42 seconds
Section9 Login_Complete login request
14 minutes46 seconds
Section10 Login_Save user information to vuex
06 minutes12 seconds
Chapter4 Chapter Four
Section1 Update the personal center interface after logging in
07 minutes00 seconds
Section2 Login to update jump route
06 minutes20 seconds
Section3 Automatic login
09 minutes28 seconds
Section4 sign out
15 minutes15 seconds
Section5 Build the overall merchant interface
18 minutes00 seconds
Section6 json understanding
10 minutes14 seconds
Section7 Design json data
17 minutes27 seconds
Section8 Use mockjs to simulate interface data
19 minutes58 seconds
Section9 ajax request mockjs simulated interface
10 minutes25 seconds
Section10 ShopHeader component
38 minutes15 seconds
Chapter5 chapter Five
Section1 review
33 minutes42 seconds
Section2 Display goods data asynchronously
23 minutes15 seconds
Section3 Sliding effect analysis
13 minutes34 seconds
Section4 Use better-scroll to implement rebound sliding
19 minutes19 seconds
Section5 collectscrollY
15 minutes18 seconds
Section6 Collect tops
08 minutes49 seconds
Section7 Slide the list on the right to update the current category
12 minutes16 seconds
Section8 Solve the bug of inertial sliding not updating the current category
04 minutes46 seconds
Section9 Click on the category item to slide the list on the right
13 minutes39 seconds
Section10 CartControl component 1
10 minutes07 seconds
Chapter6 Chapter Six
Section1 CartControl component 2
23 minutes21 seconds
Section2 Food component 1
15 minutes11 seconds
Section3 Food component 2
06 minutes59 seconds
Section4 ShopCart component 1
18 minutes51 seconds
Section5 ShopCart Component 2
16 minutes41 seconds
Section6 Show list of shopping items
05 minutes53 seconds
Section7 Solve 3 bugs in list display
08 minutes12 seconds
Section8 review
25 minutes21 seconds
Section9 Shopping cart animation
08 minutes47 seconds
Section10 Shopping cart list sliding
13 minutes43 seconds
Chapter7 Chapter VII
Section1 Clear shopping cart
10 minutes53 seconds
Section2 ShopRatingsComponent1
18 minutes34 seconds
Section3 ShopRatings component 2
32 minutes14 seconds
Section4 ShopInfo component 1
11 minutes16 seconds
Section5 ShopInfo component 2
12 minutes33 seconds
Section6 ShopInfo component 3
09 minutes33 seconds
Section7 Search component
28 minutes03 seconds
Section8 Cache route component object
03 minutes37 seconds
Section9 Lazy loading of routing components
13 minutes50 seconds
Section10 Lazy loading of images vue-lazyload
08 minutes28 seconds
Section11 Use moment to implement date filter
05 minutes09 seconds
Section12 Packed file analysis and optimization
09 minutes16 seconds
Chapter8 chapter eight
Data Name
The courseware is currently not available for download, and the staff are organizing it. Please pay more attention to this course in the future~
王林 Lecturer Other Courses
Popular courses
JAVA Beginner's Video Tutorial
753 class hour
2982567
Little Turtle's zero-based introduction to learning Python video tutorial
60 class hour
546673
Quick introduction to web front-end development
8 class hour
220791
Master PS video tutorials from scratch
268 class hour
1003302
Latest courses
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
[Web front-end] Node.js quick start
16 class hour
16696
Complete collection of foreign web development full-stack courses
12 class hour
13480
Go language practical GraphQL
10 class hour
11115
550W fan master learns JavaScript from scratch step by step
1 class hour
1264
