NProgress

介绍 本来做的是个图床管理的项目，结果撸成了一个工具箱，不定期追加新的功能。 基础环境 JDK1.8、Maven、Mysql、Redis、IntelliJ IDEA、minio、fastdfs 相关组件 ok-admin vue iView echarts clipboard cropperjs lightbox nprogress webuploader ztree 内置功能 组织机构：机构管理、用户管理、角色管理、行政区域。 系统监控：系统日志、在线用户，后期会慢慢追加完善。 应用管理：任务调度、邮件管理、图片管理、文章管理，每个模块只需要你稍作修改就可以打造成一个项目了。 系统管理：敏捷开发、系统菜单、全局配置，小伙伴们只需要设计好表结构，三秒中就能撸出一个增删查改的模块。 安装教程 启动前请配置 application-dev.properties 中相关 mysql 、 redis 以及非启动强依赖配置邮件、鉴黄、阿里云存储、分布式文件存储。 数据库脚本位于 src/main/resource/sql 下面，启动前请自行导入。 配置完成，运行 Application 中的 main 方法。 演示图 推荐阅读 深夜吐血训练了100万小黄图撸了一个鉴黄接口 UCloud 云服务内容鉴黄 Java 版本实现 分享一款炒鸡好用的网盘+文件服务器 SpringBoot 2.x

第一章：常用API 1.1-ajax方法使用格式 $.ajax({ // 请求地址 url: 'http://localhost/find', // 请求方式 type: 'POST', // 一对“文件名-文件值”在本机设置XHR对象。例如，如果需要的话，你可以用它来设置withCredentials为true的跨域请求。 xhrFields: {widthCredentials:true}, // 请求发送之前的处理函数 beforeSend: function(){}, // 响应成功后的处理函数 success: function(response){}, // 异常处理函数 error: function(ex){}, // 请求参数 可以是“key=value&key=value”、{key:value,key:value}、FormData对象 data: formData, // 是否缓存 cache: false, // 发送给服务器的编码类型，默认application/x-www-form-urlencoded contentType: 'application/x-www-form-urlencoded', // JSONP跨域 dataType: 'JSONP', // (默认: true) 默认情况下，通过data选项传递进来的数据，如果是一个对象

介绍 本来做的是个图床管理的项目，结果撸成了一个工具箱，不定期追加新的功能。 基础环境 JDK1.8、Maven、Mysql、Redis、IntelliJ IDEA、minio、fastdfs 相关组件 ok-admin vue iView echarts clipboard cropperjs lightbox nprogress webuploader ztree 内置功能 组织机构：机构管理、用户管理、角色管理、行政区域。 系统监控：系统日志、在线用户，后期会慢慢追加完善。 应用管理：任务调度、邮件管理、图片管理、文章管理，每个模块只需要你稍作修改就可以打造成一个项目了。 系统管理：敏捷开发、系统菜单、全局配置，小伙伴们只需要设计好表结构，三秒中就能撸出一个增删查改的模块。 安装教程 启动前请配置 application-dev.properties 中相关 mysql 、 redis 以及非启动强依赖配置邮件、鉴黄、阿里云存储、分布式文件存储。 数据库脚本位于 src/main/resource/sql 下面，启动前请自行导入。 配置完成，运行 Application 中的 main 方法。 演示图 推荐阅读 深夜吐血训练了100万小黄图撸了一个鉴黄接口 UCloud 云服务内容鉴黄 Java 版本实现 分享一款炒鸡好用的网盘+文件服务器 SpringBoot 2.x

amazeui中的js插件有哪些（详解功能） 一、总结 一句话总结： 二、amazeui中的js插件有哪些 1、UI 增强 警告框 Alert 按钮交互 Button 折叠面板 Collapse 下拉组件 Dropdown 模态窗口 Modal 弹出框 Popover 加载进度条 NProgress 图片轮播 Slider 侧边栏 OffCanvas 滚动侦测 ScrollSpy 滚动侦测导航 ScrollSpyNav 平滑滚动 SmoothScroll 固定元素 Sticky 选项卡 Tabs 日期组件 DatePicker 下拉选框 Selected 单/多选框 uCheck 表单验证 Validator 2、实用工具 Cookie Cookie FastClick FastClick 全屏切换 FullScreen 触控事件 Hammer iScroll iScroll 本地存储 Store 地理位置 GEO 二维码 QRCode 滚动监听：有点像ppt动画那种，左进右进，什么淡入淡出 滚动监听导航：导航加了滚动监听，滑到哪个导航的位置，哪个导航对应的字就高亮 平滑滚动：就是滚动到页面的顶部啊，底部啊，以及一些特定位置 固定元素：固定到顶部啊，固定到底部，就是我一直要弄的那个，让菜单啊，或者啥子点赞固定下来 表单验证：就是动态的表单验证功能（挺好的，好用） 加载的进度条

使用全局路由守卫 实现 前端定义好路由，并且在路由上标记相应的权限信息 const routerMap = [ { path: '/permission', component: Layout, redirect: '/permission/index', alwaysShow: true, // will always show the root menu meta: { title: 'permission', icon: 'lock', roles: ['admin', 'editor'] // you can set roles in root nav }, children: [{ path: 'page', component: () => import('@/views/permission/page'), name: 'pagePermission', meta: { title: 'pagePermission', roles: ['admin'] // or you can only set roles in sub nav } }, { path: 'directive', component: () => import('@/views/permission/directive'), name: 'directivePermission', meta: {

大体流程 参考资料: nx-admin项目地址 首先这里就不讲解vue和vuex之类的基础东西了 有兴趣的可以去官方文档了解。这里根据流程走向大概说说 路由配置 首先找到路由配置,路由配置放在了 src/router/index.js 路由配置里暴露了两个常量 一个是 constantRouterMap 另外一个是 asyncRouterMap 这里先说说 constantRouterMap 。 nx-admin的权限验证大概是 1 默认大家都能访问的页面,不需要权限, 都访问的页面定义为 constantRouterMap 2 需要登录或者需要权限的页面路由定义为 asyncRouterMap 根据后台获取到用户信息role（权限）的不同来动态加载asyncRouterMap中meta.role的权限对应的页面 登录成功后做的事情 点击登录以后 左侧的侧边栏有导航列表。 这里提出两个疑问？ 根据路由配置说的 动态加载对应的权限路由 那么侧边栏那么多路由 肯定不能写死吧？ 我点击登录后 那些登录流程怎么走的？用户权限存在哪里？token在哪里？ 侧边栏的动态渲染 根据问题1来回答 首先我们找到layout也就是 src/views/layout/Layout.vue ， 因为在路由配置文件我们看见 asyncRouterMap 中好多组件的父组件都是 Layout 在 Layout