Construction of simple shopping website based on Springmvc+angular+bootstrap+mysql

Read Catalogue

• Introduced
• Design of the database
• Project structure
• At last

Back to the top of the introduction

Front-end CSS framework with bootstrap, and bootstrap JS components, and very useful angular (angular dafa good), the project contains a total of 7 static interface, the static interface data display uses ANGULARJS, The backend is Java-based spring, the container for Tomcat, project code to share to the Baidu Cloud disk, the advantage of this project is that all the display is done in the front end, the data interaction is done through Ajax, there is no frequent page jump; first on the two mall main map :

　　Figure One:

、

　　Figure 2:

　　

This page can complete the evaluation of products, add products, product search and other functions, interface JSP code:

Run the following code

View Code

Home 2:

Run the following code

View Code

　　Background Management Interface , this interface only allows the user role value for 1 users to view, user roles are database User Table association, that is, the administrator, in order to enter the background page editing products, editorial comments and other advanced features:

　　　　

Interface code:

Run the following code

View Code

　　User Information Management interface , the default view of the current user information, if you click the Edit button, will be cut to display an edited Div, you can directly change the user's new information and then submit , if the administrator, there will be a background management Portal button:

　　View:

　　Edit:

　　　　　　

Run the following code

View Code

When the user clicks on the added item of the interface, the corresponding user's shopping cart data will change;

　　Shopping Cart display is all the purchase of goods, in the shopping cart can also be arbitrarily increase or decrease the number of items, the amount will be based on the number of items, real-time updates, very convenient, click Submit information, then these shopping cart products are converted to the user's orders, The order contains the consignee's address and the consignee's mobile phone number (front-end mobile phone verification did not get):

　　　　　　

Run the following code

View Code

　　The user's order page , which contains the user's "paid" and "Pending" orders:

　　　　　　

Run the following code

View Code

The project is a tomcat-based server, and the Spring framework (Spring Dafa is good), the database is MySQL; spring:http://spring.io/projects

　　

Back to the top of the database design

Since it is a shopping site, then there must be a = = "Commodity table:

Run the following code

CREATE TABLE ' commodity ' (  ' id ' int (one) not NULL auto_increment,  ' name ' varchar () ' DEFAULT ',  ' depict ' lon Gtext,  ' price ' int (one) default ' 0 ',  ' amount ' int (one) ' default ' 0 ',  ' manufacturer ' varchar (') ',  ' img ' varchar (+) Default ',  ' type ' varchar (default ') ',  PRIMARY KEY (' id ')) engine=innodb auto_ Increment=7 DEFAULT Charset=utf8;

Because there is a type of commodity, so also have to have = = "" Type table:

Run the following code

View Code

When there are multiple items, there is an exception to the table = = "Shopping Cart table:

Run the following code

View Code

Add the shopping Cart table to the user's receiving address and the goods receipt phone becomes = = "Order form:

Run the following code

View Code

The logged-on user can add a comment for the item, so there is another related table, user comment form:

Run the following code

View Code

The last is to implement the entire System User table:

Run the following code

View Code

Back to top project structure

The basic structure of Web applications

　　

The background implementation is spring Routing and data Persistence, the project does not filter malicious characters, so there are injection problems, needs to be strengthened, the basic functions are sufficient;

　　　　　　

Back to the top of the last

There is a comparison pit things to say, such as write an hour of blog, save blog when found no network, heart plug ...

HTML5 has a window.navigator.onLine判断浏览器是否在线的API， 但是博客园的后台管理界面不能添加自定义JS， 所以也没什么用，  good idea.

The entire project code is here: https://pan.baidu.com/s/1hs38qLu;

NONO
Source: http://www.cnblogs.com/diligenceday/
qq:287101329

Construction of simple shopping website based on Springmvc+angular+bootstrap+mysql