1 前言

本次课程设计旨在考察学生对工程的规划与设计能力。本次课程设计中，我选择的题目是web应用，目的在于在对JAVAEE的兴趣的前提下，增加自己对WEB应用开发的项目经验，从项目中找到自己编码的闪光点，增加自信；又可以从中找到自己的不足，锻炼自己设计功能需求的思维能力，为以后正式步入开发岗位做好准备。

2 需求分析

随着网络的迅速发展和普及，以及网络支付手段的逐步完善，使得越来越多的人逐渐相信以及依赖于网上购物。只需在家，打开网上商城，就可以享受与实体店一般的选择购物以及送货上门的购物体验。传统的线下商城和超市已经越来越难满足现阶段越来越快的生活节奏，越来越多的人会因为时间关系而逐渐转移到网上商城，线下购物已经逐渐成为一种生活消遣放松的方式。而且网上商城能借助网络的便利性和跨地域的特点，能改良线下商城只能满足周边居民的这一缺点，实现跨地域的交易，从而大大增加了客户的数量。

我们这次所设计的网上商城“FPShop”，在满足用户各项需求的同时，也对各项功能进行了强化完善，目的是为了让用户能在享受网上购物的便利的同时，也能有个很流畅很舒服的购物体验。“FPShop”的个性和功能主要体现在下面几点：

1) 简洁美观的操作界面。这次网上商城的总体页面颜色采用了粉色，可爱温馨的颜色是为了能让用户在打开商城时能有个舒畅的心情。而简单的操作界面又能让用户在使用的时候不会因为过于繁琐而频繁出现错误操作，因此留下不愉快的购物体验。所以一个简单美观的操作界面能给用户留下好印象，从而留住用户。 1) 种类丰富的商品选择。为了能满足更多用户的要求，我们的网上商城设置了多个分类，让我们的商城不仅仅只能满足一部分商品需求。用户能通过分类搜索，简单快捷的找到自己想要的商品，也能通过分类列表，简单明了的知道这个网上商城所卖的商品。 1) 操作简便的前台功能布局。前台作为与用户直接交互的界面，在考虑功能的同时，也考虑了操作的简洁和方便性，目的是让大多数不在懂电脑操作的客户，也能轻松的享受电子商务给他们带来的便利。前台主要功能包括：注册/登录、个人中心、商品分类、购物车、最新商品、最热商品等功能。 1) 简单实用的后台管理。本商城的后台管理在操作上依旧以简单快捷而又不失实用为主。大体上分为用户管理、商品分类管理，商品信息管理、订单管理以及商品的上下架等功能。同时增加了可查看用户的消费情况。

3 系统设计

本系统采用B/S模式，前端和后台均使用框架进行开发，前端使用jsp、js和jq技术，后台使用springmvc、spring、mybatis框架整合开发。实现一个完整的网上商城从用户、商品、订单等的管理与操作。以下为详细的设计介绍：

3.1类结构设计

图1 类图

3.2购物基本流程时序图

图2 购物流程时序图

3.3数据库设计

User表，uid为主键。

图3 买家用户实体E-R图：

Product表，pid为主键，cid为外键。cid属于category表的主键。

图4 商品实体E-R图

Order表，oid为主键，aid为外键，aid是address表的主键。

图5 订单实体E-R图

Orderitem表，itemid为主键，oid、pid为外键，oid是order表主键，pid是product表主键。

图6 order item实体E-R图

Address表，aid为主键，uid为外键，uid为user表的主键。

图7 买家地址实体E-R图

Category表，cid为主键。

图8 商品类别实体E-R图

Power表，powerid为主键。

图9 报表实体E-R图

（1）User表结构设计：

User表主要记录了各个user的个人信息，通过uid主键来作为索引区别。通过state字段判断用户是否注销。Username和password 分别作为用户登录的账号和密码。这里的电话与地址无关。

图10 user表

（2）product表结构设计：

product表主要记录了所有商品的详细信息，通过pid主键作为索引区别。通过cid决定该商品属于哪个分类。

图11 product表

（3）address表结构设计:

address表主要记录了所有用户的地址，通过aid主键作为索引，uid作为外键标识属于哪个用户，每个用户可以用有多个地址，但是只能拥有一个默认地址。

图12 address表

（4）order表结构设计:

Order表主要记录了所有订单的状态、时间以及总花费，通过oid订单编号作为索引区别，以aid为外键索引订单发货地址。State分为四个状态：0为未付款，1为已付款未发货，2为已发货，3为已收货；默认0。Total字段是所有属于同一个oid的orderitem的subtotal的总和。

