为了账号安全,请及时绑定邮箱和手机立即绑定

【金秋打卡】第25天 权限控制解决方案 RBAC

课程名称:基于Vue3最新标准,实现后台前端综合解课程章节: 第一章课程讲师:Sunday    课程内容    是以 用户-> 角色 -> 权限 的一种关系登入时 会获取到这些数据permission 会拿到 菜单定义时 相对应的一个名称prints 对应的是 用户按钮的权限 role 是一个数组 你有多少角色 就返回多少角色动态路由将进行权限控制的路由分别拆开来写 然后将公共的路由单独放在一个json内export 输出 在src 文件夹下 设置了 permission.js     main.js 需要引入import router from './router' import store from...

194浏览
0推荐
0评论

【金秋打卡】第24天 了解RBAC

课程名称:基于Vue3最新标准,实现后台前端综合解课程章节: 第一章课程讲师:Sunday课程内容    RBAC 定义了 用户-> 角色-> 权限 得关系当我们通过角色为某一个用户指定到不同得权限后,那么该用户就会在项目中体会到不同权限得功能,那么这样得一套关系就是我们的 RBAC 权限控制体系,也就是 基于 角色的权限 控制 用户的访问通过以下图片可以很好的说明这种权限控制体系的含义:用户和权限之间不直接连 而是通过角色, 形成多对多得关系员工列表 中设置了 姓名 练习方式 头像 角色 开通实践 查看(可打印)角色(可配置) 删除 等功能角色列表 中展示角色得名称 及 描述 以及分配权限权限列表...

79浏览
0推荐
0评论

【金秋打卡】第23天 头像组件

课程名称:基于Vue3最新标准,实现后台前端综合解课程章节: 第一章课程讲师:Sunday课程内容 :    头像需要做出一个 鼠标移入 图片位置位移的一个效果 首先编写一个 头像组件 PanThumb<template>   <div     :style="{ zIndex: zIndex, height: height, width: width }"     class="pan-item"   >     <div class="pan-info">       <div class="pan-info-roles-container">...

67浏览
0推荐
0评论

【金秋打卡】第22天 组件动态 CSS 值

课程名称:基于Vue3最新标准,实现后台前端综合解课程章节: 第一章课程讲师:Sunday课程内容        在 vue 3.2 最新更新中,除了 响应式变化 之外,还有另外一个很重要的更新,那就是 组件状态驱动的动态 CSS 值<template>   ...     <el-avatar   :size="logoHeight" >    ...   </template>   <script setup>     ...     const logoHeight = 44   </script>   <style scoped>...

82浏览
0推荐
0评论

【金秋打卡】第21天 引导页 guide

课程名称:基于Vue3最新标准,实现后台前端综合解课程章节: 第一章课程讲师:Sunday课程内容         所谓 guide 指的就是 引导页        引导页是软件中经常见到的一个功能,无论是在后台项目还是前台或者是移动端项目中。        通常情况下引导页是通过 聚焦 的方式,高亮一块视图,然后通过文字解释的形式来告知用户该功能的作用。         高亮某一块指定的样式 在高亮的样式处通过文本展示内容 用户可以进行下一次高亮或者关闭事件首先在组件内创建 guide.vue<template>   <div>     <el-tooltip...

78浏览
0推荐
0评论

【金秋打卡】第20天 tagsView

课程名称:基于Vue3最新标准,实现后台前端综合解课程章节: 第一章课程讲师:Sunday课程内容        tagsView是在appMain 上方的一个标题栏 和汉堡有点像点击也能跳转 但是多了 可以右键操作首先需要定义一个常量 // tags export const TAGS_VIEW = 'tagsView'import { LANG, TAGS_VIEW } from '@/constant' import { getItem, setItem } from '@/utils/storage' export default {   namespaced: true,   state: () => ({...

168浏览
0推荐
0评论

【金秋打卡】第19天 渲染左侧菜单数据

