03 The Web tier of high concurrent commodity kill projects that integrate the IDEA+MAVEN+SSM framework

Github:https://github.com/nnngu
Project Source code: Https://github.com/nnngu/nguSeckill

Front-end interaction process Design

For a system that requires the involvement of product managers, front-end engineers, and back-end engineers, the product manager makes a development document for the user's needs to the front-end engineer and back-end engineer, the front-end engineer for the system to complete the development of the page, and the backend engineer to complete the business logic for the system. For us this second kill system, its front-end interactive process design such as:

This flowchart tells us the process logic of the details page, and the front-end engineer designs the page based on this flowchart, and our backend engineer develops our code based on this flowchart. The front-end interaction process is a very important part of the system development, then the Restful interface design learning.

RESTful Interface Design Learning

What is restful? It is an elegant URL representation that is used to design the access URL of our resources. Through the design of this URL, we can naturally perceive what kind of business scenario or data or resources the URL represents. RESTful design-based URLs are very friendly to our interface's users, front end, web systems or search engines, and even our customers. About restful understanding everyone to go online a search a lot of, I do not introduce here. Let's look at the URL design for this second kill system:

The next step is to start using the Spring MVC framework based on the above resource interface.

Configure the Spring MVC framework

Introduce in the web.xml file DispatcherServlet :

web.xmlPlease refer to the source code of the project.

Add Applicationcontext-web.xml

Added applicationContext-web.xml , in the position shown.

applicationContext-web.xmlPlease refer to the source code of the project.

This completes the configuration of Spring MVC (the Spring MVC Framework is integrated into our project) and the next step is to develop the controller for our project based on the RESTful interface SeckillController .

Writing 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 SeckillController.java a controller, such as:

SeckillController.javaPlease refer to the source code of the project.

SeckillController.javaThe method is developed entirely against the Service interface method, the first method is used to access the list page of our products, the second method accesses the product's detail page, the third method is used to return a JSON data, the data is encapsulated in the second kill address of our products, The fourth method is used to encapsulate the message that the user is successful, and the fifth method returns the current time of the system. The code involves a class that will return a second product address encapsulated as JSON data, that is SeckillResult , create it in a DTO package, as follows:

Create a global AJAX request return class, return JSON

Created SeckillResult.java , such as:

SeckillResult.javaPlease refer to the source code of the project.

To this, the Controller's development task is completed and the next step is to develop our page.

Page Authoring

The front-end page of the project is Bootstrap developed, so we have to download it first Bootstrap or use an online CDN.

How to use the online CDN:

<!--Bootstrap core CSS file --<linkrel="stylesheet"href="Https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="Sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u"crossorigin="Anonymous"><!--optional Bootstrap theme files (not normally introduced) --<linkrel="stylesheet"href="Https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"integrity="Sha384-rhyon1irsvxv4nd0jutlngaslcjuc7uwjduw9svrlvryoopp2bwygmgjqixwl/sp"crossorigin="Anonymous"><!--Bootstrap core JavaScript file --<scriptsrc="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 in the project Bootstrap .

Steps:

1. Download JQuery , because it Bootstrap is dependent on JQuery the

2. DownloadBootstrap

3. Download a countdown plugin jquery.countdown.min.js , and then download an action Cookie plugin to jquery.cookie.min.js place:

1. Write a common header jsp file, located WEB-INF/jsp/common under head.jsp , such as:

head.jspPlease refer to the source code of the project.

1. Write a common jstl tag library file tag.jsp in the location shown.

tag.jspPlease refer to the source code of the project.

1. Write the list page list.jsp , in the location shown.

list.jspPlease refer to the source code of the project.

1. Write the second Kill detail Page detail.jsp , in the location shown.

detail.jspPlease refer to the source code of the project.

# # Add Seckill.js file

Add the seckill.js file in the location shown.

seckill.jsPlease refer to the source code of the project.

# # Run Project

Run the project, deploy to tomcat , enter in the browser address bar http://localhost:8080/seckill/list , hit enter, you can see the interface as:

Click the Details page link on the item to see if the item turns on seconds and kills the item in seconds.

To this, we successfully completed the development of the web layer. But a second kill system, often there will be tens of thousands of people to participate, our current system is not resistant to how much high concurrency, so we will later on the system for high concurrency optimization. Check out my next article.

Next: High concurrency optimization of Java High concurrent second kill project

03 The Web tier of high concurrent commodity kill projects that integrate the IDEA+MAVEN+SSM framework