Convert Figma logo to code with AI

macrozheng logomall

mall项目是一套电商系统,包括前台商城系统及后台管理系统,基于SpringBoot+MyBatis实现,采用Docker容器化部署。 前台商城系统包含首页门户、商品推荐、商品搜索、商品展示、购物车、订单流程、会员中心、客户服务、帮助中心等模块。 后台管理系统包含商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等模块。

77,638
28,750
77,638
19

Top Related Projects

19,175

又一个小商城。litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端

16,677

基于Spring+SpringMVC+Mybatis分布式敏捷开发系统架构,提供整套公共微服务服务模块:集中权限管理(单点登录)、内容管理、支付中心、用户管理(支持第三方登录)、微信平台、存储系统、配置中心、日志分析、任务和通知等,支持服务治理、监控和追踪,努力为中小型企业打造全方位J2EE企业级开发解决方案。

🔥 🎉newbee-mall是一套电商系统,包括基础版本(Spring Boot+Thymeleaf)、前后端分离版本(Spring Boot+Vue 3+Element-Plus+Vue-Router 4+Pinia+Vant 4) 、秒杀版本、Go语言版本、微服务版本(Spring Cloud Alibaba+Nacos+Sentinel+Seata+Spring Cloud Gateway+OpenFeign+ELK)。 前台商城系统包含首页门户、商品分类、新品上线、首页轮播、商品推荐、商品搜索、商品展示、购物车、订单结算、订单流程、个人订单管理、会员中心、帮助中心等模块。 后台管理系统包含数据面板、轮播图管理、商品管理、订单管理、会员管理、分类管理、设置等模块。

spring cloud + vue + oAuth2.0全家桶实战,前后端分离模拟商城,完整的购物流程、后端运营平台,可以实现快速搭建企业级微服务项目。支持微信登录等三方登录。

13,784

🕷 Super-agent driven library for testing node.js HTTP servers using a fluent API. Maintained for @forwardemail, @ladjs, @spamscanner, @breejs, @cabinjs, and @lassjs.

27,356

A distributed task scheduling framework.(分布式任务调度平台XXL-JOB)

Quick Overview

Mall is a comprehensive e-commerce system developed using SpringBoot and Vue. It includes a front-end mall system and a back-end management system, covering various e-commerce features such as product management, order management, and member management. The project serves as a learning resource for those interested in e-commerce development using modern technologies.

Pros

  • Comprehensive e-commerce solution with both front-end and back-end systems
  • Well-documented with detailed deployment instructions and API documentation
  • Utilizes popular and modern technologies like SpringBoot, Vue, and Docker
  • Active community and regular updates

Cons

  • Large and complex project, which may be overwhelming for beginners
  • Primarily documented in Chinese, which could be a barrier for non-Chinese speakers
  • Requires significant resources to run the entire system locally
  • Some features may be specific to the Chinese e-commerce market

Code Examples

// Example of product search in ProductController
@ApiOperation("Search for products")
@RequestMapping(value = "/search", method = RequestMethod.GET)
@ResponseBody
public CommonResult<CommonPage<PmsProduct>> search(@RequestParam(required = false) String keyword,
                                                   @RequestParam(required = false) Long brandId,
                                                   @RequestParam(required = false) Long productCategoryId,
                                                   @RequestParam(required = false, defaultValue = "0") Integer pageNum,
                                                   @RequestParam(required = false, defaultValue = "5") Integer pageSize,
                                                   @RequestParam(required = false, defaultValue = "0") Integer sort) {
    List<PmsProduct> productList = productService.search(keyword, brandId, productCategoryId, pageNum, pageSize, sort);
    return CommonResult.success(CommonPage.restPage(productList));
}
// Example of order creation in OmsPortalOrderController
@ApiOperation("Generate order based on shopping cart")
@RequestMapping(value = "/generateOrder", method = RequestMethod.POST)
@ResponseBody
public CommonResult generateOrder(@RequestBody OrderParam orderParam) {
    Map<String, Object> result = portalOrderService.generateOrder(orderParam);
    return CommonResult.success(result, "Order placed successfully");
}
<!-- Example of product list component in Vue -->
<template>
  <div class="product-list">
    <div v-for="product in products" :key="product.id" class="product-item">
      <img :src="product.pic" :alt="product.name">
      <h3>{{ product.name }}</h3>
      <p>{{ product.price }}</p>
      <button @click="addToCart(product)">Add to Cart</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: []
    }
  },
  methods: {
    addToCart(product) {
      // Implementation of add to cart functionality
    }
  }
}
</script>