图13 order表

（5）Orderitem表结构设计：

Orderitem表主要记录了所有订单明细的信息，通过字段itemid订单明细编号作为索引区别。pid作为外键索引所买商品的详细信息。

图14 orderitem表

（6）Category表结构设计：

Category表主要记录了所有分类的信息，通过字段cid类别编号作为索引区别。。

图15 category表

（7）Power表结构设计：

Power主要是记录了后台管理员的信息，通过powerid管理员编号作为索引区别。

图16 power表

四系统实现

4.1 功能模块实现说明

（1）商品管理：

4.1.1 商品管理

后台可以通过该功能模块实现商品上架、商品下架、修改商品信息、查看商品。通过该模块将指定的商品信息增加到数据库中，实现商品上架功能。通过该模块将商城已有商品的商品数目改为0，实现下架商品功能。通过该模块在数据库内修改指定的商品信息，实现修改商品信息功能。

用户通过该模块实现在前台页面查看和搜索商品，并浏览商品。

图17 商品管理页面

图18 修改商品信息

图18 依据类别、价格及库存筛选

相关代码：

```java //商品分类 @RequestMapping("/admin/orderBy") public String orderBy(String cid,String price,String amount,HttpServletRequest request) { List productList = null; System.out.println("cid:"+cid+" price:"+price+ " amount:"+amount); if(cid != null) { productList = service.getProductByDetails(cid,price,amount); } request.setAttribute("productList", productList);

    return "admin/newProductManage";
}

//弹窗展示获得的商品数据
@RequestMapping("/admin/showProductInfo")
public void showProduct(String pid,HttpServletRequest request,HttpServletResponse response) throws IOException {
    Product product = productservice.getProductInfo(pid);
    Gson gson = new Gson();
    String json = gson.toJson(product);
    response.getWriter().write(json);
}
@RequestMapping("/admin/modifyProduct")
public void modifyProduct(Product product,HttpServletResponse response) throws IOException {
    System.out.println(product.getPid());
    productservice.modifyProduct(product);
    response.getWriter().write("{\"isSuc\":"+true+"}");

```

4.1.2 分类管理

后台可以通过该功能模块实现增加商品分类，修改商品分类以及删除商品分类等功能要求。对应在数据库中对分类信息进行增删改。

用户通过该功能模块实现商品的分类浏览。

图19 类别管理页面

图20 根据分类选择商品

相关代码：

```java AdminController: @RequestMapping("/admin/orderManage") public String orderManage(HttpServletRequest request) { List orderList = orderservice.getAllOrder();

    Gson gson = new Gson();
    String json = gson.toJson(orderList);
    request.setAttribute("orderList", orderList);
    request.setAttribute("json", json);
    return "admin/orderManage";
}

productController: @RequestMapping("/productByCategory") public String getOrderByUser(String cid, @RequestParam(value = "currentPage", defaultValue = "1") int currentPage, HttpServletRequest request) { PageBean pagebean = service.getProductListByCid(cid, currentPage); request.setAttribute("pageBean", pagebean); request.setAttribute("cid", cid); return "productList"; }

```

4.1.3 订单管理

用户通过该模块查看自己的订单信息、提交订单、删除订单以及更改订单收货状态。

后台通过该模块查看所有用户的订单信息以及更改订单的发货状态。

图21 个人中心订单

图22 订单管理页面

4.1.4 用户权限

用户权限分为一般浏览者和买家。一般浏览者可以查看所有商品信息，但是不能购买商品以及没有个人中心，在选择购买时会跳到用户注册登录界面。买家则是已登录的用户，可以购买商品也拥有自己的个人中心，可查看自己的个人信息。

图23 登录页面

图24 个人中心资料页

相关代码：

```java UserInterceptor.java 登录拦截器： public class UserInterceptor implements HandlerInterceptor {

@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object arg2) throws Exception {
    HttpSession session = request.getSession();
    Object user = session.getAttribute("user");
    if(user != null) {
        return true;
    }else {
        response.sendRedirect(request.getContextPath()+"/login.html");
    }
    return false;
}

```

4.1.5 注册与登录

用户只有在登录后才可以购买商品以及查看个人信息，没有账户的游客则需要进行注册再登录。

图25 注册新账号

相关代码：

