码迷,mamicode.com
首页 > 数据库 > 详细

基于springMVC+angular+bootstrap+mysql的简易购物网站搭建

时间:2016-08-19 09:45:16      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:

  介绍

  前端的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的简易购物网站搭建

标签:

原文地址:http://www.cnblogs.com/think90/p/5786216.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!