基于WEB的电子产品商城网站的设计与实施

作者主页：编程千纸鹤

作者简介：Java、前端、Python开发多年，做过高程，项目经理，架构师

主要内容：Java项目开发、毕业设计开发、面试技术整理、最新技术分享

收藏点赞不迷路  关注作者有好处

文末获得源码

项目编号：BS-SC-028

一，环境介绍

语言环境：Java:  jdk1.8

数据库：Mysql: mysql5.7

应用服务器：Tomcat:  tomcat8.5.31

开发工具：IDEA或eclipse

开发技术：SSM+JSP

二，项目简介

 网络销售已经成为现在商品销售的一个主流趋势，传统的代理模式己经不在适合现在的商业的生态发展。网络销售可以实现F2C的这种厂家直销到客户手中的方式，这种方式可以降低销售成本，减少中间环节，让利给消费者，并且可以打破地域和时空的限制，让买卖更加的自由灵活。

经过调研开发的这套SSM手机商城系统，主要基于SSM框架进行商城系统的整体开发实现。前端使用Bootstrap进行页面布局，并使用MySql5.7关系型数据库进行商品和业务数据的存储。系统整体功能完整，操作简洁方便。

本商城系统主要实现在线销售各类品牌手机的功能，包含前端商品展示和购买以及后台管理功能。主要实现商品浏览、在线下单购买手机、热销手机查看、个人中心管理、后台的用户数据、订单数据、产品数据的管理等相关功能。本商城的上线必定能为商家的产品销售提供更好的销售渠道。

  SSM手机商城系统的使用者主要包含两种用户角色，其一是商城后台管理员角色，其二是商城前端用户角色，这两个角色的具体功能如下：

    管理员角色：管理员登录手机商城系统后台管理，对系统中相关的业务数据可以进行相应的管理操作，主要包含：前端客户管理、手机商品管理、手机订单管理、手机分类管理等操作；

前台用户角色：前台用户登录SSM手机商城系统后可以进行手机商品信息浏览、选择手机添加到购物车、在线下单购买、个人中心管理等操作。

下面展示一下SSM手机商城的功能结构图，如下图3-1所示。

图2-1 系统功能结构图

系统各模块功能介绍如下：

前台用户功能：

1. 注册登陆：前端用户注册成功后可以输入自己的账户密码进行登陆，未登陆用户可以在线浏览相应的商品，但是不能购买，只有登陆系统后能执行相关的购买下单等操作。
2. 个人信息：主要对个人信息，登陆密码进行修改维护。
3. 浏览商品：可以查看所有类别的商品，并可以根据后台发布的热销产品进行查看，同进可以进行全文检索来搜索相关商品，实现基于商品名称的模糊查询。
4. 在线下单：用户查看商品详情时，可以将商品添加到购物车中进行在线下单购买
5. 我的订单：在我的订单中可以查看个人所有的订单信息。

    后台用户进行相应的业务数据管理功能如下：

1.    用户管理：可以管理前端注册的客户信息，进行相应的数据增删改查操作。
2.    商品管理：可以管理手机商城系统中展示的手机商品信息，进行相应的数据增删改查操作。
3.    订单管理：对前端用户的下单信息进行相应的管理操作。
4.    类目管理：主要实现对前端商城里展示的手机分类信息进行管理。
5.    修改密码：可以修改后台管理员的登陆密码。   

下面展示一下具体的表结构设计。

用户信息表主要存储前端用户注册的相关信息，具体表结构如下。

表1 users表

管理员信息表主要用来存储系统后台管理员的账户信息，具体的表结构如下。

表2 admins表

手机商品信息表主要存储手机商品的相关信息，具体表结构如下。

表3 goods表

手机品牌类型表主要存储手机所属品牌类型的基本信息，具体表结构如下所示。

表4 types表

商品热销信息表主要存储热销商品的相关信息，具体表结构如下所示。

表5 tops表

定单信息表主要存储订单的相关信息，具体表结构如下所示。

表6 orders表

定单明细信息表主要存储订单的相关的详情信息，具体表结构如下所示。

