part3-m6

最新推荐文章于 2022-03-03 18:56:02 发布

zsnpromsie

最新推荐文章于 2022-03-03 18:56:02 发布

阅读量442

点赞数

分类专栏： jsvascript vue

本文链接：https://blog.youkuaiyun.com/zsnpromsie/article/details/119613155

版权

jsvascript 同时被 2 个专栏收录

40 篇文章

订阅专栏

vue

6 篇文章

订阅专栏

本阶段围绕当下国内最主流的前端核心框架 Vue.js 展开，深入框架内部，通过解读源码或者手写实现的方式，剖析 Vue.js 框架的内部实现原理，让你做到知其所以然。同时我们还会介绍 Vue.js 的进阶用法、周边生态以及性能优化，让你轻松应对更加复杂的项目业务需求。

模块六 Vue.js + Vuex + TypeScript 实战项目开发与项目优化

本模块中我们通过使用 TypeScript 编程语言，基于 Vue.js 全家桶（Vue.js、Vue Router、Vuex、Element UI）开发 B 端管理系统项目（dashboard)。通过实战深入掌握 Vue.js 及其相关技术栈的使用。

任务一：Vue 项目实战

使用VueCLI创建项目

vue create edu-boss-fed
- Manually select features (选择第三个，自定义，有更多功能)
- Babel TypeScript Router Vuex CSS Pre-processors Linter/Formatter 选中回车下一步
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-awXN4ew6-1628675573299)(./img/1628260246579.jpg)]

加入Git版本管理

创建远程仓库
将本地仓库推到线上

如果没有本地仓库

#创建本地仓库
git init 
#将文件添加到暂存区  
git add 文件  
# 提交历史记录
git commit "提交日志"  
# 添加远程仓库地址
git remote add origin 远程仓库地址  
#推送提交
git push -u origin master

git status 查看是否有远程仓库
git remote -v 查看远程仓库地址
git push -u origin master 加入-u 会记住本次提交的信息（origin master），下次可以直接git push
git remote rename 旧名字新名字

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M5sA0VVn-1628675573303)(./img/1628212365488.jpg)]

给每个组件的样式加作用域 scope
src > utils styles services 新增文件夹

使用TS开发Vue-环境说明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LjaDSNuy-1628675573304)(./img/1628212755131.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GqoCFkXj-1628675573306)(./img/1628212820996.jpg)]

使用TS开发Vue项目-相关配置说明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LV9qzXNe-1628675573307)(./img/1628213101374.jpg)]

TypeScript 配置文件 tsconfig.json
shims-tsx.d.ts declare global 声明一个全局变量 namespace JSX 命名空间指向JSX
- 作用是在项目中使用JSX，用来ts就是TSX，用JSX 写组件模版，在这里给它补充了一些类型声明，如果没有这些补充的类型说明，那在JSX模版中使用这些成员的时候，会告诉你找不到，经过补充后就能找到了，没有项目中没有使用JSX，可忽略

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-POU7z92w-1628675573308)(./img/1628213677675.jpg)]

TypeScript 模块都使用.ts后缀

使用TS开发Vue项目-使用OptionsAPI定义Vue组件

1.编译器给的类型提示 2.TypeScript 编译期间的类型验证。ts可以在编译阶段找到错误
script lang=“ts”

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rjfnE99b-1628675573309)(./img/1628215736607.jpg)]

使用TS开发Vue项目-使用ClassAPIs定义Vue组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F7yJ2uqL-1628675573310)(./img/1628215892676.jpg)]

只是做了个包装，还是会把属性，比如 a = 0 放在data中
vue官方文档》学习》基于类的Vue组件》点击vue-class-component（git仓库）》Document 下是有官方文档链接

使用TS开发Vue项目-关于装饰器语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j6RRtnkK-1628675573311)(./img/1628216688584.jpg)]

http;阮一峰写的关于装饰器的文档
http;typescript官网写的装饰器文档

使用VuePropertyDecorator创建Vue组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xqc04x6S-1628675573311)(./img/1628225520407.jpg)]

