Skip to content

有来商城youlai-mall管理前端,技术栈:vue-element-admin + element-ui,实现动态路由和按钮权限控制。

License

Notifications You must be signed in to change notification settings

lycodeing/youlai-mall-admin

 
 

Repository files navigation

项目介绍

youlai-mall 是基于Spring Boot 2.4、Spring Cloud 2020 & Alibaba、Vue、element-ui、uni-app快速构建的一套全栈开源商城平台,包括微服务应用、管理平台、微信小程序及APP应用

项目特色

  • 项目使用都是最新主流的开源框架,无过度自定义封装的逻辑,易理解上手和方便扩展

  • 基于Spring Boot 2.4、Spring Cloud 2020 & Alibaba 一站式微服务解决方案快速开发分布式服务

  • 实现Spring Cloud OAuth2、Spring Cloud Gateway、JWT分布式统一认证鉴权和RBAC 权限系统设计

  • 使用vue-element-admin的后台前端解决方案,基于Vue和element-ui快速搭建前后端分离的商城管理平台

  • 通过uni-app使用Vue开发实现跨所有前端的应用,包含微信小程序、APP应用

  • 使用Docker快速构建项目环境和一键打包部署微服务项目

项目愿景

项目从01的构建过程已无保留的在项目文章中说明,真正的开源不图利益。

项目慢慢成型的路上离不开支持还有默默点star的那些小伙伴,在这里抱拳谢过各位道友了。

项目地址

1. 体验

商城管理平台访问地址: http://www.youlai.store

【有来小店】微信小程序体验码,扫描后申请体验看到直接通过

交流群二维码过期,加我微信我直接拉你进群

2. 源码

项目名称 Github 码云
微服务后台 youlai-mall youlai-mall
管理前端 youlai-mall-admin youlai-mall-admin
微信小程序 youlai-mall-weapp youlai-mall-weapp
APP应用 youlai-mall-app youlai-mall-app

项目预览

1. 商城管理平台

1.1 系统管理

1.2 商品管理

2. 微信小程序

项目结构

youlai-mall
├── document
    ├── nacos -- Nacos配置文件
    ├── sql   -- mysql数据库脚本
├── mall-oms
    ├── oms-api -- 订单微服务的远程调用客户端
    ├── oms-biz -- 订单微服务
├── mall-pms
    ├── pms-api -- 商品微服务的远程调用客户端
    ├── pms-biz -- 商品微服务
    ├── pms-search -- 商品搜索微服务
├── mall-sms
    ├── sms-api -- 营销微服务的远程调用客户端
    ├── sms-biz -- 营销微服务
├── mall-ums
    ├── ums-api -- 会员微服务的远程调用客户端
    ├── ums-biz -- 会员微服务
├── youlai-admin 
    ├── admin-api -- 系统管理微服务的远程调用客户端
    ├── admin-biz -- 系统管理微服务
├── youlai-auth     -- 认证中心【Oauth2认证服务器】
├── youlai-common   -- 公共模块
└── youlai-gateway  -- Gateway网关【Oauth2资源服务器】
└── youlai-registry -- Nacos应用

核心技术栈

后端技术 版本号
SpringBoot 2.4.2
Spring Cloud 2020.0.1
Spring Cloud Alibaba 2.2.5.RELEASE
MyBatis-Plus 3.4.0
Lombok 1.18.18
Hutool 5.5.8
Knife4j 2.0.5
MinIO 7.1.0
后台前端 版本号 微信小程序 版本号 APP 版本号
element-ui 2.13.2 uni-app 2.8.11 vant 2.5.4

项目启动

1. 后台微服务启动

云环境项目启动

项目依赖环境(MySQL8、Redis、MinIO、Nacos)默认均使用有来技术云环境,项目启动极其方便,步骤如下:

  1. 启动Nacos服务

    IDEA下方工具栏点击Terminal终端命令行,执行cd youlai-registry/nacos/bin命令切换到Nacos的启动脚本文件夹下,然后执行startup -m standalone命令启动Nacos服务;

  2. 启动平台基础服务

    分别启动youlai-gatewayyoulai-authyoulai-admin模块, 启动类分别对应的是GatewayApplication、AuthApplication以及youlai-admin的子模块admin-biz的AdminApplication类,至此完成整个项目的启动;

  3. 至此后台服务启动完毕,如需商城服务,启动对应模块的子模块biz的启动类即可。

: 云环境是无条件的提供给大家,但千万不要改动云环境的数据和配置,因为改动会导致整个项目无法运行,考虑下开发人员和其他小伙伴,手下留情。

本地环境项目启动