表7 items表

三，系统展示

3.1 SSM手机商城功能模块的展示

3.1.1 前台首页展示

   SSM手机商城前端主要就是实现商品的信息浏览及购买下单操作，主要包含商品浏览、在线下单、个人中心、我的订单等。具体操作界面展示如下图3-1所示。

图3-1 前台首页界面

3.1.2 商品分类浏览模块

用户进入SSM手机商城后进入分类查看即可查看不同手机品牌分类的商品信息列表，具体如下图6-2所示：

图3-2 分类查看界面

3.1.3前台用户购物车模块

    SSM手机商场面前台用户登陆系统后可以进入手机详情页面中将手机添加到购物车。然后在购物车中可以实现在线下单购买操作。添加购物车及用户下单操作界面如下图4-3、4-4所示。

图4-3 前台用户添加购物车操作界面

图4-4 前台用户提交订单操作界面

4.1.4 前台用户购买支付模块

    前台用户登陆SSM手机商城系统后，可以在提交订单后支付购买。相关管理操作界面如下图4-5所示。

图4-5前台用户订单支付界面

4.1.5前台用户个人订单管理模块

    SSM手机商城系统前台用户登陆系统后可以在个人订单管理模块中管理个人的订单信息。可以根据订单状态显示相关信息，并可以对未支付的订单进行支付操作，前端用户个人订单管理操作界面如下图4-6所示。

图4-6前台用户个人订单管理操作界面

4.1.6前台用户个人信息管理模块

    SSM手机商城系统前台用户登陆系统后可以在个人信息管理模块中管理个人的相关信息。前端用户个人信息管理操作界面如下图4-7所示。

图4-7前台用户个人信息管理操作界面

4.2后台功能模块的展示

4.2.1后台用户登录功能

    SSM手机商城系统后台用户如果想要对商城的相关信息进行管理操作，首先要登录系统，才可展开相关的操作。输入手机号和密码后用户登陆界面如下图4-6所示。

图4-10后台用户登录操作界面

4.2.2客户管理功能

    SSM手机商城系统系统管理员用户登陆系统后，可以进入客户管理菜单进行相应的管理员客户信息管理。用户管理操作界面如下图4-11、4-12所示：

图4-11后台客户管理功能界面图

 图4-12后台客户新增界面图

4.2.3 后台手机商品管理操作UI

    SSM手机商城系统管理员用户登陆系统后，可以进入商品管理菜单进行相应的手机商品信息管理。其中主要包含手机商品的添加、修改、查询、加入条幅、加入新品、加入热销以及相应的移出操作等。商品信息管理操作界面如下图4-13、4-14所示。

图4-13后台商品管理功能UI界面

 图4-14商台餐品新增功能UI界面

4.2.4 后台订单管理操作UI

    SSM手机商城系统系统管理员用户登陆系统后，可以进入商品订单管理菜单进行相应的商品订单信息管理。其中主要包含订单的查询、订单明细的查看等，可以根据订单不同的完成状态来查行查看，并可以根据用户的付款情况，收货情况等来设置订单的不同完成状，订单信息管理操作界面如下图4-15所示。

图4-15后台订单管理功能UI界面

4.2.5 后台商品类目管理操作UI

    SSM手机商城系统管理员用户登陆系统后，可以进入商品类目管理模块管理餐品的分类信息。商品类目管理界面如下图4-16所示。

图4-16商品类目管理功能UI界面

四，核心代码展示

package com.controller;

import java.util.Objects;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import com.entity.Admins;
import com.entity.Goods;
import com.entity.Tops;
import com.entity.Types;
import com.entity.Users;
import com.service.AdminService;
import com.service.GoodService;
import com.service.OrderService;
import com.service.TopService;
import com.service.TypeService;
import com.service.UserService;
import com.util.PageUtil;
import com.util.SafeUtil;
import com.util.UploadUtil;

/**
 * 后台相关接口
 */
@Controller
@RequestMapping("/admin")
public class AdminController {

	private static final int rows = 10;