使用TS开发Vue项目-总结创建组件的方式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2ZSmlh6F-1628675573312)(./img/1628225676878.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BhJky1cm-1628675573313)(./img/1628225730377.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XhSQQfp8-1628675573313)(./img/1628225856986.jpg)]

export default {} 这种写法不能使用TS的相关特性

代码格式规范-介绍

这里主要说明一下几点
- 代码格式规范介绍
- 我们项目中配置的具体代码规范是什么
- 如何自定义代码格式效验规范
良好的代码格式规范更有利于：
- 更多的多人协作
- 更好的阅读
- 更好的维护
标准是什么
- 没有绝对的标准，下面是一些大厂商人=根据多数开发者的编码习惯制定的一些编码规范，仅供参考
- http,JavaScript Standard Style 适合个人使用
- http,Airbnb JavaScript Style Guide 适合大型团队使用，更严谨
- http,Google JavaScript Style Guide 适合大型团队使用，更严谨
如何约束代码规范
- 只靠口头约定肯定是不行的，所以要利用工具来强制执行
- JSLint
- JSHint
- ESLint

代码格式规范-项目中的代码规范说明

ESLint 配置⽂件

module.exports = {
  root: true,
  env: {
    node: true
  },
  // 插件：扩展了校验规则
  extends: [
    'plugin:vue/essential', // eslint-plugin-vue
    '@vue/standard', // @vue/eslint-config-standard
    '@vue/typescript/recommended' // @vue/eslint-config-typescript
  ],
  parserOptions: {
  ecmaVersion: 2020
  },
  // ⾃定义验证规则
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

eslint-plugin-vue
- GitHub 仓库：https://github.com/vuejs/eslint-plugin-vue
- 官⽅⽂档：https://eslint.vuejs.org/
- 该插件使我们可以使⽤ ESLint 检查 .vue ⽂件的 template 和 script 标签
- 查找语法错误
- 查找对Vue.js指令的错误使⽤
- 查找违反Vue.js样式指南的⾏为
@vue/eslint-config-standard

+ eslint-plugin-standard
+ JavaScript Standard Style

@vue/eslint-config-typescript
- 规则列表：https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#supported-rules

代码格式规范-自定义校验规则

打开eslint 官方文档 http,eslint; 用户指南》配置》 Configuring Rules

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sZ01kEhG-1628675573314)(./img/1628228833598.jpg)]

用户指南》规则》搜索semi 可以查看具体规则
- .eslintrc.js > reles: { ‘semi’: [‘error’, ‘always’]} 配置必须有分号，不然报错
- 修改配置后，没有加分号的地方也没有报错，原因是因为上次效验的结果被缓存了，可以删除缓存文件：node_modules/.cache
解决写ts必须有分号的报错问题，

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aIysPfyg-1628675573315)(./img/1628229926638.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7rY9QVpZ-1628675573316)(./img/1628228833598.jpg)]

导入Element组件库

Element，⼀套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌⾯端组件库
- 官⽹：https://element.eleme.cn/
- GitHub 仓库：https://github.com/ElemeFE/element
- npm i element-ui
在 main.ts 中导⼊配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

样式处理

src/styles
  index.scss # 全局样式（在入口模块被加载生效）
  mixin.scss # 公共的 mixin 混入（可以把重复的样式封装为mixin混入到复用的地方）
  reset.scss # 重置基础样式
  variables.scss # 公共样式变量

variables.scss

$primary-color: #40586F;
$success-color: #51cf66;
$warning-color: #fcc419;
$danger-color: #ff6b6b;
$info-color: #868e96; // #22b8cf;
$body-bg: #E9EEF3; // #f5f5f9;
$sidebar-bg: #F8F9FB;
$navbar-bg: #F8F9FB;
$font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

index.scss

