基于SpringMVC的网络购物网站

一、设计要求
本次课程设计要求在 SpringMVC 框架上实现简单的网上网络购物网站。
1.技术要求
（1）数据库：MySQL；
（2）服务端开发：JAVA 语言和 SrpingMVC 框架；
（3）客户端开发：应用 HTML、JavaScript、JQuery 和 Bootstrap 等语言和工具；
（4）可以使用其他前端框架如 VUE，React 等前端框架
2.功能要求
（1）管理员用户登录功能（管理员账户提前内置在数据库中）；（2）普通用户注册和登录功能；
（3）商品维护：在系统中添加和维护商品，商品除基本信息外还要包括商品照片，本功能需要管理员权限；
（4）商品展示：显示商品列表和某件商品详细信息，需要展示商品图片；
（5）购物车功能：用户可以将商品加入购物车并对购物车内商品进行维护。
（6）生成订单功能：在购物车商品中选择确定要购买的商品生成订单，已经生成订单的商品要在购物车中删除
（7）生成订单时相关商品的库存数量减少，库存数量少于用户购买数量的商品提示用户库存不足
（8）普通用户可以查看自己的所有订单（分页显示）
（9）管理员可以查看系统中的所有订单（分页显示）
（10）管理员用户可以查看系统中的所有用户（分页显示），可以禁用某个用户，禁用以后该用户不能登录。
（11）管理员登录以后页面左侧显示功能菜单，包括商品管理，订单
管理和用户管理，普通用户登录后直接展示所有商品，并在页面顶部显示
购物车和我的订单链接；
3.课程设计报告撰写要求
（1）报告分为技术介绍、设计内容和总结三部分（参照下页）；
（2）设计内容部分针对功能要求中的每一点详细说明实现思路，并配以实现程序（包括前端和后端）和网页截图，每小节一个功能点；
（3）提交课程设计报告的电子版（WORD 文件，以学号+姓名命名）和
打印版，项目所有程序压缩成一个压缩文件，与报告的电子版一起提交；
（4）按时提交设计报告。
二、技术介绍
SpringMVC 包括视图层（view）、控制层（controller）、数据层（model）View：视图层，展示数据内容；
Controller：控制层，一般用“controller”关键字定义；
Model：数据层，一般用“.model”、“.dao”、“.service”等关键字定义
Controller：控制层，接收和返回客户端的参数，作用是整个工程对外访问的地方。
Servie：业务层，存放与具体业务相关的的方法，作用是上接控制层（controller） 下衔数据库访问层（dao）。一般在 service 的实现类会出现在 controller 中。这些 service 提供了包含逻辑的数据访问。
Impl： 以 IMPL 结尾的类一般是实现了某个或多个接口（service）的类。这些类的接口定义了一些规范的类，通常是数据访问和实现逻辑。
Dao： 数据库访问层（dao、repository），工程中与数据库交互的地
方和方法。作用是降低工程结构之间的耦合，使业务逻辑与数据库交互耦
合降低；提供应用程序与数据库之间的操作规范和操作，用于通常数据库
的增删查改。
Model ： 实体类（model、entity、domain）。作用是将数据库字段
与 Java 操作进行对象化操作联系起来，为了便于理解业务和代码可读美观通常将数据库表作为对象封装，一般操作 DAO 类的时传入的是 Model 通过
hibernate 的映射文件，映射到数据库字段也就是通常说的通过实体类操作数据库。
三、设计内容
1、管理员登录：管理员的 ID 为 1，其他的都是非管理员。
function login()//登录管理商品和购物
{
$.ajax({
url: “user/login”,
type: ‘post’,
dataType: ‘json’,
data: $(“#loginForm”).serialize(),
success: function (data) {
alert(data.message);
if(data.code ==“succ”)
{
window.location.href=“product.html”;
}
}
})
}
function usermanage()//登录管理用户
{
$.ajax({
url: “user/usermanage”,
type: ‘post’,
dataType: ‘json’,
data: $(“#loginForm”).serialize(),
success: function (data) {
alert(data.message);
if(data.code ==“succ”)
{
window.location.href=“user.html”;
}
}
})
}
@PostMapping(value = “/usermanage”)
public Result manageuser(String username, String password,
HttpSession session)
{
User u=userService.login(username,password);
Result r=new Result();
if(u!=null&&u.getId()==1)//是管理员
{
r.setCode(“succ”);
r.setMessage(“成功”);
r.setEntity(u);
session.setAttribute(“loginUser”,u);
}
else
{
r.setMessage(“你不是管理员”);
r.setCode(“fail”);
}
return r;
}
2、普通用户登录：普通用户只能购物。
@PostMapping(value = “/login”)
public Result login(String username, String password, HttpSession
session)
{
User u=userService.login(username,password);
Result r=new Result();
if(u!=null&&u.getBanned()==null)//banned 非空可以登陆{
r.setCode(“succ”);
r.setMessage(“成功”);
r.setEntity(u);
session.setAttribute(“loginUser”,u);
}
else
{
r.setMessage(“失败”);
r.setCode(“fail”);
}
return r;
}
3、注册：创建新账号
$(“#saveConfirmBtn”).click(function() {//保存新账号信息
$(“#saveModal”).modal(‘hide’);
$.ajax({
url : “user/save”,
type : ‘post’,
dataType:‘json’,
data : $(“#userForm”).serialize(), success : function(data) {
alert(data.message);//修改
//重新加载表格
$(“#table”).bootstrapTable(“refresh”);
}
});
});
4、商品管理：管理员可以管理商品
5、普通用户购物：普通用户只能查看商品和加入购物和
6、生成订单
order.setTotalMoney(total);//总金额赋值到订单当中
productOrderService.save(order, items);//
shopCartItems.clear();//清空当前购物车
7、用户管理：管理员可以管理用户，把用户的 banned 属性设置为非空就不能登录了
四、总结
通过这次课程设计，我对 web 开发技术有了更深的理解和掌握。这次
课程设计提高了我的 web 开发能力。我一开始觉得课程设计很难，在做课
程设计的过程中，我遇到问题和困难查阅了有关资料，我也得到了同学们的帮助。课程设计做完的时候我就觉得很有成就感。
三、系统详细设计
（说明自定义数据结构每个成员的含义和每个自定义函数的主要作用，对于拓展内容中的每个要求结合实现代码详细说明实现过程）
function login()
{
$.ajax({
url: “user/login”,
type: ‘post’,
dataType: ‘json’,
data: $(“#loginForm”).serialize(),
success: function (data) {
alert(data.message);
if(data.code ==“succ”)
{
// 判断是否为管理员
if(data.admin === true) {
window.location.href=“user.html”;
} else {
window.location.href=“product.html”;
}
} else if(data.code == “ban”) {
alert(“此用户已被禁止登录！”);
}
}
})
}
自定义数据结构：

1. code字段：表示接口的返回状态，如succ表示成功，fail表示失败，ban表示用户被禁止登录等。
2. message字段：表示接口返回的具体信息，如成功或失败的原因等。
3. admin字段：表示用户是否为管理员，为true表示是管理员，为false表示不是管理员。

自定义函数：

1. login()函数：主要用于发送登录请求，根据返回数据判断登录成功与否，并进行页面跳转。同时，如果用户是管理员，会跳转到管理员界面。
2. usermanage()函数：主要用于发送管理用户请求，根据返回数据进行页面跳转。
3. register()函数：主要用于弹出添加用户模态框。
4. $("#saveConfirmBtn").click()函数：主要用于提交添加用户信息的表单。

拓展内容：

1. 自定义数据结构可以根据项目的实际需要进行更改或者扩展。
2. 第一个参数为接口地址，可以根据实际需要进行修改，如更改为绝对路径。
3. type字段表示请求类型，可选值有：GET、POST、PUT、DELETE等，根据实际需要进行修改。
4. dataType字段表示返回数据类型，可选值有：xml、html、text、json、jsonp、script等。需要根据实际情况进行修改。例如返回JSON数据时，设为’json’。
5. data字段表示发送给服务器的数据，可以是字符串或者JavaScript对象，如$(“#loginForm”).serialize()返回的是序列化后的字符串。
6. success字段是回调函数，主要用于处理返回的数据，可以根据需要进行修改，如添加更多的处理逻辑，例如弹出提示框、重定向到其他页面等。
7. 判断是否为管理员的部分，需要在接口返回数据中包含admin字段，并且返回的值为布尔类型。函数中根据服务器返回的admin值判断用户是否为管理员，从而决定页面跳转到哪个页面。
8. $("#saveConfirmBtn").click()是jquery的事件委托函数，用于处理添加用户表单的提交事件，该函数中使用ajax向服务端发送添加用户请求，并在返回成功后重新加载表格。
   服务端：
   //在User类中添加banned
   private Integer banned;
   public Integer getBanned() {
   return banned;
   }

public void setBanned(Integer banned) {
this.banned = banned;
}
以上代码是一个Java Bean中的属性banned及其相应的getter和setter方法，用于表示用户是否被禁止登录。private Integer banned表示用户是否被禁止登录的状态，可以用0表示未被禁止，1表示已被禁止。getBanned()方法用于获取用户是否被禁止登录的状态，setBanned()方法用于设置用户是否被禁止登录的状态。这样，可以在业务逻辑中方便地获取和设置用户是否被禁止登录的状态。
UserController.java:
@PostMapping(value = “/login”)
public Result login(String username, String password, HttpSession session)
{
User u=userService.login(username,password);
Result r=new Result();
if(u!=null&&u.getBanned()==null)
{
r.setCode(“succ”);
r.setMessage(“成功”);
r.setEntity(u);
session.setAttribute(“loginUser”,u);
}
else
{
r.setMessage(“失败”);
r.setCode(“fail”);
}
return r;
}

其具体实现如下：
使用@PostMapping注解表示该方法处理HTTP POST请求。value = “/login"表示该方法处理的请求路径为“/login”。public Result login(String username, String password, HttpSession session)方法包含三个参数：(1)username：请求中包含的用户名。(2)password：请求中包含的用户密码。(3)session：用户登录成功后的会话信息，用于保存用户相关信息。(1)userService.login(username,password)调用userService的login()方法，判断用户是否登录成功。(2)r=new Result()实例化一个Result对象，用于表示接口返回的数据，其中Result是一个自定义的Java Bean。(3)判断用户是否登录成功，如果成功并且未被禁止，则设置接口返回状态为"succ”，返回信息为"成功"，并将登录用户信息保存在会话中。如果不成功或者已被禁止，则设置接口返回状态为"fail"，返回信息为"失败"。(4)return r返回接口返回数据。在前端中可以通过AJAX接收该数据并进行相应处理。

四、系统源代码

1. 服务端程序…
2. 客户端程序…