QQCR

Hellooooooo! 前端


  • 首页

  • 分类

  • 关于

  • 标签

了解微前端

发表于 2021-02-15 | 分类于 coding

微前端:将微服务的思想拓展到了前端开发,是一种实现了多个团队独立开发,共同构建现代化web应用(Modern Web App)的策略和方法。

什么是微前端

当前流行的趋势是构建基于微服务架构的功能强大的浏览器应用程序(又叫单页应用程序),这样的单体应用在一个相对长的时间跨度下,前端层面会不断增长,逐渐变得难以维护,成为巨石应用(Frontend Monolith)。
微前端背后的思想是将一个网站或者web应用看成是被多个独立团队维护的功能的集合(composition of features)。每个团队都有他们自己关心的或者专注的业务或者任务领域。每个团队是跨职能的,端对端的实现它的功能(feature),从数据库到用户界面。

Monolithic Frontends
image

Organisation in Verticals
image

阅读全文 »

redis

发表于 2021-02-07 | 分类于 coding

Redis基本概念

最基本

Redis(Remote Dictionary Server远程数据服务),内存高速缓存数据库。

  • 有客户端和服务端,一般说的是服务端
  • 基于内存
  • 非关系型数据库
  • 支持主从同步
  • 持久化
  • 高并发读写
  • 单进程单线程模型

应用场景

  • 数据缓存,当访问数据库接口比较慢时,将数据通过Redis进行缓存,这样下次获取数据就不需要再次进行SQL操作,而是直接从缓存中读取。(高频读,低频写)
  • 队列:push和pop
  • 数据存储:依赖硬盘的持久化机制

Redis数据类型

对key的操作

1
2
3
4
exists key # 测试指定key是否存在
type key # 返回给定的value的类型
del key # 删除key
persist key # 设置永不过期
阅读全文 »

sequelize时间相关操作

发表于 2021-02-04 | 分类于 coding

做毕设学了点东西系列

sequelize是一个非常有用的ORM框架,以对象的形式访问数据库表,基于Promise,实现了多种数据库的多种特性…

这篇文章主要记录一下这次新使用的一些时间相关的查询和设置

自动更新时间

举个例子,在mysql数据库里,可以给某个属性添加默认CURRENT_TIMESTAMP,这样的话就可以在添加或者更新的时候自动写入这个属性。当使用sequelize定义数据表模型时,首先设置timestamps属性为true时候,才会自动更新时间戳。Sequelize创建和更新的时间戳字段默认分别是createdAt和updatedAt,这两个字段可以自定义,下面是一个数据表模型的完整例子。

阅读全文 »

分布式:MapReduce

发表于 2021-02-04 | 分类于 coding

最近在看MIT的分布式课程Distributed Systems Engineering,把老师讲的一些东西记下来~

背景

在很大的数据集上处理耗时很久的计算

比如数千个应用程序构成的搜索索引的情况,有了MR之后,程序员只需要定义Map和Reduce函数,而不需要考虑分布式的实现细节,MR来负责具体的实现,比如怎么在很多机器上运行,对外只暴露接口。

整体介绍

工作流程

Example: word count
image
输入被分为M个文件,每个文件都调用Map()方法,产生key-value集合(Intermediate data),对于每一个特定的key,MR收集所有情况,传给Reduce()方法,最后输出结果。
上图整个称为一个job,一个job由很多Map Task和很多Reduce Task构成。

伪代码:

1
2
3
4
5
6
Map(k, v)
split v into words
for each word w
emit(w, "1")
Reduce(k, v)
emit(len(v))
阅读全文 »

Docker基本概念

发表于 2021-02-02 | 分类于 coding

Docker是一个公司名称,它的产品也叫Docker。一般来说,当提到Docker的时候,指的是容器化技术,用来创建和使用linux容器,借助Docker,可以将这些容器当作轻巧灵活的虚拟机来使用,实现对容器的创建、部署和复制。
第一次接触Docker时的一些概念好像过了好久才慢慢理解,so现在拿出来整理一遍。

Docker的原理

Docker使用了linux内核和内核功能来分隔进程,使得各个进程相互独立运行,各个系统在独自的进程来运行,保证了独立性和安全性。

相比传统的linux容器

传统的linux容器使用init系统来管理多进程,所有应用都作为一个整体运行,但Docker让应用各自独立运行进程。如下图:
image

阅读全文 »

使用React Hook

发表于 2021-02-01 | 分类于 coding

做毕设学了点东西系列

好久没写React了,上次写React还在坚持类组件的写法,有点既然还能用就安于现状的感觉。今天本来只是想把之前一周速成的前端代码和后端联调通,但是发现类组件果然还是有缺点,生命周期和state改来改去的,想想还是埋头重读React的文档改成函数式组件吧。记录了一下最基本的操作。

