搜索

Quasar Sika Design Admin企业级中后台管理系统解决方案

联合创作 · 2023-09-19 14:42

Quasar Sika Design Admin 是一个企业级中后台前端 / 设计解决方案，中后台管理模板，我们秉承 Ant Design 的设计价值观，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板 / 业务组件 / 配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。

项目初衷

起于 Sika Design，不止于 Sika Design，每一个细节都是极致体验 愿景：开源改变世界，Sika Design Admin 让世界没有难写的代码。

项目特色

前端

  • 优雅美观：基于 Ant Design 体系精心设计
  • 常见设计模式：开源改变世界，Sika Design 让世界没有难写的代码
  • 最新技术栈：使用 Quasar&Vue&echarts 等前端前沿技术开发
  • 响应式：针对不同屏幕大小设计
  • 主题：可配置的主题满足多样化的品牌诉求
  • 最佳实践：良好的工程实践助你持续产出高质量代码

后端

  • 优雅、简洁、规范而不失个性
  • 抽象基础组件
  • 约束代码规范
  • 特色的领域驱动设计实践【上下文对象context+executor执行者】
  • 完整的代码生成器-新模块基础功能零开发

组织结构

- quasar-sika-design-admin
  - quasar-sika-design // 前端-基于vue+quasar构建
  - quasar-sika-design-server // 后端服务-基于springboot+mybatis
    - doc // 文档说明
      - sql // sql脚本
    - quasar-sika-design-server-common // 基础公共模块;包括业务的constant+dto+query以及baseDTO+baseSrvice等等
    - quasar-sika-design-server-core // 核心业务模块;包括业务的service，核心领域实现逻辑等等
    - quasar-sika-design-server-ataaccess // 数据库访问层
    - quasar-sika-design-server-generator // 代码生成器模块【无须开发】
    - quasar-sika-design-server-web // controller层
    - sika-code-cor // 核心公共组件，包括且不限于缓存组件、代码生成器组件、公共组件、数据访问、分布式锁、脚手架规范
      - cache // 缓存组件
      - code-generator // 代码生成器组件
      - common // 公共组件
      - databasse // 数据库访问组件
      - hutool-starter // hutool基础集成
      - lock // 分布式组件
      - standard-footer // 标准脚手架组件

技术选型

后端技术

技术 官网 备注
Spring Framework http://projects.spring.io/spring-framework/ 容器
spring-boot-dependencies https://spring.io/projects/spring-boot/ 不解释
Apache Shiro http://shiro.apache.org/ 安全框架
MyBatis http://www.mybatis.org/mybatis-3/zh/index.html ORM框架
MyBatisPlus https://mp.baomidou.com/ ORM增强框架
Mybatis-plus-boot-starter https://mp.baomidou.com/ ORM增强框架
Mybatis-Plus-Generator https://baomidou.gitee.io/mybatis-plus-doc/#/generate-code/ ORM增强框架
HikariCP https://github.com/brettwooldridge/HikariCP/ 数据库连接池
ShardingSphere https://shardingsphere.apache.org/ 分库分表组件
Redis https://redis.io/ 分布式缓存数据库
commons-collections http://commons.apache.org/proper/commons-collections/ 集合工具组件
Log4J http://logging.apache.org/log4j/1.2/ 日志组件
FastJson https://mvnrepository.com/artifact/com.alibaba/fastjson/ JSON序列化和反序列化组件
Lombok https://www.projectlombok.org/ 简化JAVA代码组件
Hutool http://hutool.mydoc.io/ 符合国人习惯的工具组件
MapStruct http://mapstruct.org/ 实体转化组件

前端技术

技术 官网 备注
Vue https://cn.vuejs.org/ 渐进式JavaScript 框架
Quasar http://www.quasarchs.com/ 基于Vue实现的前端UI框架
Echarts https://echarts.apache.org/zh/index.html/ 基于 JavaScript 的开源可视化图表库
Lodashi https://www.lodashjs.com/ 一致性、模块化、高性能的 JavaScript 实用工具库

Overview

基于 Quasar 实现的 Quasar Sika Design_Admin

PC端示例

 
   
  
  

mobile端示例

   
   

服务端代码示例

Controller 由代码生成器生成

package com.quasar.sika.design.server.business.menu.controller;
import java.util.List;
import com.sika.code.result.Result;
import com.sika.code.standard.base.controller.BaseStandardController;
import com.quasar.sika.design.server.business.menu.service.MenuService;
import com.quasar.sika.design.server.business.menu.pojo.dto.MenuDTO;
import com.quasar.sika.design.server.business.menu.pojo.query.MenuQuery;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
/**
 * <p>
 * 菜单权限表 前端控制器
 * </p>
 *
 * @author daiqi
 * @since 2021-01-07 23:35:13
 */
