本应用是一个基于SpringMVC与Web开发的网上商城应用,其采用结构化设计分析方法,该系统包括:后端接口模块、web前台购物和web后台管理这三大总的模块;
即根据用户需求分析,系统可大致分为以下几个模块组成
为完成整体需求,用户模块需要完成以下需求:
②用户注册——用户没有账号的时候则需要进行注册,注册时候要区分大小写,并且账号不能出现重复,密码要输入两次,若两次输入不一样则需要返回重新输入,若输入为空也需要重新输入
③用户名和头像的更换——用户可以点击自己的头像或者ID进行更改
为完成整体需求,商品模块需要完成以下需求:
①针对数据库的商品表开发对应后端接口;
②在web购物平台中,可以查看全部的商品列表
③在web购物平台中,可选择价格区间,查看对应价格区间的商品
④在web购物平台中,可根据关键词搜索商品
⑤在web购物平台中,可点击商品,查看商品详情
⑥在管理系统中对商品数据进行增删查改等管理操作;
为完成整体需求,购物车模块需要完成以下需求:
①购物车管理——用户点击“我的购物车”后,页面会展示用户在商品页中选择的商品,显示商品数据详情,及总金额;
②添加购物车——在商品详情页点击“加入购物车”,即可把商品加入购物车;
③删除购物车——用户点击删除按钮即可删除对应购物车;
④更改商品数目——在购物车中可以选择商品数目,然后自动生成总金额
⑤在管理系统中对购物车中数据进行增删查改等管理操作。
⑥在点击“结算”按钮后,将调用支付宝的沙箱支付功能,生成付款二维码,用户扫描二维码后会扣除账户内对应余额,若余额不足会给出相应提示。
①生成订单——用户点击“购买”后,会根据当前购物车里的商品生成对应的订单
②支付订单——用户扫描支付宝二维码或输入支付宝账户密码即可进行支付
③更新订单状态——生成订单后默认为“未付款”,若成功付款,则将订单状态更改为“已付款“
为完成整体需求,订单模块需要完成以下需求:
①订单管理——用户点击“我的订单”后,页面会展示用户在购物车中生成的所有订单,订单详情会显示用户名、商品名称、商品金额以及生成的订单编号
②删除订单——用户点击删除按钮即可删除对应订单
③在订单属性中添加“订单状态”,用户支付成功后将订单状态由“未支付”切换为“已支付”
④在管理系统中对购物车中数据进行增删查改等管理操作。
①在后端开发接口,在web管理系统中对商家数据进行管理;
②在web商城中,在商品详情页中显示商家信息;
③点击商家信息,跳转到对应商家链接
①在后端开发接口,在web管理系统及web商城中拦截器未被允许调用的接口;
②对于大部分接口,直接调用会被拦截器拦截;
①在后端开发接口,在web管理系统中的商品列表中调用文件管理的接口;
②可以excel的形式导出商品数据;
③可以excel的形式导入数据到商品列表中;
①在后端进行开发,在web管理系统及web商城中对进行国际化实现;
③在web商城中,可在主页界面点击切换语言显示;
①在后端进行开发,对接口实现异常处理;
②在web商城中,调用接口出现异常时,会出现异常处理信息;
③在web管理系统中,调用接口出现异常时,会出现异常处理信息;
附:系统功能模块
项目结构如下:
-GoodsAdmin后端项目
-WebShopweb商城
-WebShopAdminweb后台管理系统
关于后端项目的设计:
后端项目的数据库选择mysql,并基于SpringMVC框架,采用Mybatis技术进行开发,把Model,View,Controller分离,把较为复杂的web应用分成逻辑清晰的几部分,简化开发流程。
项目大致可划分为以下几个层
-Pojo层该层用于定义bean实体类,即数据库实体类;
-Mapper层用于进行数据库sql操作,并以接口的形式开放
-Controller层即控制层,在此处进行接口的编写
对于一个数据模块,就比如商品模块举例;
-首先要在pojo目录下,定义商品实体类,其每一个属性要与数据库字段一一对应;
当前端调用接口,传递来参数数据后,后端模块需要校验是否为有效数据,并解析参数数据,可能会存在数据类型转换的问题,例如:string转换为int、double;list转换为string等
关于前端项目的设计:
前端技术框架采用vue,前端UI使用的是Element的UI样式,并且采用axios调用后端已编写好的接口。
它会调用后端接口,获取数据,并转化为Json格式,通过javascrip解析,并显示在界面上;
根据需求分析,数据库共存在7张表;
-Goods商品表
-User用户表
-Cart购物车表
-Order订单表
-Store商家表
注销功能就是清除session信息即本地storage信息即可;
根路径:/login
ülogout——注销功能
用户模块主要是在后端通过spirngMVC进行后端接口的开发,通过vue及element框架实现前端,使用axios进行后端接口调用,使整个模块采用规范化的统一格式对后端进行接口网络请求。增加代码可读性及健壮性。
根路径:/user
üUserlogin——登陆判断
üaddUser——注册
üList
üUserfindByid——根据id获取用户
üupdateUser——根据id更新用户
üdelUser——根据id删除用户
üsearchUser——按keyword搜索货物信息
根路径:/goods
üselectAllGoods——查询所有商品列表
üselectGoodsById——按id查找货物信息
üselectGoodsByName——按name查找货物信息
üaddGoods——添加商品
üupdateGoods——修改商品信息
üdeleteGoodsById——根据id删除商品数据
üdeleteGoodsByName——根据name删除商品数据
üsearchGoods——按keyword查询商品列表
üselectGoodsByIdWithStore——根据商品id查询商家
根路径:/cart
üselectAllCart——查询所有购物车列表
ütoShoppingCart——将商品添加进入购物车
üdeleteCart——将商品从购物车删除
üselectCartById——根据购物车ID查询购物车
üupdateCart——修改购物车信息
ütoShoppingCart——根据id删除商品数据
üselectCartIdList——根据订单ID查询购物车信息
üaddCartOrder——将购物车添加进订单
üSelectGoodsByList——根据购物车ID查询商品ID集合
üpay——发起API调用
ünotify——支付宝回调接口,用于返回订单数据
üorder——根据购物车信息发起请求
üAliPayConfig——关于支付宝接口调用的配置
根路径:/order
üselectAllOrder——查询所有的订单
üselectOrderByorderId——按orderId查找订单信息
üselectOrderByuserId——按userId查找订单信息
üaddOrder——添加订单
üupdateOrder——修改订单信息
üdeleteOrderById——根据orderId删除订单数据
üsearchOrderById——根据orderId查找订单数据
üupdateStatus——根据orderId查找订单数据
üsearchCart——根据购物车cartId查看购物车
üselectOrderInfo——根据用户编号userId查看订单信息
üsearchOrder——根据关键词搜索全部订单
ü动态SQL
根路径:/comments
üselectCommentsbyGoodsId——按商品id查找商品信息
根路径:/Store
üselectAllStore——查询所有商品列表
üselectStoreById——按id查找货物信息
üselectStoreByName——按name查找货物信息
üaddStore——添加商品
üupdateStore——修改商品信息
üdeleteStoreById——根据id删除商品数据
üdeleteStoreByName——根据name删除商品数据
üsearchStore——按keyword查询商品列表
根路径:/Advert
üselectAllAdvert——查询所有商品列表
üselectAdvertById——按id查找货物信息
üselectAdvertByName——按name查找货物信息
üaddAdvert——添加商品
üupdateAdvert——修改商品信息
üdeleteAdvertById——根据id删除商品数据
üdeleteAdvertByName——根据name删除商品数据
üsearchAdvert——按keyword查询商品列表
首先在util中定义PoiUtils类,通过Poi插件,读取MultipartFile文件信息或是创建office文件,完成读取excel及创建excel功能;
读取excel,获取传入的MultipartFile读取对应的每一行每一列的数据,然后根据规范的格式通过set方法设置数据到实体类中,然后通过mapper中的sql操作,插入数据到数据库中;
导出excel则是通过goods的get方法,获取每一个属性的值,然后通过poi自带的api,插入数据到excel文件中,然后在接口中进行返回即可;
最后在controller中定义ExcelController方法,调用PouUtil类的方法,完成导出导入excel文件的接口即可;
根路径:/excel
üimport——导入excel文件到商品表中
üexport——导出商品表数据至excel文件
使用vue-i18n实现浏览器国际化,支持页面中英文切换
日常开发过程中,难免有的程序会因为某些原因抛出异常,而这些异常一般都是利用try,catch的方式处理异常或者throw,throws的方式抛出异常不管。这种方法对于程序员来说处理也比较麻烦,对客户来说也不太友好,所以我们希望既能方便程序员编写代码,不用过多的自己去处理各种异常编写重复的代码又能提升用户的体验,这时候全局异常处理就显得很重要也很便捷了。
üMyExceptionHandler——开启全局的异常捕获
üResult
üErrorEnum——自定义错误的枚举类
üDefinitionException——自定义异常处理类
üGlobalExceptionHandler——定义全局异常处理
üNotFoundException——404异常特殊处理
前台商城:120.77.80.71:80后台管理:120.77.80.71:8000后端接口:120.77.80.71:8081