IHM后台管理系统课程笔记.md

最新推荐文章于 2024-10-11 17:07:10 发布

叶落q

最新推荐文章于 2024-10-11 17:07:10 发布

阅读量948

点赞数 11

文章标签：笔记

本文链接：https://blog.csdn.net/qq_53516639/article/details/141049885

版权

IHM后台管理系统课程笔记.md

入门简介

Vue是什么？

vue是一个框架，是由别人开源的第三方组件，能够快速的开发前端页面，一套用于构建用户界面的渐进式javascript框架。何为渐进式？就是vue有完整的生态环境，功能逐渐完善的，只需引用vue的核心文件和一些库就可以进行系统开发。vue可以自底向上逐层开发。可以开发简单应用：只需要一个轻量小巧的核心库。复杂应用：可以引入各式各样的Vue插件。

Vue特点？

组件化开发：一个模块就是一个组件文件，方便修改和维护，提高了复用的效率。

声明式编码：命令式编码，可以这么理解，假如你口渴了，想要喝水，你需要先站起来，然后走到喝水的地方，拿起杯子，倒入水，然后倒入嘴中。而声明式编码，只需要说明你口渴了，就有人把水拿过来给你喝。

不直接操作dom：先把数据存到虚拟dom中，然后再转到真实dom。

特殊配置

eslink的快速规范

目的：当保存代码的时候，自动按规范保存

{
    "workbench.colorTheme": "Default High Contrast",
    "window.commandCenter": false,
    "liveServer.settings.donotShowInfoMsg": true,
    "[vue]": {
        "editor.defaultFormatter": "Vue.volar"
    },
    "emmet.triggerExpansionOnTab": true,
    "explorer.confirmDelete": false,
    "workbench.iconTheme": "material-icon-theme",
    "eslint.codeActionsOnSave.rules": null,
    
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit"
    }
}

判断对象是否是某一类型

response.data instanceof Blob

exsel表导出使用到的工具包为 file-saver 安装方式npm i file- saver
v-model的底层原理

v-model是vue中的双向数据绑定,它包含两部分，一个是传值value，一个是监听事件input。在我们组件通信时按照，value，和input去定义。在父组件就可以使用v-model来接受，实现组件之间的双向数据绑定。

路由传参

1.在路由组件的地址里写上要传参的路径，在以后跳转的时候，地址里携带参数。在参数后面加？代表参数可有可以

登录功能实现

表单校验

 <el-form ref="form" :rules="loginRules" :model="loginForm">
          <el-form-item prop="mobile">
            <el-input v-model="loginForm.mobile" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" show-password placeholder="请输入密码" />
          </el-form-item>
          <el-form-item prop="isAgree">
            <el-checkbox v-model="loginForm.isAgree">
              用户使用协议
            </el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 350px" type="primary" @click="login">登录</el-button>
          </el-form-item>
  </el-form>
<script>
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        mobile: process.env.NODE_ENV === 'development' ? '13800000002' : '',
        password: process.env.NODE_ENV === 'development' ? 'hm#qd@23!' : '',
        isAgree: process.env.NODE_ENV === 'development'
      },
      loginRules: {
        mobile: [{
          required: true,
          message: '请输入手机号',
          trigger: 'blur'
        }, {
          pattern: /^1[3-9]\d{9}$/,
          message: '手机号格式不正确',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }, {
          min: 6,
          max: 16,
          message: '请输入6-16位的密码',
          trigger: 'blur'
        }],
        // required只能检查 null "" undefined ,isAgree 返回的是true和false类型
        isAgree: [{
          validator: (rule, value, callback) => {
            // rule 代表校验规则
            // value代表校验的值
            // callback 回调函数
            value ? callback() : callback(new Error('请勾选用户协议'))
          }
        }
        ]
      }
    }
</script>

关于跨域问题