	@Autowired
	private AdminService adminService;
	@Autowired
	private OrderService orderService;
	@Autowired
	private UserService userService;
	@Autowired
	private GoodService goodService;
	@Autowired
	private TopService topService;
	@Autowired
	private TypeService typeService;

	/**
	 * 管理员登录
	 * @return
	 */
	@RequestMapping("/login")
	public String login(Admins admin, HttpServletRequest request, HttpSession session) {
		if (adminService.checkUser(admin.getUsername(), admin.getPassword())) {
			session.setAttribute("username", admin.getUsername());
			return "redirect:index";
		}
		request.setAttribute("msg", "用户名或密码错误!");
		return "/admin/login.jsp";
	}

	/**
	 * 退出
	 * @return
	 */
	@RequestMapping("/logout")
	public String logout(HttpSession session) {
		session.removeAttribute("admin");
		return "/admin/login.jsp";
	}
	
	/**
	 * 后台首页
	 * @return
	 */
	@RequestMapping("/index")
	public String index(HttpServletRequest request) {
		request.setAttribute("msg", "恭喜你! 登录成功了");
		return "/admin/index.jsp";
	}

	/**
	 * 订单列表
	 * 
	 * @return
	 */
	@RequestMapping("/orderList")
	public String orderList(@RequestParam(required=false, defaultValue="0")byte status, HttpServletRequest request,
			@RequestParam(required=false, defaultValue="1") int page) {
		request.setAttribute("flag", 1);
		request.setAttribute("status", status);
		request.setAttribute("orderList", orderService.getList(status, page, rows));
		request.setAttribute("pageTool", PageUtil.getPageTool(request, orderService.getTotal(status), page, rows));
		return "/admin/order_list.jsp";
	}

	/**
	 * 订单发货
	 * 
	 * @return
	 */
	@RequestMapping("/orderDispose")
	public String orderDispose(int id, byte status,
			@RequestParam(required=false, defaultValue="1") int page) {
		orderService.dispose(id);
		return "redirect:orderList?flag=1&status="+status+"&page="+page;
	}
	
	/**
	 * 订单完成
	 * 
	 * @return
	 */
	@RequestMapping("/orderFinish")
	public String orderFinish(int id, byte status,
			@RequestParam(required=false, defaultValue="1") int page) {
		orderService.finish(id);
		return "redirect:orderList?flag=1&status="+status+"&page="+page;
	}

	/**
	 * 订单删除
	 * 
	 * @return
	 */
	@RequestMapping("/orderDelete")
	public String orderDelete(int id, byte status,
			@RequestParam(required=false, defaultValue="1") int page) {
		orderService.delete(id);
		return "redirect:orderList?flag=1&status="+status+"&page="+page;
	}

	/**
	 * 顾客管理
	 * 
	 * @return
	 */
	@RequestMapping("/userList")
	public String userList(HttpServletRequest request,
			@RequestParam(required=false, defaultValue="1") int page) {
		request.setAttribute("flag", 2);
		request.setAttribute("userList", userService.getList(page, rows));
		request.setAttribute("pageTool", PageUtil.getPageTool(request, userService.getTotal(), page, rows));
		return "/admin/user_list.jsp";
	}

	/**
	 * 顾客添加
	 * 
	 * @return
	 */
	@RequestMapping("/userAdd")
	public String userAdd(HttpServletRequest request) {
		request.setAttribute("flag", 2);
		return "/admin/user_add.jsp";
	}

	/**
	 * 顾客添加
	 * 
	 * @return
	 */
	@RequestMapping("/userSave")
	public String userSave(Users user, HttpServletRequest request, 
			@RequestParam(required=false, defaultValue="1") int page) {
		if (userService.isExist(user.getUsername())) {
			request.setAttribute("msg", "用户名已存在!");
			return "/admin/user_add.jsp";
		}
		userService.add(user);
		return "redirect:userList?flag=2&page="+page;
	}

	/**
	 * 顾客密码重置页面
	 * 
	 * @return
	 */
	@RequestMapping("/userRe")
	public String userRe(int id, HttpServletRequest request) {
		request.setAttribute("flag", 2);
		request.setAttribute("user", userService.get(id));
		return "/admin/user_reset.jsp";
	}

