springMVC+angular+bootstrap+mysql的简易购物网站搭建
2015-08-25 22:49
525 查看
springMVC+angular+bootstrap+mysql的简易购物网站搭建
介绍
前端的css框架用了bootstrap, 以及bootstrap的JS组件, 以及很好用的angular(angular大法好), 项目一共包含了7个静态界面, 静态界面的数据展示都使用了angularJS , 后端是基于java的spring, 容器为tomcat, 项目代码分享到百度云盘 , 这个项目的优势是, 所有的显示都是在前端完成, 数据交互也是通过ajax完成, 没有频繁的页面跳转;先上两张商城的主图:图一:
图一:
View Code
当用户点击界面的添加商品, 那么对应用户的购物车数据会发生改变;
购物车显示的是所有的选购商品, 在购物车里面也能随意的增加或者减少商品的个数, 金额会根据商品的个数,实时更新, 非常方便, 点击提交信息的话,那么这些购物车的商品就转换为用户的订单, 订单包含了收货人的地址和收货人手机号码 (前端的手机验证没有弄):
View Code
用户的订单页,该节目包含了用户“已支付”和“待支付”的订单:
View Code
项目是基于tomcat的服务器, 以及spring框架 (spring大法好), 数据库是mysql; spring:http://spring.io/projects
数据库的设计
既然是购物网站,那么必须有个 ==》》 商品表:运行下面代码
View Code
因为商品有类型之分,所以也要有 ==》》 类型表:
运行下面代码
View Code
当有多个商品的时候,就存在了例外一个表==》》 购物车表:
运行下面代码
View Code
把购物车的表添加上用户的收货地址和收货手机就变成了==》》订单表:
运行下面代码
View Code
登录的用户可以为商品添加评论, 所以就有了另外一个关联表, 用户评论表:
运行下面代码
View Code
最后就是贯彻整个系统的用户表:
运行下面代码
View Code
项目结构
web应用的基本结构如图:![](http://images0.cnblogs.com/blog2015/497865/201508/221642127691883.jpg)
后台实现就是spring的路由和数据持久, 项目没有对恶意字符进行过滤,所以存在注入问题, 有待加强, 基本的功能都够用了;
![](http://images0.cnblogs.com/blog2015/497865/201508/230048036754147.png)
最后
有个比较坑事情的要说下, 比如写了一小时的博客,保存博客的时候发现没网络了,心塞.... ,HTML5有个
window.navigator.onLine判断浏览器是否在线的API, 但是博客园的后台管理界面不能添加自定义JS, 所以也没什么用,不知道有没有好方法
整个项目代码在这儿: http://pan.baidu.com/s/1c036g1M;
作者: NONO
出处:http://www.cnblogs.com/diligenceday/
QQ:287101329
相关文章推荐
- bootstrap-js(六)弹出框
- bootstrap-datepicker.js日期控件的改变,就一点,不要吐槽
- bootstrap-js(5)工具提示tooltip
- 基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理
- 实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单
- bootstrap 用法小结
- 前端框架Bootstrap
- Bootstrap 4 更新的新功能(全)
- bootstrap加载model以及dataTable按钮操作
- bootstrap-js(4)标签页
- bootstrap-js(3)滚动监听
- bootstrap-js(2)下拉菜单
- bootstrap-js(1)模态框
- 玩转Bootstrap(基础) -- (6.导航条基础)
- bootstrap ace MVC
- bootstrap
- 让bootstrap的carousel支持滑动滚屏
- bootstrap--组件之按钮式下拉菜单
- css--Bootstrap框架
- bootstrap 学习(1)