@RestController(value = "menuController")
@RequestMapping("menu")
public class MenuController extends BaseStandardController {
    @Autowired
    private MenuService menuService;

    @RequestMapping(value = "save")
    public Result save(@RequestBody MenuDTO menuDto) {
        return super.success(menuService.save(menuDto));
    }

    @RequestMapping(value = "save_batch")
    public Result saveBatch(@RequestBody List<MenuDTO> menuDtos) {
        return super.success(menuService.saveForBatch(menuDtos));
    }

    @RequestMapping(value = "update_by_id")
    public Result updateById(@RequestBody MenuDTO menuDto) {
        return super.success(menuService.updateById(menuDto));
    }

    @RequestMapping(value = "page")
    public Result page(@RequestBody MenuQuery menuQuery) {
        return super.success(menuService.page(menuQuery));
    }

    @RequestMapping(value = "find")
    public Result find(@RequestBody MenuQuery menuQuery) {
        return super.success(menuService.find(menuQuery));
    }

    @RequestMapping(value = "list")
    public Result list(@RequestBody MenuQuery menuQuery) {
        return super.success(menuService.list(menuQuery));
    }
}

Service 由代码生成器生成

package com.quasar.sika.design.server.business.menu.service;
import com.quasar.sika.design.server.business.menu.pojo.dto.MenuDTO;
import com.sika.code.standard.base.service.BaseStandardService;
import java.util.List;
/**
 * <p>
 * 菜单权限表 服务类
 * </p>
 *
 * @author daiqi
 * @since 2021-01-07 23:35:09
 */
public interface MenuService extends BaseStandardService<MenuDTO> {

}

ServiceImpl 由代码生成器生成

package com.quasar.sika.design.server.business.menu.service.impl;
import cn.hutool.core.collection.CollUtil;
import com.google.common.collect.Lists;
import com.quasar.sika.design.server.business.menu.convert.MenuConvert;
import com.quasar.sika.design.server.business.menu.entity.MenuEntity;
import com.quasar.sika.design.server.business.menu.mapper.MenuMapper;
import com.quasar.sika.design.server.business.menu.pojo.dto.MenuDTO;
import com.quasar.sika.design.server.business.menu.pojo.query.MenuQuery;
import com.quasar.sika.design.server.business.menu.service.MenuService;
import com.quasar.sika.design.server.business.rolemenu.service.RoleMenuService;
import com.sika.code.standard.base.convert.BaseConvert;
import com.sika.code.standard.base.service.impl.BaseStandardServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
import java.util.Set;

/**
 * <p>
 * 菜单权限表 服务实现类
 * </p>
 *
 * @author daiqi
 * @since 2021-01-07 23:35:10
 */
@Service(value = "menuService")
public class MenuServiceImpl extends BaseStandardServiceImpl<MenuMapper, MenuEntity, MenuDTO> implements MenuService {
    @Autowired
    private MenuMapper menuMapper;

    @Override
    protected BaseConvert<MenuEntity, MenuDTO> convert() {
        return MenuConvert.INSTANCE;
    }
}

Mapper 由代码生成器生成

package com.quasar.sika.design.server.business.menu.mapper;

import com.quasar.sika.design.server.business.menu.entity.MenuEntity;
import org.springframework.stereotype.Repository;
import com.sika.code.standard.base.basemapper.BaseStandardMapper;

/**
 * <p>
 * 菜单权限表 Mapper 接口
 * </p>
 *
 * @author daiqi
 * @since 2021-01-07 23:35:08
 */
@Repository
public interface MenuMapper extends BaseStandardMapper<MenuEntity> {

}

