Github: https://github.com/nnngu
Project source code: https://github.com/nnngu/nguSeckill
Front-end interaction process design
For a system, the participation of product managers, front-end engineers and back-end engineers is required. The product manager makes a development document of the user's requirements and hands it over to the front-end engineers and back-end engineers. The front-end engineers complete the page development for the system, and the back-end engineers are the The system completes the development of business logic. For our seckill system, its front-end interaction process is designed as follows:
This flowchart tells us the process logic of the detail page. The front-end engineers design the page according to this flowchart, and our back-end engineers develop our corresponding code according to this flowchart. The front-end interaction process is an important part of system development, and the next step Restfulis to learn interface design.
Restful interface design learning
What is Restful? It is an elegant URL representation, used to design the access URL of our resources. Through the design of this URL, we can naturally perceive which business scenario or what kind of data or resources this URL represents. The URLs designed based on Restful are very friendly to the users of our interfaces, front ends, web systems or search engines and even our users. You can search a lot about Restful on the Internet, so I won't introduce it here. Let's take a look at the URL design of our seckill system:
Next, start using the Spring MVC framework based on the above resource interfaces.
Configure the Spring MVC framework
web.xmlIntroduce in the file DispatcherServlet:
web.xmlPlease refer to the source code of the project for the code inside.
add applicationContext-web.xml
Add applicationContext-web.xml, at the location shown in the image below.
applicationContext-web.xmlPlease refer to the source code of the project for the code inside.
In this way, we have completed the configuration of Spring MVC (that is, integrating the Spring MVC framework into our project), and then we will SeckillController develop the controller of our project based on the Restful interface.
Write SeckillController
Each method in the controller corresponds to a resource URL in our system, and its design should follow the design style of the Restful interface.
Create a controller SeckillController.java, as shown below:
SeckillController.javaPlease refer to the source code of the project for the code inside.
SeckillController.javaThe methods in are completely developed against the Service interface methods. The first method is used to access the list page of our products, the second method is used to access the details page of the product, and the third method is used to return a json data, which is encapsulated in the data. The seckill address of our product is stored, the fourth method is used to encapsulate the information of whether the user's seckill is successful, and the fifth method is used to return the current time of the system. The code involves a class that encapsulates the returned seckill product address as json data, that is SeckillResult, it is created in the dto package as follows:
Create a global ajax request return class and return json
Create SeckillResult.java, as shown below:
SeckillResult.javaPlease refer to the source code of the project for the code inside.
At this point, the development task of the controller is completed, and then we will develop our page.
Writing of the page
The front-end page of the project is Bootstrapdeveloped by us, so we have to download Bootstrapor use an online CDN first.
How to use an online CDN:
<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional Bootstrap theme file (generally not required) -->
< link rel = " stylesheet " href = " https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme. min.css " integrity = " sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp " crossorigin = " anonymous " >
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
In order to facilitate our local debugging, I use the local one in the project Bootstrap.
step:
-
Download
JQuery, because it isBootstrapdependentJQuery -
download
Bootstrap -
Download a countdown plug-in
jquery.countdown.min.js, and then download an operationCookieplug-in andjquery.cookie.min.jsplace it as shown:
- Write a public header
jspfile, locatedWEB-INF/jsp/commonbelowhead.jsp, as shown below:
head.jspPlease refer to the source code of the project for the code inside.
- Write a public
jstltag library filetag.jspin the location shown below.
tag.jspPlease refer to the source code of the project for the code inside.
- Write the list page
list.jsp, at the location shown in the image below.
list.jspPlease refer to the source code of the project for the code inside.
- Write the seckill details page
detail.jspat the location shown in the figure below.
detail.jspPlease refer to the source code of the project for the code inside.
Add seckill.js file
Add seckill.js the file in the location shown in the image below.
seckill.js Please refer to the source code of the project for the code inside.
run the project
Run the project, deploy to tomcat, enter in the browser address bar http://localhost:8080/seckill/list, hit Enter, and you can see the interface as shown below:
Click the link on the detail page behind the corresponding product to check whether the product has a seckill, and activities such as seckilling the product.
So far, we have successfully completed the development of the web layer. However, in a seckill system, there are often thousands of people participating. Our current system cannot withstand many high concurrent operations, so we will optimize this system for high concurrency later. Please check out my next article.