Getting Started

  1. Clone the repository:

    git clone https://github.com/macrozheng/mall.git
    
  2. Set up the database:

    • Install MySQL and create a database named mall
    • Run the SQL scripts in the document/sql directory
  3. Configure application properties:

    • Update application.yml with your database credentials
  4. Run the application:

    mvn spring-boot:run
    
  5. Access the application at http://localhost:8080

For detailed instructions, refer to the project's documentation.

Competitor Comparisons

19,175

又一个小商城。litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端

Pros of litemall

  • Simpler architecture, making it easier to understand and maintain
  • Includes a Vue-based admin dashboard out of the box
  • Focuses on small to medium-sized e-commerce applications

Cons of litemall

  • Less comprehensive feature set compared to mall
  • Smaller community and fewer contributions
  • Limited scalability for large-scale e-commerce platforms

Code Comparison

mall:

@Autowired
private UmsMemberService memberService;

@ApiOperation("获取验证码")
@GetMapping("/getAuthCode")
public CommonResult getAuthCode(@RequestParam String telephone) {
    return memberService.generateAuthCode(telephone);
}

litemall:

@Autowired
private LitemallUserService userService;

@PostMapping("register")
public Object register(@RequestBody String body) {
    String username = JacksonUtil.parseString(body, "username");
    String password = JacksonUtil.parseString(body, "password");
    String mobile = JacksonUtil.parseString(body, "mobile");
    String code = JacksonUtil.parseString(body, "code");
    
    if (StringUtils.isEmpty(username) || StringUtils.isEmpty(password) || StringUtils.isEmpty(mobile) || StringUtils.isEmpty(code)) {
        return ResponseUtil.badArgument();
    }
    
    return userService.register(username, password, mobile, code);
}

The code snippets show different approaches to user registration and authentication. mall uses a dedicated service for generating authentication codes, while litemall combines user registration with code verification in a single method.

16,677

基于Spring+SpringMVC+Mybatis分布式敏捷开发系统架构,提供整套公共微服务服务模块:集中权限管理(单点登录)、内容管理、支付中心、用户管理(支持第三方登录)、微信平台、存储系统、配置中心、日志分析、任务和通知等,支持服务治理、监控和追踪,努力为中小型企业打造全方位J2EE企业级开发解决方案。

Pros of zheng

  • More comprehensive microservices architecture with a wider range of modules
  • Includes additional features like SSO and API gateway
  • Provides a more detailed project structure for large-scale applications

Cons of zheng

  • Less active development and maintenance compared to mall
  • Documentation is not as extensive or up-to-date
  • May have a steeper learning curve due to its complexity

Code Comparison

zheng:

@Service
@Transactional
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;
    
    public UserVO getUserById(int userId) {
        return userMapper.selectByPrimaryKey(userId);
    }
}

mall:

@Service
public class UmsAdminServiceImpl implements UmsAdminService {
    @Autowired
    private UmsAdminMapper adminMapper;
    
    @Override
    public UmsAdmin getAdminByUsername(String username) {
        return adminMapper.selectByUsername(username);
    }
}

Both projects use similar service implementation patterns, but mall tends to have more focused and specific service methods, while zheng's services often cover broader functionality.