Xml 由代码生成器生成

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.quasar.sika.design.server.business.menu.mapper.MenuMapper">

    <!-- 通用查询映射结果 -->
    <resultMap id="ResultMap" type="com.quasar.sika.design.server.business.menu.entity.MenuEntity">
        <result column="id" property="id" />
        <result column="create_by" property="createBy" />
        <result column="update_by" property="updateBy" />
        <result column="create_date" property="createDate" />
        <result column="update_date" property="updateDate" />
        <result column="version" property="version" />
        <result column="available" property="available" />
        <result column="is_deleted" property="isDeleted" />
        <result column="remark" property="remark" />
        <result column="menu_name" property="menuName" />
        <result column="parent_id" property="parentId" />
        <result column="order_num" property="orderNum" />
        <result column="url" property="url" />
        <result column="target" property="target" />
        <result column="menu_type" property="menuType" />
        <result column="visible" property="visible" />
        <result column="perms" property="perms" />
        <result column="icon" property="icon" />
    </resultMap>

    <!-- 通用查询结果列 -->
    <sql id="columnList">
        id, create_by, update_by, create_date, update_date, version, available, is_deleted, remark, menu_name, parent_id, order_num, url, target, menu_type, visible, perms, icon
    </sql>

    <!-- 根据查询条件获取列表信息 -->
    <select id="listByQuery" resultMap="ResultMap" parameterType="com.quasar.sika.design.server.business.menu.pojo.query.MenuQuery" >
        SELECT <include refid="columnList" />
        FROM sika_menu
        <where>
            is_deleted = 0
            <include refid="query_sql" />
        </where>
    </select>

    <!-- 根据查询条件获取Id列表信息 -->
    <select id="listIdByQuery" resultType="java.lang.Long" parameterType="com.quasar.sika.design.server.business.menu.pojo.query.MenuQuery" >
        SELECT id
        FROM sika_menu
        <where>
            is_deleted = 0
            <include refid="query_sql" />
        </where>
    </select>

    <!-- 根据查询条件获取实体信息 -->
    <select id="findByQuery" resultMap="ResultMap" parameterType="com.quasar.sika.design.server.business.menu.pojo.query.MenuQuery" >
        SELECT <include refid="columnList" />
        FROM sika_menu
        <where>
            is_deleted = 0
            <include refid="query_sql" />
        </where>
        LIMIT 1
    </select>

    <!-- 根据查询条件获取表id -->
    <select id="findIdByQuery" resultType="java.lang.Long" parameterType="com.quasar.sika.design.server.business.menu.pojo.query.MenuQuery" >
        SELECT id
        FROM sika_menu
        <where>
            is_deleted = 0
            <include refid="query_sql" />
        </where>
        LIMIT 1
    </select>

    <!-- 根据查询条件获取分页信息 -->
    <select id="pageByQuery" resultMap="ResultMap" parameterType="com.quasar.sika.design.server.business.menu.pojo.query.MenuQuery" >
        SELECT <include refid="columnList" />
        FROM sika_menu
        <where>
            is_deleted = 0
            <include refid="query_sql" />
        </where>
        <include refid="order_by_sql"/>
    </select>

    <!-- 根据查询条件获取总数量信息 -->
    <select id="totalCountByQuery" resultType="Integer" parameterType="com.quasar.sika.design.server.business.menu.pojo.query.MenuQuery" >
        SELECT count(*)
        FROM sika_menu
        <where>
            is_deleted = 0
            <include refid="query_sql" />
        </where>
    </select>

    <!-- 根据查询条件SQL -->
    <sql id="query_sql" >
        <if test="query.id != null">AND id = #{query.id}</if>
        <if test="query.menuId != null">AND id = #{query.menuId}</if>
        <if test="query.menuName != null">AND menu_name = #{query.menuName}</if>
        <if test="query.parentId != null">AND parent_id = #{query.parentId}</if>
        <if test="query.orderNum != null">AND order_num = #{query.orderNum}</if>
        <if test="query.url != null">AND url = #{query.url}</if>
        <if test="query.target != null">AND target = #{query.target}</if>
        <if test="query.menuType != null">AND menu_type = #{query.menuType}</if>
        <if test="query.visible != null">AND visible = #{query.visible}</if>
        <if test="query.perms != null">AND perms = #{query.perms}</if>
        <if test="query.icon != null">AND icon = #{query.icon}</if>
        <if test="query.ids != null and query.ids.size() > 0">
            AND id in
            <foreach item="item" collection="query.ids" separator="," open="(" close=")" index="">
                #{item}
            </foreach>
        </if>
    </sql>

    <!-- 排序的sql -->
    <sql id="order_by_sql">
        <if test="query.sortColumn != null and query.sortType != null" >
            ORDER BY
            <include refid="order_by_column_sql"/>
            <include refid="order_by_type_sql"/>
        </if>
    </sql>

    <!-- 排序列名的sql -->
    <sql id="order_by_column_sql">
        <choose>
            <when test="query.sortColumn == 'menuId'">
                id
            </when>
            <otherwise>
                id
            </otherwise>
        </choose>
    </sql>

    <!-- 排序类型的sql -->
    <sql id="order_by_type_sql">
        <choose>
            <when test="query.sortType == 'DESC'">
                DESC
            </when>
            <otherwise>
                ASC
            </otherwise>
        </choose>
    </sql>
</mapper>

Context【领域上下文对象】

package com.quasar.sika.design.server.common.auth.context;

