基于springboot+vue的商城系统(电商平台)(前后端分离)

简介: 本系统以商城为主题,采用前后端分离,项目代码工整,结构清晰,适合选题:各类商城系统、前后端分离类其他商城系统等。系统采用springboot+vue整合开发,前端主要使用了element-ui框架、项目后端主要使用了springboot,数据层采用mybatis。

项目介绍:



本系统以商城为主题,采用前后端分离,项目代码工整,结构清晰,适合选题:各类商城系统、前后端分离类其他商城系统等。系统采用springboot+vue整合开发,前端主要使用了element-ui框架、项目后端主要使用了springboot,数据层采用mybatis。


项目功能:



0c816a2de9474729a6f2d11b9f17b993.png

2b686bae32ee4ae586fe81ce2b43dff4.png


系统包含技术:



后端:springboot,mybatis

前端:element-ui、js、css等

开发工具:idea/vscode

数据库:mysql 5.7

JDK版本:jdk1.8


部分截图说明:



下面是首页


2309edca21064d25a2043d065273687f.png


登录页面


bb6d49dbd5b64f93ae295c8d3caaf2e4.png


搜索商品


e7066ba213664943b2357cb295a67de6.png


商品详情,可以查看介绍,评论


3c3bb1e68aa241a48465f90b59fa88df.png


购物车


8cc65a0c04484b5eafa01f17fbd046f8.png


付款成功后进入我的订单


c357cd5f16ff448583c827756c8ef0f0.png


收藏夹展示我的收藏内容


8962de007c174d8488c12748231421b1.png


个人中心


f614199957f844acb1e57b25600043ed.png


后台首页


5ba8048338b14ca1b445dd4a367e0518.png


后台管理员对用户管理


5c5b398118d64b8cbc7643f57dfc2085.png


管理员对商品管理


93d959830ffb4b4baf8c15eee9dc05d4.png


管理员对轮播图管理


465c04d64dc34c72b4ad071f70e18261.png


管理员对角色管理


4c7d378227894de68be03c9ba5d8758b.png


部分代码截图:



拦截器


 @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
        String token = request.getHeader("token");
        if (StrUtil.isBlank(token)) {
            throw new CustomException("401", "未获取到token, 请重新登录");
        }
        String username;
        try {
            username = JWT.decode(token).getAudience().get(0);
        } catch (JWTDecodeException j) {
            throw new CustomException("401", "权限验证失败, 请重新登录");
        }
        User user = userService.getOne(Wrappers.<User>lambdaQuery().eq(User::getUsername, username));
        if (user == null) {
            throw new CustomException("401", "用户不存在, 请重新登录");
        }
        // 验证 token
        JWTVerifier jwtVerifier = JWT.require(Algorithm.HMAC256(user.getPassword())).build();
        try {
            jwtVerifier.verify(token);
        } catch (JWTVerificationException e) {
            throw new CustomException("401", "token不合法, 请重新登录");
        }
        return true;
    }


跨域


// 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        return corsConfiguration;
    }
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }


商品操作


 /**
     * 推荐商品
     * @return
     */
    @GetMapping("/recommend")
    public Result<?> recommend() {
        List<Goods> list = goodsService.recommend();
        return Result.success(list);
    }
    /**
     * 推热销商品
     * @return
     */
    @GetMapping("/sales")
    public Result<?> sales() {
        List<Goods> list = goodsService.sales();
        return Result.success(list);
    }
    /**
     * 根据分类id查询商品
     * @param id
     * @param pageNum
     * @param pageSize
     * @return
     */
    @GetMapping("/byCategory/{id}")
    public Result<?> findByCategory(@PathVariable Long id,
                                    @RequestParam(required = false, defaultValue = "1") Integer pageNum,
                                    @RequestParam(required = false, defaultValue = "10") Integer pageSize) {
        IPage<Goods> page = goodsService.pageByCategory(new Page<>(pageNum, pageSize), id);
        return Result.success(page);
    }


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


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

相关文章
|
26天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的留守儿童爱心网站设计与实现(计算机毕设项目实战+源码+文档)
博主是一位全网粉丝超过100万的CSDN特邀作者、博客专家,专注于Java、Python、PHP等技术领域。提供SpringBoot、Vue、HTML、Uniapp、PHP、Python、NodeJS、爬虫、数据可视化等技术服务,涵盖免费选题、功能设计、开题报告、论文辅导、答辩PPT等。系统采用SpringBoot后端框架和Vue前端框架,确保高效开发与良好用户体验。所有代码由博主亲自开发,并提供全程录音录屏讲解服务,保障学习效果。欢迎点赞、收藏、关注、评论,获取更多精品案例源码。
61 10
|
26天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的家政服务管理平台设计与实现(计算机毕设项目实战+源码+文档)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
46 8
|
26天前
|
JavaScript 搜索推荐 Java
基于SpringBoot+Vue实现的家乡特色推荐系统设计与实现(源码+文档+部署)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
57 8
|
26天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的高校食堂移动预约点餐系统设计与实现(源码+文档+部署)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
70 3
基于Springboot+MybatisPlus+Vue的在线课程管理系统
基于Springboot+MybatisPlus+Vue的在线课程管理系统
170 0
基于Springboot+MybatisPlus+Vue的在线课程管理系统
|
数据库
基于springboot+mybatisplus+vue的课程学分管理系统
基于springboot+mybatisplus+vue的课程学分管理系统
164 0
基于springboot+mybatisplus+vue的课程学分管理系统
|
JavaScript 前端开发 Java
基于Springboot+MybatisPlus+Vue的前后端分离的学生选课课程教务管理系统
基于Springboot+MybatisPlus+Vue的前后端分离的学生选课课程教务管理系统
261 0
基于Springboot+MybatisPlus+Vue的前后端分离的学生选课课程教务管理系统
|
JavaScript 开发者
Vue 课程介绍|学习笔记
快速学习 Vue 课程介绍
144 0
|
JavaScript 开发者
Vue课程介绍|学习笔记
快速学习Vue课程介绍
123 0
|
前端开发 Java 关系型数据库
前后端分离Springboot+Vue实现课程社区管理系统
本项目主要实现一个基于课程选课的社区交流系统,主要的业务背景为每个老师可以自己开设相应的选修课,并指定可以选修的人数,学生登陆系统后可以进行选课,并可以在线针对自己的选课进行在线讨论,点赞等互动行为。管理员则主要是对基本信息的相关管理,比如用户和角色、权限管理等,本系统有着完备的权限管理控制系统,可以根据需要自定角色并分配相应的权限。系统采用前后端分离开发的方式来实现。
198 0
前后端分离Springboot+Vue实现课程社区管理系统

热门文章

最新文章