[附源码]最新springboot线上电商|前后端分离|界面简洁

大家好，欢迎来到IT知识分享网。

一. 前言

今天小编给大家带来了一款可学习，可商用的，线上电商的网站源码，支持二开，无加密。代码的后端是SpringBoot技术栈（非jsp），前端是Angular。如果您需要定制需求请找小编。

文章第六小节会贴上优秀代码案例。可以确认是不是主流编码风格。

如果您正好有此需求源码，请联系小编，回复慢不及时的话请谅解！！！

二. 视频演示

网站的截图在文章末尾给出，这里先给出我演示的网站视频：

三. 技术栈以及问题

后端技术栈:

• JDK11
• SpringBoot2.3.3+Hibernate
• OAuth2
• MySQL8
• Maven
• Spring Cache本地缓存
• RestFull API
• Swagger

前端技术栈：

• Angular 10
• Rxjs
• Ngrx Store
• Bootstrap
• NgBootstrap
• FontAwesome

当前问题

1. 没有实现管理后台。（找我可以帮您实现）
2. 支付是模拟的，并没有对接支付。（根据您的需求对接）
3. 只支持PC端，不支持移动设备。

如果您需要定制修改源码，请联系小编。

四. 后端搭建

1. 数据库创建

创建一个数据库为 lzshop 的数据库。

脚本位置在 sql/lzshop.sql， 我们直接导入脚本:

2. 代码搭建

后端代码分为两块服务：

• authorization_server（权限服务）
• resource_server （主要业务逻辑实现服务）

authorization_server搭建

用idea导入authorization_server服务，找到yml配置，修改成你的数据库地址和账号密码：

spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver hikari: connection-timeout: 60000 maximum-pool-size: 2 minimum-idle: 1 pool-name: data-source 修改成你的数据库信息 url: jdbc:mysql://localhost:3306/lzshop?useSSL=false&useUnicode=yes&characterEncoding=UTF-8&allowPublicKeyRetrieval=true&serverTimezone=UTC username: root password: 

然后找到 OauthApplication 启动类启动

resource_server搭建

用 idea导入resource_server 服务，找到yml配置，修改成你的数据库地址和账号密码：

spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver hikari: connection-timeout: 60000 maximum-pool-size: 2 minimum-idle: 1 pool-name: data-source 修改成你的数据库信息 url: jdbc:mysql://localhost:3306/lzshop?useSSL=false&useUnicode=yes&characterEncoding=UTF-8&allowPublicKeyRetrieval=true&serverTimezone=UTC username: root password: 

然后找到 BackendApplication启动类启动

五. 前端搭建

前端代码在client下面

前端是angular项目，部署教程专门搞了一篇教程部署：

老罗教知识：Angular项目创建、启动到打包部署0 赞同 · 0 评论文章

运行结果：

六. 后端技术集锦

后端采用了当前主流的技术和经典代码，毕竟优秀的代码维护起来都是相当解耦和容易的，bug也是微乎其微。这里我找几个重点代码讲解。

代码1：自定义检验注解

// *某个request的请求参数 @NotBlank @Size(min = 3, max = 52) @CustomEmail //自定义的邮件校验注解 private String email; // *邮件校验注解 @Target({TYPE, FIELD, ANNOTATION_TYPE}) @Retention(RUNTIME) @Constraint(validatedBy = CustomEmailValidator.class) @Documented public @interface CustomEmail { String message() default "Invalid email"; Class<?>[] groups() default {}; Class<? extends Payload>[] payload() default {}; } // *具体邮件校验实现 public class CustomEmailValidator implements ConstraintValidator<CustomEmail, String> { private static final String EMAIL_PATTERN = "^[a-zA-Z0-9_!#$%&’*+/=?`{|}~^.-]+@[a-zA-Z0-9.-]+$"; private Pattern pattern; private Matcher matcher; @Override public boolean isValid(String email, ConstraintValidatorContext context) { return (validateEmail(email)); } private boolean validateEmail(String email) { pattern = Pattern.compile(EMAIL_PATTERN); matcher = pattern.matcher(email); return matcher.matches(); } }