import com.quasar.sika.design.server.common.auth.executor.AuthRegisterRequestExecutor;
import com.quasar.sika.design.server.common.auth.pojo.request.AuthRegisterRequest;
import com.quasar.sika.design.server.common.captcha.pojo.request.CaptchaCheckRequest;
import com.quasar.sika.design.server.common.mail.context.CheckMailCodeContext;
import com.quasar.sika.design.server.common.mail.pojo.request.CheckMailRequest;
import com.quasar.sika.design.server.common.shiro.util.SHA256Util;
import com.sika.code.standard.base.pojo.context.BaseStandardContext;
import com.sika.code.standard.base.pojo.executor.BaseStandardExecutor;
import lombok.Data;
import lombok.experimental.Accessors;

/**
 * @author daiqi
 * @create 2021-01-09 18:02
 */
@Data
@Accessors(chain = true)
public class AuthRegisterContext extends BaseStandardContext {
    private AuthRegisterRequest registerRequest;
    private CheckMailRequest checkMailRequest;
    protected CaptchaCheckRequest captchaCheckRequest;
    private CheckMailCodeContext checkMailCodeContext;
    private Boolean bindOauthUser;

    @Override
    public void initCustomer() {
        checkMailCodeContext = new CheckMailCodeContext().setRequest(checkMailRequest);
        registerRequest.setPassword(SHA256Util.sha256(registerRequest));
    }

    @Override
    protected Class<? extends BaseStandardExecutor> buildExecutorClass() {
        return AuthRegisterRequestExecutor.class;
    }
}

Executor领域执行者对象【按领域划分】

package com.quasar.sika.design.server.common.auth.executor;

import cn.hutool.core.util.BooleanUtil;
import com.quasar.sika.design.server.common.auth.context.AuthRegisterContext;
import com.quasar.sika.design.server.common.auth.domain.AuthDomain;
import com.quasar.sika.design.server.common.auth.pojo.request.AuthLoginRequest;
import com.quasar.sika.design.server.common.auth.pojo.request.AuthRegisterRequest;
import com.quasar.sika.design.server.common.auth.pojo.response.AuthResponse;
import com.sika.code.basic.pojo.dto.ServiceResult;
import com.sika.code.exception.BusinessException;
import com.sika.code.standard.base.pojo.executor.BaseStandardExecutor;
import lombok.Data;
import lombok.experimental.Accessors;

/**
 * @author daiqi
 * @create 2021-01-09 18:02
 */
@Data
@Accessors(chain = true)
public class AuthRegisterRequestExecutor extends BaseStandardExecutor<AuthRegisterContext> implements AuthDomain {
    @Override
    protected void executeBefore() {
        verify();
    }

    protected void verify() {
        // 图片验证码校验
        captchaService().checkCaptchaVerifyCode(context.getCaptchaCheckRequest());
        // 邮箱验证码校验
        executorManager().execute(context.getCheckMailCodeContext());
        // 校验用户名
        AuthRegisterRequest registerRequest = context.getRegisterRequest();
        authService().checkRegisterUsername(registerRequest);
        // 校验邮箱
        authService().checkRegisterEmail(registerRequest);
        // 校验手机号
        authService().checkRegisterPhone(registerRequest);
    }

    @Override
    protected ServiceResult doExecute() {
        AuthRegisterRequest registerRequest = context.getRegisterRequest();
        boolean saveSuccess = userService().save(registerRequest);
        if (BooleanUtil.isFalse(saveSuccess)) {
            throw new BusinessException("保存失败,请校验注册参数");
        }
        return ServiceResult.newInstanceOfSucResult(AuthResponse.success(registerRequest));
    }

    @Override
    protected void executeAfter() {
        // 自动登录
        AuthRegisterRequest registerRequest = context.getRegisterRequest();
        AuthLoginRequest request = new AuthLoginRequest(registerRequest.getUsername(), registerRequest.getPassword());
        request.setEncryptedPassword(true);
        if (BooleanUtil.isTrue(context.getBindOauthUser())) {
            authService().bindOauthUser(request);
        } else {
            authService().login(request);
        }
        // 移除缓存
        captchaService().removeCaptchaVerifyCode(context.getCaptchaCheckRequest());
        mailService().removeMailCode(context.getCheckMailRequest());
    }
}

前端环境和依赖

  • node
  • yarn
  • webpack
  • eslint
  • @vue/cli ~3
  • Quasar - Quasar Of Vue 实现

