默

文件上传下载是项目中经常遇到的常规功能，本文针对下载功能总结了一共三种使用方式。

一.无 API 浏览器直接下载（静态资源在前端）

将静态资源文件直接放于 public 目录下，打包时 public 文件不会被编译。

注意：静态资源的路径，在 public 文件夹下路径是/文件名

1

<a class="download-file" href="/file.xlsx" download="模板.xlsx">下载模板文件</a>

或者使用非 a 标签的按钮下载：

一、计算机网络

1. 浏览器的缓存机制

2. babel与ployfill的关系和区别

3. 解决跨域的方法

4. http状态码

5. git stash

6. localstorage跨域可以共享吗，如何解决

7. 描述url到页面渲染的整个过程

8. https页面引入http资源的解决方式/如何让网站同时兼容http和https

9. cookie、session、sessionStorage和localStorage的 区别

10. http 和 https 的区别

前言

在日常生活中，很多人由于忘记某些网站的登录密码而烦恼，因为大多数用户都要记忆不少于 10 个用户名和相应密码。随着信息化飞速发展，大型企业和政府部门等都开始使用电子系统进行办公，整个办公系统由多个不同的子系统构成，如办公自动化(OA)系统，财务管理系统，档案管理系统，信息查询系统等。如果每个系统都使用独立的登录和验证机制，那么每天工作人员都要登录不同的系统进行办公。用户登录的频繁操作，降低了员工的工作效率，造成工作成本的浪费。而大量的密码和用户名的记忆时间长了也会出现问题，忘记密码或者混淆密码都会造成很大的麻烦。基于以上原因，为用户提供一个畅通的登录通道变得十分重要。

这时候用户希望我在一个系统登录之后可以默认在它的关联系统（二级域名必须相同）中也是已登录状态，避免繁琐的多次登录。这时候就需要 SSO（Single Sign On）来帮助我们实现。

单点登录(SingleSign-On，SSO)是一种帮助用户快捷访问网络中多个站点的安全通信技术。单点登录系统基于一种安全的通信协议，该协议通过多个系统之间的用户身份信息的交换来实现单点登录。使用单点登录系统时，用户只需要登录一次，就可以访问多个系统。

实现思路

Cookie 作为凭证媒介

众所周知，HTTP 是无状态的协议，这意味着服务器无法确认用户的信息。于是，W3C 就提出了：给每一个用户都发一个通行证，用户访问站点时都要携带通行证，这样服务器就可以从通行证上确认用户的信息，通行证就是 Cookie。

同样因为 HTTP 协议是无状态的，Session 不能依据 HTTP 连接来判断是否为同一个用户。于是：服务器向客户端发送了一个名为 SESSIONID 的 Cookie，它的值是 Session 的 id 值。其实 Session 是依据 Cookie 来识别是否是同一个用户。

通过页面重定向的方式

逻辑流程图

前言

在一些中后台项目的业务中经常会有给不同的用户看到不同的页面甚至不同的操作权限，这时候权限管理功能就闪亮登场了，用它来给用户赋予不同的角色，给不同的角色设置不同的权限，那么前后端在技术方面具体是如何实现的呢？带着这个问题我们来看下权限管理的流程和实现原理。

实现原理

权限管理大致方案就是给角色分配权限，给用户分配角色。根据业务不同要求的颗粒度不同，如果颗粒度仅限于路由级别，实现思路大致如下

首先，前端需要分别定义一套（不需权限所有已登陆用户都可访问）静态路由表和动态路由表，路由元信息中包含这个路由对应的（和后端定义好的）权限名。

1.传统方案——基于 cookie/session 的解决方案

首先，浏览器端向服务端发送 login 请求，把用户名和密码都发送过去，服务器验证用户名密码正确，然后就会创建对应的 session 数据并保存在内存或者数据库中。然后，服务器返回一个 HTTP 200 OK 的 response，这个 response 会有个 header 叫 set-Cookie：sessionid=xxx，浏览器拿到这个 response 以后，因为有 set-Cookie 这个 header， 带上唯一的 id sessionid（set-Cookie：sessionid=xxx），它就会把 cookie 保存在浏览器中，下次我们再访问这个需要权限的接口，这时候会自动把 cookie 带上。服务器端就可以使用 cookie 中的信息 sessionid，查看服务器中是否存在这个 session 的数据，如果存在则返回对应的信息，否则返回 401 Not authorized。

