最近公司在终端设备上调试软件的时候有诸多不便，看到工程师小哥哥拿着 U 盘到处跑。回头一看，公司还有几台闲置电脑，便想着装个文件服务，供团队开发测试使用。服务器系统使用ubuntu server 18.04.3，系统安装非常简单，不再赘述。 samba 安装 sudo apt-get install -y samba samba-common 创建用户 不建议直接使用root用户进行文件共享，创建一个share用户，并为其分配/home/share目录。同时，也会把/home/share目录设置为文件共享目录。 # 1. 创建工作用户组 groupadd work # 2. 创建用户，并添加到工作用户组 # 参数说明 # m: 自动创建用户目录 # g: 添加到用户组 # s: 制定用户的shell useradd -m -g work -s /bin/bash share # 3. 将用户添加到samba并设置密码 sudo smbpasswd -a share 配置 samba samba配置文件路径为/etc/samba/smb.conf，在末尾添加配置 [share] comment = work share path = /home/share browseable = yes valid users = share read only = no guest ok = no 重启samba...

使用apollo-client上传文件 apollo 文件上传 依赖 apollo-client apollo-link apollo-upload-client apollo-cache-inmemory 客户端创建 apolloClient.js import { ApolloClient } from 'apollo-client' import { createUploadLink } from 'apollo-upload-client' import { ApolloLink, from } from 'apollo-link' import { InMemoryCache } from 'apollo-cache-inmemory' const authLink = new ApolloLink((operation: Operation, forward) => { operation.setContext({ headers: { Authorization: getToken(), }, }) return forward(operation) }) const uploadLink = createUploadLink({ uri: `${API_URL}`, }) export const apolloClient = new ApolloClient({ link: from([authLink, uploadLink]), // uploadLink一定要放最后 cache: new InMemoryCache(), }) 使用 uploadFile....

最近在开发过程中频繁用到防抖函数（提交表单、页面滚动等），比较 low 的解决方案一般都是定义一个全局变量作为控制函数执行的锁，这样的确能解决问题，但是一点都不优雅。于是仔细琢磨了一下防抖函数，其中涉及到了闭包，顺便复习一下。 什么是闭包 简单的讲闭包就是在函数里面定义的函数。在开发过程中我们经常会写。 function a() { let i = 0 console.log(i) function b() { i++ console.log(i) } return b } let fb = a() fb() // 0 // 1 上面代码中，函数 b 就是一个闭包。根据执行结果我们可以验证闭包的一个特性，即闭包中引用了父级作用域中的变量，当父级函数执行完毕之后，被引用的内部变量不会被回收。很容易理解，将上面的执行过程拆开来看： let fb = a() // a函数中声明变量i = 0，并且将i的值打印出来 // a函数中声明b函数，在b函数中将i的值增加1 // 将b函数返回，a函数执行完毕 fb() // i的值增加1，并将其打印出来 神奇的地方就在与，我们通过将 b 函数返回，实现了在 a 函数执行完毕后对其内部的局部变量进行访问和修改。因此闭包也被看作是连接一个函数内部和外部的桥梁。 防抖函数 从另一个角度思考闭包，可以看作父级函数为闭包创建了一个临时的作用域，其中的变量可以和外部隔绝。这样的话我们就可以把一些在特定位置才会使用的全局变量通过闭包的方式使用，使代码更加优雅。 以防抖函数为例，前面提到的解决方案是定义一个全局变量来控制函数的执行： let lock = false function submit() { if (!lock) { lock = true setTimeout(() => { console....

在vue中经常使用axios发起网络请求，与服务器进行数据交互。在使用过程中会有许多问题存在，比如由于网络不稳定导致请求超时/失败，通常有两种解决方案，一种是提示用户重新提交请求，另一种是进行相关提示并自动重新发送请求。第二种方式用户体验明显高于第一种方式。本文就针对第二种方式设计一个解决方案。 DEMO(https://yes-lee.github.io/axios-tutorial/) 拦截器 基本所有的网络请求库都有拦截器接口，包括请求拦截器和响应拦截器。axios设置拦截器的接口为axios.interceptor.request.use(cb, errCb)和axios.intercepter.response.use(cb, errCb)，拦截器可以设置多个，按照设置的顺序执行。 请求失败 请求失败无论是网络异常还是其他原因，都会走到响应拦截器里，因此对于请求结果的相关处理，重点放在响应拦截器上，而请求异常的处理则放在响应拦截器的第二个回调函数里面。 解决方案 思路很简单，在响应拦截器中拦截到异常信息，通过分析异常信息来直接从拦截器中重新发送请求。整个过程对于调用请求的业务代码中来说是毫无感知的，只需等待resolve结果即可。 实现 首先，经过测试得到请求超时的错误代码是ECONNABORTED，网络连接异常没有错误代码，可以直接通过error.message === 'Network Error'进行判断。 const httpClient = Axios.create(defaultConfig) httpClient.interceptors.response.use(null, err => { // 异常处理 const { config, code, message } = err if (code === 'ECONNABORTED' || message === 'Network Error') { // 请求超时 console.warn(`请求超时，将在${defaultConfig.retryDelay / 1000}秒后重试`) return new Promise(resolve => { setTimeout(async _ => { resolve(await httpClient.request(config)) }, defaultConfig.retryDelay) // 设置发送间隔 }) } // 可以进行相关提示等处理 return Promise.reject(err) }) 经过错误代码判断，需要进行重新发送的时候，将请求的 config 直接传入httpClient....

在前端工程打包部署过程中，经常会有同学遇到图片等静态资源 404 的问题，这些问题都是于打包后资源路径不正确导致的。本文就从基础开始，讲解如何分析并解决此类问题。 绝对路径于相对路径 首先先搞清楚绝对路径和相对路径的区别。绝对定位就是从根目录开始，二相对路径是以当前路径为参考，从标记上来看，绝对路径是以/开头的路径，而相对路径是以./或者文件(文件夹)名称开头的路径。 web 中的路径 前面简单的讲了绝对路径和相对路径的定义和区别，下面，开始重点讲在 web 中的资源路径。 在浏览器中访问 web 有两种方式，一种是直接在浏览器中打开.html文件，另一种是通过一个 IP 或域名访问部署在静态资源服务器（web 服务器）中的网页。分别来分析两种情况。 直接打开.html文件 在文件系统中，绝对路径以根目录或盘符开始，比如：/Users/Johnson/Document（Linux/Unix）和C:\Users\Johnson\Document（windows）。如果我们直接从浏览器加载index.html页面，那么浏览器中的地址是该文件在系统中的绝对路径。 在 unix 或类 unix（如 macOS）系统中，以file://开头，在 windows 中以盘符开头。我们先看一下这个图片的路径 可以看到，写的是相对路径，浏览器从文件系统中也通过相对路径加载图片。然后，换成绝对路径试试。 图片也能正常加载，但是我们平时在web开发过程中通过绝对路径应用资源并没有写文件在磁盘中的真实路径，而是像这样写 然后再打开，会发现图片无法显示了，从调试工具中可以看到，浏览器直接从系统根目录查找文件 因此，如果我们的 web 应用需要打包成桌面应用/移动 app，那么一般情况只能使用以./开头的相对路径，除非打包的应用中集成了静态资源服务。 从 web 服务器访问 Web 服务器会给每一个 web 应用的目录分配一个域，我们可以直接通过 IP 地址或者域名来访问。当在浏览器中访问该 web 应用时，会将绝对路径的根目录代理到项目所在目录。看一个 vue 实例：将项目打包后，使用http-server为 dist 目录开启一个代理 同样适用绝对路径，通过网络调试器看到资源从http://localhost:8081/images/logo.png请求来的，服务器将http://localhost:8081/部分映射到了/Users/liyongsheng/Documents/path-problem/dist路径下，这样就能正确获取到绝对路径标记的资源。同样的，我们也可以使用以./开头的相对路径。 webpack 打包静态资源路径 在webpack打包过程中，使用相应的插件可以将静态资源打包到模块化的代码中。这里重点讲在标签中的src资源。以vue项目为例，如果src写的是以/开头的绝对路径，则不做任何处理，如果是以.,~,@开头，则会被webpack当作模块打包，具体参考vue-cli官方文档。 因此，如果不希望静态资源被打包到模块化代码中，我们可以使用绝对路径来引入资源，如下图所示： 也可以使用相对路径，但是使用相对路径会被webpack打包，编译的时候就会报错 要避免这个问题，可以使用数据绑定 publicPath pablicPath是 webpack 的一个配置项，用于指定资源根目录，默认为/。大多数图片 404 问题都是因为网站部署到二级目录下，比如域名为www.a.com，那么如果网站部署到www.a.com/b/下面，就会导致图片 404 问题，调试可以发现浏览器是从www.a.com下面请求资源，但是实际上应该是www.a.com/b/下面亲求，一般只用修改publicPath为/b/就可以解决，这样浏览器会从www.a.com/b/下面去请求资源。 打包 app 的情况 将 web 项目打包为 app 的时候，一般都是通过 webview 直接从文件系统中加载页面，这里由于没有 web 服务器，绝对路径就会被解析到系统根目录下。因此publicPath需要设置为相对路径publicPath: ''或publicPath: '....