请注意，我们强烈建议本项目使用 Yarn 包管理工具，这样可以与本项目演示站所加载完全相同的依赖版本 (yarn.lock) 。由于我们没有对依赖进行强制的版本控制，采用非 yarn 包管理进行引入时，可能由于 Pro 所依赖的库已经升级版本而引入了新版本所导致的问题。作者可能会由于时间问题无法及时排查而导致您采用本项目作为基项目而出现问题。

项目下载和运行

  • 拉取项目代码
git clone https://github.com/dq-open-cloud/quasar-sika-design.git
cd quasar-sika-design
  • 安装依赖
yarn install
  • 开发模式运行
quasar dev
  • 编译项目
quasar build
  • Lints and fixes files
yarn run lint

文档待完善

启动步骤

  • 找到QuasarSikaDesignServerApplication直接运行
  • 前端quasar-dev启动运行即可

其他说明

  • 关于 Issue 反馈 (重要!重要!重要!) 请在开 Issue 前，先阅读该内容：Issue / PR 编写建议

  • 项目使用的 quasar-cli, 请确保你所使用的 quasar-cli 是新版，并且已经学习 cli 官方文档使用教程

  • 关闭 Eslint (不推荐) 移除 package.json 中 eslintConfig 整个节点代码, vue.config.js 下的 lintOnSave 值改为 false

  • 用于生产环境，请使用 release 版本代码，使用 master 代码出现的任何问题需要你自行解决

  • 后端提供的Mysql和Redis环境属于线上测试环境，内测阶段请大家一定不要随意增删字段

浏览器兼容

  • Chrome for Android >= 87
  • Firefox for Android >= 83
  • Android >= 81
  • Chrome >= 77
  • Edge >= 84
  • Firefox >= 74
  • iOS >= 10.3
  • Opera >= 68
  • Safari >= 11
IE / EdgeIE / Edge FirefoxFirefox ChromeChrome SafariSafari OperaOpera
IE10, Edge last 2 versions last 2 versions last 2 versions last 2 versions

Contributors

This project exists thanks to all the people who contribute. 

浏览 10
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
Fusion Design企业级中后台 UI 解决方案
Fusion Design 是一种旨在提升设计与开发之间 UI 构建效率的工作方式。通过建设基于 D
Fusion Design企业级中后台 UI 解决方案
0
Fusion Design企业级中后台 UI 解决方案
FusionDesign 是一种旨在提升设计与开发之间UI构建效率的工作方式。通过建设基于DPL模式的，设计、前端之间的标准协议与工作流，来快速构建符合业务诉求的DPL，提升DPL的构建效率和应用效率
Fusion Design企业级中后台 UI 解决方案
0
Mojito Admin后台管理系统
MojitoMojito 是一个基于 Laravel, Vue, Element构建的后台管理系统。
Mojito Admin后台管理系统
0
Mojito Admin后台管理系统
MojitoMojito是一个基于Laravel,Vue,Element构建的后台管理系统。截图特征可快速衍生多个后台系统内置角色，权限，用户，菜单管理OAuth2.0，并支持多表鉴权完善的PHPUn
Mojito Admin后台管理系统
0
NutzSiteJava 企业级后台管理系统
NutzSite 是一个 Java 企业级后台管理系统开源框架，核心技术采用 nutz、nutzbo
NutzSiteJava 企业级后台管理系统
0
Smart Admin通用型中后台解决方案
SmartAdmin是一套互联网企业级的通用型中后台解决方案！使用最前沿的前后台技术栈SpringBoot和Vue，前后端分离，用一套漂亮的代码和一套整洁的代码规范，同时又让开发者节省大量的时间，减少
Smart Admin通用型中后台解决方案
0
AntD Admin中后台前端解决方案
AntDAdmin 一套优秀的中后台前端解决方案。特性国际化，源码中抽离翻译字段，按需加载语言包动态权限，不同权限对应不同菜单优雅美观，AntDesign设计体系Mock数据，本地数据调试使用1、下载
AntD Admin中后台前端解决方案
0
AntD Admin中后台前端解决方案
AntD Admin 一套优秀的中后台前端解决方案。特性国际化，源码中抽离翻译字段，按需加载语言包动
AntD Admin中后台前端解决方案
0
NutzSiteJava 企业级后台管理系统
NutzSite是一个Java企业级后台管理系统开源框架，核心技术采用nutz、nutzboot与Shiro，没有任何其它重度依赖。主要功能:可以通过数据库快速生成代码列表,树拖拽生成表单,ztree
NutzSiteJava 企业级后台管理系统
0
Smart Admin通用型中后台解决方案
SmartAdmin是一套互联网企业级的通用型中后台解决方案！使用最前沿的前后台技术栈SpringB
Smart Admin通用型中后台解决方案
0
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报