课程名称:基于Vue3最新标准,实现后台前端综合解课程章节: 第一章课程讲师:Sunday课程内容    我们希望被检索的页面其实就是左侧菜单中的页面,那么我们检索数据源即为:左侧菜单对应的数据源const router = useRouter() const searchPool = computed(() => {   const filterRoutes = filterRouters(router.getRoutes())   console.log(generateMenus(filterRoutes))   return generateMenus(filterRoutes) })手写router 获取...

59浏览
0推荐
0评论

【金秋打卡】第18天 element-plus 国际化处理

课程名称:基于Vue3最新标准,实现后台前端综合解课程章节: 第一章课程讲师:Sunday课程内容:    element-plus 语言包:用来处理 element 组件的国际化功能自定义语言包:用来处理 非element 组件的国际化功能首先需要安装 element-plusnpm i element-plus在 plugins/index添加 中英文包import zhCn from 'element-plus/es/locale/lang/zh-cn' import en from 'element-plus/lib/locale/lang/en'并且注册使用import store from...

95浏览
0推荐
0评论

【金秋打卡】第17天 动态路由

课程名称:基于Vue3最新标准,实现后台前端综合解课程章节: 第一章课程讲师:Sunday课程内容    课程中 首先将 路由文件 进行区分 (私有路由 公开路由)    页面通过 <script setup> import { useRouter } from 'vue-router' const router = useRouter() console.log(router.getRoutes()) </script>能获取 项目中所有得路由 但获得到得路由内容是存在重复的路由数据不满足该条件 meta && meta.title && meta.icon...

50浏览
1推荐
0评论

【金秋打卡】第16天 本地缓存