🔥 🎉newbee-mall是一套电商系统,包括基础版本(Spring Boot+Thymeleaf)、前后端分离版本(Spring Boot+Vue 3+Element-Plus+Vue-Router 4+Pinia+Vant 4) 、秒杀版本、Go语言版本、微服务版本(Spring Cloud Alibaba+Nacos+Sentinel+Seata+Spring Cloud Gateway+OpenFeign+ELK)。 前台商城系统包含首页门户、商品分类、新品上线、首页轮播、商品推荐、商品搜索、商品展示、购物车、订单结算、订单流程、个人订单管理、会员中心、帮助中心等模块。 后台管理系统包含数据面板、轮播图管理、商品管理、订单管理、会员管理、分类管理、设置等模块。

Pros of newbee-mall

  • Simpler architecture, making it easier for beginners to understand and learn
  • More focused on core e-commerce functionalities
  • Includes a separate admin panel for managing the store

Cons of newbee-mall

  • Less comprehensive feature set compared to mall
  • Smaller community and fewer contributors
  • Limited documentation and learning resources

Code Comparison

mall:

@Autowired
private UmsMemberService memberService;

@ApiOperation("获取验证码")
@GetMapping("/getAuthCode")
public CommonResult getAuthCode(@RequestParam String telephone) {
    return memberService.generateAuthCode(telephone);
}

newbee-mall:

@Autowired
private NewBeeMallUserService newBeeMallUserService;

@PostMapping("/login")
@ApiOperation(value = "登录接口", notes = "返回token")
public Result<String> login(@RequestBody @Valid LoginUserParam loginUserParam) {
    String loginResult = newBeeMallUserService.login(loginUserParam.getLoginName(), loginUserParam.getPasswordMd5());
    return ResultGenerator.genSuccessResult(loginResult);
}

Both projects use Spring Boot and follow similar coding patterns. However, mall tends to have more complex implementations with additional features, while newbee-mall focuses on simplicity and core functionalities.

spring cloud + vue + oAuth2.0全家桶实战,前后端分离模拟商城,完整的购物流程、后端运营平台,可以实现快速搭建企业级微服务项目。支持微信登录等三方登录。

Pros of paascloud-master

  • More comprehensive microservices architecture, including service discovery and configuration management
  • Includes a front-end component with Vue.js, offering a full-stack solution
  • Provides detailed documentation and deployment guides for various cloud platforms

Cons of paascloud-master

  • Less active development and community engagement compared to mall
  • More complex setup and configuration, which may be challenging for beginners
  • Fewer integrated e-commerce specific features out of the box

Code Comparison

paascloud-master (Spring Cloud Config):

@EnableConfigServer
@SpringBootApplication
public class PaasCloudConfigApplication {
    public static void main(String[] args) {
        SpringApplication.run(PaasCloudConfigApplication.class, args);
    }
}

mall (Spring Boot Configuration):

@Configuration
@EnableSwagger2
public class Swagger2Config {
    @Bean
    public Docket createRestApi() {
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.macro.mall.controller"))
                .paths(PathSelectors.any())
                .build();
    }
}

The code comparison shows that paascloud-master focuses on distributed configuration management, while mall emphasizes API documentation and testing with Swagger. This reflects the different architectural approaches of the two projects, with paascloud-master being more oriented towards microservices and mall towards a monolithic e-commerce platform.

13,784

🕷 Super-agent driven library for testing node.js HTTP servers using a fluent API. Maintained for @forwardemail, @ladjs, @spamscanner, @breejs, @cabinjs, and @lassjs.

Pros of supertest

  • Focused on API testing, making it ideal for backend developers
  • Lightweight and easy to integrate into existing Node.js projects
  • Supports both callback and promise-based testing styles

Cons of supertest

  • Limited to HTTP testing, unlike mall's comprehensive e-commerce functionality
  • Requires additional libraries for more complex testing scenarios
  • Less active community and fewer contributors compared to mall

Code Comparison

supertest:

const request = require('supertest');
const express = require('express');
const app = express();

request(app)
  .get('/user')
  .expect('Content-Type', /json/)
  .expect(200, done);

mall:

@Autowired
private PmsBrandService brandService;

@ApiOperation("获取所有品牌列表")
@RequestMapping(value = "listAll", method = RequestMethod.GET)
@ResponseBody
public CommonResult<List<PmsBrand>> getBrandList() {
    return CommonResult.success(brandService.listAllBrand());
}