基于 cookie 的身份验证是有状态的，意味着这个验证记录或者会话必须同时保存在服务器端和客户端，服务器要跟踪记录 session 并且存至内存或者数据库，同时前端在 cookie 也要保存这个 sessionid 作为 session 唯一的标识符。这种模式的问题在于扩展性不好。假如只有一台服务器当然没有问题，假如是一个服务器集群，这就要求 session 的数据共享，我们需要每台服务器都读取到这个 session，一种解决方案就是 session 的数据持久化，把数据写到持久层中去，各种服务收到请求以后都向持久层发送数据。这种方案优点是架构清晰，缺点是工程量比较大，另外，持久层如果挂了，那么就单点失败。

前言

nginx 是 web 服务器，由 C 语言开发，基于事件驱动能处理百万级别的 tcp 连接，高度模块化的设计和自由的许可证使得扩展其功能的模块层出不穷，跨平台，可使用当前操作系统特有的一些高效 API 来提高自己的性能，nginx 以性能为王。选择 nginx 的核心理由是处理高并发请求的同时保持高效的服务。
Nginx 特点：
适合前后端分离开发、保证安全、nginx 非常快、负载均衡

安装

环境：MAC OS 系统
brew install nginx

查看版本号：
nginx -V

启动：
nginx

生命周期钩子函数

vue3 更新了生命周期钩子函数。
可以直接通过 import 对应的函数（例如：onMounted）来注册生命周期钩子函数。

Options API -> Hook inside setup

1. beforeCreate -> use setup()
2. created -> use setup()
3. beforeMount -> onBeforeMount
4. mounted -> onMounted
5. beforeUpdate -> onBeforeUpdate
6. updated -> onUpdated
7. beforeUnmount -> onBeforeUnmount
8. unmounted -> onUnmounted
9. errorCaptured -> onErrorCaptured
10. renderTracked -> onRenderTracked（调试用）
11. renderTriggered -> onRenderTriggered（调试用）

因为 setup 是在 beforeCreated 和 created 几乎是同时进行的，所以可以将在这两个生命周期里的代码写在 setup 里面。

前言

本文主要介绍 vue3 新增 Composition API 的一些特性 setup()、computed()和 watch()，Composition API 可以把复杂组件的逻辑变得更为紧凑，使代码有更高复用性和灵活性。

1. setup()

setup()是 vue3 中新增特性，在组件 created()生命周期之前执行。
因为 setup() 是在组件 created()之前执行的，所以在 setup()内部无法获取 this。

setup(props,context)接收两个参数：props,context

参数一：props

组件接收的 props 数据可以在 setup()函数内访问到。

1
2
3
4
5
6
7
8

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

props 具有响应性，不能使用 ES6 解构它，这会使其失去响应性。如果需要解构，可以使用 toRefs()

1
2

const { title } = toRefs(props)
console.log(title.value)

如果 title 是一个可选的属性，需使用 toRef(),如下：

1
2
3
4
5

import { toRef } from 'vue'
setup(props) {
	const title = toRef(props, 'title')
	console.log(title.value)
}

前言

vue3 更好的支持了 Typescript，新增了 CompositionAPI，而且在性能方面有很大提升

1. 打包大小减少 41%
2. 初次渲染快 55%，更新快 133%
3. 内存使用减少 54%

这篇文章主要来学习以下 vue3 的以下新特性：ref()、reactive()、toRef()、toRefs()

版本要求

对于 Vue3，node 版本 10+、Vue Cli v4.5+的版本可用。已经安装过@vue/cli需更新至最新版本

1
2
3

yarn global add @vue/cli
#or
npm install -g @vue/cli

配置 Vue3 开发环境

1

vue create [project-name]

前言

自从涉足了知识图谱项目便一发不可收拾，本次项目中也是涉及到一些可视化和知识图谱的元素，对我来说虽不是新的技术领域但是这次改用了 ts，所以还是踩了不少的坑呢，主要集中在 d3 和 ts 结合部分。

其次在项目评审期间，前端主要问题还有自适应方面的问题，最终敲定使用断点媒体查询的方式实现。

近期 bug 修复进入尾声，时隔数日还是复盘一下，毕竟我的脑瓜子还是一如既往的健忘，刚刚被问及一个项目是不是我做的，我记得是我做的，但是具体内容什么的我已经无力想起了，不过看到我还是认识的。言归正传，下面就来回顾一下踩坑流水帐。

1. Echarts Graph

如果使用过 echart 系列图表，那么 graph 关系图还是相对比较容易上手的，毕竟是高度可定制化套路一样同类型属性名也一样。