	/**
	 * 顾客密码重置
	 * 
	 * @return
	 */
	@RequestMapping("/userReset")
	public String userReset(Users user, 
			@RequestParam(required=false, defaultValue="1") int page) {
		String password = SafeUtil.encode(user.getPassword());
		user = userService.get(user.getId());
		user.setPassword(password);
		userService.update(user);
		return "redirect:userList?flag=2&page="+page;
	}

	/**
	 * 顾客更新
	 * 
	 * @return
	 */
	@RequestMapping("/userEdit")
	public String userEdit(int id, HttpServletRequest request) {
		request.setAttribute("flag", 2);
		request.setAttribute("user", userService.get(id));
		return "/admin/user_edit.jsp";
	}

	/**
	 * 顾客更新
	 * 
	 * @return
	 */
	@RequestMapping("/userUpdate")
	public String userUpdate(Users user, 
			@RequestParam(required=false, defaultValue="1") int page) {
		userService.update(user);
		return "redirect:userList?flag=2&page="+page;
	}

	/**
	 * 顾客删除
	 * 
	 * @return
	 */
	@RequestMapping("/userDelete")
	public String userDelete(Users user, 
			@RequestParam(required=false, defaultValue="1") int page) {
		userService.delete(user);
		return "redirect:userList?flag=2&page="+page;
	}

	/**
	 * 产品列表
	 * 
	 * @return
	 */
	@RequestMapping("/goodList")
	public String goodList(@RequestParam(required=false, defaultValue="0")byte status, HttpServletRequest request, 
			@RequestParam(required=false, defaultValue="1") int page) {
		request.setAttribute("flag", 3);
		request.setAttribute("page", page);
		request.setAttribute("status", status);
		request.setAttribute("goodList", goodService.getList(status, page, rows));
		request.setAttribute("pageTool", PageUtil.getPageTool(request, goodService.getTotal(status), page, rows));
		return "/admin/good_list.jsp";
	}

	/**
	 * 产品添加
	 * 
	 * @return
	 */
	@RequestMapping("/goodAdd")
	public String goodAdd(HttpServletRequest request) {
		request.setAttribute("flag", 3);
		request.setAttribute("typeList", typeService.getList());
		return "/admin/good_add.jsp";
	}

	/**
	 * 产品添加
	 * 
	 * @return
	 * @throws Exception 
	 */
	@RequestMapping("/goodSave")
	public String goodSave(String name, int price, String intro, int stock, int typeId, 
			MultipartFile cover, MultipartFile image1, MultipartFile image2, 
			@RequestParam(required=false, defaultValue="1") int page) throws Exception {
		Goods good = new Goods();
		good.setName(name);
		good.setPrice(price);
		good.setIntro(intro);
		good.setStock(stock);
		good.setTypeId(typeId);
		good.setCover(UploadUtil.fileUpload(cover));
		good.setImage1(UploadUtil.fileUpload(image1));
		good.setImage2(UploadUtil.fileUpload(image2));
		goodService.add(good);
		return "redirect:goodList?flag=3&page="+page;
	}

	/**
	 * 产品更新
	 * 
	 * @return
	 */
	@RequestMapping("/goodEdit")
	public String goodEdit(int id, HttpServletRequest request) {
		request.setAttribute("flag", 3);
		request.setAttribute("typeList", typeService.getList());
		request.setAttribute("good", goodService.get(id));
		return "/admin/good_edit.jsp";
	}

	/**
	 * 产品更新
	 * 
	 * @return
	 * @throws Exception 
	 */
	@RequestMapping("/goodUpdate")
	public String goodUpdate(int id, String name, int price, String intro, int stock, int typeId,  
			MultipartFile cover, MultipartFile image1, MultipartFile image2,
			@RequestParam(required=false, defaultValue="1") int page) throws Exception {
		Goods good = goodService.get(id);
		good.setName(name);
		good.setPrice(price);
		good.setIntro(intro);
		good.setStock(stock);
		good.setTypeId(typeId);
		if (Objects.nonNull(cover) && !cover.isEmpty()) {
			good.setCover(UploadUtil.fileUpload(cover));
		}
		if (Objects.nonNull(image1) && !image1.isEmpty()) {
			good.setImage1(UploadUtil.fileUpload(image1));
		}
		if (Objects.nonNull(image2) && !image2.isEmpty()) {
			good.setImage2(UploadUtil.fileUpload(image2));
		}
		goodService.update(good);
		return "redirect:goodList?flag=3&page="+page;
	}