@import './variables.scss';
// globals
html {
  font-family: $font-family;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  // better Font Rendering
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  margin: 0;
  background-color: $body-bg;
}
// custom element theme
$--color-primary: $primary-color;
$--color-success: $success-color;
$--color-warning: $warning-color;
$--color-danger: $danger-color;
$--color-info: $info-color;
// change font path, required
$--font-path: '~element-ui/lib/theme-chalk/fonts';
// import element default theme
@import '~element-ui/packages/theme-chalk/src/index';
// node_modules/element-ui/packages/theme-chalk/src/common/var.scss
// overrides
// .el-menu-item, .el-submenu__title {
//   height: 50px;
//   line-height: 50px;
// }
.el-pagination {
  color: #868e96;
}
// components
.status {
  display: inline-block;
  cursor: pointer;
  width: .875rem;
  height: .875rem;
  vertical-align: middle;
  border-radius: 50%;
  &-primary {
    background: $--color-primary;
  }
  &-success {
    background: $--color-success;
  }
  &-warning {
    background: $--color-warning;
  }
  &-danger {
    background: $--color-danger;
  }
  &-info {
    background: $--color-info;
  }
}

在 main.ts 中加载全局样式
- import ‘./style/index.scss’
- 可以注释element-ui 的样式文件了，因为在index.scss中导入过了
- 异常处理：EPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
  - 只需要在package.json文件里修改"sass": "~1.32.6"即可

样式处理-共享全局样式变量

http;向预处理器-loader-传递选项
不用手动在组件中在家全局样式变量

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hPiaOuzd-1628675573317)(./img/1628234093075.jpg)]

additionalData 是老版本的写法，新版本配置prependData

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3JBeVI8t-1628675573318)(./img/1628234207461.jpg)]

接口处理-配置后端代理

后台为我们提供了数据接口，分别是：
- http;http://eduboss.lagou.com
- http;http://edufront.lagou.com
- 这两个接口都没有题哦那个CORS 跨域请求，所以需要在客户端配置服务端代理处理跨域请求
配置客户端层面的服务端代理跨域跨域参考官方文档中的说明
- https://cli.vuejs.org/zh/config/#devserver-proxy

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-It3gEx0S-1628675573319)(./img/1628235463285.jpg)]

接口处理-封装请求模块

安装axios
npm i axios
创建 src/utils/request.ts

import axios from 'axios'
const request = axions.create({
    // 配置选项
})
export default request

布局-初始化路由组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-js3hPjgb-1628675573320)(./img/1628238881649.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RcyignhQ-1628675573321)(./img/1628238929129.jpg)]

path: ‘*’ 不一定要放最后面，vue-router 新版本自己做了适配，但推荐放在后面

布局-Layout和嵌套路由

src/layout/index.vue

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fceeP6BH-1628675573321)(./img/1628239334235.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bkwf88sA-1628675573322)(./img/1628239403544.jpg)]

path: ‘’ 默认子路由

布局-Container布局容器

到element官网找到 Container布局容器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IGY1XW7G-1628675573323)(./img/1628264705595.jpg)]

vh 单位表示，把页面分为100份，当前这个元素占多少份，可以撑开页面高度，百分比不行，因为父页面不是100%

布局-侧边栏菜单

到element官网搜索meun 找菜单栏》 NavMenu
layout 》 components 》app.aside.vue
到element官网搜索router 使点击侧边栏能跳转对应页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eygGMTHi-1628675573324)(./img/1628240725136.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vr3IHxkz-1628675573324)(./img/1628265515613.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ti1KQAnS-1628675573325)(./img/1628265433224.jpg)]

布局-头部Header

到element官网搜索 bread 面包屑
layout 》 components 》app.header.vue
搜索 Drapdown 下拉菜单
找 Avatar 头像

到element官网找form表单

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zIWRwZYK-1628675573326)(./img/1628241669892.jpg)]

账户 18201288771 密码 111111
登陆接口在 http://113.31.105.128/front/doc.html#/edu-front-boot/%E7%94%A8%E6%88%B7%E6%8E%A5%E5%8F%A3/loginUsingPOST
postman 测试可以记录本次请求地址，下次直接访问

解决请求格式问题（content-type） https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format
npm i qs

到element官网找message 提示

