基于SpringBoot+VueJS前后端分离医疗用品销售网站系统设计与实现

目录

一、 前言介绍：

二 、功能设计：

三、功能实现：

用户登录的实现

系统前台主要功能实现 

首页的实现

商品展示的实现

商品搜索的实现

商品购买的实现

系统后台主要功能实现 

用户管理的实现

商品管理的实现

订单管理的实现

四、库表设计：

五、关键代码：

六、论文参考：

七、其他案例： 

一、 前言介绍：

      近年来，互联网医疗电商网站行业在全球范围内迅速发展，市场规模持续扩大。据统计，2022年全球互联网医疗电商网站市场规模已达到数百亿美元，预计到2025年将达到数千亿美元。在中国，互联网医疗电商网站行业的发展也非常迅速，市场规模不断扩大，成为医疗行业中不可或缺的一部分。主要参与者包括平安好医生、阿里健康等大型电商平台以及传统医疗机构和药企。

      随着科学技术的不断发展和互联网技术的广泛应用。互联网技术的普及和应用为医疗用品销售网站系统提供了强大的支持。人们可以通过互联网随时随地访问和购买医疗用品，大大提高了购物的便利性和效率。医疗用品销售网站系统可以整合医疗器械生产企业和医疗机构之间的供应链，提高供应链的效率和透明度。生产企业可以直接与医疗机构和个人用户进行交流和交易，减少了中间环节，降低了成本。

       本文主要通过对系统的前台系统和后台管理系统进行了功能性需求分析，对系统的安全性和可扩展性进行了非功能性需求分析。在详细的需求分析的基础上，根据系统的功能设计确定了数据库结构，实现完整的代码编写。医疗用品销售网站使用 Dreamweaver、IDEA代码编辑器、Tomcat服务器,SpringBoot,Vue、MySQL等开发工具和相关技术，完成了系统的主要模块的页面设计和功能实现。本文展示了首页页面的实现效果图，并通过代码和页面介绍了用户注册功能、商品搜索功能、生成订单和查看我的订单功能、在线付款功能以及商品入库功能的实现过程。

二 、功能设计：

通过软件的需求分析已经获得了系统的基本功能需求。根据各大功能模块的不同，将系统分为各种功能大块。系统功能结构如下图所示。

系统功能结构图

注册/登录

游客(未进行注册或登陆的用户)可以浏览、搜索商品，但不能进行收藏和购买。用户注册首先需要进行表单验证，来验证用户名和手机号码是否合法，然后验证用户名和手机号是否已经存在，验证通过即可注册。

注册成功后，用户可以通过输入用户名来登录系统，输入密码后进行验证。登录成功后，用户可以使用商品收藏、商品购买、查看我的订单、个人信息管理等功能。

个人信息管理

用户登录系统后，在账户设置中，可以修改昵称、头像、手机号、登陆密码、收货地址等个人基本信息。

商品搜索

系统首页展示了商品搜索输入框，用户在输入框内输入与商品名称相关的关键字，系统通过模糊查询搜索到用户需要的商品并展示。

商品信息展示

用户在浏览商品时，点击某一个商品，跳转到该商品的信息展示页。在商品信息页面展示了商品的详情信息，比如商品介绍，商品详情，商品销量和收藏量，商品评价等，用户通过浏览信息了解商品的主要功能和评价，最终决定是否购买。

商品购买

在商品信息页面，用户可以通过点击“购买”进行购买商品，点击后跳转到订单生成页面。订单生成页面会展示商品信息，收货地址，优惠信息等，用户确认后信息无误点击“提交”生成订单，订单生成后跳转到支付页面，支付完成则购买成功。

商品评论

用户在完成交易后可以对购买的商品进行评价，用户可以对商品进行打分，上传文字和商品图片等。用户对商品的评论可以帮助其他用户了解该商品，方便其他用户决定是否购买。

购买商品

用户在购买商品时，点击商品信息页面的“立即购买”或购买记录页面的“去结算”，跳转到订单生成页面，在订单生成页面用户需要确认收货地址、收货人手机号、收货人姓名等信息，确认无误后点击“提交订单”，订单提交成功，生成一条订单信息。

查看订单详情

用户在查看我的订单列表时，可以点击某一个订单来查看该订单的详细信息，主要包括订单编号、订单状态、订单日期、订单中的商品、交易金额等。订单详情还可以查看商品物流信息，用户通过能够物流信息了解所购买商品的发货状态。

商品列表

