deligent-ant
deligent-ant
尝试按照官方demo 配置 ```js module.exports = { source: './posts', output: './_site', // theme: './_theme', theme: 'bisheng-theme-one', port: 8000, } ``` 但启动起来是空白页面，/post文件下有hello-world.md 文件，但没自动生成common.js 这体验也太差了。
## 一分钟进入线上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进行重启，故只要杀掉进程即可 -...
## 记录平时看的前端小小知识点 ```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...
### 2B的报表组件 >主要使用 [frappe-chart 组件](https://frappe.io/charts)，对其做了一个简单封装。主要提供以下几个功能。 1. 图形的放大 2. 图片的导出,可导出svg格式和导出excel表格（自己封装的一个组件） 3. 插槽添加扩展按钮 4. 显示最大值 最小值 平均值 5. 对单点数据错误做了处理 6. byte上的包解决import 错误和 stacked bar 在0值的ui问题 #### 主要属性 ```js chartData: {} chartConfig:{} ```...
### 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)} ```...
## sso单点登录流程 #### 具体源码没有详细去看，走了个大概的流程。并找了一个图片来描述一下。 ##### 背景关键字：http是无状态协议 会话机制 cookie与session web多系统 **背景关键字，不做介绍，只说sso。** ``` 往常一个网站就要登陆一次，同一用户再次登陆另一个网站还得再次登陆，也就是不用的网站在保留 session和cookie是各自独立的。既做session的创立也做用户登陆的校验。但如果这几个网站是同一个登 陆呢，比如公司好几个网站，你只要登陆一次sso认证，就可以访问各个页面。所以sso就是为了实现web 多系统下的登陆认证，多系统都接入同一个的sso认证，用户只要登陆过一次，就可以访问接入这个认证 的任何一个系统，不用重复登陆认证。 ``` ##### sso流程  1. 用户访问系统1的受保护资源，系统1发现用户未登录，跳转至sso认证中心，并将自己的地址作为参数 2. sso认证中心发现用户未登录，将用户引导至登录页面 3. 用户输入用户名密码提交登录申请 4. sso认证中心校验用户信息，创建用户与sso认证中心之间的会话，称为全局会话，同时创建授权令牌 5. sso认证中心带着令牌跳转会最初的请求地址（系统1）...
## 简单过一眼react文档，记录我留意的点。 ``` 这是从官方文档中记录，个人觉得比较需要留点心眼的知识，并不是为了介绍react。 所以不会介绍reacts生命周期、setState等知识。 ``` **** 1. React 可以将多个setState() 调用合并成一个调用来提高性能。 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为. ```html ``` 你必须谨慎对待 JSX 回调函数中的 this，类的方法默认是不会绑定 this 的: // This binding is necessary to make...