Key Differences

  • supertest is a testing library, while mall is a full e-commerce platform
  • supertest is JavaScript-based, mall is Java-based
  • mall offers a complete application structure, while supertest is a tool to be integrated into existing projects
  • supertest focuses on HTTP assertions, while mall provides a wide range of e-commerce features
27,356

A distributed task scheduling framework.(分布式任务调度平台XXL-JOB)

Pros of xxl-job

  • Focused on distributed task scheduling, making it more specialized and potentially more efficient for this specific use case
  • Lighter weight and easier to integrate into existing projects
  • Provides a web-based management interface for job monitoring and configuration

Cons of xxl-job

  • Limited to task scheduling functionality, whereas mall is a more comprehensive e-commerce solution
  • Less active community and fewer contributors compared to mall
  • Fewer integrations with other technologies and frameworks

Code Comparison

xxl-job:

XxlJobSpringExecutor xxlJobExecutor = new XxlJobSpringExecutor();
xxlJobExecutor.setAdminAddresses(adminAddresses);
xxlJobExecutor.setAppname(appname);
xxlJobExecutor.setIp(ip);
xxlJobExecutor.setPort(port);

mall:

@Configuration
@EnableSwagger2
public class Swagger2Config extends BaseSwaggerConfig {
    @Override
    public SwaggerProperties swaggerProperties() {
        return SwaggerProperties.builder()
                .apiBasePackage("com.macro.mall.controller")
                .title("mall后台系统")
                .description("mall后台相关接口文档")
                .contactName("macro")
                .version("1.0")
                .enableSecurity(true)
                .build();
    }
}

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

mall

公众号 交流 学习教程 SpringCloud版本 后台管理系统 前台商城项目 码云

友情提示

  1. **快速体验项目**:在线访问地址 。
  2. 全套学习教程:《mall学习教程》 。
  3. 视频教程(2023最新版):《mall视频教程》 。
  4. **微服务版本**:基于Spring Cloud Alibaba的项目:mall-swarm 。
  5. 分支说明:master分支基于Spring Boot 2.7+JDK 8,dev-v3分支基于Spring Boot 3.2+JDK 17。

前言

mall项目致力于打造一个完整的电商系统,采用现阶段主流技术实现。

项目文档

文档地址:https://www.macrozheng.com

项目介绍

mall项目是一套电商系统,包括前台商城系统及后台管理系统,基于SpringBoot+MyBatis实现,采用Docker容器化部署。前台商城系统包含首页门户、商品推荐、商品搜索、商品展示、购物车、订单流程、会员中心、客户服务、帮助中心等模块。后台管理系统包含商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等模块。

项目演示

后台管理系统

前端项目mall-admin-web地址:https://github.com/macrozheng/mall-admin-web

项目演示地址: https://www.macrozheng.com/admin/index.html

后台管理系统功能演示

前台商城系统

前端项目mall-app-web地址:https://github.com/macrozheng/mall-app-web

项目演示地址(将浏览器切换为手机模式效果更佳):https://www.macrozheng.com/app/

前台商城系统功能演示

组织结构

mall
├── mall-common -- 工具类及通用代码
├── mall-mbg -- MyBatisGenerator生成的数据库操作代码
├── mall-security -- SpringSecurity封装公用模块
├── mall-admin -- 后台商城管理系统接口
├── mall-search -- 基于Elasticsearch的商品搜索系统
├── mall-portal -- 前台商城系统接口
└── mall-demo -- 框架搭建时的测试代码

技术选型

后端技术

