JS project case actual combat simple management system
Practical development of PC-side native JavaScript project cases
1. Demand analysis
1.1 Object Oriented
Applicable people: students, white-collar workers
1.2 User needs
The news content needs to be displayed on the main page and updated dynamically and interactively;
Relevant news needs to be queried on the main page
It is necessary to dynamically load the page to realize the page jump
Normal login is required, and it can be added, deleted, modified and checked in the background, and news can be released
2. Reasons for development
Refer to a simple model architecture similar to a learning management system for simple practical exercises
3. Detailed Design and Main Functions
3.1 Admin page code
Main page module:
3.2 Login implementation
login module:
3.3 Background module
Administrator view, and requires that ordinary users cannot see
News writing and preview for quick updates
4. Technology used
4.1 Page rendering effect
html，css，JavaScript
4.2 Scss application
Using css pre-compiled upgraded scss, you can optimize the css code space
4.3 jQuery and bootstrap framework
Reduce the development time of hand-written native html and js, and use ES6 modularization at the same time
4.4 echarts library and Lodash plugin
echarts can quickly introduce views to simplify js development
lodash provides dozens of tools and methods for processing various types of data in JavaScript, which can be packaged for volume optimization and principles
4.5 Call local data interface
Mainly use json-server to build the environment, realize the local environment interface and then realize the storage of back-end account information, submit data and log in and other functions
The verification effect is achieved by comparing the entered account password with the database
5. Project exercise summary
5.1 Difficulties of the exercises
Writing in the json-server environment.
The path problem caused a chain reaction of subsequent bugs.
The first time I wrote it was not clear how to write ajax and fetch, and the data storage of ajax could not be used proficiently. The
folder typesetting of the project was not careful at the beginning, so the link could not correspond to
the es6 syntax. I am not familiar with it
I don't understand the interface interaction of js, I just copy it, and I can't explain the principle. I am at a loss
for business logic analysis, and I can't find the direction
. For the echarts library, Lodash doesn't particularly understand how to quote it, and I have only a half-knowledge about the code examples of the bootstrap framework
5.2 Practice Harvest
Understanding and proficiently using html and css
This practical exercise is of great significance to me. Under the condition of imitation, a project of simulating front-end and back-end interaction has been realized. I understand how some principles and cases are used in detail.