zdppy+vue3+onlyoffice文档管理系统实战 20240903 上课笔记 登录功能完成

2024-09-04 04:04
文章标签 zdppy vue3 onlyoffice 20240903 文档 管理系统 笔记 上课 实战 登录 功能 完成 javascript frontend vue

本文主要是介绍zdppy+vue3+onlyoffice文档管理系统实战 20240903 上课笔记 登录功能完成，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

接下来

  • 1、注销功能：点击注销按钮，清除登录信息跳转到登录页面
  • 2、token过期

注销功能

useUser.js

import storage from "../../g/storage.js";
import {useRouter} from "vue-router";
import {message} from "ant-design-vue";export default function useUser() {const router = useRouter()// 注销const logout = () => {storage.delete("userid")storage.delete("username")storage.delete("token")message.success("退出登录成功")router.push("/login")}return {logout,}
}

处理菜单点击：

import {ref} from 'vue';
import useUser from "./useUser.js"const {logout} = useUser()const selectedKeys = ref(['latest']);// 处理菜单点击
const handleMenuClick = ({key}) => {switch (key) {case 'user-logout':logout()break}
}

头像变成用户名首字母

简单实现：

const avatar = () => {const username = storage.get("username") || "U"return username.charAt(0).toUpperCase()
}

vue3计算属性

在 Vue 3 中，计算属性（computed properties）是一种特殊类型的依赖项，它们根据响应式数据的变化自动重新计算值。计算属性非常适合用于当你需要根据现有数据派生出一些状态时。

以下是 Vue 3 中使用计算属性的简单示例：

<template><div><p>价格: {{ product.price }}</p><p>含税价格: {{ totalPrice }}</p></div>
</template><script setup>
import { computed, ref } from 'vue';const product = ref({name: 'Vue 3 Guide',price: 100
});// 计算属性，用于计算含税总价
const totalPrice = computed(() => {return product.value.price * 1.15; // 假设税率为 15%
});
</script>

在这个示例中：

  • 使用 ref 创建了一个响应式的数据对象 product，它包含产品名称和价格。
  • 使用 computed 创建了一个计算属性 totalPrice，它基于 product 的价格计算含税后的总价。这里假设税率为 15%。
  • 在模板中，我们展示了产品的价格和含税价格。

计算属性 totalPrice 会根据 product.price 的变化自动更新。当 product.price 发生变化时，任何依赖于 totalPrice 的视图都会自动更新。

计算属性是惰性的，只有在它们所依赖的响应式数据发生变化时才会重新计算。这使得计算属性非常高效，并且它们是缓存的，只有当依赖项发生变化时，计算属性的值才会重新计算。

请注意，<script setup> 是 Vue 3 引入的一个新的脚本语法糖，它使得组件的编写更加简洁。如果你使用的是传统的 export default 语法，那么你需要稍微调整代码：