前端向后端发送请求是需要解决跨域问题的，首先跨域问题是存在于浏览器之间的。如果前端使用node代理去向后端发请求，就相当于两个服务器之间的通信，不存在跨域问题。

在vue-cli脚手架中，需要在vue.config文件中配置代理信息，在文件中有一个devServer属性，需要在里面再添加一个proxy属性

 proxy: {
    // path: 目标服务器
      '/api': {
        target: 'https://heimahr.itheima.net'
      }
    }

axios封装的需求

import axios from 'axios' // 引入axios
import store from '@/store/index'
import { Message } from 'element-ui'
const service = axios.create({
  baseURL: '/api',
  timeout: '10000'
}) // 创建axios实例变量service，然后配置一些基础参数
// interceptors 拦截器 1成功，2 失败
// 请求拦截器
service.interceptors.request.use((config) => {
// 给请求添加token
// 1. 引入store，拿到token
// store.getters.token, token存在请求头里面
  if (store.getters.token) {
  // token存在，已经登录过,将token值添加到请求头里面
    config.headers.Authorization = `Bearer ${store.getters.token}`
  }
  return config
}, (error) => {
  return Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use((response) => {
  // 成功执行,解构数据
  const { data, message, success } = response.data
  if (success) {
    return data
  } else {
    Message({ type: 'error', message: message })
    return Promise.reject(new Error(message))
  }
}, (error) => {
  // 提示失败消息
  Message({ type: 'error', message: error.message })
  return Promise.reject(error)
})
export default service // 将配置好的axios导出

axios区分环境

baseURL: process.env.VUE_APP_BASE_API, // 基地址，区分开发和测试环境，不同的环境下 VUE_APP_BASE_API值不同

路由主页权限验证

import router from '@/router'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
import store from './store'
/**
 * 开启前置守卫
 **/
const WhitList = ['/login', '/404'] // 3.无token 不需要token就可以访问的路由地址
router.beforeEach((to, from, next) => {
  // 1. 开启进度条
  nprogress.start()
  // 2. 判断请求头中是否有token
  if (store.getters.token) {
    // token存在，判断去的路径是否是登录页
    if (to.path === '/login') {
      // 当next(地址) 不执行后置守卫
      next('/')
      nprogress.done()
    } else {
      next()
    }
  } else {
    // token 不存在, 判断是否在白名单里面
    if (WhitList.includes(to.path)) {
      next()
    } else {
      next('/login')
      nprogress.done()
    }
  }
})

/**
 * 开启后置守卫
 * **/
router.afterEach((to, from, next) => {
  // 1. 关闭进度条
  nprogress.done()
})

首页相关

获取用户信息存储到vuex中

调用位置满足条件：1.有token，2.没有获取过用户信息；

调用位置：在路由的前置守卫中，调用vueAction，调用接口保存数据到vuex中

API 
export function getUserInfo() {
  return request({
    url: '/sys/profile',
    method: 'get'
  })
}

Vuex调用api
  mutation
  setUserInfo(state, userInfo) {
    state.userInfo = userInfo  // 保存数据到state中
  }
  action
  async getUserInfo(context) {
    // todo调用接口,存储数据
    const data = await getUserInfo()
    context.commit('setUserInfo', data)
  }

前置守卫中调用vuexAction
 if (to.path === '/login') {
      // 当next(地址) 不执行后置守卫
      next('/')
      nprogress.done()
    } else {
      // 3. 获取用户信息，- 判断是否获取过
      if (store.getters.userId) {
        next()
      } else {
        await store.dispatch('user/getUserInfo')
        next()
      }
    }

store-getter中提供user-state中变量的快速访问
 userId: state => state.user.userInfo.userId

显示头像和用户名

token超时处理

实现退出功能

修改密码功能

修改密码表单校验

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

左侧菜单渲染过程

递归解决树形结构

角色管理

行内编辑功能实现

定义一个标记，根据标记判断是否是编辑
给某一对象定义一个属性，通过this.$set(element, ‘isEdit’, false),对象，属性，值这样设置的属性具有响应式
给编辑按钮设置点击事件，控制标记的值
通过插槽语法，给模板加上v-if 和v-else 判断。根据标记的值显示不同内容

员工管理

获取首个节点

导出excel表

权限应用

学习总结

1. 组件通信

父组件---->子组件

子组件通过props接受，父组件通过:绑定要传递的属性名。实现单向传递

子组件---->父组件

在js中this.$emit(‘事件名’，事件值)。在template中省略this。

特殊用法，父组件使用.sync修饰符可以监听子组件传递的this.$emit(‘update:props中的属性名’，属性值)

子组件<—>父组件

父组件绑定v-model，子组件通过value接受父组件的值，通过this.$emit(‘input’,value)值触发事件传递给父组件。

父组件调用子组件的方法

先给子组件加ref属性，父组件通过this.$refs拿到子组件的实例，然后就可以调用其方法

父组件:
 <!-- 分配权限组件 --> v-model  ===>传递value,监听input
    <roles-permission v-model="roleId" :permission-dialog.sync="permissionDialog" />
子组件：
<script>
     props: {
    permissionDialog: {
      type: Boolean,
      default: false
    },
    // value代表角色的id  
    value: {
      type: Number,
      default: undefined
    }
</script>

2.vuex相关

一个是提交mutations中的方法是 this.$store.commit(‘方法名称’，方法值)，

调用vuex 中的actions使用的是this.$store.dispush(‘方法名’，方法值)

Mutations 用于同步修改 Vuex 的状态，通过 commit 方法提交。
Actions 用于处理异步操作，可以包含任意异步逻辑，通过 dispatch 方法分发，最终通过 commit 方法提交 mutations 更新状态。

通过这种方式，Vue 组件可以很方便地与 Vuex 中的状态管理进行交互，实现组件和全局状态的有效集成和管理。

vuex有几种状态：1.state,getter,model,mutition,action…

如何修改state里面的数据，通过commit，提交mutition，里面的方法进行修改
如何调头action，this.$store.dispush 派遣，调用action里面的方法处理异步。

token持久化存储

localStorage、sessionStorage、cookie

3.router相关

根据不同权限加载不同路由信息，实现权限控制。

思路： 1. 先拆分哪些是需要权限访问的动态路由，2，在路由的前置守卫中，获取用户信息中包含用户所拥有的权限。3.将动态路由中的信息按照用户所拥有的权限进行过滤。3。将/404页面放到最后，可以使用…拆分组合。4.在路由前置守卫中，最后需要再转发一下路由，否则，刷新前端页面一样报404错误。4.因为动态加载的路由不具备响应式，所有在加载完成后，不会显示左侧菜单，这就需要我们将路由信息手动的加载到vuex中，实现动态管理！5，退出登录情况路由信息

要想去到某一页面，this.$router.push(‘/’)

路由导航： Vue Router提供了多种方式进行路由导航，包括声明式导航（<router-link>组件）、编程式导航（router.push、router.replace、router.go等方法）以及导航守卫（beforeEach、beforeResolve、afterEach等）来控制路由的跳转和加载。

路由传参：可以通过路由的params或query传递参数给目标组件。params是路由路径中的动态片段，而query则是在URL中的查询参数。例如：

javascriptCopy Code{ path: '/user/:id', component: User },
// 在组件中获取params参数
this.$route.params.id
// 使用query参数
{ path: '/user', component: User },
``

4.echarts图表应用

安装echarts包

$ npm i echarts 
$ yarn add echarts

放置两个图表的div，并给定高宽，代码位置(src/views/dashboard/index.vue)

 <div class="chart">
    <!-- 图表 -->
    <div ref="social" style=" width: 100%; height:100% " />
</div>
  <div class="chart">
              <!-- 图表 -->
    <div ref="provident" style=" width: 100%; height:100% " />
  </div>

在mounted中初始化图表-代码位置(src/views/dashboard/index.vue)

如何在项目中使用element-ui

步骤1.安装element-ui 组件 npm install element-ui -S

步骤2.在入口main.js中引入注册

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

数组

js列举和数组操作相关的方法(常用)
在JavaScript中，数组操作是编程的常见任务之一。JavaScript提供了一系列与数组操作相关的方法，这些方法可以用来操纵数组，如添加、删除、查找、排序和遍历元素等。以下是一些常用的数组方法：

Vue的生命周期

创建，挂载，渲染，销毁

css篇

文档布局类型，标准流，浮动float，定位potiation flex

w3c和http规范

当谈到W3C（World Wide Web Consortium）和HTTP（Hypertext Transfer Protocol）规范时，它们分别代表了Web技术的标准化和Web通信协议的规范化。

W3C（World Wide Web Consortium）

W3C是一个国际化的标准组织，致力于开发和推广Web标准。它由互联网的发明者、伯纳斯-李（Tim Berners-Lee）于1994年创立。W3C的主要任务包括：

制定Web技术标准：W3C负责开发和维护许多Web技术的标准，如HTML、CSS、SVG等，确保这些技术能够在不同的浏览器和设备上实现一致的行为。
推广Web互操作性：通过制定统一的标准，W3C致力于确保各种技术在不同的平台和设备上能够互操作，从而促进Web的发展和创新。
开发新技术：除了维护现有标准，W3C还致力于开发新的Web技术和规范，以应对Web应用程序日益复杂的需求。

W3C的标准通过开放的、合作的过程制定，其成员包括来自各个行业的技术专家和组织。

HTTP（Hypertext Transfer Protocol）

HTTP是一个用于传输超文本（如HTML）数据的应用层协议，它是Web的核心协议之一。HTTP的主要功能包括：

传输数据：HTTP允许客户端（例如Web浏览器）向服务器请求数据，并且从服务器接收响应数据，这些数据可以是文本、图像、视频等。
状态管理：HTTP使用状态码来表示请求的结果，例如200表示成功，404表示未找到，等等。它还支持会话管理，通过Cookie和Session来维护用户和服务器之间的状态。
无状态性：HTTP协议本身是无状态的，即每个请求都是独立的，服务器不会保存任何关于客户端请求的信息。这导致了HTTP本身在处理某些场景（如保持会话状态）时需要额外的机制（如Cookie）。

HTTP的当前版本是HTTP/2和HTTP/3，它们分别在传输效率和性能上有所改进，尤其是在处理并行请求和减少延迟方面。

总之，W3C制定了Web的各种技术标准，而HTTP是一种基本的协议，使Web上的信息交换成为可能。这两者共同推动了Web技术的发展和普及。

HTTP（Hypertext Transfer Protocol）

HTTP是一个用于传输超文本（如HTML）数据的应用层协议，它是Web的核心协议之一。HTTP的主要功能包括：

传输数据：HTTP允许客户端（例如Web浏览器）向服务器请求数据，并且从服务器接收响应数据，这些数据可以是文本、图像、视频等。
状态管理：HTTP使用状态码来表示请求的结果，例如200表示成功，404表示未找到，等等。它还支持会话管理，通过Cookie和Session来维护用户和服务器之间的状态。
无状态性：HTTP协议本身是无状态的，即每个请求都是独立的，服务器不会保存任何关于客户端请求的信息。这导致了HTTP本身在处理某些场景（如保持会话状态）时需要额外的机制（如Cookie）。

HTTP的当前版本是HTTP/2和HTTP/3，它们分别在传输效率和性能上有所改进，尤其是在处理并行请求和减少延迟方面。

总之，W3C制定了Web的各种技术标准，而HTTP是一种基本的协议，使Web上的信息交换成为可能。这两者共同推动了Web技术的发展和普及。