前端
张景源
这个作者很懒,什么都没留下…
展开
-
使用 whistle 在 macOS 上进行抓包
使用 whistle 在 macOS 上进行抓包原创 2023-02-16 19:31:27 · 1153 阅读 · 1 评论 -
微信小程序 FileSystemManager.rmdir 安卓兼容性问题
微信小程序 FileSystemManager.rmdir 安卓兼容性问题原创 2022-10-01 00:00:00 · 750 阅读 · 0 评论 -
JS Array 的 map() 方法和 await 一起使用
在对数组进行逐个异步操作的时候,想使用 await 来获取操作后的数组,尝试了如下的写法:const resArr = await arr.map(async (item)=>{ const resItem = await query(item) // 异步操作 return resItem})这样的写法是不正确的,因为 Array.prototype.map() 不会返回一个 Promise。可以采用如下的写法const promiseArr = arr.map((item)=>原创 2022-04-28 22:12:09 · 1259 阅读 · 0 评论 -
前端使用 UserAgent 判断是否是移动端
直接上代码function isUserMobile() { const ua = navigator.userAgent.toLowerCase(); return /mobile|android|iphone|ipod|phone|ipad/i.test(ua);}原创 2022-03-16 23:28:29 · 2241 阅读 · 0 评论 -
npm install 报错 node_modules 中 no such file or directory 的一种可能原因
在 npm install 安装依赖时,始终出现node_modules 中 no such file or directory,经过切换 node 版本、删除重新 install 等操作后,不能解决问题。经过排查,发现是 npm workspaces 配置出现问题。在 npm 7.x 以上版本中,npm install 时会检查 package.json 中的’workspaces’字段,并将其中的子项目链接到 node_modules 中,相当于自动的 npm link。此时,若子项目未预先编译,则会原创 2022-01-26 11:40:24 · 12426 阅读 · 3 评论 -
npm 将全局安装的包安装在哪里?
使用npm root -g命令查看 npm 全局包安装的地址例如,在mac上使用 nvm 时,npm 全局包的安装地址为:➜ ~ npm root -g/Users/you/.nvm/versions/node/v14.18.3/lib/node_modules原创 2022-01-26 10:17:14 · 2761 阅读 · 0 评论 -
前端跨域问题
什么是跨域问题?跨域问题,即浏览器报 Error: Access to XMLHttpRequest at ‘http://example1.com’ from origin ‘http://example2.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 这个错误。这是因为:处于安全原因,浏览器会限制由脚本发起的原创 2021-10-08 04:25:24 · 312 阅读 · 0 评论 -
使用 appendChild 添加 SVG 元素不生效
在使用 SVG 时,需要使用 appendChild 来添加元素。但是如下的写法是不生效的:let newElement = document.createElement('rect');newElement.setAttribute('fill','orange');newElement.setAttribute('width','200');newElement.setAttribute('height','200');document.getElementById('svg-drawing原创 2021-07-23 11:33:13 · 1349 阅读 · 1 评论 -
在 Next 页面中添加 meta 信息
Next.js 暴露了一个内置组件 head,用于将 HTML 标签添加到页面的 head 中,可以借用此添加 meta 信息。例如:import Head from 'next/head'function IndexPage() { return ( <div> <Head> <title>My page title</title> <meta name="viewport" conten原创 2021-05-12 14:50:58 · 1969 阅读 · 0 评论 -
2021 前端校招面试知识点(八股文)整理
1. JavaScript基本数据类型 (7种)this 的指向 (new, 隐式绑定, 显式绑定)Function 的 call, apply, bind 方法Promise, eventloop, 宏任务和微任务闭包 (概念, 用途, 手写)原型链继承 (extends, 原型链继承, 构造函数继承, 组合继承, 寄生组合继承)深拷贝和浅拷贝事件冒泡/捕获, 事件委托, 阻止冒泡, 哪些事件不能冒泡sort() 的复杂度2. 浏览器回流和重绘http 缓存, 协商缓存c原创 2021-04-12 14:06:55 · 12182 阅读 · 0 评论 -
[Mapbox v2] y is not defined / _createClass is not defined
在 React 或 Vue 使用 Mapbox GL JS v2 时出现了如下的错误:这是 Babel 的转译所导致的(Github 中的 Issue:Uncaught ReferenceError: _createClass is not defined (after transpiling with Babel))可以通过设置 webpack , 用 ! 来禁用所有 loaders 来避免,即,在 import 时在 mapbox-gl 前加一个 ‘!’(用上一行的 // eslint-d原创 2021-03-24 18:13:25 · 1367 阅读 · 1 评论 -
Python Flask 后端动态生成 csv 文件并返回
# 测试数据data = [ ['Jack','jack@abc.com'], ['Ben','ben@abc.com'], ['jerry','jerry@abc.com'] ]@app.route('/api/exportEmails', methods=['GET'])def exportEmails(): # 定义一个生成器 (generate),逐行生成,实现流式传输 def generate(): # 用 StringIO 在内存中写,不会生成实际文件原创 2021-01-29 12:10:19 · 3005 阅读 · 0 评论 -
Vue 报错 Unexpected side effect in “...“ computed property
Vue 的 计算属性 (computed) 中应当仅包含用于返回值的计算,不应该包含 DOM操作,修改外部变量,异步操作 等。这些操作应该在 侦听器 (watch) 中实现原创 2021-01-27 11:28:46 · 19377 阅读 · 3 评论 -
nginx: 413 Request Entity Too Large
Request 的体积超过了 Nginx 的限制在 nginx.conf 中的 http{} 中添加(或修改)client_max_body_size 10m;设置 request 的最大体积为 10m (或根据需要设置)参考文档 http://nginx.org/en/docs/http/ngx_http_core_module.html#client_max_body_size...原创 2021-01-21 16:13:06 · 147 阅读 · 0 评论 -
React 中实现滚轮触发的横向滚动
在要滚动的组件上添加 onWheel事件回调函数yWheel <div ref={this.container} className={style.container} onWheel={this.yWheel}> {this.listDom()} </div>定义yWheel yWheel(e) { e.currentTarget.scrollLeft += e.deltaY; }...原创 2021-01-19 15:25:32 · 1631 阅读 · 0 评论 -
Axios 取消前一次请求
在对一些按钮点击或者输入事件绑定API请求的时候,当点击、输入过快时,可能出现后一次请求会比前一次请求先到达的情况,导致页面显示的信息没有更新到最后一个请求的结果。对于这种情况,Axios 提供了 cancel token,我们可以用它来实现:在发送后一个请求的时候,终止前一个请求的回调。Axios 的 cancel token 文档代码如下:import axios from 'axios'const CancelToken = axios.CancelToken;let cancel =原创 2021-01-18 16:36:42 · 2625 阅读 · 0 评论 -
v-charts 报错: Cannot read property ‘scale‘ of undefined
是 echarts 的版本问题,可以npm remove echarts再指定安装 echarts 4.9 版本npm install echarts@4.9.0即可解决问题原创 2021-01-11 15:56:48 · 879 阅读 · 1 评论 -
Canvas 获取点击事件的相对位置
function handleClick(e){ myCanvas = document.getElementById("myCanvas") const localXY = { x: e.clientX - myCanvas.getBoundingClientRect().left y: e.clientY - myCanvas.getBoundingClientRect().top }}原创 2021-01-07 11:59:43 · 1385 阅读 · 0 评论 -
Vue CLI 的 env 文件中定义的环境变量不生效
自定义的变量必须以 VUE_APP_ 开头官方文档:https://cli.vuejs.org/zh/guide/mode-and-env.html#环境变量原创 2020-12-30 15:41:36 · 6341 阅读 · 1 评论 -
Python 后端 Flask 返回静态文件
后端from flask import Flaskfrom flask import send_from_directoryapp = Flask(__name__)app.run(debug=False)#......@app.route('/getLogFile', methods=['GET'])def getLogFile(): try: return send_from_directory('','log.txt') else:原创 2020-12-29 10:15:17 · 7451 阅读 · 0 评论 -
向 Vuex 的 Actions 中的方法添加回调
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。在 Vuex 中,我们会使用 Actions 进行一些异步操作,例如 API 请求。在许多情况下,我们需要对这样的操作添加回调,在此,我以登录提示为例介绍三种方法:第一种(不推荐)App.vuemethods: { ...mapActions([ 'login' ]), logSuccess(){ cons原创 2020-12-23 11:46:27 · 2132 阅读 · 0 评论 -
常用的前端地图框架(WebGIS框架)
1. LeafletLeaflet 是最著名的前端地图可视化库,它开源、体积小、结构清晰、简单易用。2. Mapbox GL JSMapbox GL JS 是目前最新潮的前端地图库,它的矢量压缩、动态样式和三维性能令人印象深刻。它本身是开源的,但一般依赖于Mapbox公司提供的底图服务。3. ArcGIS API for JSArcGIS API for JS 是较为学院派的前端地图库,它是ArcGIS开发套件中的一部分,和桌面端和服务器端ArcGIS软件有较好的协作。它不开源且收费不低,在学术场原创 2020-11-20 18:59:33 · 21348 阅读 · 4 评论 -
在 React 项目中使用 Mapbox GL JS
Mapbox GL JS是有着出色显示效果的前端地图框架。它的相关信息可以在 Mapbox GL JS 英文文档 、Mapbox GL JS 中文文档 、Mapbox GL JS 的 Github 页面 中找到。需要注意的是,Mapbox GL JS的前端代码是开源的,但它一般依赖Mapbox的后端服务,这个服务是有免费限额的。所以在使用 Mapbox GL JS 之前我们一般需要注册 Mapbox 账号并在 账户页面 获得一个 token,这个 token 是一个 pk.开头的字符串。本文主要介绍如原创 2020-11-20 14:50:54 · 3359 阅读 · 0 评论 -
firefox 火狐浏览器 跨域设置
在用开发Web应用时,常常需要跨域请求资源,这就需要解除浏览器的跨域限制。否则会报已拦截跨源请求:同源策略禁止读取位于 ..... 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。这样的错误。对于Chrome浏览器,设置跨域很容易。例如:https://www.cnblogs.com/shihaiming/p/10984394.html 但对于firefox并不容易,许多人介绍了设置 security.fileuri.strict_原创 2020-09-29 16:15:04 · 10804 阅读 · 0 评论 -
Element Table 使用后端排序写法
html中: <el-table :data="tableData" @sort-change="sortChange" > <el-table-column prop="date" label="日期" sortable="custom" width="180"> </el-table-column> </el-table>motheds中:methods:原创 2020-09-16 13:50:07 · 1013 阅读 · 0 评论