基於springMVC+angular+bootstrap+mysql的簡易購物網站搭建

標籤：

閱讀目錄

• 　　介紹
• 　　資料庫的設計
• 項目結構
• 最後

回到頂部　　介紹

　　前端的css架構用了bootstrap， 以及bootstrap的JS組件， 以及很好用的angular（angular大法好）， 項目一共包含了7個靜態介面， 靜態介面的資料展示都使用了angularJS , 後端是基於java的spring， 容器為tomcat， 項目代碼分享到百度雲端硬碟  ， 這個項目的優勢是， 所有的顯示都是在前端完成， 資料互動也是通過ajax完成， 沒有頻繁的頁面跳轉；先上兩張商城的主圖：

　　圖一：

　　　　、　　

　　圖2：

　　

　　該頁面可以完成商品的評價， 添加商品， 商品的搜尋等功能 ， 介面JSP代碼：

運行下面代碼

View Code

 　　首頁2:

運行下面代碼

View Code

 

 

 

　　後台管理介面， 這個介面只允許使用者role值為1使用者查看， 使用者角色是資料庫的使用者表關聯的，  也就是說是管理員的時候， 才能進入後台頁編輯商品，編輯評論等進階功能：

　　　　

　　介面代碼:

運行下面代碼

View Code

 

　　使用者資訊管理介面， 預設查看目前使用者資訊， 如果點擊編輯按鈕， 會切顯示一個編輯的DIV， 可以直接更改使用者的新資訊然後提交,  如果是管理員的話， 會有一個後台管理的入口按鈕:

　　查看：

　　　　　　　　 

　　編輯：

　　　　　　

運行下面代碼

View Code

 

 

 　  當使用者點擊介面的添加商品， 那麼對應使用者的購物車資料會發生改變;

　　購物車顯示的是所有的選購商品， 在購物車裡面也能隨意的增加或者減少商品的個數， 金額會根據商品的個數，即時更新， 非常方便, 點擊提交資訊的話，那麼這些購物車的商品就轉換為使用者的訂單， 訂單包含了收貨人的地址和收貨人手機號碼 （前端的手機驗證沒有弄）：

　　　　　　

運行下面代碼

View Code

 

 

　　使用者的訂單頁，該節目包含了使用者“已支付”和“待支付”的訂單：

　　　　　　

運行下面代碼

View Code　

　　項目是基於tomcat的伺服器， 以及spring架構 (spring大法好)，  資料庫是mysql；  spring：http://spring.io/projects

　　

回到頂部　　資料庫的設計

　　既然是購物網站，那麼必須有個 ==》》 商品表：

運行下面代碼

CREATE TABLE `commodity` (  `id` int(11) NOT NULL AUTO_INCREMENT,  `name` varchar(100) DEFAULT ‘‘,  `depict` longtext,  `price` int(11) DEFAULT ‘0‘,  `amount` int(11) DEFAULT ‘0‘,  `manufacturer` varchar(50) DEFAULT ‘‘,  `img` varchar(100) DEFAULT ‘‘,  `type` varchar(20) DEFAULT ‘‘,  PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8;

 

　　因為商品有類型之分，所以也要有 ==》》 類型表：

運行下面代碼

View Code

 

　　當有多個商品的時候，就存在了例外一個表==》》 購物車表：

運行下面代碼

View Code

 

　　把購物車的表添加上使用者的收貨地址和收貨手機就變成了==》》訂單表：

運行下面代碼

View Code

 

　　登入的使用者可以為商品添加評論， 所以就有了另外一個關聯表， 使用者評論表：

運行下面代碼

View Code

 

　　最後就是貫徹整個系統的使用者表：

運行下面代碼

View Code

 

 

回到頂部項目結構

　　web應用的基本結構

　　

 　　後台實現就是spring的路由和資料持久， 項目沒有對惡意字元進行過濾，所以存在注入問題， 有待加強， 基本的功能都夠用了；

　　　　　　

 

回到頂部最後

　　 有個比較坑事情的要說下， 比如寫了一小時的部落格，儲存部落格的時候發現沒網路了，心塞.... ，

　　 HTML5有個 window.navigator.onLine判斷瀏覽器是否線上的API， 但是部落格園的後台管理介面不能添加自訂JS， 所以也沒什麼用， 不知道有沒有好方法

　　 整個項目代碼在這兒： https://pan.baidu.com/s/1hs38qLu; 

 

 NONO 
出處：http://www.cnblogs.com/diligenceday/ 
QQ：287101329 

基於springMVC+angular+bootstrap+mysql的簡易購物網站搭建