From 3e498ffbea60a4c862cbefe2b501b969ced7cdbb Mon Sep 17 00:00:00 2001 From: haishan <710328466@qq.com> Date: Mon, 23 May 2022 12:17:33 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D(resume):=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=E7=AE=80=E5=8E=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .dumi/layouts/index.tsx | 12 ++++ .dumi/theme/layout.tsx | 32 +++++++++ docs/fea/Q&A/index.md | 31 +++++---- docs/fea/tools/lerna.md | 10 +++ docs/resume/css/base.less | 4 ++ docs/resume/index.tsx | 142 ++++++++++++++++++++++++++++++++------ 6 files changed, 196 insertions(+), 35 deletions(-) create mode 100644 .dumi/layouts/index.tsx create mode 100644 .dumi/theme/layout.tsx diff --git a/.dumi/layouts/index.tsx b/.dumi/layouts/index.tsx new file mode 100644 index 0000000..25e85be --- /dev/null +++ b/.dumi/layouts/index.tsx @@ -0,0 +1,12 @@ +// .dumi/theme/layout.tsx(本地主题) 或 src/layout.tsx(主题包) +import React from 'react'; +import Layout from 'dumi-theme-default/es/layout'; + +export default ({ children, ...props }) => ( + + <> + + {children} + + +); diff --git a/.dumi/theme/layout.tsx b/.dumi/theme/layout.tsx new file mode 100644 index 0000000..11eec89 --- /dev/null +++ b/.dumi/theme/layout.tsx @@ -0,0 +1,32 @@ +// .dumi/theme/layout.tsx(本地主题) 或 src/layout.tsx(主题包) +import React, { useEffect } from 'react'; +import Layout from 'dumi-theme-default/es/layout'; + +export default ({ children, ...props }) => { + const { history } = props; + + useEffect(() => { + const header = document.querySelector('.__dumi-default-navbar') + const cont = document.querySelector('.__dumi-default-layout-content') + const lo = document.querySelector('.__dumi-default-layout') + + if (location.hash === '#/resume' && lo) { + + cont.style.position = 'relative' + cont.style.top = '-64px' + header.style.display = 'none' + } else { + cont.style.position = 'relative' + cont.style.top = '0' + header.style.display = 'flex' + } + },[location.hash]) + + return ( + + <> + {children} + + + ) +}; diff --git a/docs/fea/Q&A/index.md b/docs/fea/Q&A/index.md index b6ee712..656c41a 100644 --- a/docs/fea/Q&A/index.md +++ b/docs/fea/Q&A/index.md @@ -9,36 +9,42 @@ group: # 💊 Q&A -## 通过浏览器打开https后，无法再次打开http链接？ +## 页面弹框之后请求一直失败？ +可能是因为手机插件类似 ADB 将弹框事件拦截了，关闭或加入白名单就好了 + +## 通过浏览器打开 https 后，无法再次打开 http 链接？ 请将下面这串代码删除，删干净一点： + ```javascript ``` - ## 阿里云 oss 上传 - -### 创建bucket +### 创建 bucket ![image.png](https://cdn.nlark.com/yuque/0/2021/png/195884/1614156371487-2e7a495b-c225-4ed4-82a3-ab28f7dfa4e2.png#height=363&id=r7ZCt&margin=%5Bobject%20Object%5D&name=image.png&originHeight=726&originWidth=473&originalType=binary&ratio=1&size=187718&status=done&style=none&width=236.5) + ### 设置跨域规则 ![image.png](https://cdn.nlark.com/yuque/0/2021/png/195884/1614156400297-4528de9b-e249-4f15-bdd1-9ae07bf8c2df.png#height=329&id=Kws6W&margin=%5Bobject%20Object%5D&name=image.png&originHeight=657&originWidth=629&originalType=binary&ratio=1&size=62533&status=done&style=none&width=314.5) -### 创建 RAM 用户 +### 创建 RAM 用户 > 这一步的作用是分担风险，不要直接用主账号去登录 并给该用户分配调用 STS 服务 AssumeRole 接口的权限，这样待会儿后端就能以该用户的身份给前端分配 STS 凭证了： ![image.png](https://cdn.nlark.com/yuque/0/2021/png/195884/1614156480237-912d579e-2e46-4738-996c-991810b0121a.png#height=280&id=GWXB4&margin=%5Bobject%20Object%5D&name=image.png&originHeight=560&originWidth=1456&originalType=binary&ratio=1&size=275868&status=done&style=none&width=728) + ### 创建用户角色 + 该角色即有权限在前端调用 aliyun-oss SDK 上传文件的用户角色，例如我们创建一个只有上传权限的角色，命名为 uploader ![image.png](https://cdn.nlark.com/yuque/0/2021/png/195884/1614156569197-374d1b4d-87ef-4b83-b888-43e585823b57.png#height=314&id=yH483&margin=%5Bobject%20Object%5D&name=image.png&originHeight=628&originWidth=1396&originalType=binary&ratio=1&size=365279&status=done&style=none&width=698) 接下来我们需要给该角色分配权限，可以通过创建一条权限策略并分配给角色，该权限策略里面只包含了上传文件、分片上传相关的权限： ![image.png](https://cdn.nlark.com/yuque/0/2021/png/195884/1614156596778-1a1bd9f9-675d-4de8-ae9a-fe119187a138.png#height=370&id=M1KQd&margin=%5Bobject%20Object%5D&name=image.png&originHeight=740&originWidth=1382&originalType=binary&ratio=1&size=307620&status=done&style=none&width=691) + ```javascript // 策略内容 { @@ -64,27 +70,28 @@ group: ] } ``` + 然后，把该策略赋予 uploader 角色 ![image.png](https://cdn.nlark.com/yuque/0/2021/png/195884/1614156673094-a4029f4e-63c9-4396-b3bc-d632f4056c7a.png#height=445&id=JrO2L&margin=%5Bobject%20Object%5D&name=image.png&originHeight=890&originWidth=1390&originalType=binary&ratio=1&size=295135&status=done&style=none&width=695) - ### node 代码实现 + ```javascript const OSS = require('ali-oss'); const STS = OSS.STS; const sts = new STS({ accessKeyId: process.env.ALIYUN_OSS_RULE_ASSUMER_ACCESS_KEY, - accessKeySecret: process.env.ALIYUN_OSS_RULE_ASSUMER_ACCESS_KEY_SECRET + accessKeySecret: process.env.ALIYUN_OSS_RULE_ASSUMER_ACCESS_KEY_SECRET, }); async function getCredential(req, res, next) { try { const { credentials } = await sts.assumeRole( - 'acs:ram::1582938330607257:role/uploader', // role arn + 'acs:ram::1582938330607257:role/uploader', // role arn null, // policy 15 * 60, // expiration - 'web-client' // session name + 'web-client', // session name ); req.result = credentials; next(); @@ -92,9 +99,9 @@ async function getCredential(req, res, next) { next(err); } } - ``` -### OSS报错大全 + +### OSS 报错大全 1. AccessDeniedError: You have no right to access this object because of bucket acl -> 看下配置的bucket 策略内容对不对 + > 看下配置的 bucket 策略内容对不对 diff --git a/docs/fea/tools/lerna.md b/docs/fea/tools/lerna.md index b2d2198..561783d 100644 --- a/docs/fea/tools/lerna.md +++ b/docs/fea/tools/lerna.md @@ -91,6 +91,16 @@ learna publish | lerna create | 新建 package | | lerna publish | 发布 | +### 🌰 + +```js +lerna exec [--scope ] -- [..args] + +# 举个例子 +lerna exec -- rm -rf node_modules # 删除所有package下的node_modules +lerna exec --scope @yh-imooc-cli-dev/core -- rm -rf node_modules # 碰到scope，说明定位到@yh-imooc-cli-dev/cor包下(注意：--scope后面写的是包名)，然后删除当前子包下的node_modules +``` + ## 官方文档 [http://www.febeacon.com/lerna-docs-zh-cn/](http://www.febeacon.com/lerna-docs-zh-cn/) diff --git a/docs/resume/css/base.less b/docs/resume/css/base.less index f458fde..db63c83 100755 --- a/docs/resume/css/base.less +++ b/docs/resume/css/base.less @@ -32,6 +32,10 @@ text-align: left; color: #d1d1d1; } + a { + cursor: pointer; + float: left; + } } .content { position: relative; diff --git a/docs/resume/index.tsx b/docs/resume/index.tsx index 2f99502..5a36012 100644 --- a/docs/resume/index.tsx +++ b/docs/resume/index.tsx @@ -1,21 +1,16 @@ import React, { useEffect } from 'react'; + import styles from './css/index.less' -export default () => { +export default (props) => { useEffect(() =>{ - const header = document.querySelector('.__dumi-default-navbar') - const cont = document.querySelector('.__dumi-default-layout-content') - - cont.style['position'] = 'relative' - cont.style['top'] = '-64px' - header.style.display = 'none' }, []) return (
-

