基于springboot+vue的水果商城(前后端分离)

博主主页：猫头鹰源码
博主简介：Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万+、专注Java技术领域和毕业设计项目实战，欢迎高校老师\讲师\同行交流合作
​主要内容：毕业设计(Javaweb项目|小程序|Python|HTML|数据可视化|SSM|SpringBoot|Vue|Jsp|PHP等)、简历模板、学习资料、面试题库、技术咨询
文末联系获取
感兴趣可以先收藏起来，以防走丢，有任何选题、文档编写、代码问题也可以咨询我们

项目介绍： 

本系统为最新原创项目，采用前后端分离，创作于2024，项目代码工整，结构清晰，适合选题：水果、商城、水果商城、前后端分离类其他商城等。系统采用springboot+vue整合开发，前端主要使用了element-ui框架、项目后端主要使用了springboot，数据层采用mybatis。

部分功能：

前台模块：
1.首页设计：要求有网站logo、搜索模块、导航菜单、内容区。导航栏每个菜单项都可以实现路由到对应模块页面中。首页要求设置相应的路由链接，并可以链接至下面模块页面的：登录模块、注册模块等。如果是电子商务类网站，还要有可以链接到购物车的栏目。底部显示网站版权信息。首页要求采用组件式组合设计（即由多个组件构成首页页面结构）。
2.网站导航菜单每个菜单项均能路由链接到相应的模块，每个模块有列表展示模块和详情页面模块，并且每个模块显示在页面的区域布局合理。
3.详情页面模块。在详情页面中，包括产品图片和产品评价展示，使用动态组件（选项卡）实现。其中详情模块展示该产品各种图片，评价是对应产品的评价信息，也可以实现评价功能。
4.在详情页面可以将产品“加入购物车”，并跳转到购物车模块页面。
5、用pinia对系统进行状态管理，如登录用户信息，购物车信息、用户收藏等。
6、网站中涉及权限控制的模块，比如购物车模块、订单、个人中心等模块，需要登录才能进入，请使用导航守卫实现，并将登录成功后的用户名显示在主页头部区域。
7、前台一共有首页、购物车、我的订单、商品详情、个人中心5个页面，在导航中通过路由实现页面跳转，个人中心页面显示用户的用户名、邮箱、电话信息

后台模块：
1、登录与注册：登录用户的用户名和密码可以进入到前台商城，登录管理员的用户名和密码可以进入后台管理页面，要用jwt实现对登录的安全管理，并把token作为键，用户信息作为值缓存到redis中，缓存有效期为30分钟
2、首页：就简单显示登录的管理员的信息
3、用户管理页：对用户信息在下进行增删改查
4、商品管理页：对前台的商品进行增删改查及图片和文件上传（在jwt安全管理下实现）
5、日志管理页：通过logback日志框架进行日志管理，显示用户及管理员的登录记录

系统包含技术：

后端：springboot，mybatis
前端：vue3、js、css等
开发工具：idea/vscode
数据库：mysql 5.7
JDK版本：jdk1.8

部分截图说明：

首页

分类

详情

选择地址

登录

用户管理

水果管理

订单管理

部分代码：

/**
     * 分页查询
     */
    @PostMapping("selectAll")
    public PageInfo<Goods> selectAll(@RequestBody Map<String,Object> mp) {
        Object cids = mp.get("cids");
        if(cids!=null){
            List<Integer> cid = (List<Integer>)cids;
            if(cid.size()>0){
                mp.put("cid",cid.get(0));
            }
        }
        PageHelper.startPage(Integer.parseInt(mp.get("currentPage").toString()), Integer.parseInt(mp.get("pagesize").toString()));
        List<Goods> list = goodsService.queryAllByLimit(mp);
        PageInfo<Goods> pageInfo = new PageInfo<Goods>(list);
        return pageInfo;
    }

    /**
     * 修改
     */
    @RequestMapping("edit")
    public String edit(@RequestBody Goods goods) {
        try {
            goodsService.update(goods);
            return "200";
        }catch (Exception e){
            e.printStackTrace();
            return "201";
        }
    }

    /**
     * 新增
     */
    @RequestMapping("add")
    public String add(@RequestBody Goods goods) {
        try {
            Date date = new Date();
            goods.setCreateTime(date);
            goodsService.insert(goods);
            return "200";
        }catch (Exception e){
            e.printStackTrace();
            return "201";
        }
    }

    /**
     * 通过主键查询单条数据
     */
    @GetMapping("selectOne")
    public Goods selectOne(Integer id) {
        return goodsService.queryById(id);
    }

    /**
     * 判端库存是否足够
     */
    @GetMapping("isNum")
    public int isNum(Integer id) {
        Goods goods = goodsService.queryById(id);
        return goods.getNum();
    }


    /**
     * 通过主键删除数据
     */
    @GetMapping("deleteById")
    public String deleteById(Integer id) {
        try {
            goodsService.deleteById(id);
            return "200";
        }catch (Exception e){
            e.printStackTrace();
            return "201";
        }
    }

以上就是部分功能展示，从整体上来看，本系统功能是十分完整的，界面设计简洁大方，交互友好，数据库设计也很合理，规模适中，代码工整，清晰，适合学习使用。

好了，今天就到这儿吧，小伙伴们点赞、收藏、评论，一键三连走起呀，下期见~