给登陆按钮加loading 按钮

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NQ0PTcTH-1628675573326)(./img/1628253500570.jpg)]

登录-关于请求体data和ContentType的问题
身份认证-把登录状态存储到Vuex容器中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7nwZb57a-1628675573327)(./img/1628254213579.jpg)]

身份认证-校验页面访问权限

http; 路由拦截器
可以配置路由元信息过滤需要身份认证的路由
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bLKhMCLX-1628675573328)(./img/1628255004057.jpg)]

身份认证-测试获取当前登录用户信息接口

/front/user/login
postman 设置token

身份认证-登录成功跳转回原来页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NsoXPwAV-1628675573329)(./img/1628255689577.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7Eb51iTf-1628675573329)(./img/1628255817412.jpg)]

身份认证-展示当前登录用户信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mbGxsbkV-1628675573330)(./img/1628256178196.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5QO2XkkD-1628675573331)(./img/1628256353262.jpg)]

身份认证-使用请求拦截器统一设置Token

http;请求拦截器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oAF3AHja-1628675573331)(./img/1628256768585.jpg)]

身份认证-用户退出

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8myNCskf-1628675573332)(./img/1628256928899.jpg)]

清除登陆状态
跳转登陆页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rJdhutmC-1628675573333)(./img/1628257154859.jpg)]

任务二：用户登录和身份认证

处理Token过期-概念介绍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cR2L34K0-1628675573334)(./img/1628320794146.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vSGhy2tI-1628675573335)(./img/1628320723045.jpg)]

处理Token过期-分析响应拦截器

axios 文档找响应拦截器

处理Token过期-axios错误处理

参考 axios 错误处理的函数

处理Token过期-错误消息提示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T1ZKMZVr-1628675573335)(./img/1628321582316.jpg)]

处理Token过期-实现基本流程逻辑

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0SX0L8OP-1628675573337)(./img/1628321911818.jpg)]

处理Token过期-关于多次请求的问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YU4kYjOy-1628675573338)(./img/1628322578231.jpg)]

处理Token过期-解决多次请求刷新Token问题
处理Token过期-解决多次请求其它接口重试的问题

import axios from 'axios'
import store from '@/store'
import { Message } from 'element-ui'
import router from '@/router'
import qs from 'qs'

const request = axios.create({
  // 配置选项
  // baseURL,
  // timeout
})

function redirectLogin () {
  router.push({
    name: 'login',
    query: {
      redirect: router.currentRoute.fullPath
    }
  })
}

function refreshToken () {
  return axios.create()({
    method: 'POST',
    url: '/front/user/refresh_token',
    data: qs.stringify({
      // refresh_token 只能使用1次
      refreshtoken: store.state.user.refresh_token
    })
  })
}

// 请求拦截器
request.interceptors.request.use(function (config) {
  // 我们就在这里通过改写 config 配置信息来实现业务功能的统一处理
  const { user } = store.state
  if (user && user.access_token) {
    config.headers.Authorization = user.access_token
  }

  // 注意：这里一定要返回 config，否则请求就发不出去了
  return config
}, function (error) {
  // Do something with request error
  return Promise.reject(error)
})