最后更新时间：2022年05月

+

location.replace('/')} >回首页 最后更新时间：2022年05月

@@ -36,6 +31,7 @@ export default () => {
  • https://j710328466.github.io
  • github.com/j710328466
  • 710328466@qq.com
    • +
  • 极简主义·热爱生活
    • @@ -52,7 +48,7 @@ export default () => {
    2017.10 ~ 2020.03 官网 -

    杭州早稻科技有限公司

    +

    早稻科技

    @@ -61,10 +57,9 @@ export default () => {

    - 项目负责人前端开发 - 负责优化旧版官网，针对之前用户体验差的基础上向领导提出优化引入服务端渲染框架nextJs，使用antd作为官网辅助样式，使用ant Motion作为动画库，并使用Pm2部署在服务器上，该项目属于公司第一个node项目，对于公司前端具有一定的里程碑意义。 + 前端开发 + 负责优化旧版官网，针对之前用户体验差的基础上向领导提出优化引入服务端渲染框架nextJs，使用antd作为官网辅助样式，使用ant Motion作为动画库，并使用Pm2部署在服务器上，该项目属于公司第一个node端搭建项目，对于公司node后端化具有一定的里程碑意义。

    -
    @@ -73,10 +68,10 @@ export default () => {

    - 项目负责人前端开发 - 从最初版本的gulp版本使用Webpack重新搭建脚手架将资源优化到更节约，并引入typescript - 强制规范开发规范，使代码更易读更容易维护，其中开发过的月饼大作战和约会大乱斗 - 两款小游戏使用了大量css样式，趣味性颇受领导好评。 + Owner前端开发 + 从最初版本的gulp版本使用Webpack重新搭建脚手架将资源优化到更节约，后期引入typescript + 强制规范开发规范，使代码更易维护，其中开发过的月饼大作战和约会大乱斗 + 两款小游戏使用了大量css样式，趣味性颇受好评。

    @@ -86,7 +81,7 @@ export default () => {

    - 项目负责人前端开发 + 前端开发 该活动依赖于公司最底层工具库，并服务于活动开发，主要作用是为了统一管理优化在活动开发时使用的多端约定的函数方法，该工具包使用typescript规范开发，并放置于公司私有npm仓库中维护，内容包括但不限于：登录授权、 分享、语音验证验证码登录、获取验证码等等...

    @@ -105,6 +100,110 @@ export default () => {
    +
    +
    +
    + 2020.03 ~ 2021.03 +

    佰钧成科技-天猫精灵事业部

    +
    +
    +
    +
    +

    天猫精灵内测平台 · Umi、reactJs、midway、antd、ts

    +
    +
    +

    + Owner + 负责该平台的bug维护，功能开发，使用的技术为阿里技术栈：cuz（已开源但体验效果不佳），后重构升级为Umi + midway(eggjs前身) +

    +
    +
    +
    +
    +

    天猫精灵安全服务中心 · umi、reactJs、midway、antd、ts

    +
    +
    +

    + 前端开发 + 用户数据采集、用户画像、用户数据申请、内外数据合作评审、数据使用要求规范等业务相关的聚合平台。 +

    +
    +
    +
    +
    +

    天猫精灵售后服务中心 · umi、antd-mobile-v2、midway、ts

    +
    +
    +

    + Owner前端开发 + 属于天猫精灵app端，帮助中心项目，具体满足的需求为：用户售后申请或者是在使用app时问题反馈到运营同学，记录并解决问题。 +

    +
    +
    +
    +
    +

    数字制造服务平台 · nextJs、antd、midway、ts

    +
    +
    +

    + 前端开发 + 将线上的客户需求提出，运营团队评估，结果交付在线上实现流转的最小闭环（属于beta阶段产品） +

    +
    +
    +
    +
    +
    +
    + 2021.03 ~ 2022.02 +

    宇泛智能科技

    +
    +
    +
    +
    +

    蓝色荣耀 · Umi、reactJs、antd、ts、yapi

    +
    +
    +

    + Owner前端开发 + 属于供对接甲方使用的平台、将智慧工地概念应用落地的闭环式解决方案，功能包括：签署合同、工人打卡、安全监控、发放薪资、设备监控... +

    +
    +
    +
    +
    +

    数据可视化大屏 · easyV-UI、reactJs、yapi

    +
    +
    +

    + Owner前端开发 + 杭州湾开发商对接项目，供客户将智慧工地部分系统功能通过可视化图表方式展示在数据大屏上，功能包括：升降机大屏、安全帽、扬尘设备、工人进出场记录、在场人员统计...等 +

    +
    +
    +
    +
    +

    Toucan-UI · Echart、G2/plot、react、ts、dumi、lerna

    +
    +
    +

    + Owner前端开发 + toucan-UI 属于二期数据大屏的自研产物，弥补了一期数据大屏功能上的不完善与可维护性差的缺陷，有三部分组件：meta 元组件、chart 图表组件、bizs 业务组件 构成 +

    +
    +
    +
    +
    +

    UU中心 · electron、antd、Oss、ts、umi

    +
    +
    +

    + 前端开发 + 基于 electron 的桌面端应用，功能包含各种提升前端效能的应用，包括有：OSS 资源上传平台、物料库、波塞冬集成埋点、uniubi-ui、uniubi-lib...等（部分应用属于推广阶段） +

    +
    +
    +
    @@ -117,7 +216,7 @@ export default () => {

    • - 掌握Web前端开发基本技能，熟悉W3C标准、HTML、CSS、UI重构、页面布局，重视页面交互与用户体验。 + 熟悉JavaScript、HTML、CSS开发规范、UI重构、页面布局，重视页面交互与用户体验。

    • 对JavaScript、各类UI组件库、JS类库、模板引擎、MV*框架、工程化工具等有着较熟练的实践和较深刻的感悟。 @@ -131,9 +230,6 @@ export default () => {

    • 熟练使用Git进行版本控制和代码托管、Markdown进行文档编写，了解项目常规开发流程、开发调试技巧、发布部署步骤，掌握类Unix服务器基本运维能力。

      • -

    • - 以极简主义作为人生信仰，喜欢美好的事物和创造美好的事物，对新潮的事物和技术充满好奇，热爱学习，热爱生活，乐于和他人沟通与交流。 -

    @@ -151,7 +247,7 @@ export default () => {

    - 作为 nicecoder 项目发起人，该项目包含各个技术栈的工具库，为帮助他人提高工作效率，减少重复工作，目前成熟的工具有： + nicecoder 项目发起维护人，该项目包含各个技术栈的工具库，内容正在不断完善中，旨在提高工作效率，减少重复工作，目前成熟的工具有： @nicecode/changelog@nicecode/lint@nicecode/commit@nicecode/tools...等

    @@ -174,7 +270,7 @@ export default () => {

    - 之前觉得websocket挺有意思，就想试着玩一下，所以就做了这个项目，它前端使用了Vue全家桶开发，muse-Ui作为UI框架，axios作为接口请求工具，后端使用了socket.io库开发。 + Vue全家桶开发，muse-Ui作为UI框架，axios作为接口请求工具，后端使用了socket.io库搭配 express 开发。