【全套】基于Web的网上购物商城的设计与实现

岸风毕设

于 2025-02-01 11:01:16 发布

阅读量964

点赞数 25

文章标签：前端 java 开发语言

本文链接：https://blog.csdn.net/weixin_44789995/article/details/145407576

版权

💗💗💗作者简介💗💗

博主毕业于985大学计算机专业，从事计算机开发行业4年多，就职某大厂，累计辅导学生2000+人，获得好评无数，主要技术有SpringBoot、SSM、Vue、Mysql、Html、javascript、css、JSP、可视化、小程序、uniapp、javaswing、nodejs、electron等设计与开发，累计开发程序6000+套，有需要的小伙伴可以在文末获得联系方式，诚信经营，个人开发，全程辅导，包通过，包维护，包讲解。

1.系统简介（摘要）

摘要
本文旨在探讨基于Web的网上购物商城的设计与实现。该系统实现了商品分类、商品详情展示、商品购买、购物车管理、订单管理、后台发货、前台评价以及动态图表等功能，为用户提供了一个全面、便捷的在线购物体验。在系统设计中，采用了SpringBoot框架作为后端开发的基础，利用其快速构建、易于维护的特性，实现了系统的高效稳定运行。前端界面则采用了jsp设计，以适应动态网页的浏览需求。在商品分类方面，系统通过树形结构展示了产品的各级分类，方便用户快速定位所需商品。商品详情页面则详细展示了商品的图片、参数、价格等信息，为用户提供了全面的购买参考。购物车管理功能允许用户将多个商品加入购物车，并支持对购物车内的商品进行数量修改、删除等操作。订单管理功能则记录了用户的购买历史，包括待付款、待发货、已发货、已完成等状态的订单，方便用户随时查看订单状态。后台发货功能为管理员提供了便捷的订单处理手段，管理员可以根据订单状态进行发货操作，并更新订单状态。综上所述，基于Web的网上购物商城通过丰富的功能和良好的用户体验，为用户提供了一个高效、便捷的在线购物平台。

关键词：网上商城；JSP页面；Spring Boot

2.开发技术

2.1 SpringBoot框架

SpringBoot适合初学者，也适合从以前的Spring框架开发者学习，学习起来是很方便的，不管是纯英文教程还是中文教程，国内外都有很多学习的资料。Spring Boot可以运行所有的Spring项目，进行无缝切换。内置了Servlet 容器，不需要对代码进行打包变成WAR就可以运行。自带应用监控，运行的时候可以实时的对正在运行的项目进行监控，可以随时发现问题所在并且能定位发生的问题，可以让程序员及时的修改问题。

2.2 MySQL数据库

一般学习程序开发的人员如果学习数据库的话，肯定是要学习MySQL数据库，MySQL数据库通过这么多年的不断发展，社区版本都是免费的，最重要的是小巧，占用电脑空间比较小，让更多的开发人员可以不需要更换更高级的电脑就可以进行学习。学习只是一个方面，最重要的是MySQL市场占有率是世界第一，基本上十个公司就有七八个用得MySQL数据库。MySQL的优点不只是这么粗浅，MySQL首先是开源的，只要不是商用就不用花钱，并且大型的数据也是支持的，只要是市面上存在的操作系统，MySQL都可以有对应的版本可供使用。因为MySQL是开源的，如果有对MySQL有特殊需求的甚至可以自己修改源码，达到符合自己使用的目的。MySQL数据库好处多多，最重要的一点符合本设计的开发需求，可以说本设计只用到了MySQL的一些基础功能，而这点基础功能就完全够用。MySQL学习的教程网上很多，许多关于入门的教程就完全可以达到普通程序员的开发水平，只需要把基本的知识学会了，到公司里面也只是根据不同的业务逻辑进行不同的语句编写而已。

2.3 Java语言