管理员可以在“商品列表”中展示商城中需要销售的商品，包含商品名称，商品属性以及类目等商品信息。管理员可以对商品进行搜索，按分类查询商品。

商品添加

添加商品首先需要输入商品基本信息，如商品名称、商品数量、商品分类等；然后需要编辑商品信息详情，如商品规格，商品描述，商品图片等。管理员也可以删除已添加的商品。

商品管理

用户在购买商品时需要选择商品规格，管理员可以设置商品规格的名称以及展示的顺序等。管理员还可以给商品规格添加属性值，也可以删除不需要的属性值。同时，管理员可以编辑商品信息，如商品介绍、商品展示图片等，方便用户浏览。

订单管理

管理员根据订单号、收货人姓名、收货地址、收货人手机号码等基本订单信息进行发货配送。

物流管理

管理员可以在后台为用户提供物流查询，管理员可以查看物流的状态，对于没有发货的订单及时发货。

三、功能实现：

用户登录的实现

用户注册完成后，点击“登陆”进入到登陆页面，输入用户名和密码，点击“登陆”按钮，对用户名和密码进行验证，根据传入的用户名和密码在数据库中是否能查询到一条用户信息，若不能返回用户信息则登陆失败，页面提示用户名或密码错误。

登录界面如下图所示。

1. 系统前台主要功能实现 

首页的实现

用户界面要尽量简洁大方，使用户能够方便找到需要的功能入口，浏览、购买商品，且要易于修改和维护，同时还要保证用户合法和系统安全。

首页界面如下图所示。

商品展示的实现
商品展示页是展示系统商品的页面，通过sql语句："select shangpinxinximingcheng,id,tupian,jiage,addtime from shangpinxinxi order by addtime desc"，将所有是商品按商品编号降序排列。

商品展示页面，如下图所示。

商品搜索的实现
系统首页提供了搜索商品的输入框，用户在输入框内输入想要查找商品的关键字，点击搜索按钮，系统将用户输入的关键字传递到后台。首先创建一个实体类 PageBean，该实体类的属性包括页码 pageCode、每页记录数 pageSize、总记录数 totalRecord 和一个 List 集合 beanList，利用输入的关键字对数据库进行模糊查询，将得到的结果存入 PageBean 中，返回PageBean 跳转到 goodList.jsp 页面，在 goodList.jsp 页面，使用循环将搜索到的结果分页展示。

商品搜索界面如下图所示。

商品购买的实现
用户在浏览商品时，对于心仪的想要购买的商品，可以将该商品添加到购买记录中。点击“添加购买记录”按钮，页面将该商品的数据传递到后台，首先查询数据库购买记录表中是否已经存在该商品，若存在直接将商品数量加一，若不存在则创建一个新的购买记录对象，添加购买记录成功，数据库中的购买记录表添加一条信息。用户还可以点击“我的购买记录”查看添加到购买记录的商品，系统通过读取 session获取到用户 ID，将用户 ID 传递到后台，在购买记录表中查询该用户的所有购买记录信息，返回数据到我的购买记录页面。

商品购买界面如下图所示。

个人购买记录界面如下图所示。

系统后台主要功能实现 

用户管理的实现

管理员对系统用户的管理，在yhzhgl.jsp实现管理员用户的管理，包括录入、删除、修改，修改密码通过SESSION获取用户名，然后输入新密码，提交到mod.jsp中，使用sql命令更新密码。

用户管理界面如下图所示。

登录密码修改界面如下图所示。

商品管理的实现
管理员可以获取系统中所有商品的列表并对其进行编辑。管理员在添加商品时，需要输入商品基本信息，如名称、价格、规格等，还需要输入商品详情描述，包括对商品功能的描述以及展示图片等。添加商品完成，数据库商品表添加一条信息。管理员可以搜索商品，同时可以对已经添加的商品进行编辑。

商品管理界面如下图所示。

订单管理的实现
管理员在后台管理界面点击到所有订单界面dingdan_list.jsp，向控制层dingdanAction发送请求，搜索当前所有订单信息，dingdanAction向dingdanDAOImp调用搜索全部订单的请求，向数据库的订单表搜索当前所有订单并将订单信息以对象的形式层层返回到dingdan_list.jsp界面，显示出当前所有订单信息。同时可以删除过期订单，确认已有订单，进行发货处理。

订单管理界面如下图所示。

订单付款界面如下图所示。

四、库表设计：

针对系统的实体和属性，结合数据设计思想，对系统的逻辑设计的内容进行如下描述。