	/**
	 * 产品删除
	 * 
	 * @return
	 */
	@RequestMapping("/goodDelete")
	public String goodDelete(int id, 
			@RequestParam(required=false, defaultValue="1") int page) {
		goodService.delete(id);
		return "redirect:goodList?flag=3&page="+page;
	}
	
	/**
	 * 添加推荐
	 * @return
	 */
	@RequestMapping("/topSave")
	public @ResponseBody String topSave(Tops tops, 
			@RequestParam(required=false, defaultValue="0")byte status,
			@RequestParam(required=false, defaultValue="1") int page) {
		int id = topService.add(tops);
		return id > 0 ? "ok" : null;
	}
	
	/**
	 * 删除推荐
	 * @return
	 */
	@RequestMapping("/topDelete")
	public @ResponseBody String topDelete(Tops tops, 
			@RequestParam(required=false, defaultValue="0")byte status,
			@RequestParam(required=false, defaultValue="1") int page) {
		boolean flag = topService.delete(tops);
		return flag ? "ok" : null;
	}

	/**
	 * 类目列表
	 * 
	 * @return
	 */
	@RequestMapping("/typeList")
	public String typeList(HttpServletRequest request) {
		request.setAttribute("flag", 4);
		request.setAttribute("typeList", typeService.getList());
		return "/admin/type_list.jsp";
	}

	/**
	 * 类目添加
	 * 
	 * @return
	 */
	@RequestMapping("/typeSave")
	public String typeSave(Types type, 
			@RequestParam(required=false, defaultValue="1") int page) {
		typeService.add(type);
		return "redirect:typeList?flag=4&page="+page;
	}

	/**
	 * 类目更新
	 * 
	 * @return
	 */
	@RequestMapping("/typeEdit")
	public String typeUp(int id, HttpServletRequest request) {
		request.setAttribute("flag", 4);
		request.setAttribute("type", typeService.get(id));
		return "/admin/type_edit.jsp";
	}

	/**
	 * 类目更新
	 * 
	 * @return
	 */
	@RequestMapping("/typeUpdate")
	public String typeUpdate(Types type, 
			@RequestParam(required=false, defaultValue="1") int page) {
		typeService.update(type);
		return "redirect:typeList?flag=4&page="+page;
	}

	/**
	 * 类目删除
	 * 
	 * @return
	 */
	@RequestMapping("/typeDelete")
	public String typeDelete(Types type, 
			@RequestParam(required=false, defaultValue="1") int page) {
		typeService.delete(type);
		return "redirect:typeList?flag=4&page="+page;
	}

	/**
	 * 管理员列表
	 * 
	 * @return
	 */
	@RequestMapping("/adminList")
	public String adminList(HttpServletRequest request, 
			@RequestParam(required=false, defaultValue="1") int page) {
		request.setAttribute("flag", 5);
		request.setAttribute("adminList", adminService.getList(page, rows));
		request.setAttribute("pageTool", PageUtil.getPageTool(request, adminService.getTotal(), page, rows));
		return "/admin/admin_list.jsp";
	}

	/**
	 * 管理员修改自己密码
	 * 
	 * @return
	 */
	@RequestMapping("/adminRe")
	public String adminRe(HttpServletRequest request, HttpSession session) {
		request.setAttribute("flag", 5);
		request.setAttribute("admin", adminService.getByUsername(String.valueOf(session.getAttribute("username"))));
		return "/admin/admin_reset.jsp";
	}