```java UserConroller： @RequestMapping("/login") public void login(String account, String password, HttpServletRequest request, HttpServletResponse response) throws Exception { String email = ""; String username = ""; boolean flag = false; try { String check = "^([a-z0-9A-Z]+[-|_|\.]?)+[a-z0-9A-Z]@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\.)+[a-zA-Z]{2,}$"; Pattern regex = Pattern.compile(check); Matcher matcher = regex.matcher(account); flag = matcher.matches(); } catch (Exception e) { flag = false; } if (flag) { email = account; } else { username = account; }

    System.out.println("email:" + email);
    System.out.println("username:" + username);
    User user = new User();
    user.setUsername(username);
    user.setEmail(email);
    user.setPassword(password);

    User logined = service.login(user);

    boolean isSuccess = true;
    System.out.println(logined);
    HttpSession session = request.getSession();
    if (logined != null) {
        session.setAttribute("user", logined);
        response.getWriter().write("{\"isSuccess\":" + isSuccess + "}");
    }else {
        isSuccess = false;
        response.getWriter().write("{\"isSuccess\":" + isSuccess + "}");
    }

}

```

4.1.6 浏览商品

所有人都可以浏览商品。

图26 浏览商品

图27 详细商品信息

相关代码：

```java ProductController： //根据pid展示商品 @RequestMapping("/product") public String productInfo(String pid, HttpServletRequest request) {

    Product product = service.getProductInfo(pid);
    request.setAttribute("product", product);

    return "productInfo";
}

indexController： //展示最新和热门商品 @RequestMapping(value = {"/","/index"}) public String index(Model model) {

    List<Product> hotProductList = indexservice.getHotProducts();
    List<Product> newProductList = indexservice.getNewProducts();
    model.addAttribute("hotProductList", hotProductList);
    model.addAttribute("newProductList", newProductList);

    return "index";
}

```

4.1.7 用户信息管理

用户可以在这里查看自己的所有信息，以及地址管理和充值服务。

图28 修改个人资料

图29 余额充值页面-方式一

图30 余额充值页面-方式二

图31 新增地址

图32 修改地址

相关代码：

```java userController： @RequestMapping("/user/userInfo") public String toUserInfo() { return "privilege/userInfo"; } // 修改用户信息 @RequestMapping("/user/modify") public void modifyUserInfo(User user, HttpServletRequest request, HttpServletResponse response) throws Exception { System.out.println(user);

    service.modifyUserInfo(user);
    User newUser = service.getUser(user.getUid());
    HttpSession session = request.getSession();
    Boolean isSuccess = false;
    if (newUser != null) {
        isSuccess = true;
        session.setAttribute("user", newUser);
    }
    response.getWriter().write("{\"isSuccess\":" + isSuccess + "}");
}

// 前往充值余额页面
@RequestMapping("/user/balance")
public String toBalancePage() {
    return "privilege/balance";
}
// 充值余额
@RequestMapping("/user/recharge")
public void recharge(Double pay, HttpServletRequest request, HttpServletResponse response) throws Exception {
    HttpSession session = request.getSession();
    User user = (User) session.getAttribute("user");
    Double money = user.getMoney();
    Double newMonney = 0.0;
    if (pay != 0.0 && pay != null) {
        newMonney = money + pay;
    }
    System.out.println("money:" + newMonney);
    user.setMoney(newMonney);

    service.modifyUserInfo(user);
    user = service.getUser(user.getUid());
    System.out.println(user);
    session.setAttribute("user", user);
    Boolean isSuccess = false;
    if (user.getUid() != "") {
        isSuccess = true;
    }
    response.getWriter().write("{\"isSuccess\":" + isSuccess + "}");

} // 跳转到支付成功页面 @RequestMapping("/user/paySuccess") public String topaySuccessPage() { return "privilege/recharge"; }

// getAddsByUser
@RequestMapping("/user/address")
public String addressManage(HttpServletRequest request) {
    HttpSession session = request.getSession();
    User user = (User) session.getAttribute("user");
    List<Address> addList = service.getAddress(user.getUid());
    request.setAttribute("addList", addList);

    return "privilege/addManage";
}

// 添加或修改用户地址
@RequestMapping("/user/addManage")
public String addManage(String aid,String tel,String address,String name,HttpServletRequest request) {
    System.out.println(aid);
    System.out.println(tel);
    System.out.println(address);
    System.out.println(name);

    Address address1 = new Address();
    address1.setAid(aid);
    address1.setTel(tel);
    address1.setAddress(address);
    address1.setName(name);

    System.out.println(address1);
    HttpSession session = request.getSession();
    User user = (User)session.getAttribute("user");
    address1.setUid(user.getUid());
    System.out.println(address1);
    if(address1.getAid() != null && address1.getAid() != "") {
        service.updateAdd(address1);
    }else {
        service.addAddress(address1);
    }

    return "redirect:/user/address";
}

//删除地址
@RequestMapping("/user/delAdd")
public String delAdd(@RequestParam(value = "aid") String aid) {
    Address address = new Address();
    address.setAid(aid);

    service.delAdd(address);

    return "redirect:/user/address";
}

//设置默认地址
@RequestMapping("/user/setDefaultAdd")
public String setDefaultAdd(String aid,HttpServletRequest request) {
    HttpSession session = request.getSession();
    User user = (User)session.getAttribute("user");

    Address address = new Address();
    address.setAid(aid);
    address.setUid(user.getUid());

    service.setDefaultAdd(address);


    return  "redirect:/user/address";
}

@RequestMapping("/user/setDefaultAddFromCart")
public String setDefaultAddFromCart(String aid,HttpServletRequest request) {
    HttpSession session = request.getSession();
    User user = (User) session.getAttribute("user");
    Address address = new Address();
    address.setAid(aid);
    address.setUid(user.getUid());

    service.setDefaultAdd(address);

    List<Address> addList = service.getAddress(user.getUid());

    session.setAttribute("addListCart", addList);

    return "redirect:/cart.html";

}

```