export default {data() {return {product: {name: 'Vue 3 Guide',price: 100}};},computed: {totalPrice() {return this.product.price * 1.15; // 假设税率为 15%}}
};

在这个传统语法的示例中，计算属性 totalPrice 被定义在 computed 选项中，并且可以通过 this.product 访问响应式数据 product。

计算属性版本的头像

核心代码：

const totalPrice = computed(() => {return product.value.price * 1.15; // 假设税率为 15%
});

头像代码：

const avatar = computed(() => {const username = storage.get("username") || "U"return username.charAt(0).toUpperCase()
})

简写代码：

const avatar = computed(() => (storage.get("username") || "U").charAt(0).toUpperCase())

当前界面

在这里插入图片描述

接下来

  • 1、数据的请求是没有权限的，我们应该要验证权限
  • 2、必须要登录才能请求数据，Token必须有效
  • 3、前端要把登录Token传递后端

问题：我们会有非常多的接口，我们是每个接口都手动把Token传递进去吗？

回答：这是比较low的写法，Axios有一个拦截器的功能，我们可以在拦截器中，统一设置携带Token。

axios拦截器

在 JavaScript 中，使用 Axios 进行 HTTP 请求时，可以设置请求拦截器和响应拦截器来统一处理请求和响应。这在处理认证、记录日志、统一格式化数据等场景中非常有用。

以下是 Axios 请求拦截器和响应拦截器的简单示例：

安装 Axios

首先，确保你已经安装了 Axios。如果还没有安装，可以使用 npm 或 yarn 来安装：

npm install axios

或者

yarn add axios

设置拦截器

import axios from 'axios';// 请求拦截器
axios.interceptors.request.use(config => {// 在发送请求之前做些什么，例如添加认证头const token = localStorage.getItem('user-token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;},error => {// 对请求错误做些什么return Promise.reject(error);}
);// 响应拦截器
axios.interceptors.response.use(response => {// 对响应数据做点什么return response;},error => {// 对响应错误做点什么if (error.response && error.response.status === 401) {// 例如，处理 401 未认证错误console.log('未认证，需要重新登录');}return Promise.reject(error);}
);// 使用 Axios 发送请求
axios.get('/api/data').then(response => {console.log('数据获取成功:', response.data);}).catch(error => {console.error('数据获取失败:', error);});

在这个示例中：

  • 请求拦截器：在发送请求之前，检查本地存储中是否存在 token，并将其添加到请求头中。如果 token 存在，请求头中将包含 Authorization 字段。
  • 响应拦截器：在收到响应后，根据响应状态进行处理。例如，如果响应状态码为 401（未认证），可以记录日志或执行其他操作。

详细说明

  1. 请求拦截器：

    • 使用 axios.interceptors.request.use 方法设置请求拦截器。
    • 第一个参数是一个函数，它接收 config 对象作为参数，你可以在发送请求之前修改它，例如添加或修改请求头。
    • 第二个参数是一个处理错误的函数，如果请求配置出错，可以在这里处理。

  2. 响应拦截器：

    • 使用 axios.interceptors.response.use 方法设置响应拦截器。
    • 第一个参数是一个函数，它接收 response 对象作为参数，你可以在处理响应数据之前对其进行操作。
    • 第二个参数是一个处理错误的函数，如果响应出错，可以在这里处理。

  3. 发送请求：

    • 使用 axios.get 方法发送 GET 请求，并使用 then 和 catch 处理成功和失败的情况。

总结

拦截器是 Axios 中非常强大的功能，它们允许你在请求发送之前和响应返回之后统一处理逻辑。这在处理认证、日志记录、错误处理等场景中非常有用。通过设置拦截器，你可以避免在每个请求和响应中重复相同的代码，从而使代码更加简洁和易于维护。

axios创建实例对象

在 Axios 中，你可以创建一个实例对象来配置特定的 axios 实例。这在你需要为应用的不同部分设置不同的基础 URL、头部或超时时间等配置时非常有用。

以下是如何创建 Axios 实例对象的示例：

import axios from 'axios';// 创建 axios 实例
const instance = axios.create({baseURL: 'https://api.example.com', // 设置默认的基础 URLtimeout: 1000, // 设置默认的超时时间headers: {'X-Custom-Header': 'foobar'} // 设置默认的请求头
});// 使用实例发送请求
instance.get('/data').then(response => {console.log('数据获取成功:', response.data);}).catch(error => {console.error('数据获取失败:', error);});// 你可以为实例添加拦截器
instance.interceptors.request.use(config => {// 在发送请求之前做些什么config.headers['Authorization'] = `Bearer your-token`;return config;},error => {// 对请求错误做些什么return Promise.reject(error);}
);instance.interceptors.response.use(response => {// 对响应数据做点什么return response;},error => {// 对响应错误做点什么return Promise.reject(error);}
);

在这个示例中：

  • 使用 axios.create() 方法创建了一个 Axios 实例。
  • baseURL 设置了所有请求的默认基础 URL。
  • timeout 设置了所有请求的默认超时时间（以毫秒为单位）。
  • headers 设置了所有请求的默认请求头。
  • 使用实例对象 instance 发送了一个 GET 请求。
  • 为实例对象添加了请求拦截器和响应拦截器。

创建实例对象的好处是你可以针对不同的 API 端点或不同的请求需求设置不同的配置，而不必在每次请求时都设置这些配置。这使得代码更加模块化和可重用。

此外，Axios 实例也是可配置的，这意味着你可以在实例的基础上进一步定制化，例如添加特定的拦截器或配置项。这在构建大型应用时非常有用，因为它允许你为不同的 API 模块或功能创建不同的 Axios 实例。

封装axios

import axios from "axios";
import storage from "./storage.js";// 全局HTTP请求对象
const req = axios.create({baseURL: 'http://127.0.0.1:18888', // 设置默认的基础 URLtimeout: 3000, // 设置默认的超时时间headers: {'Content-Type': 'application/json'} // 设置默认的请求头
});// 请求拦截器
req.interceptors.request.use(config => {// 添加统一的tokenconst token = storage.get("token") || ""if (token) {config.headers.Authorization = token}return config;},error => {// 对请求错误做些什么return Promise.reject(error);}
);// 导出
export default req;// 响应拦截器
req.interceptors.response.use(response => {// 对响应数据做点什么return response;},error => {// 对响应错误做点什么if (error.response && error.response.status === 401) {// 例如，处理 401 未认证错误console.log('未认证，需要重新登录');}return Promise.reject(error);}
);

这篇关于zdppy+vue3+onlyoffice文档管理系统实战 20240903 上课笔记 登录功能完成的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1134938。

相关文章

网页解析 lxml 库--实战

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库，完全使用 Python 语言编写，它对 XPath表达式提供了良好的支 持，因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块，该模块专门用来解析 HTML/XML 文档，下面来介绍一下 lxml 库
阅读更多...
Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
Security OAuth2 单点登录流程

Security OAuth2 单点登录流程

单点登录（英语：Single sign-on，缩写为 SSO），又译为单一签入，一种对于许多相互关连，但是又是各自独立的软件系统，提供访问控制的属性。当拥有这项属性时，当用户登录时，就可以获取所有系统的访问权限，不用对每个单一系统都逐一登录。这项功能通常是以轻型目录访问协议（LDAP）来实现，在服务器上会将用户信息存储到LDAP数据库中。相同的，单一注销（single sign-off）就是指
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
性能分析之MySQL索引实战案例

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题，本文将一起从代码层去分析为什么没有建立索引？ 开源ERP项目地址：https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置
阅读更多...
C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页： 南桥几晴秋 🌈C++专栏： 南桥谈C++ 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据库学习专栏： 南桥谈MySQL 🌈Qt学习专栏： 南桥谈Qt 🌈菜鸡代码练习： 练习随想记录 🌈git学习： 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�
阅读更多...
活用c4d官方开发文档查询代码

活用c4d官方开发文档查询代码

当你问AI助手比如豆包，如何用python禁止掉xpresso标签时候，它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2