Java语言是目前最流行的语言之一，不仅可以做桌面窗口形式的程序，还可以做浏览器访问的程序，目前最流行的就是用Java语言作为基础，做各种程序的后台处理。Java语言是操作变量的语言，而变量则是Java对于数据存在形式的定义，变量用来操作内存，而内存则牵扯到计算机安全问题，这样Java语言反而有了免疫直接针对用Java语言开发出来的程序的病毒，有效地提高了Java语言开发出来程序的生存能力。Java是具有动态运行能力的一种语言，Java的类不仅仅可以用Java核心提供的基础类，还可以进行重写，这样会让Java的功能变得更加丰富，甚至可以编写一些功能模块进行封装。Java是一种开源的语言，可以对Java里面的各种类以及引用方法进行追溯，甚至可以对已经编译过的语言进行反编译，这样不仅仅提高学习的效率，并且可以学习其他从业者提供的优雅的编程方式。Java语言发展到现在，已经在各个行业扎根，学习Java可以从事的行业很多，并且学习的方法很多，网上有很多免费的教程，甚至有些高深的知识也只需要付费就可以进行学习，而不是像Java语言之初，每一个编程人员都需要用记事本进行手动编码，现在有很多集成开发环境帮助Java从业者。选择Java语言进行编程，是一种很好的解决问题的方式。

2.4 Vue.js框架

Vue.js是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。Vue.js 是一款流行的 JavaScript 前端框架，旨在更好地组织与简化 Web 开发。Vue.js 的核心库只关注视图层，使得它易于与其他库或已有项目整合。同时，Vue.js 也拥有强大的生态系统，包括各种插件和工具，可以帮助开发者构建复杂、单页应用、全栈/服务端渲染（SSR）等。Vue.js 采用了 MVVM架构设计模式，这是一种源于 MVC（Model-View-Controller）模式的设计思想。在 MVVM 中，View 和 Model 是不可以直接进行通信的，它们之间是通过 ViewModel 这个中介充当着观察者的角色来进行中转的。ViewModel 向上与视图层 View 进行双向数据绑定，向下与 Model 通过接口请求进行数据交互，起到承上启下的作用。这种设计模式使得数据驱动和组件化的思想得以实现，大大提高了开发效率。Vue.js 是一个独立的社区驱动的项目，由尤雨溪在 2014 年创建。它是一个成熟的、经历了无数实战考验的框架，目前在生产环境中使用非常广泛，可以轻松处理大多数 Web 应用的场景，并且几乎不需要手动优化，完全有能力处理大规模的应用。总的来说，Vue.js 是一个功能强大、易于上手且广泛应用的 JavaScript 框架，适合各种规模和复杂度的 Web 开发项目。

2.5 B/S结构简介

随着软件系统的不断改进和升级，B/S结构产品更为方便的特征体现地十分明显。对于一个中等偏大的公司来说，如果系统管理员每天要在很多台电脑之间来回查看，不断奔走，那么效率和工作量就会变得很低，但是如果使用了B/S结构，那么管理员只要对服务器进行管理就够了。
B/S结构最大的优点它不需要安装任何的软件，它所有的客户端就只是浏览器，所以只要有一台电脑并且可以上网就可以解决所有问题，客户端可以完全地不用管理员维护。无论使用系统的使用者是什么样的规模，也不管分支有多么的庞大，都不会对维护和升级的工作量造成影响，所有的维护和升级只需要操作服务器。随着B/S结构的不断发展，使用的人也不断增加，从而带动了AJAX技术的发展，和B/S结构一样，它也能在客户端上处理程序，这便缓解了服务器的负担，提高了交互性，而且实现了局部实时刷新。

3.系统截图

在这里插入图片描述

4.系统源代码

package com.xq.tmall.controller.admin;

import com.alibaba.fastjson.JSONObject;
import com.xq.tmall.controller.BaseController;
import com.xq.tmall.entity.Admin;
import com.xq.tmall.service.AdminService;
import org.springframework.stereotype.Controller;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.annotation.Resource;
import javax.servlet.http.HttpSession;
import java.io.File;
import java.io.IOException;
import java.util.Map;
import java.util.UUID;

/**
 * 后台管理-账户页
 * @author 贤趣项目小组
 */
@Controller
public class AccountController extends BaseController{
    @Resource(name = "adminService")
    private AdminService adminService;

    //转到后台管理-账户页-ajax
    @RequestMapping(value = "admin/account", method = RequestMethod.GET)
    public String goToPage(HttpSession session, Map<String, Object> map){
        logger.info("获取管理员信息");
        Object adminId = checkAdmin(session);
        if(adminId == null){
            return "admin/include/loginMessage";
        }

        logger.info("获取目前登录的管理员信息，管理员ID：{}",adminId);
        Admin admin = adminService.get(null,Integer.parseInt(adminId.toString()));
        map.put("admin",admin);

        logger.info("转到后台管理-账户页-ajax方式");
        return "admin/accountManagePage";
    }