// 响应拦截器
let isRfreshing = false // 控制刷新 token 的状态
let requests: any[] = [] // 存储刷新 token 期间过来的 401 请求
request.interceptors.response.use(function (response) { // 状态码为 2xx 都会进入这里
  // console.log('请求响应成功了 => ', response)
  // 如果是自定义错误状态码，错误处理就写到这里
  return response
}, async function (error) { // 超出 2xx 状态码都都执行这里
  // console.log('请求响应失败了 => ', error)
  // 如果是使用的 HTTP 状态码，错误处理就写到这里
  // console.dir(error)
  if (error.response) { // 请求发出去收到响应了，但是状态码超出了 2xx 范围
    const { status } = error.response
    if (status === 400) {
      Message.error('请求参数错误')
    } else if (status === 401) {
      // token 无效（没有提供 token、token 是无效的、token 过期了）
      // 如果有 refresh_token 则尝试使用 refresh_token 获取新的 access_token
      if (!store.state.user) {
        redirectLogin()
        return Promise.reject(error)
      }

      // 刷新 token
      if (!isRfreshing) {
        isRfreshing = true // 开启刷新状态
        // 尝试刷新获取新的 token
        return refreshToken().then(res => {
          if (!res.data.success) {
            throw new Error('刷新 Token 失败')
          }

          // 刷新 token 成功了
          store.commit('setUser', res.data.content)
          // 把 requests 队列中的请求重新发出去
          requests.forEach(cb => cb())
          // 重置 requests 数组
          requests = []
          return request(error.config)
        }).catch(err => {
          console.log(err)
          Message.warning('登录已过期，请重新登录')
          store.commit('setUser', null)
          redirectLogin()
          return Promise.reject(error)
        }).finally(() => {
          isRfreshing = false // 重置刷新状态
        })
      }

      // 刷新状态下，把请求挂起放到 requests 数组中
      return new Promise(resolve => {
        requests.push(() => {
          resolve(request(error.config))
        })
      })
    } else if (status === 403) {
      Message.error('没有权限，请联系管理员')
    } else if (status === 404) {
      Message.error('请求资源不存在')
    } else if (status >= 500) {
      Message.error('服务端错误，请联系管理员')
    }
  } else if (error.request) { // 请求发出去没有收到响应
    Message.error('请求超时，请刷新重试')
  } else { // 在设置请求时发生了一些事情，触发了一个错误
    Message.error(`请求失败：${error.message}`)
  }

  // 把请求失败的错误对象继续抛出，扔给上一个调用者
  return Promise.reject(error)
})

export default request

任务三：用户权限

用户和权限模块介绍
分析模块开发的流程

用户管理》角色管理》菜单管理和资源管理依赖关系，所有从后往前开发页面

菜单管理-添加菜单-布局

element-ui 找card 布局menu页面（菜单管理）
创建 menu/create.vue
- form 组件开发create.vue，card里面套form
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WYFBXU2f-1628675573339)(./img/1628383969886.jpg)]

菜单管理-添加菜单-数据绑定

保存菜单即可在 edu-boss中 boss/meun/saveOrUpdate

菜单管理-添加菜单-提交表单

services 》 menu.ts

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kLgG7YBM-1628675573339)(./img/1628384518326.jpg)]

菜单管理-添加菜单-处理上级菜单

获取编辑菜单页面信息对应上级菜单
没有上级菜单传-1

菜单管理-展示菜单列表

element 找到table 来创建菜单列表
获取所有菜单接口
操作 element table 中自定义列模版

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LNQ8oD4L-1628675573340)(./img/1628407815485.jpg)]

菜单管理-删除菜单
菜单管理-编辑菜单-提取组件

menu 》 components 》CreateOrEidt.vue

菜单管理-编辑菜单
资源管理-内容安排

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jia4Tki7-1628675573340)(./img/1628407400770.jpg)]

资源管理-布局

Resource 》components 》List.vue
card 布局 table 行内表单

资源管理-展示资源列表

按条件分页查询资源
services 》 resource.ts

资源管理-资源列表分页处理

element 搜索 pag

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PX8jGEIU-1628675573341)(./img/1628387322891.jpg)]

资源管理-列表数据筛选

下拉框：查询资源分类列表
services 》 resource-category.ts

资源管理-重置数据筛选
资源管理-加载中loading和按钮禁用

任务四：角色权限管理

角色管理-模块介绍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lo5xbSwS-1628675573342)(./img/1628414589603.jpg)]

role > componetns > List.vue

角色管理-添加角色-使用对话框组件

element > dialog
role > componetns > CreateOrEidt.vue

角色管理-添加角色-完成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jcjtCSQZ-1628675573343)(./img/1628415018283.jpg)]

角色管理-编辑角色-复用添加角色处理
角色管理-编辑角色-完成
角色管理-分配菜单-准备

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-35DYnfYn-1628675573343)(./img/1628415911437.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dk9Yvues-1628675573344)(./img/1628416217591.jpg)]

