无星的Egg之旅（一）——跨域

发表于 2020-07-13 更新于 2024-04-15 分类于 node ， egg 阅读次数：
本文字数： 1.9k 阅读时长 ≈ 2 分钟

先说点老生常谈的问题

啥是跨域

1.同源策略

要了解跨域，先要说说同源策略。同源策略是由 Netscape 公司提出的一个著名的安全策略，所有支持 JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当页面在执行一个脚本时会检查访问的资源是否同源，如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

同源策略一般又分为以下两种：

DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。XmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。

2.什么是跨域？

跨域，指的是从一个域名去请求另外一个域名的资源。即跨域名请求！跨域时，浏览器不能执行其他域名网站的脚本，是由浏览器的同源策略造成的，是浏览器施加的安全限制。

跨域的严格一点来说就是只要协议，域名，端口有任何一个的不同，就被当作是跨域。

好了，我们得出结论：1.跨域只在浏览器中会出现2.协议，域名，端口任一不同就会出现跨域

阅读全文 »

无星的前端之旅（七）—— PC端Web错误日志收集1

发表于 2020-07-01 更新于 2024-04-15 分类于前端阅读次数：
本文字数： 3.4k 阅读时长 ≈ 3 分钟

背景

线上报错，啥也不知道，无法复现束手无策，客户开喷，研发背锅

这种事情，u1s1，大家都遇到过吧

解决方式就是有个日志收集上报的地方去查，查什么时候，什么时间，什么环境，出了什么错误，在某些程度能不那么被动

选型

是不是以为我是要说用哪家，实际上是准备自己写。。

免费的不放心，付费的买不起
但这里还是列出几家
fundebug
sentry

怎么做？

1.了解需要采集的指标
2.收集的方式
3.上报的方式
4.上报的时机
5.如何解析
6.告警

1.了解需要采集的数据指标

阅读全文 »

无星的前端之旅（六）—— Vue引入Storybook（一）

发表于 2020-06-07 更新于 2024-04-15 阅读次数：
本文字数： 1.6k 阅读时长 ≈ 1 分钟

为什么要引入

一开始我想的是，可能多人多项目开发，把组件展示出来，避免重复造轮子

但后来想想，好像除了展示，没什么其他用处

两个项目如果要用同一个样式的组件，如果没有单独抽出组件库，还是得复制粘贴，用处不大

只能说做组件库的同学用这个比较好用。

还有一个自动化测试的好处（不过我从来没写过测试，暂时还无法体会这个好处）

还有其他用处的话，麻烦老哥们留言区告诉我

如何引入

1 2	cd 项目目录下 npx -p @storybook/cli sb init

会拉一些依赖，并新建两个文件夹

阅读全文 »

无星的前端之旅（五）——小程序批量发布如何压缩打包时间

发表于 2020-05-09 更新于 2024-04-15 分类于前端阅读次数：
本文字数： 2.2k 阅读时长 ≈ 2 分钟

其实标题起的有点大，主要是使用shell中的&和wait这两个命令。

运维大佬不要嘲笑。

无星的前端之旅（四）——小程序持续集成前面介绍了背景，我们有一套代码要发40多个客户的小程序主体。

在Jenkins中加shell去完成上传开发版这个操作。但是需要进行多参数化配置，换句话说就是40多家客户我们要打40多个包，分别上传。

shell的执行方式是，前面执行完了，我们才能执行下一个命令。

因此如果我们打一个包并上传的时间是1分钟，那40家就是40分钟。这谁顶得住啊。

所以需要考虑如何压缩这个打包上传时间，能不能同时打包，同时上传。

原本的shell如下，变量我就写中文代替了

function npminstall(){
  echo "拉依赖"
  cd 代码文件夹下
  npm install
}
function buildwx(){
  echo "执行构建"
  # echo '环境:'$1
  # echo '文件名:'$2
  # echo '客户名:'$3
  npx cross-env 环境=$1 文件名=$2 客户名=$3 node build/build.js wx
}
function upload(){
  echo "执行上传"
  # echo '文件名:'$1
  # echo 'appid:'$2
  # echo 'version:'$3
  npx miniprogram-ci upload --pp  ./dist/${1}/wx --pkp ./privatekey/private.${2}.key --appid ${2} --uv ${3} -r 1 --enable-es6 true
}
#------------------待构建配置------------------
configs=(
"xxx客户;xxx环境;xxx文件名;xxxxappid"
"xxx客户;xxx环境;xxx文件名;xxxxappid"
)
##读取version变量
version=‘xxx文件读取’
#------------------执行批量构建------------------
npminstall
for xxx in ${configs[@]};do 
客户名=`echo ${xxx} | awk -F ";" '{print $1}'`
环境=`echo ${xxx} | awk -F ";" '{print $2}'`
文件名=`echo ${xxx} | awk -F ";" '{print $3}'`
appid=`echo ${xxx} | awk -F ";" '{print $4}'`
buildwx ${环境} ${文件名} ${客户名}
upload ${文件名} ${appid} ${version}
echo "$客户名 上传完毕"
done