    //退出当前账号
    @RequestMapping(value = "admin/account/logout", method = RequestMethod.GET)
    public String logout(HttpSession session) {
        Object o = session.getAttribute("adminId");
        if (o == null) {
            logger.info("无相关信息，返回管理员登陆页");
        } else {
            session.removeAttribute("adminId");
            session.invalidate();
            logger.info("登录信息已清除，返回管理员登陆页");
        }
        return "redirect:/admin/login";
    }

    //管理员头像上传
    @ResponseBody
    @RequestMapping(value = "admin/uploadAdminHeadImage", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
    public String uploadAdminHeadImage(@RequestParam MultipartFile file, HttpSession session) {
        String originalFileName = file.getOriginalFilename();
        logger.info("获取图片原始文件名：{}", originalFileName);
        assert originalFileName != null;
        String extension = originalFileName.substring(originalFileName.lastIndexOf('.'));
        //生成随机名
        String fileName = UUID.randomUUID() + extension;
        //获取上传路径
        String filePath = session.getServletContext().getRealPath("/") + "res/images/item/adminProfilePicture/" + fileName;

        logger.info("文件上传路径：{}", filePath);
        JSONObject jsonObject = new JSONObject();
        try {
            logger.info("文件上传中...");
            file.transferTo(new File(filePath));
            logger.info("文件上传成功！");
            jsonObject.put("success", true);
            jsonObject.put("fileName", fileName);
        } catch (IOException e) {
            logger.warn("文件上传失败！");
            e.printStackTrace();
            jsonObject.put("success", false);
        }
        return jsonObject.toJSONString();
    }

    //更新管理员信息
    @Transactional(propagation = Propagation.REQUIRED, rollbackFor = Exception.class)
    @ResponseBody
    @RequestMapping(value = "admin/account/{admin_id}", method = RequestMethod.PUT, produces = "application/json;charset=UTF-8")
    public String updateAdmin(HttpSession session, @RequestParam String admin_nickname/*管理员昵称*/,
                              @RequestParam(required = false) String admin_password/*管理员当前密码*/,
                              @RequestParam(required = false) String admin_newPassword/*管理员新密码*/,
                              @RequestParam(required = false) String admin_profile_picture_src/*管理员头像路径*/,
                              @PathVariable("admin_id") String admin_id/*管理员编号*/) {
        logger.info("获取管理员信息");
        Object adminId = checkAdmin(session);
        if (adminId == null) {
            return "admin/include/loginMessage";
        }
        JSONObject jsonObject = new JSONObject();
        Admin putAdmin = new Admin();
        putAdmin.setAdmin_id(Integer.valueOf(admin_id));
        putAdmin.setAdmin_nickname(admin_nickname);

        if (admin_password != null && !"".equals(admin_password) && admin_newPassword != null && !"".equals(admin_newPassword)) {
            logger.info("获取需要修改的管理员信息");
            Admin admin = adminService.get(null, Integer.valueOf(adminId.toString()));
            if (adminService.login(admin.getAdmin_name(), admin_password) != null) {
                logger.info("原密码正确");
                putAdmin.setAdmin_password(admin_newPassword);
            } else {
                logger.info("原密码错误，返回错误信息");
                jsonObject.put("success", false);
                jsonObject.put("message", "原密码输入有误！");
                return jsonObject.toJSONString();
            }
        }
        if (admin_profile_picture_src != null && !"".equals(admin_profile_picture_src)) {
            logger.info("管理员头像路径为{}", admin_profile_picture_src);
            putAdmin.setAdmin_profile_picture_src(admin_profile_picture_src.substring(admin_profile_picture_src.lastIndexOf("/") + 1));
        }

        logger.info("更新管理员信息，管理员ID值为：{}", admin_id);
        Boolean yn = adminService.update(putAdmin);
        if (yn) {
            logger.info("更新成功！");
            jsonObject.put("success", true);
            session.removeAttribute("adminId");
            session.invalidate();
            logger.info("登录信息已清除");
        } else {
            jsonObject.put("success", false);
            logger.warn("更新失败！事务回滚");
            throw new RuntimeException();
        }

        return jsonObject.toJSONString();
    }
}