4.18 购物车模块

用户可以将自己心仪的商品先添加至购物车，然后继续浏览其他商品，最后再进行付款提交订单。

图33 购物车页面

图34 确认订单

图35 购物车为空

相关代码：

```java Productcontroller: // 加入购物车 @RequestMapping("/addCart") public String addCart(String pid, int buyNum, HttpServletRequest request) { HttpSession session = request.getSession();

    Cart cart = (Cart) session.getAttribute("cart");
    if (cart == null) {
        cart = new Cart();
    }
    CartItem cartitem = new CartItem();
    Product product = service.getProductInfo(pid);
    cartitem.setProduct(product);
    cartitem.setBuyNum(buyNum);

    double subtotal = product.getPrice() * buyNum;
    cartitem.setSubtotal(subtotal);

    double total = 0.0d;
    Map<String, CartItem> cartItems = cart.getCartItems();
    if(cartItems.containsKey(pid)) {
        CartItem item = cartItems.get(pid); 
        int oldNum = item.getBuyNum();
        int newNum = oldNum+buyNum;
        item.setBuyNum(newNum);
        item.setSubtotal(product.getPrice()*newNum);
        cart.setCartItems(cartItems);
    }else {
        cartItems.put(pid, cartitem);
    }

    total = cart.getTotal()+cartitem.getSubtotal();
    cart.setTotal(total);
    User user = (User) session.getAttribute("user");
    if (user != null) {
        List<Address> address = userservice.getAddress(user.getUid());
        System.out.println(address);
        session.setAttribute("addListCart", address);
    }
    session.setAttribute("cart", cart);
    return "redirect:/cart.html";
}

@RequestMapping("/delCartItem")
public String delCartItem(String pid,HttpServletRequest request) {
    HttpSession session = request.getSession();
    Cart cart = (Cart) session.getAttribute("cart");
    if(cart!=null) {
        Map<String, CartItem> cartItems = cart.getCartItems();
        //修改总价
        double  newTotal = cart.getTotal() - cartItems.get(pid).getSubtotal();
        cart.setTotal(newTotal);
        // 删除
        cartItems.remove(pid);
        cart.setCartItems(cartItems);
    }
    session.setAttribute("cart", cart);
    return "redirect:/cart.html";
}
@RequestMapping("/removeCart")
public String removeCart(HttpServletRequest request) {
    HttpSession session = request.getSession();
    session.removeAttribute("cart");

    return "redirect:/cart.html";

}

```

4.2 配置文件

ApplicationContext.xml是web应用中spring框架的配置文件，负责对web系统中beanfactory和各个bean的属性注入以及数据库连接池的配置设置。

部分配置代码如下：

```

<!-- sqlSessionFactory -->
<bean id="sqlSessionFactory"
  >
  <!-- mybatis核心配置 -->
  <property name="configLocation"
    value="classpath:SqlMapConfig.xml"></property>
  <!-- 数据源 -->
  <property name="dataSource" ref="dataSource" />
</bean>
<!-- mapper扫描器 -->
<bean >
  <property name="basePackage" value="cn.fpshop.dao" />
</bean>

```

Springmvc.xml是基于SSM的web系统中SpringMVC的配置文件。负责对springmvc的核心组件前端控制器、处理器等进行配置