函数式组件和Hook

一个函数就是一个组件,这个函数组件没有生命周期函数,没有this和内部状态(state)。而Hook就是为了我们在使用函数式组件的时候,仍然可以使用类组件中的state或者其他的特性。

写一个函数式组件

1
2
3
4
5
6
const TaskDetail = () => {
return (
<div>hello!</div>
); // return的就是在类组件中render的内容
}
export default TaskDetail;

使用state hook

1
2
3
import React, { useState } from 'react';
// 定义一个叫taskDetail的变量,初始值设置为空对象,在后面的代码中就可以使用setTaskDetail来更新这个state
const [taskDetail, setTaskDetail] = useState({});
阅读全文 »

koa + mysql做一个后端系统

发表于 2021-01-31 | 分类于 coding

做毕设学了点东西系列

之前已经用antdpro做了前端,就直接把后端部分在前端目录下加了一个server文件夹,npm包也直接安装在了目录下,省去了很多步骤(偷懒了

koa中间件

先来学习一下koa的一些理论
koa的一个中间件是这样定义的

1
2
3
4
5
async function middleware(ctx, next) {
// xxx
await next();
// xxx
}

第一个参数是Koa Context,是所有的中间件和请求处理函数传递的内容,封装了request和response,可以通过ctx.request和ctx.response获取,常用属性如下:

1
2
3
ctx.url // 相当于ctx.request.url
ctx.body // ctx.response.body
ctx.status // ctx.response.status

第二个参数是next函数,用来把控制权交给下一个中间件。与Express不同的是,这里的next函数返回的是一个Promise,这个Promise完成后,就会去执行next函数后面的内容,也就是将中间件的执行拆分为两个阶段(next前面和next后面)

文件结构

├── server
│ ├── config // 配置
│ ├── routes // 定义路由
│ ├── controllers // 逻辑处理
│ ├── service // 数据库接口方法
│ ├──models // 数据库表结构
│ ├──utils // 公用方法
│ └── app.js // 入口文件
…

阅读全文 »

jwt认证实践

发表于 2021-01-29 | 分类于 coding

做毕设学了点东西系列

什么是jwt

介绍

jwt全称json web token,是一种流行的跨域认证方案,传统常用的用户认证cookie + session,现在的jwt是服务端不管状态了,把所有数据放在客户端处理,请求的时候带一个。这样服务器就变成了无状态的。
服务器认证完后,发一个json对象给用户,比如{name:'xxx', id; 001, exp: 2020-10-11 07:00},当然是经过加密的数据,之后用户通信的时候再把这个json对象发给服务端。

数据结构

jwt的数据结构有三个部分,header.payload.signature,也就是头部.负载.签名,比如下面这一长串

1
2
3
eyJhbGciOiJIUzI1NsIsInR5cCI6IkpXVCJ9.
eyJpZCI6MSwiaWF0IjoxNjExOTEzOTYxfQ.
Eb5Dt-ICNoq0bECBakI4UC2NdB8ooQXYkfwZ5--fPY4

  • header: 描述jwt的元数据,是一个json对象,包括签名的算法和令牌(token)的类型(JWT),使用base64url算法转成字符串
  • payload:存放实际传递的数据,是一个json对象,包括jwt提供的7个可选字段和用户自己加的字段,使用base64url算法转成字符串
  • signature:对前两部分的签名,防止数据篡改,使用header里面的签名算法,按照下面的公式计算签名
阅读全文 »

nodejs

发表于 2020-09-22 | 分类于 coding

什么是Node.js

Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

与JavaScript的区别

  • 基于异步I/O接口,读写文件、网络请求等
  • 提供require这种CommonJs的模块化
  • 提供了C++的API可以与底层系统交互

可以干什么?

  • Web服务端:Web Server、爬虫
  • CLI命令行脚本:webpack
  • GUI客户端软件:VSCode、网易云音乐
  • IoT,图像处理,实时通讯,加密货币…
阅读全文 »

算法:动态规划

发表于 2020-09-18 | 分类于 coding

动态规划

核心

  • 记住已经解决过的子问题的解

原理

  • 最优子结构:一个问题的解结构包含其子问题的最优解,用子问题的最优解来构造原问题的最优解
  • 重叠子问题:递归算法反复求解相同的子问题,使用数组来保存子问题的解

求解

  • 找到状态转移方程,进行自底向上的求解
  • 步骤:1 定义子问题 2 实现要反复执行来解决子问题的部分 3 识别并求解出基线条件
阅读全文 »
12…5
QinChaoru

QinChaoru

专注一下

42 日志
5 分类
18 标签
Github E-Mail
© 2021 QinChaoru
由 Hexo 强力驱动
|
主题 — NexT.Pisces v5.1.2