云环境不能改动数据和配置,如需修改,建议本地环境搭建启动,步骤如下:

  1. 安装环境

    安装MySQL8RedisMinIO,其中MinIO按需选装

  2. 创建数据库

  • 新建平台数据库,执行项目document/sql下的SQL脚本完成数据库创建,基础sql脚本为youlai.sql,商城脚本为mall-*,商城数据库按需创建

  • 创建Nacos数据库,执行脚本youlai-registry/nacos/conf/nacos-mysql.sql完成Nacos数据库的初始化

  1. Nacos配置
  • 修改Nacos数据源,进入配置youlai-registry/nacos/conf/application.properties将数据源修改为自己的环境连接

  • 导入Nacos配置,在启动Nacos服务进入控制台导入document/nacos/DEFAULT_GROUP.zip配置,然后分别进入各个微服务配置修改Redis、MySQL、MinIO以及微服务的注册IP

  1. 至此环境配置准备完毕,接下来按照云环境启动平台基础服务步骤启动服务即可。

2. 后台前端启动

  1. 本机安装Python和Node环境
  2. npm install
  3. npm run dev
  4. 访问 http://localhost:9527

3. 微信小程序启动

  1. 下载HBuilder X微信开发者工具
  2. 微信公众平台申请小程序,获得小程序的AppID
  3. 微信开发者工具微信扫码登录,开启服务端口,点击工具栏设置->安全设置->安全->服务端口选择打开
  4. Hbuilder X替换项目AppID成自己的,点击manifest.json文件->微信小程序配置
  5. Hbuilder X工具栏点击 运行->运行到小程序模拟器->微信开发者工具

项目文档

后台微服务

  1. Spring Cloud实战 | 第一篇:Windows搭建Nacos服务
  2. Spring Cloud实战 | 第二篇:Spring Cloud整合Nacos实现注册中心
  3. Spring Cloud实战 | 第三篇:Spring Cloud整合Nacos实现配置中心
  4. Spring Cloud实战 | 第四篇:Spring Cloud整合Gateway实现API网关
  5. Spring Cloud实战 | 第五篇:Spring Cloud整合OpenFeign实现微服务之间的调用
  6. Spring Cloud实战 | 第六篇:Spring Cloud Gateway+Spring Security OAuth2+JWT实现微服务统一认证授权
  7. Spring Cloud实战 | 最七篇:Spring Cloud Gateway+Spring Security OAuth2集成统一认证授权平台下实现注销使JWT失效方案
  8. Spring Cloud实战 | 最八篇:Spring Cloud +Spring Security OAuth2+ Vue前后端分离模式下无感知刷新实现JWT续期
  9. Spring Cloud实战 | 最九篇:Spring Security OAuth2认证服务器统一认证自定义异常处理
  10. Spring Cloud实战 | 第十篇 :Spring Cloud + Nacos整合Seata 1.4.1最新版本实现微服务架构中的分布式事务,进阶之路必须要迈过的槛
  11. Spring Cloud实战 | 第十一篇 :Spring Cloud Gateway网关实现对RESTful接口权限和按钮权限细粒度控制

后台管理前端

  1. vue-element-admin实战 | 第一篇: 移除mock接入微服务接口,搭建SpringCloud+Vue前后端分离管理平台
  2. vue-element-admin实战 | 第二篇: 最小改动接入后台实现根据权限动态加载菜单

微信小程序

  1. vue+uni-app商城实战 | 第一篇:从0到1快捷开发一个商城微信小程序,无缝接入OAuth2实现一键授权登录

应用部署

  1. Docker实战 | 第一篇:Linux 安装 Docker
  2. Docker实战 | 第二篇:Docker部署nacos-server:1.4.0
  3. Docker实战 | 第三篇:IDEA集成Docker插件实现一键自动打包部署微服务项目,一劳永逸的技术手段值得一试
  4. Docker实战 | 第四篇:Docker安装Nginx,实现基于vue-element-admin框架构建的项目线上部署
  5. Docker实战 | 第五篇:Docker启用TLS加密解决暴露2375端口引发的安全漏洞,被黑掉三台云主机的教训总结

其他说明

  • 如果github拉取失败请移步至码云https://gitee.com/haoxr,代码是同步的

  • 项目在搭建的过程中如您遇到任何问题,可加我微信(haoxianrui)或者微信群,也可在github提issue

  • 演示环境禁止修改、删除重要数据,请本地部署后操作

About

有来商城youlai-mall管理前端,技术栈:vue-element-admin + element-ui,实现动态路由和按钮权限控制。

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Vue 72.5%
  • JavaScript 23.7%
  • SCSS 3.5%
  • Other 0.3%