课程名称:基于Vue3最新标准,实现后台前端综合解课程章节: 第一章课程讲师:Sunday课程内容:        在项目开发过程中 我们获取到token后 会把token 进行缓存 而缓存的方式有两种 本地缓存:LocalStorage 全局状态管理:Vuex保存在 LocalStorage 是为了方便实现 自动登录功能保存在 vuex 中是为了后面在其他位置进行使用那么下面我们就分别来实现对应的缓存方案:新建 storage.js 文件 封装/**  * 存储数据  */  export const setItem = (key, value) => {   // 将数组、对象类型的数据转化为 JSON...

43浏览
0推荐
0评论

【金秋打卡】第15天 sass 使用

课程名称:基于Vue3最新标准,实现后台前端综合解课程章节: 第一章课程讲师:Sunday课程内容    整个页面被分为三个部分。layout/components/Sidebar/index.vuelayout/components/Navbar.vuelayout/components/AppMain.vue需要分别创建这三个vue文件之后在layout/index 引入<template>   <div class="app-wrapper">     <!-- 左侧 menu -->     <sidebar       id="guide-sidebar"...

32浏览
0推荐
0评论

【金秋打卡】第14天 element-plus 使用

课程名称:基于Vue3最新标准,实现后台前端综合解课程章节: 第一章课程讲师:Sunday课程内容     element-plus 的图标       element-plus 的图标我们可以直接通过 el-icon 来进行显示,但是自定义图标的话,我们暂时还缺少显示的方式,所以说我们需要一个自定义的组件,来显示我们自定义的 svg 图标。那么这种自定义组件处理 自定义 svg 图标的形式,import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App...

63浏览
0推荐
0评论

【金秋打卡】第13天 配置环境变量 axios 使用

课程名称:基于Vue3最新标准,实现后台前端综合解课程章节: 第一章课程讲师:Sunday课程内容     在当前这个场景下,我们希望封装出来的 axios 模块,至少需要具备一种能力,那就是:根据当前模式的不同,设定不同的 BaseUrl ,因为通常情况下企业级项目在 开发状态 和 生产状态 下它的 baseUrl 是不同的。 对于 @vue/cli 来说,它具备三种不同的模式:developmenttestproduction模式是 Vue CLI 项目中一个重要的概念。默认情况下,一个 Vue CLI 项目有三个模式:development 模式用于 vue-cli-service servetest 模式用于...

19浏览
0推荐
0评论

【金秋打卡】第12天 vue3 ESLint + Prettier 使用

课程名称:基于Vue3最新标准,实现后台前端综合解课程章节: 第一章课程讲师:Sunday课程内容:    今天说一下 我自己遇到的问题    课程中 使用了 eslint 进行代码规则的校验 如配置     .eslintrc.js// ESLint 配置文件遵循 commonJS 的导出规则,所导出的对象就是 ESLint 的配置对象// 文档:https://eslint.bootcss.com/docs/user-guide/configuringmodule.exports = {   // 表示当前目录即为根目录,ESLint 规则将被限制到该目录下   root: true,   // env 表示启用...

76浏览
0推荐
0评论

【金秋打卡】第11天 vue3 Prettier

课程名称:基于Vue3最新标准,实现后台前端综合解课程章节: 第一章课程讲师:Sunday课程内容        我们知道了 ESLint 可以让我们的代码格式变得更加规范,但是同样的它也会带来开发时编码复杂度上升的问题。那么有没有办法既可以保证 ESLint 规则校验,又可以让开发者无需关注格式问题来进行顺畅的开发呢?就是prettier    一个代码格式化工具    开箱即用    可以直接集成到 VSCode 之中    在保存时,让代码直接符合 ESLint 标准(需要通过一些简单配置)在 VSCode 中安装 prettier 插件(搜索 prettier),这个插件可以帮助我们在配置 prettier...

81浏览
0推荐
0评论

【金秋打卡】第10天 vue3 ESLint

课程名称:基于Vue3最新标准,实现后台前端综合解课程章节: 第一章课程讲师:Sunday课程内容    vue2 使用的是 options API     vue3 升级了  composition API 提供 script-setup 函数语法 这是一个25行的 vue3 代码使用vue3 script-setup 以后 只需要14行ESLint    规范编程需要使用到 ESLint 项目是由一个团队来开发的, 技术理解上的参差不齐 就会导致 一个项目无法具备统一的编程规范,导致项目的代码像多个不同材质的补丁拼接起来一样        首先 ESLint 是 2013年6月...

71浏览
0推荐
0评论

【金秋打卡】第9天 安装Docker

课程名称:SpringBoot+Vue3 项目实战,打造企业级在线办公系统课程章节: 用户管理模块课程讲师: 神思者课程内容    1. 安装mysql  docker pull mysql:8.0.23...

50浏览
0推荐
0评论

【金秋打卡】第8天 Docker

课程名称:SpringBoot+Vue3 项目实战,打造企业级在线办公系统课程章节: 用户管理模块课程讲师: 神思者...

72浏览
0推荐
0评论

【金秋打卡】第7天 微信支付

课程名称:SpringBoot+Vue3 项目实战,打造企业级在线办公系统课程章节: 用户管理模块课程讲师: 神思者课程内容...

93浏览
0推荐
0评论

【金秋打卡】第6天 TRTC

课程名称:SpringBoot+Vue3 项目实战,打造企业级在线办公系统课程章节: 用户管理模块课程讲师: 神思者 课程内容 接昨天    腾讯云TRTC服务的API文档(https://cloud.tencent.com/document/product/647/17249)    我们动手写JS程序之前,还是要先熟悉前端页面和视频会议的流程。例如当用户进入到meeting_video.vue页面,并不意味着连接上了在线视频会议室。而是需要我们手动点击右下角的电话图标,才会创建TrtcClient对象连接视频会议室,订阅远端流、推送本地流。当我再次点击电话图标,则会退出在线视频会议室,然后销毁本地流和远端流。...

93浏览
0推荐
0评论
首页上一页1234下一页尾页
意见反馈 帮助中心 APP下载
官方微信