角色管理-分配菜单-展示所有菜单列表

element > tree
meun.ts

角色管理-分配菜单-保存分配
角色管理-分配菜单-完成
角色管理-分配菜单-清空选中的菜单项
角色管理-分配资源
用户管理-模块介绍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tor6Xhla-1628675573345)(./img/1628417514697.jpg)]

用户管理-分配角色-准备
用户管理-分配角色-展示角色列表
用户管理-分配角色-提交分配

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6cCuZFrq-1628675573346)(./img/1628417974981.jpg)]

用户管理-分配角色-完成

任务五：课程管理

课程管理-模块介绍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YdB5ax3j-1628675573346)(./img/1628471804296.jpg)]

课程管理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GiaZsrrN-1628675573347)(./img/1628472133178.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a3QF8nW8-1628675573348)(./img/1628472177923.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YNkSS4m1-1628675573348)(./img/1628472226887.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qWLxH4wQ-1628675573349)(./img/1628472255384.jpg)]

课程管理-展示上架状态

element 》 switch

课程管理-处理课程上下架
课程管理-添加课程-使用步骤条

course/create
element steps

课程管理-添加课程-搭建表单结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vYo6gNXg-1628675573350)(./img/1628480248492.jpg)]

element Upload
深度作用选择器，可以在带有scope的父组件中把样式作用到子组件上

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pBABEjKO-1628675573350)(./img/1628479421897.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fpyz7hPu-1628675573351)(./img/1628479551516.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4hV8uisi-1628675573352)(./img/1628479705558.jpg)]

课程管理-添加课程-基本信息数据绑定
添加课程-上传课程封面-分析实现逻辑
添加课程-上传课程封面-上传组件使用
添加课程-上传课程封面-封装上传组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VXKrY22w-1628675573352)(./img/1628481979910.jpg)]

添加课程-上传进度提示-使用进度条组件

element progress

添加课程-上传进度提示-完成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sHJCQCgW-1628675573353)(./img/1628482713499.jpg)]

http;前端

添加课程-富文本编辑器介绍

富文本编辑器
- ckeditor/ckeditor5 老牌编辑器，稳定性好
- quilljs/quill 近几年出来的
- medium-editor 更新在几年前
- wangEditor 国人开发的
- ueditor 百度开发，不再维护
- tinymce

添加课程-封装使用富文本编辑器组件

wangEditor
components/TextEditor/index.vue

添加课程-封装使用富文本编辑器组件
添加课程-富文本编辑器-图片上传

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lvssg6rx-1628675573354)(./img/1628492824565.jpg)]

编辑课程

npm i moment 时间转换插件

课程内容-功能介绍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ESJZfVAX-1628675573354)(./img/1628493705465.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CIiBcXy6-1628675573355)(./img/1628497808166.jpg)]

课程内容-准备

course 》section.vue

/boss/course/section/getSectionAndLesson

课程内容-阶段列表-自定义树组件节点内容
课程内容-处理节点拖动的逻辑

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oQwTcG3g-1628675573356)(./img/1628496294301.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NGhTvWt1-1628675573356)(./img/1628496361558.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jtmqlW87-1628675573357)(./img/1628496415637.jpg)]

课程内容-列表拖动排序数据更新

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RHFq9dbO-1628675573358)(./img/1628497719708.jpg)]

上传课时视频-功能介绍
上传课时视频-准备

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t7EQgUsT-1628675573359)(./img/1628498101819.jpg)]

上传课时视频-阿里云视频点播服务介绍

阿里云视频点播

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DhO4mq7o-1628675573360)(./img/1628498293194.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qjxk4VVg-1628675573360)(./img/1628498479405.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ELExEb3U-1628675573361)(./img/1628498674434.jpg)]

上传课时视频-阿里云视频上传-体验官方demo

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NNoBJk1N-1628675573361)(./img/1628500247662.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RKau3pde-1628675573362)(./img/1628500344304.jpg)]