商品（商品编号、商品名称、商品图片、价格、类目、库存数量、介绍）。

订单（订单编号、用户名、订单内容、总金额、手机号、收货地址、是否支付、当前状态）。

售后（售后编号、售后人、售后内容、售后编号）

评论（评论编号、评论者、评论时间、评分、评论内容）。

商品类目（商品类目编号、添加时间、名称）。

资讯（资讯编号、标题、类别、内容、图片）。

系统E-R图如下所示。

图系统E-R图

五、关键代码：

/**
 * 用户账户：用于保存用户登录信息(User)表控制层
 */
@Slf4j
@RestController
@RequestMapping("user")
public class UserController extends BaseController<User, UserService> {
    /**
     * 服务对象
     */
    @Autowired
    public UserController(UserService service) {
        setService(service);
    }
 
    /**
     * Token服务
     */
    @Autowired
    private AccessTokenService tokenService;
 
    @Autowired
    private UserGroupService userGroupService;
 
    /**
     * 注册
     * @param user
     * @return
     */
    @PostMapping("register")
    public Map<String, Object> signUp(@RequestBody User user) {
        // 查询用户
        Map<String, String> query = new HashMap<>();
        query.put("username",user.getUsername());
        List list = service.select(query, new HashMap<>()).getResultList();
        if (list.size()>0){
            return error(30000, "用户已存在");
        }
        user.setUserId(null);
        user.setPassword(service.encryption(user.getPassword()));
        service.save(user);
        return success(1);
    }
 
    /**
     * 找回密码
     * @param form
     * @return
     */
    @PostMapping("forget_password")
    public Map<String, Object> forgetPassword(@RequestBody User form,HttpServletRequest request) {
        JSONObject ret = new JSONObject();
        String username = form.getUsername();
        String code = form.getCode();
        String password = form.getPassword();
        // 判断条件
        if(code == null || code.length() == 0){
            return error(30000, "验证码不能为空");
        }
        if(username == null || username.length() == 0){
            return error(30000, "用户名不能为空");
        }
        if(password == null || password.length() == 0){
            return error(30000, "密码不能为空");
        }
 
        // 查询用户
        Map<String, String> query = new HashMap<>();
        query.put("username",username);
        Query select = service.select(query, service.readConfig(request));
        List list = select.getResultList();
        if (list.size() > 0) {
            User o = (User) list.get(0);
            JSONObject query2 = new JSONObject();
            JSONObject form2 = new JSONObject();
            // 修改用户密码
            query2.put("user_id",o.getUserId());
            form2.put("password",service.encryption(password));
            service.update(query, service.readConfig(request), form2);
            return success(1);
        }
        return error(70000,"用户不存在");
    }
 
    /**
     * 登录
     * @param data
     * @param httpServletRequest
     * @return
     */
    @PostMapping("login")
    public Map<String, Object> login(@RequestBody Map<String, String> data, HttpServletRequest httpServletRequest) {
        log.info("[执行登录接口]");
 
        String username = data.get("username");
        String email = data.get("email");
        String phone = data.get("phone");
        String password = data.get("password");
 
        List resultList = null;
        Map<String, String> map = new HashMap<>();
        if(username != null && "".equals(username) == false){
            map.put("username", username);
            resultList = service.select(map, new HashMap<>()).getResultList();
        }
        else if(email != null && "".equals(email) == false){
            map.put("email", email);
            resultList = service.select(map, new HashMap<>()).getResultList();
        }
        else if(phone != null && "".equals(phone) == false){
            map.put("phone", phone);
            resultList = service.select(map, new HashMap<>()).getResultList();
        }else{
            return error(30000, "账号或密码不能为空");
        }
        if (resultList == null || password == null) {
            return error(30000, "账号或密码不能为空");
        }
        //判断是否有这个用户
        if (resultList.size()<=0){
            return error(30000,"用户不存在");
        }
 
        User byUsername = (User) resultList.get(0);
 
 
        Map<String, String> groupMap = new HashMap<>();
        groupMap.put("name",byUsername.getUserGroup());
        List groupList = userGroupService.select(groupMap, new HashMap<>()).getResultList();
        if (groupList.size()<1){
            return error(30000,"用户组不存在");
        }
 
        UserGroup userGroup = (UserGroup) groupList.get(0);
 
        //查询用户审核状态
        if (!StringUtils.isEmpty(userGroup.getSourceTable())){
            String sql = "select examine_state from "+ userGroup.getSourceTable() +" WHERE user_id = " + byUsername.getUserId();
            String res = String.valueOf(service.runCountSql(sql).getSingleResult());
            if (res==null){
                return error(30000,"用户不存在");
            }
            if (!res.equals("已通过")){
                return error(30000,"该用户审核未通过");
            }
        }
 
        //查询用户状态
        if (byUsername.getState()!=1){
            return error(30000,"用户非可用状态，不能登录");
        }
 
        String md5password = service.encryption(password);
        if (byUsername.getPassword().equals(md5password)) {
            // 存储Token到数据库
            AccessToken accessToken = new AccessToken();
            accessToken.setToken(UUID.randomUUID().toString().replaceAll("-", ""));
            accessToken.setUser_id(byUsername.getUserId());
            tokenService.save(accessToken);
 
            // 返回用户信息
            JSONObject user = JSONObject.parseObject(JSONObject.toJSONString(byUsername));
            user.put("token", accessToken.getToken());
            JSONObject ret = new JSONObject();
            ret.put("obj",user);
            return success(ret);
        } else {
            return error(30000, "账号或密码不正确");
        }
    }
 