技术说明官网
SpringBootWeb应用开发框架https://spring.io/projects/spring-boot
SpringSecurity认证和授权框架https://spring.io/projects/spring-security
MyBatisORM框架http://www.mybatis.org/mybatis-3/zh/index.html
MyBatisGenerator数据层代码生成器http://www.mybatis.org/generator/index.html
Elasticsearch搜索引擎https://github.com/elastic/elasticsearch
RabbitMQ消息队列https://www.rabbitmq.com/
Redis内存数据存储https://redis.io/
MongoDBNoSql数据库https://www.mongodb.com
LogStash日志收集工具https://github.com/elastic/logstash
Kibana日志可视化查看工具https://github.com/elastic/kibana
Nginx静态资源服务器https://www.nginx.com/
Docker应用容器引擎https://www.docker.com
Jenkins自动化部署工具https://github.com/jenkinsci/jenkins
Druid数据库连接池https://github.com/alibaba/druid
OSS对象存储https://github.com/aliyun/aliyun-oss-java-sdk
MinIO对象存储https://github.com/minio/minio
JWTJWT登录支持https://github.com/jwtk/jjwt
LombokJava语言增强库https://github.com/rzwitserloot/lombok
HutoolJava工具类库https://github.com/looly/hutool
PageHelperMyBatis物理分页插件http://git.oschina.net/free/Mybatis_PageHelper
Swagger-UIAPI文档生成工具https://github.com/swagger-api/swagger-ui
Hibernator-Validator验证框架http://hibernate.org/validator

前端技术

技术说明官网
Vue前端框架https://vuejs.org/
Vue-router路由框架https://router.vuejs.org/
Vuex全局状态管理框架https://vuex.vuejs.org/
Element前端UI框架https://element.eleme.io
Axios前端HTTP框架https://github.com/axios/axios
v-charts基于Echarts的图表框架https://v-charts.js.org/
Js-cookiecookie管理工具https://github.com/js-cookie/js-cookie
nprogress进度条控件https://github.com/rstacruz/nprogress

移动端技术

技术说明官网
Vue核心前端框架https://vuejs.org
Vuex全局状态管理框架https://vuex.vuejs.org
uni-app移动端前端框架https://uniapp.dcloud.io
mix-mall电商项目模板https://ext.dcloud.net.cn/plugin?id=200
luch-requestHTTP请求框架https://github.com/lei-mu/luch-request

架构图

系统架构图

系统架构图

业务架构图

业务架构图

模块介绍

后台管理系统 mall-admin
前台商城系统 mall-portal

功能结构图-前台.jpg

开发进度

项目开发进度图

环境搭建

开发工具

工具说明官网
IDEA开发IDEhttps://www.jetbrains.com/idea/download
RedisDesktopredis客户端连接工具https://github.com/qishibo/AnotherRedisDesktopManager
Robomongomongo客户端连接工具https://robomongo.org/download
SwitchHosts本地host管理https://oldj.github.io/SwitchHosts/
X-shellLinux远程连接工具http://www.netsarang.com/download/software.html
Navicat数据库连接工具http://www.formysql.com/xiazai.html
PowerDesigner数据库设计工具http://powerdesigner.de/
Axure原型设计工具https://www.axure.com/
MindMaster思维导图设计工具http://www.edrawsoft.cn/mindmaster
ScreenToGifgif录制工具https://www.screentogif.com/
ProcessOn流程图绘制工具https://www.processon.com/
PicPick图片处理工具https://picpick.app/zh/
Snipaste屏幕截图工具https://www.snipaste.com/
PostmanAPI接口调试工具https://www.postman.com/
TyporaMarkdown编辑器https://typora.io/

开发环境

工具版本号下载
JDK1.8https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
MySQL5.7https://www.mysql.com/
Redis7.0https://redis.io/download
MongoDB5.0https://www.mongodb.com/download-center
RabbitMQ3.10.5http://www.rabbitmq.com/download.html
Nginx1.22http://nginx.org/en/download.html
Elasticsearch7.17.3https://www.elastic.co/downloads/elasticsearch
Logstash7.17.3https://www.elastic.co/cn/downloads/logstash
Kibana7.17.3https://www.elastic.co/cn/downloads/kibana

搭建步骤

Windows环境部署

Docker环境部署

相关环境部署

公众号

加微信群交流,关注公众号「macrozheng」,回复「**加群**」即可。

公众号图片

许可证

Apache License 2.0

Copyright (c) 2018-2024 macrozheng