	/**
	 * 管理员修改自己密码
	 * 
	 * @return
	 */
	@RequestMapping("/adminReset")
	public String adminReset(Admins admin, HttpServletRequest request) {
		request.setAttribute("flag", 5);
		if (adminService.get(admin.getId()).getPassword().equals(SafeUtil.encode(admin.getPassword()))) {
			admin.setPassword(SafeUtil.encode(admin.getPasswordNew()));
			adminService.update(admin);
			request.setAttribute("admin", admin);
			request.setAttribute("msg", "修改成功!");
		}else {
			request.setAttribute("msg", "原密码错误!");
		}
		return "/admin/admin_reset.jsp";
	}

	/**
	 * 管理员添加
	 * 
	 * @return
	 */
	@RequestMapping("/adminSave")
	public String adminSave(Admins admin, HttpServletRequest request, 
			@RequestParam(required=false, defaultValue="1") int page) {
		if (adminService.isExist(admin.getUsername())) {
			request.setAttribute("msg", "用户名已存在!");
			return "/admin/admin_add.jsp";
		}
		adminService.add(admin);
		return "redirect:adminList?flag=5&page="+page;
	}

	/**
	 * 管理员修改
	 * 
	 * @return
	 */
	@RequestMapping("/adminEdit")
	public String adminEdit(int id, HttpServletRequest request) {
		request.setAttribute("flag", 5);
		request.setAttribute("admin", adminService.get(id));
		return "/admin/admin_edit.jsp";
	}

	/**
	 * 管理员更新
	 * 
	 * @return
	 */
	@RequestMapping("/adminUpdate")
	public String adminUpdate(Admins admin, 
			@RequestParam(required=false, defaultValue="1") int page) {
		admin.setPassword(SafeUtil.encode(admin.getPassword()));
		adminService.update(admin);
		return "redirect:adminList?flag=5&page="+page;
	}

	/**
	 * 管理员删除
	 * 
	 * @return
	 */
	@RequestMapping("/adminDelete")
	public String adminDelete(Admins admin, 
			@RequestParam(required=false, defaultValue="1") int page) {
		adminService.delete(admin);
		return "redirect:adminList?flag=5&page="+page;
	}

}

五，项目总结

中国的电子商城1990年开始了发展之路，该阶段电子商城还是刚刚开始发展。这一阶段出现了许多比较经典的公司，如淘宝,京东等。随着人们对电子商城的逐渐认知，产生了许多企业并从B2B、B2C到B2B2C发展。

计算机信息技术的重大发展，诞生了商业化的互联网环境。这为电子商城在世界的发展提供了一个绝好的平台。互联网给我们提供了一个网络平台，我们在互联网上不仅可以获取到各种各样的信息，而且还实现了电子商城、在线支付、网络交友等各种新型的产业链。

随着计算机信息技术的不断的发展，越来越多的人参与到了互联网中。正因为如此，许多人也盲目的加入了互联网的大潮中[1]。从2003年中国电子商城进入低谷期，在绝大多数人选择放弃电子商城的情况下，依旧有些企业仍未放弃，并苦苦坚持电子商城的发展。该现象使得他们重新定位新一代的电子商城，所以本阶段的中国电子商城发展的第一步应该从这个时候开始的。因此,本文针对电子商城的发展,采用了JSP的技术设计并实现了一个商城系统。

本文设计并实现的商城系统，通过互联网来实现电子商城这一新兴产业，电子商城主要依靠于计算机互联网技术。如果缺少了这个技术，就没有办法实现电子商城，如果要想完美实现，互联网技术就要有重大发展。这样，电子商城就带动了科技的巨大进步。用户就可以随时随地完成搜索商品、挑选商品、购买商品的全部过程。对于商家而言，网上购买商品有如下优点：不受场地限制、购买成本低、降低了风险、有利于更好的刺激用户去消费购买。对于消费者来说，网上购买商品有如下优点：价格便宜方便性、足不出户就能买到满意的商品。对商家而言，网上出售商品有如下优点：可以为商家节省了商店的租金、人力成本减少，文章来源地址https://www.toymoban.com/news/detail-775047.html

到了这里，关于基于WEB的电子产品商城网站的设计与实施的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！