intern-study
intern-study copied to clipboard
byte-fe
实习生互助学习
## Docker基本概念 Docker是对Linux容器的一种封装，提供简单易用的容器使用接口。不是对操作系统的模拟，而是对进程的隔离。Docker相比虚拟机具有启动快，占用资源少，体积少的优点。  - 镜像是一个特殊的文件系统，提供容器运行时所需的程序、库、资源、配置文件及运行时的参数，它是分层存储的架构，构建镜像时，会一层层构建，前一层是后一层的基础，每一层构建完成后就不会再发生改变，这样有利于镜像的复用。 - 通过 ` docker run image ` ，可以生成一个容器，容器在本质上是一个进程，但是每个容器都有自己的命名空间，容器之间是隔离的。容器运行时，以镜像为基础层，在其上创建容器存储层，这个容器存储层的生命周期和容器一样，容器消亡，容器存储层也会消亡，除非使用 ` docker commit ` 来生成一个新的镜像 - Registry用来管理仓库，一个Docker Registry里有多个仓库，每个仓库里有多个tag，每个tag对应一个image文件。tag就好比是一个项目的版本。 - volume用来做数据持久化 ## Docker网络模式 - __host模式__ Docker使用Linux的Namespaces技术来进行资源隔离，其中Network Namespace用来隔离网络。通常一个Docker容器会分配一个独立的Network...
## 一分钟进入线上cms-fe调试 >当线上出现bug,真的是手忙脚乱啊。所以只能线上调试fe（ps:下文只是口译潘导师操作流程）,主要步骤是杀掉线上进程，用node --inspect 启动一个调试的node的进程。然后在本地浏览器进行调试 1. 进入线上机器 2. 找到启动脚本 ``` 1 node start ``` 3. 改完后的启动脚本如下： ``` 1 # fe start 2 node --inspect=0.0.0.0:8889 node start ``` >0.0.0.0:8889端口其实不固定，不占用就可以。 4.杀点线上正在运行的进程，服务器会按照修改后的bootstrap进行重启，故只要杀掉进程即可 -...
## 设计图  ## 设计源文件(sketch) [wheel_draw.zip](https://github.com/byte-fe/intern-study/files/2003615/wheel_draw.zip) ## 需求描述 1. 基于 [fe](https://code.byted.org/fe/fe) 完成前后端开发, 最终部署在自己测试机 (如果有的话 😄) 2. 服务端可以配置奖项和权重(不考虑奖池) > `weight: 1` 意味着 1/100 几率抽中 ```js [{name: "10元话费", weight: 1}, {name: "50积分",...
## 记录平时看的前端小小知识点 ```js Object.assign([1, 2, 3], [4, 5]) // [4, 5, 3] 数组覆盖 ``` ```js [].every(item=>item>2)//true . 空数组直接true ``` ``` super关键字表示原型对象时，只能用在对象的方法之中，用在其他地方都会报错。 ``` ``` pm2 start --name=cms npm -- run dev...
## React.createContext > 功能：Context 旨在共享一个组件树内可被视为 “全局” 的数据，例如当前经过身份验证的用户，主题或首选语言等。(ps:树中的许多组件以及不同的嵌套级别可以访问相同的数据。) ### 使用 - 允许您使用 this.context 使用该 Context 类型 的最近的当前值。 您可以在任何生命周期方法中引用它，包括 render 函数。 ```js //.context.js文件中 import React, { Component } from 'react' const tryContext...
# 背景 1. 数年生产环境实践, redux 体系逐渐退出历史舞台, 对于 react 应用来说是时候反思更佳的状态管理实践了 2. react 团队近期推动创新了很多新的 patterns, 从 [Render Props ](https://reactjs.org/docs/render-props.html) / [HOC](https://reactjs.org/docs/higher-order-components.html) 到 [new Context](https://reactjs.org/docs/context.html) / [Hooks](https://reactjs.org/docs/hooks-intro.html) 3. 团队技术积累重心放在 react 方向 > 希望同学们持续学习,...
### 2B的报表组件 >主要使用 [frappe-chart 组件](https://frappe.io/charts)，对其做了一个简单封装。主要提供以下几个功能。 1. 图形的放大 2. 图片的导出,可导出svg格式和导出excel表格（自己封装的一个组件） 3. 插槽添加扩展按钮 4. 显示最大值 最小值 平均值 5. 对单点数据错误做了处理 6. byte上的包解决import 错误和 stacked bar 在0值的ui问题 #### 主要属性 ```js chartData: {} chartConfig:{} ```...
## 需求描述 这里定义为获取终端 "用户" ip, 考虑到实际场景需要 bypass proxy / LB ## 基本要求 - 以 fastify 的`plugin` 形式产出组件 - 编写 unit test，实现代码 100% 全覆盖 > 单元测试的编写参考：@fe/byted-consul ## 思路 1. 直连或透明代理由 TCP...
### session实现登录与登出的简单实现 >登录用户的信息存与mysql,mysql上的操作基于objection做了一下封装，把对应的数据库表操作方法挂在fastify的sever实列上,用户是否已经登录通过cookie实现，只是cookie上存储的只是用户信息的一个映射key,也就是sessionId,通过sessionId作索引，在mysql上匹配到对应的用户信息。 #### 实现步骤 1. 建两个表user表和session表：分别存用户信息、sessionId与user的映射关系。 2. 用户访问网站时候校验cookie中的sessionId是否存在有效，有效则把对应的用户信息挂在requsert返回，如果无效或是不存在，不作处理。 3. 如果有效，用户可以在nuxt的中间间，middleware中的req拿到fastify挂上去的用户信息。 4.如果无效，用户要进行登录操作，这时候发请求校验user表，是否正确，正确就开始生成sessionId，存在用户浏览器的cookie上。 5 注销操作，清除session会话，以及session中的记录。 #### 简单代码如下： ```js 'use strict' //用户名要唯一 const fp = require('fastify-plugin') const uid = require('uid-safe').sync const sessionPlugin...
## promise的错误捕获 _起源于一个问题：promise的错误能不能被外层的try catch捕获？_ ##### 主要关键点： * try catch是同步捕获错误的 * promise异步执行，microwork的一种 * await 可以捕获错误 * promise自带的catch方法 * await与try catch ##### 问题的导入： ```js try{ Promoise.reject('我就是要报错！') }catch(err){console.log(err)} try{ await Promoise.reject('我就是要报错！') }catch(err){console.log(err)} ```...