CMS管理后台入门指南-(Ant-Design-Pro-v2-0)

目标:实现一个基础模块

基础模块

基础模块的定义

  • 基础模块(了解一个基础模块包含哪些基本功能,包括基本功能的展示方式等)

基础模块中前置知识准备

  • 各功能组件介绍(了解各个模块使用到的组件以及组件的在使用过程中的注意事项)
    • 查询操作的基本组件
      1. Form 表单的使用
      2. Table 组件的使用
      3. Loading 控制
    • 新增/修改操作的基本组件和常用组件
      1. Modal 组件使用
      2. Form 表单深入
      3. message 组件提示
      4. Switch 控制
      5. Select 选择
      6. Input 输入框
      7. InputNumber 数字输入框
      8. 上传图片
      9. 上传文件/下载文件
    • 删除操作的基本组件
      1. Popconfirm 气泡确认框

开始实践

项目拉取和安装

  1. git 拉取项目
  2. 安装项目依赖包

创建页面

  1. 创建页面
  2. 基本业务操作的相关组件渲染

数据交互

数据渲染(了解如何获取数据,并将数据渲染出来?)

  1. react 生命周期
  2. dva框架的数据流向(深入理解页面、models、services 三者之间的关系)
    1. 数据流向说明
    2. 高阶函数@connect
    3. dispatch action
  3. ant design pro 的使用(在实现数据渲染的代码中会遇到以下知识点)
    1. ES6 解构赋值
    2. async 和 await
    3. yield
    4. call put

数据更新(新增修改删除操作之后,要如何更新数据?)

  1. 接口规范(清楚各种类型的接口返回什么样的数据)
  2. 新增修改删除的处理

打包发布

打包压缩命令

发布打包的文件

补充说明

  1. CMS管理后台框架 (Ant Design Pro v1.0)

作者简介:李尧晖,芦苇科技web前端开发工程师,代表作品:飞花亭小程序、续航基因、YY表情红包、YY叠方块直播竞赛小游戏。擅长网站建设、微信公众号开发、微信小程序开发、小游戏制作、企业微信制作、H5建设,专注于前端框架、服务端渲染、SEO技术、交互设计、图像绘制、数据分析等研究。

欢迎和我们一起并肩作战: web@talkmoney.cn
访问 www.talkmoney.cn 了解更多