代码2：转换层（数据库实体转前端返回实体）

// *一个查询用户业务实现 public UserResponse fetchUser() { String userName = SecurityContextHolder.getContext().getAuthentication().getName(); if (Objects.isNull(userName)) { throw new AccessDeniedException("Invalid access"); } Optional<User> user = userRepository.findByEmail(userName); if (user.isEmpty()) { throw new ResourceNotFoundException("User not found"); } // *利用用户转换器进行转换 return userResponseConverter.apply(user.get()); } // *用户转换器 @Component public class UserResponseConverter implements Function<User, UserResponse> { @Override public UserResponse apply(User user) { // 设置该返回的值 UserResponse userResponse = new UserResponse(); userResponse.setEmail(user.getEmail()); userResponse.setFirstName(user.getFirstName()); userResponse.setLastName(user.getLastName()); userResponse.setAddress(user.getAddress()); userResponse.setCity(user.getCity()); userResponse.setState(user.getState()); userResponse.setZip(user.getZip()); userResponse.setPhone(user.getPhone()); userResponse.setCountry(user.getCountry()); userResponse.setEmailVerified(user.getEmailVerified()); return userResponse; } }

代码3：Spring事件ApplicationListener

 // *忘记密码，发送邮件 @Component public class PasswordForgotListener implements ApplicationListener<OnPasswordForgotRequestEvent> { @Autowired private JavaMailSender mailSender; @Autowired private MailConstants mailConstants; @Override public void onApplicationEvent(OnPasswordForgotRequestEvent event) { this.confirmRegistration(event); } private void confirmRegistration(OnPasswordForgotRequestEvent event) { String recipientAddress = event.getUser().getEmail(); String subject = "\uD83D\uDD11 密码重置确认"; String confirmationUrl = mailConstants.getHostAddress() + "/passwordResetConfirm?token=" + event.getToken(); String message = "Hi ,\n\n请点击下面链接重置密码。"; SimpleMailMessage email = new SimpleMailMessage(); email.setTo(recipientAddress); email.setSubject(subject); email.setText(message + "\n\n" + confirmationUrl + "\n\n\nw/ Keyist Team"); mailSender.send(email); } }

代码4：Spring本地缓存 @Cacheable注解

 // *查询关联商品的逻辑 @Cacheable(key = "{#productCategory.name,#id}", unless = "#result.size()==0") public List<Product> getRelatedProducts(ProductCategory productCategory, Long id) { List<Product> productList = productRepository.findTop8ByProductCategoryAndIdIsNot(productCategory, id); if (productList.size() < 8) { productList.addAll(productRepository.findAllByProductCategoryIsNot(productCategory, PageRequest.of(0, 8 - productList.size()))); } return productList; }

代码5：严格的restful api 风格

代码6：数据库层，没有任何sql和xml

@Repository public interface ProductRepository extends PagingAndSortingRepository<Product, Long> { Optional<Product> findByUrl(String url); List<Product> findAllByProductCategory(Pageable pageable, ProductCategory productCategory); List<Product> findTop8ByOrderByDateCreatedDesc(); List<Product> findAllByNameContainingIgnoreCase(String name, Pageable pageable); List<Product> findTop8ByProductCategoryAndIdIsNot(ProductCategory productCategory, Long id); List<Product> findAllByProductCategoryIsNot(ProductCategory productCategory, Pageable pageable); }

swagger文档

还有很多很多，我就不贴了，优秀的代码维护起来都是相当容易的，bug也是微乎其微。

七. 演示截图

首页

产品页

搜索页

商品详情

登录

购物车

购物车结算

确认支付

支付完成

订单列表

收货地址

用户信息

结尾语

我是分享好物+教程+源码的老罗，欢迎关注，后续会有更精彩的源码分享！