Use react.js + egg.js to build a full stack of wheels to develop tourism e-commerce applications
Ultra clear original painting complete without encryption MP4Baidu cloud disk
To be able to build a good wheel is the expression of deep understanding of technology + flexible application ability; Full stack development is the pronoun of global thinking + comprehensive solution ability. If you can build a good wheel, and can do full stack development, it is absolutely “desperate” “high salary” talent. This course will take you through the process of building wheels while unlocking the advanced gameplay of react.js and egg.js, and then developing a full stack project using the wheels. You’ll gain practical skills on how to take apart complex businesses, build wheels, optimize performance, and more while mastering the full stack.
Suitable for all front-end engineers who meet the technical reserve requirements
Basic knowledge of the react. js syntax is preferred. Basic knowledge of Node.js is preferred
Chapter Contents:
Chapter 1 What you Need to know about this course
In this chapter, you will learn about this course, including an overview of what you will learn, the results of your final project, what you will need to know, how the course will be presented, and recommended learning methods.
1-1 Before class, here is everything you need to know
Chapter 2 React Core Content review and Custom Component Development
“Making wheels” is a process, to make enterprise-class wheels, naturally need more rich and comprehensive technology. From the beginning of this chapter, we will lead you to develop the “practical wheel” while sorting out and consolidating knowledge, so as to make preparations for the subsequent actual combat projects. This chapter will sort out the core knowledge of React. Js and the basic knowledge of UmiJs respectively, and use these knowledge to guide you to complete a number of custom components (LazyLoad, ErrorBoundary, Mo…
2-1 Overview of this chapter
2-2 Front-end development environment construction
2-3 Install NVM under Window of front-end development environment setup
2-4 UmiJs Speed Primer (PART 1)
2-5 Umijs Speed Primer (ii)
2-6 React Component Lifecycle (Part 1)
2-7 React Component Lifecycle (Part 2)
2-8 Communication mode between React components
2-9 Dva data processing and data mock
2-10 Implement data flow management based on react Context API
Development of LazyLoad Components based on Lazy and Suspense implementation
2-12 development of ErrorBoundary components [components implemented based on React ErrorBoundary technology]
2-13 Modal component development 【 Create custom popover components based on createPortal 】
2-14 Use the REF API to manipulate the DOM and components
In chapter 3, learn how to use React Hooks
This chapter focuses on the use of react-hooks, which are react-context and hook implementation solutions, to implement the react-store data stream operation. Completed the development of a number of custom hooks, which will be directly applied in the actual combat projects later, and will be gradually optimized according to the needs of the project to become a “good wheel”. .
3-1 React Hook API – New component development mode
3-2 useContext and useReducer implement data flow management
3-3 useTitleHook
UseHttpHook [Encapsulating custom hook with monitoring function based on FETCH API]
React Context and Hook: Think -react-store
3-6 Fiber architecture analysis
Chapter 4. Why use egg.js
Compared to how? Why? More important!! This chapter introduces the characteristics of egg.js by comparing it with other frameworks such as Express/Koa2, and demonstrates how to use the multi-process pattern in egg.js to do incremental development in a project.
4-1 An overview of the tools of egg.js enterprise development
4-2 Initial experience with egg.js
4-3 Processes in Node.js
4-4 Multi-process mode in egg.js –
4-5 Go beyond the incremental development model in Express/Koa2, egg.js
Chapter 5 Egg.js basics — Routing/Controller/service/template engine, etc
To do a good job, he must sharpen his tools. In this chapter, we will explain the common knowledge of egg.js, including routing, controller, service, template engine, cache, httpClient, etc., and lead you to explore the secrets of egg.js.
5-1 Use and unit testing of controllers in egg.js
5-2 Processing of GET requests in egg.js routes
5-3 Processing and parameter verification of POST/PUT/DELETE requests in egg. js routes
Service and unit tests in egg.js
5-5 Use Ejs template engine in egg.js
5-6 Use and configuration of static resources in Ejs template engine
5-7 How to configure and use cookies in egg.js and how to set Chinese cookies
5-8 Configuration and use of Session in egg.js
Use HttpClient to request other interfaces in egg.js
Chapter 6 Egg.js advanced – plug-ins/middleware/extensions etc
Can use, more to use good!! In this chapter, we will combine the advanced functions of egg.js to extend the framework, develop logging middleware and user authentication plug-ins, and explain the application of scheduled tasks. Only those who really understand it can make “good practical wheels”.
6-1 Middleware, unwinding onion Ring model
6-2 Rich expansion mode, project development handy [extract common logic, improve development efficiency] (above) trial
6-3 Rich expansion methods make project development handy [Extract common logic and improve development efficiency] (Ii)
6-4 Plug-in mechanism, flexible application of egg.js [implementation of user login verification plug-in egg-auth]
6-5 Scheduled tasks in egg.js
In chapter 7, egg.js manipulates the Mysql database
This chapter explains how to install Mysql, add, delete, modify and check common operations, how to combine egg-mysql plug-in to complete basic operations on data, and how to apply egg-Sequelize plug-in to solve complex business requirements, so as to make “storage preparation” for subsequent actual operation.
7-1 Installing the Mysql database
7-2 getting started with Mysql. Basic add, delete, modify, and check operations
7-3 Use the egg-mysql plug-in to manipulate the database
7-4 Use Sequelize to operate mysql database in egg. js
7-5 Sequelize Common data types and criteria
7 to 6 Sequelize Commonly used add, delete, modify, and query functions
Chapter 8 Front-end interface development and function optimization
The preliminary preparation is ok, we will officially enter the full stack project development at the beginning of this chapter! Here, we will introduce how to develop the basic interface of the front end, how to implement rolling list loading and lazy image loading based on IntersectionObserver, how to use think-react-Store for data flow processing, and how to implement targeted system optimization strategies and implementation. Full of dry goods, must listen carefully yo!! .
8-1 Overview of this chapter
8-2 Realize the navigation function at the bottom of the website
8-3 Homepage development
8-4 Add data mock for the home page (request data using useHttpHook)
8-5 Develop the search page
8-6 IntersectionObserver is initially recognized and useObserverHook is realized
Use useObserverHook to implement rolling loading (part 1)
Use useObserverHook to implement rolling loading (part 2)
8-9 Use useImgHook to implement lazy image loading
8-10 Optimization – Extract common components, use enumeration, introduce project-libs
8-11 Homestay details page interface development
8-12 Add Data Flow Management for home Stay Details Page (I)
8-13 Add Data Flow Management for home Stay Details Page (part 2)
8-14 Develop the order page
8-15 Add scroll loading effect to order page (use useObserverHook, but do not listen for data)
8-16 Developing my page (using RC-form to process form data)
8-17 Add data management for my page
8-18 Develop user login and registration pages
8-19 Perform login verification based on the UMI runtime configuration
8-20 Optimization – Use React. Memo to reduce rendering times
8-21 Optimization – Add skeleton screen to order page
Chapter 9 realization and optimization of server user module
This chapter will use the previously completed extension, middleware and plug-in of egg.js framework to write user module, and optimize the system on the premise of completing basic functions, such as using JWT technology to do user authentication, transforming egg-Auth plug-in, storing user login information in Redis, writing public controller and service, etc.
9-1 Overview of this chapter
9-2 Create user table, build user model based on Sequelize
9-3 Develop user registration interface
9-4 Extend the help functions of egg.js
9-5 Develop user login interface
9-6 What is JWT technology?
9-7 Use JWT to transform the registration and login interfaces, and coordinate the login and registration interfaces
9-8 Develop user details interface and user logout and login interface
9-9 Optimized the user login authentication plug-in
9-10 Simple use of Redis, storing user base information in Redis
9-11 Write the public logic in BaseController and BaseService, and develop new middleware
9-12 Compile user editing interface and conduct joint adjustment with the front end
Chapter 10 Service end homestay & order module realization and optimization
To continue the journey, this chapter will learn advanced operations such as multi-table joint check and attribute filtering in Sequelize, complete the compilation of two modules of homestay & order, realize the interface of homestay list, details, comments, payment and order list, and complete the joint adjustment with the front end.
10-1 Create homestays, comment tables, and write the Sequelize model
10-2 Develop egg-NotFound plug-in, handling interface is not a problem
10-3 Obtain city list data and write popular b&B interface based on Sequelize multi-table joint check
10-4 Write search homestay interface and coordinate with the front end
10-5 Compile homestay details interface and coordinate with the front end
10-6 Write interface to add comments and comment list, and coordinate with the front end
10-7 Create order table and write order model based on Sequelize
10-8 Write the interface of reservation and cancellation of reservation and coordinate with the front end
10-9 Interface for compiling order list and coordinating with the front end
10-10 Egg.js simulates the payment process and integrates with the front end
10-11 Optimize the way of obtaining user information and expand the egg framework
Chapter 11 Project Safety
The basics are done. That’s it? NONONO!!!!!! This chapter will further analyze the security problems of XSS, CSRF, interface cache and other systems, and put forward some solutions.
11-1 Common XSS attack modes and solutions
11-2 Common CSRF attacks and solutions (develop egg-Allowhosts plug-in)
11-3 How to limit the flow of the interface and avoid unlimited requests (develop egg-Interfacelimit plug-in)
11-4 handling of interfaceCache problems (developing egg-interfacecache plug-in)
Chapter 12 Project Deployment
This chapter explains how to release the project based on Docker in ali Cloud environment, so that our project can be separated from the local and really run.
12-1 Docker
12-2 Introduction to Docker basics
12-3 Background introduction of Aliyun
12-4 Project Deployment
12-5 Docker operation description
12-6 Node Connection Error Reported After Docker mysql installation symptom
12-7 Course summary
This course is over