提供深圳微信公众号外包,高质量的钉钉开发,专业的企业微信建设,东莞微信小程序开发,广州小游戏制作,广东H5建设

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
cms-Cloud后台管理系统 cms-Cloud 基于Spring Boot、Spring Cloud & Alibaba、OAuth2的前后端分离的后台管理系统,内置模块如:部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在线定时任务配置;支持集群,支持多数据源。核心技术前端技术栈 ES6、vue、vuex、vue-router、vue-cli、axios、element-ui后端技术栈 Spring Boot、Spring Cloud & Alibaba、OAuth2系统需求JDK >= 1.8MySQL >= 5.5Maven >= 3.0主要特性1. 完全响应式布局(支持电脑、平板、手机等所有主流设备)2. 强大的一键生成功能(包括控制器、模型、视图、菜单等)3. 支持多数据源,简单配置即可实现切换。4. 支持按钮及数据权限,可自定义部门数据权限。5. 对常用js插件进行二次封装,使js代码变得简洁,更加易维护6. 完善的XSS防范及脚本过滤,彻底杜绝XSS攻击7. Maven多项目依赖,模块及插件分项目,尽量松耦合,方便模块升级、增减模块。8. 国际化支持,服务端及客户端支持9. 完善的日志记录体系简单注解即可实现技术选型1、系统环境Java EE 8Servlet 3.0Apache Maven 32、主框架Spring Boot 2.2Spring Cloud Hoxton.SR3Spring Framework 5.1Spring Security 5.13、持久层Apache MyBatis 3.4Alibaba Druid 1.14、视图层Vue 2.6Axios 0.18Element UI 2.11内置功能(1) 用户管理:用户是系统操作者,该功能主要完成系统用户配置。(2) 部门管理:配置系统组织机构(公司、部门、小组),树结构展现支持数据权限。(3) 岗位管理:配置系统用户所属担任职务。(4) 菜单管理:配置系统菜单,操作权限,按钮权限标识等。(5) 角色管理:角色菜单权限分配、设置角色按机构进行数据范围权限划分。(6) 字典管理:对系统中经常使用的一些较为固定的数据进行维护。(7) 参数管理:对系统动态配置常用参数。(8) 通知公告:系统通知公告信息发布维护。(9) 操作日志:系统正常操作日志记录和查询;系统异常信息日志记录和查询。(10) 登录日志:系统登录日志记录查询包含登录异常。(11) 在线用户:当前系统中活跃用户状态监控。(12) 定时任务:在线(添加、修改、删除)任务调度包含执行结果日志。(13) 代码生成:前后端代码的生成(java、html、xml、sql)支持CRUD下载 。(14) 系统接口:根据业务代码自动生成相关的api接口文档。(15) 服务监控:监视当前系统CPU、内存、磁盘、堆栈等相关信息。(16) 在线构建器:拖动表单元素生成相应的HTML代码。(17) 连接池监视:监视当期系统数据库连接池状态,可进行分析SQL找出系统性能瓶颈。 环境部署准备工作JDK >= 1.8 (推荐1.8版本)Mysql >= 5.5.0 (推荐5.7版本)Redis >= 3.0Maven >= 3.0Node >= 10nacos >= 1.1.0sentinel >= 1.6.0运行系统因为本项目是前后端分离的,所以需要前后端都启动好,才能进行访问。后端运行1、导入cms到Eclipse,菜单 File -> Import,然后选择 Maven -> Existing Maven Projects,点击 Next> 按钮,选择工作目录,然后点击 Finish 按钮,即可成功导入Eclipse会自动加载Maven依赖包,初次加载会比较慢(根据自身网络情况而定)2、创建数据库cms-cloud并导入数据脚本cms.sql(必须),quartz.sql(可选)3、创建数据库cms-config并导入数据脚本cms_config.sql(必须)4、配置nacos持久化,修改conf/application.properties文件,增加支持mysql数据源配置。# db mysqlspring.datasource.platform=mysqldb.num=1db.url.0=jdbc:mysql://localhost:3306/cms-config?characterEncoding=utf8&connectTimeout=1000&socketTimeout=3000&autoReconnect=true&useUnicode=true&useSSL=false&serverTimezone=UTCdb.user=rootdb.password=password5、打开运行基础模块(启动没有先后顺序)CmsGatewayApplication (网关模块 必须)CmsAuthApplication (认证模块 必须)CmsSystemApplication (系统模块 必须)CmsMonitorApplication (监控中心 可选)CmsGenApplication (代码生成 可选)CmsJobApplication (定时任务 可选)CmsFileApplication (文件服务 可选)前端运行# 进入项目目录cd cms-ui# 安装依赖npm install# 强烈建议不要用直接使用 cnpm 安装,会有各种诡异的 bug,可以通过重新指定 registry 来解决 npm 安装速度慢的问题。npm install --registry=https://registry.npm.taobao.org 本地开发 启动项目npm run dev打开浏览器,输入:http://localhost:80 (默认账户 admin/admin123)若能正确展示登录页面,并能成功登录,菜单及页面展示正常,则表明环境搭建成功提示前端安装完node后,最好设置下淘宝的镜像源,不建议使用cnpm(可能会出现奇怪的问题)部署系统因为本项目是前后端分离的,所以需要前后端都部署好,才能进行访问后端部署bin/package.bat 在项目的目录下执行然后会在项目下生成 target文件夹包含 war 或jar1、jar部署方式使用命令行执行:java –jar xxxx.jar 或者执行脚本:bin/run.bat2、war部署方式pom.xml packaging修改为war 放入tomcat服务器webapps提示SpringBoot去除内嵌tomcat前端部署当项目开发完毕,只需要运行一行命令就可以打包你的应用# 打包正式环境npm run build:prod# 打包预发布环境npm run build:stage构建打包成功之后,会在根目录生成 dist 文件夹,里面就是构建打包好的文件,通常是 ***.js 、***.css、index.html 等静态文件。通常情况下 dist 文件夹的静态文件发布到你的 nginx 或者静态服务器即可,其中的 index.html 是后台服务的入口页面。环境变量所有测试环境或者正式环境变量的配置都在 .env.development (opens new window)等 .env.xxxx文件中。它们都会通过 webpack.DefinePlugin 插件注入到全局。常见问题如果使用Mac 需要修改application.yml文件路径profile如果使用Linux 提示表不存在,设置大小写敏感配置在/etc/my.cnf 添加lower_case_table_names=1,重启MYSQL服务如果提示当前权限不足,无法写入文件请检查profile是否可读可写,或者无法访问此目录
CMS后台管理系统我讲课特色:方法论:授人以鱼不如授人以渔一、宏观思维:全局解剖(架构层面)二、微观思路:每一行代码解剖三、哲学思想:结合马克思哲学讲解代码,分析表象与本质基于SpringBoot、Shiro、Mybatis的权限后台管理系统。基于经典技术组合(Spring Boot、Apache Shiro、MyBatis、Thymeleaf)主要目的让开发者注重专注业务,降低技术难度,从而节省人力成本,缩短项目周期,提高软件安全质量。系统需求· JDK >= 1.8· MySQL >= 5.5· Maven >= 3.0主要特性· 完全响应式布局(支持电脑、平板、手机等所有主流设备)· 强大的一键生成功能(包括控制器、模型、视图、菜单等)· 支持多数据源,简单配置即可实现切换。· 支持按钮及数据权限,可自定义部门数据权限。· 对常用js插件进行二次封装,使js代码变得简洁,更加易维护· 完善的XSS防范及脚本过滤,彻底杜绝XSS攻击· Maven多项目依赖,模块及插件分项目,尽量松耦合,方便模块升级、增减模块。· 国际化支持,服务端及客户端支持· 完善的日志记录体系简单注解即可实现技术选型1、系统环境· Java EE 8· Servlet 3.0· Apache Maven 32、主框架· Spring Boot 2.0· Spring Framework 5.0· Apache Shiro 1.43、持久层· Apache MyBatis 3.4· Alibaba Druid 1.14、视图层· Bootstrap 3.3· Thymeleaf 3.0内置功能· 用户管理:用户是系统操作者,该功能主要完成系统用户配置。· 部门管理:配置系统组织机构(公司、部门、小组),树结构展现支持数据权限。· 岗位管理:配置系统用户所属担任职务。· 菜单管理:配置系统菜单,操作权限,按钮权限标识等。· 角色管理:角色菜单权限分配、设置角色按机构进行数据范围权限划分。· 字典管理:对系统中经常使用的一些较为固定的数据进行维护。· 参数管理:对系统动态配置常用参数。· 通知公告:系统通知公告信息发布维护。· 操作日志:系统正常操作日志记录和查询;系统异常信息日志记录和查询。· 登录日志:系统登录日志记录查询包含登录异常。· 在线用户:当前系统中活跃用户状态监控。· 定时任务:在线(添加、修改、删除)任务调度包含执行结果日志。· 代码生成:前后端代码的生成(java、html、xml、sql)支持CRUD下载 。· 系统接口:根据业务代码自动生成相关的api接口文档。· 服务监控:监视当前系统CPU、内存、磁盘、堆栈等相关信息。· 在线构建器:拖动表单元素生成相应的HTML代码。· 连接池监视:监视当期系统数据库连接池状态,可进行分析SQL找出系统性能瓶颈。项目介绍核心技术SpringBoot框架1、介绍Spring Boot是一款开箱即用框架,提供各种默认配置来简化项目配置。让我们的Spring应用变的更轻量化、更快的入门。 在主程序执行main函数就可以运行。你也可以打包你的应用为jar并通过使用java -jar来运行你的Web应用。它遵循约定优先于配置的原则, 使用SpringBoot只需很少的配置,大部分的时候直接使用默认的配置即可。可以与Spring Cloud的微服务无缝结合。Spring Boot2.0 环境要求必须是jdk8或以上版本,Tomcat8或以上版本2、优点· 使编码变得简单: 推荐使用注解。· 使配置变得简单: 自动配置、快速构建项目、快速集成新技术能力 没有冗余代码生成和XML配置的要求· 使部署变得简单: 内嵌Tomcat、Jetty、Undertow等web容器,无需以war包形式部署· 使监控变得简单: 自带项目监控Shiro安全控制1、介绍Apache Shiro是Java的一个安全框架。Shiro可以帮助我们完成:认证、授权、加密、会话管理、与Web集成、缓存等。其不仅可以用在 JavaSE环境,也可以用在 JavaEE 环境。2、优点· 易于理解的 Java Security API· 简单的身份认证,支持多种数据源· 对角色的简单的授权,支持细粒度的授权· 不跟任何的框架或者容器捆绑,可以独立运行3、特性Authentication身份认证/登录,验证用户是不是拥有相应的身份Authorization授权,即验证权限,验证某个已认证的用户是否拥有某个权限,即判断用户是否能做事情 SessionManagement会话管理,即用户登录后就是一次会话,在没有退出之前,它的所有信息都在会话中Cryptography加密,保护数据的安全性,如密码加密存储到数据库,而不是明文存储Caching缓存,比如用户登录后,其用户信息,拥有的角色/权限不必每次去查,提高效率ConcurrencyShiro支持多线程应用的并发验证,即如在一个线程中开启另一个线程,能把权限自动传播过去Testing提供测试支持RunAs允许一个用户假装为另一个用户(如果他们允许)的身份进行访问RememberMe记住我,这是非常常见的功能,即一次登录后,下次再来的话不用登录了4、架构Subject主体,代表了当前的“用户”,这个用户不一定是一个具体的人,与当前应用交互的任何东西都是Subject,如网络爬虫, 机器人等;即一个抽象概念;所有Subject都绑定到SercurityManager,与Subject的所有交互都会委托给SecurityManager;可以把Subject认为是一个门面;SecurityManager才是实际的执行者SecurityManage安全管理器;即所有与安全有关的操作都会与SecurityManager交互;且它管理着所有Subject; 可以看出它是Shiro的核心,它负责与后边介绍的其他组件进行交互Realm域,Shiro从Realm获取安全数据(如用户,角色,权限),就是说SecurityManager要验证用户身份, 那么它需要从Realm获取相应的用户进行比较以确定用户身份是否合法;也需要从Realm得到用户相应的角色/权限进行验证用户是否能进行操作;可以有1个或多个Realm,我们一般在应用中都需要实现自己的RealmSessionManager如果写过Servlet就应该知道Session的概念,Session需要有人去管理它的生命周期,这个组件就是SessionManagerSessionDAODAO大家都用过,数据库访问对象,用于会话的CRUD,比如我们想把Session保存到数据库,那么可以实现自己的SessionDAO,也可以写入缓存,以提高性能CacheManager缓存控制器,来管理如用户,角色,权限等的缓存的;因为这些数据基本上很少去改变,放到缓存中后可以提高访问的性能应用代码通过Subject来进行认证和授权,而Subject又委托给SecurityManager; 我们需要给Shrio的SecurityManager注入Realm,从而让SecurityManager能得到合法的用户及其权限进行判断,Shiro不提供维护用户/权限,而是通过Realm让开发人员自己注入。Shiro不会去维护用户,维护权限;这些需要自己去设计/提供;然后通过响应的接口注入给Shiro即可Thymeleaf模板1、介绍Thymeleaf是一个用于Web和独立Java环境的模板引擎,能够处理HTML、XML、JavaScript、CSS甚至纯文本。能轻易的与Spring MVC等Web框架进行集成作为Web应用的模板引擎。 与其它模板引擎(比如FreeMaker)相比,Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个Web应用(更加方便前后端分离,比如方便类似VUE前端设计页面),抛弃JSP吧。 Thymeleaf 3.0是一个完全彻底重构的模板引擎,极大的减少内存占用和提升性能和并发性,避免v2.1版因大量的输出标记的集合产生的资源占用。 Thymeleaf 3.0放弃了大多数面向DOM的处理机制,变成了一个基于事件的模板处理器,它通过处理模板标记或文本并立即生成其输出,甚至在新事件之前响应模板解析器/缓存事件。Thymeleaf是Spring Boot官方的推荐使用模板。2、优点· 国际化支持非常简单· 语法简单,功能强大。内置大量常用功能,使用非常方便· 可以很好的和Spring集成· 静态html嵌入标签属性,浏览器可以直接打开模板文件,便于前后端联调· Spring Boot 官方推荐,用户群广

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值