    /**
     * 修改密码
     * @param data
     * @param request
     * @return
     */
    @PostMapping("change_password")
    public Map<String, Object> change_password(@RequestBody Map<String, String> data, HttpServletRequest request){
        // 根据Token获取UserId
        String token = request.getHeader("x-auth-token");
        Integer userId = tokenGetUserId(token);
        // 根据UserId和旧密码获取用户
        Map<String, String> query = new HashMap<>();
        String o_password = data.get("o_password");
        query.put("user_id" ,String.valueOf(userId));
        query.put("password" ,service.encryption(o_password));
        Query ret = service.count(query, service.readConfig(request));
        List list = ret.getResultList();
        Object s = list.get(0);
        int count = Integer.parseInt(list.get(0).toString());
        if(count > 0){
            // 修改密码
            Map<String,Object> form = new HashMap<>();
            form.put("password",service.encryption(data.get("password")));
            service.update(query,service.readConfig(request),form);
            return success(1);
        }
        return error(10000,"密码修改失败！");
    }
 
    /**
     * 登录态
     * @param request
     * @return
     */
    @GetMapping("state")
    public Map<String, Object> state(HttpServletRequest request) {
        JSONObject ret = new JSONObject();
        // 获取状态
        String token = request.getHeader("x-auth-token");
 
        // 根据登录态获取用户ID
        Integer userId = tokenGetUserId(token);
 
        log.info("[返回userId] {}",userId);
        if(userId == null || userId == 0){
            return error(10000,"用户未登录!");
        }
 
        // 根据用户ID获取用户
        Map<String,String> query = new HashMap<>();
        query.put("user_id" ,String.valueOf(userId));
 
        // 根据用户ID获取
        Query select = service.select(query,service.readConfig(request));
        List resultList = select.getResultList();
        if (resultList.size() > 0) {
            JSONObject user = JSONObject.parseObject(JSONObject.toJSONString(resultList.get(0)));
            user.put("token",token);
            ret.put("obj",user);
            return success(ret);
        } else {
            return error(10000,"用户未登录!");
        }
    }
 
    /**
     * 登录态
     * @param request
     * @return
     */
    @GetMapping("quit")
    public Map<String, Object> quit(HttpServletRequest request) {
        String token = request.getHeader("x-auth-token");
        JSONObject ret = new JSONObject();
        Map<String, String> query = new HashMap<>(16);
        query.put("token", token);
        try{
            tokenService.delete(query,service.readConfig(request));
        }catch (Exception e){
            e.printStackTrace();
        }
        return success("退出登录成功！");
    }
 
    /**
     * 获取登录用户ID
     * @param token
     * @return
     */
    public Integer tokenGetUserId(String token) {
        log.info("[获取的token] {}",token);
        // 根据登录态获取用户ID
        if(token == null || "".equals(token)){
            return 0;
        }
        Map<String, String> query = new HashMap<>(16);
        query.put("token", token);
        AccessToken byToken = tokenService.findOne(query);
        if(byToken == null){
            return 0;
        }
        return byToken.getUser_id();
    }
 
    /**
     * 重写add
     * @return
     */
    @PostMapping("/add")
    @Transactional
    public Map<String, Object> add(HttpServletRequest request) throws IOException {
        Map<String,Object> map = service.readBody(request.getReader());
        map.put("password",service.encryption(String.valueOf(map.get("password"))));
        service.insert(map);
        return success(1);
    }
 
}

  六、论文参考：

七、其他案例：