Rent Project

大道无形，上下求索

已于 2022-05-01 17:39:58 修改

阅读量368

点赞数

分类专栏：记录文章标签： reactjs java spring boot spring cloud java-ee

于 2022-04-07 20:36:15 首次发布

本文链接：https://blog.csdn.net/weixin_47371588/article/details/124024631

版权

记录专栏收录该内容

46 篇文章 0 订阅

订阅专栏

Rent Project

ES6 和 ReactJS

var 出循环后有效（全局变量）
let 出循环后无效（局部变量）
const 声明常量

字符串新API

includes()
startsWith()
endsWith()

解构表达式

let arr = [1, 2, 3]
const [x, y, z] = arr

函数优化

function add(a, b = 3) {
return a+b;
}

箭头函数

var print = obj => console.log(obj) （类似于java的lambda表达式）
var print = (a, b) => { return a + b };
var print = () => { };

map和reduce

let arr = [‘1’,‘2’,‘3’];
let newArr = arr.map(s => parseInt(s)); //[1,2,3]
const arr = [1, 20, -5, 3]
let result = arr.reduce((a, b) => {return a + b}); //19

扩展运算符

数组前加 …

promise
promise是一个对象，从它可以获取异步操作的消息。

set

let set = new Set();
set.add();
set.delete();
set.has();
set.clear();
set.size;
set.forEach(value => { console.log(value) });
const map = new Map([[‘1’, ‘2’], [‘1’, ‘2’]]);
map.set(key, value);
函数同set

Generate函数（迭代）

function* hello(){
yield “hello”;
yield “world”;
return “qq”;
};
let h = hello();
h.next();
h.next();
h.next();
或for(let obj of h){
console.log(obj);
}

转码器

Babel 可将ES6转为ES5
Traceur 可将ES6转为ES5
UmiJS
安装UmiJS：
1.官网
2.yarn create @umijs/umi-app报错后，1.更改create-umi-app.cmd文件（删除前面符号），2.将这个文件的bin加入环境变量，3.执行create-umi-app（在myapp下）

修饰器
需要转码器才能运行。

模块化

export

class Util {
	static sum = (a, b) => { return a + b };
}
export default Util;   //导出这个类

import
import Util from './Util' //同目录时导入

ReactJS
前端开发演变

静态页面阶段
Ajax阶段
前端MVC阶段（MVVM）
SPA阶段（单网页应用程序）（React，Vue，Angular）

ReactJS圈内的一些框架

Flux
Redux
Ant Design of React

Dubbo 和 zookeeper

Dubbo
NIO，适用于小数据量大并发，以及服务消费者机器数远大于服务提供者机器数的情况

Transporter（传输）：mina、netty、grizzy
Serialization（序列化）：dubbo、hessian2、java、json
Dispatcher（分发调度）：all、direct、message、execution、connection
ThreadPool：fixed、cached

dubbo和springboot的版本对应

Dubbo SpringBoot	Dubbo	SpringBoot
0.2.1.RELEASE	2.6.5+	2.x

dubbo的provider配置

# spring boot application
spring.application.name = providername
server.port = 9090

# service version
dubbo.service.version = 1.0.0

# 服务的扫描包
dubbo.scan.basePackeges = xxx.service

# 应用名
dubbo.application.name = dubbo-provider-demo

# 协议及端口
dubbo.protocol.name = dubbo
dubbo.protocol.port = 20880

# 注册中心
dubbo.registry.address = zookeeper://127.0.0.1:2181
dubbo.registry.client = zkclient

dubbo的consumer配置

spring.application.name = consumername
server.port = 9091

dubbo.application.name = dubbo-consumer-demo

dubbo.register.address = zookeeper://127.0.0.1:2181
dubbo.registry.client = zkclient

dubbo的负载均衡
@Reference(version = "1.0.0", loadbalance = "roundrobin") 轮询机制

zookeeper 的可视化界面 ZooInspector
（太慢了）

Percona 数据库

拉取镜像 docker pull percona
创建容器 docker create --name percona -v /data/mysql-data:/var/lib/mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD=root (-e环境变量)
运行容器 docker start percona

Percona高可用架构

MHA
MMM
ATLAS
MyCAT

MyBatisPlus

官网很清晰

定义mapper：
Mapper接口 extends BaseMapper<Pojo>
配置类@MapperScan("xx.xx.xx.mapper")

标志实体类对应的表 @TableName("sys_user")
设置id字段自增：@TableId(value = "ID", type = IdType.AUTO)

定义Pojo：
重写 equals和hashcode @EqualsAndHashCode(callSuper = true)
set变为链式 @Accessors(chain = true)

GraphQL⭐

描述复杂数据模型的查询语言

Restful的缺点

数据过量获取
数据获取不足
接口太多难以管理
接口返回值不按规范进行
一个页面需要调用多个接口才能获取全部的数据

GraphQL 看到了 RestFul 的痛点，专注于接口查询，制定了一套自己的接口规范，让客户端可以根据需要，自己定制化需要返回的数据。

第一种
导包

<dependency>
    <groupId>com.graphql-java</groupId>
    <artifactId>graphql-java</artifactId>
    <version>11.0</version>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.6</version>
</dependency>

GraphQLObjectType userObjectType = GraphQLObjectType.newObject()
    .name("User")
    .field(GraphQLFieldDefinition.newFieldDefinition().name("id").type(Scalars.GraphQLLong))
    .field(GraphQLFieldDefinition.newFieldDefinition().name("name").type(Scalars.GraphQLString))
    .field(GraphQLFieldDefinition.newFieldDefinition().name("age").type(Scalars.GraphQLInt))
    .build();

GraphQLObjectType userQueryObjectType = GraphQLObjectType.newObject()
    .name("UserQuery")
    .field(GraphQLFieldDefinition.newFieldDefinition().name("user").type(userObjectType)
            .argument(GraphQLArgument.newArgument().name("id").type(Scalars.GraphQLLong).build())
            .dataFetcher(environment -> {
                Long id = environment.getArgument("id");
                return new User(id, "东方", 20 + id.intValue());
            }))
    .build();

GraphQLSchema graphQLSchema = GraphQLSchema.newSchema()
   	.query(userQueryObjectType)
    .build();

GraphQL graphQL = GraphQL.newGraphQL(graphQLSchema).build();

String query = "{user(id:1){id,name,age}}";
ExecutionResult result = graphQL.execute(query);

//标准反馈
System.out.println(result.toSpecification());
System.out.println(result.getData().toString());

第二种

装插件 graphql
在resource下创建.graphqls文件
编写代码

import graphql.ExecutionResult;
import graphql.GraphQL;
import graphql.schema.GraphQLSchema;
import graphql.schema.StaticDataFetcher;
import graphql.schema.idl.RuntimeWiring;
import graphql.schema.idl.SchemaGenerator;
import graphql.schema.idl.SchemaParser;
import graphql.schema.idl.TypeDefinitionRegistry;
 
import static graphql.schema.idl.RuntimeWiring.newRuntimeWiring;
 
public class HelloWorld {
 
    public static void main(String[] args) {
        String schema = "type Query{hello: String} schema{query: Query}";
 
        SchemaParser schemaParser = new SchemaParser();
        TypeDefinitionRegistry typeDefinitionRegistry = schemaParser.parse(schema);
 
        RuntimeWiring runtimeWiring = new RuntimeWiring()
                .type("Query", builder -> builder.dataFetcher("hello", new StaticDataFetcher("world")))
                .build();
 
        SchemaGenerator schemaGenerator = new SchemaGenerator();
        GraphQLSchema graphQLSchema = schemaGenerator.makeExecutableSchema(typeDefinitionRegistry, runtimeWiring);
 
        GraphQL build = GraphQL.newGraphQL(graphQLSchema).build();
        ExecutionResult executionResult = build.execute("{hello}");
 
        System.out.println(executionResult.getData().toString());
    
    }
}

Altair GraphQL Client：一个GraphQL工具，chrome插件

Apollo Client：GraphQL前端工具

WebSocket

Java 的 Websocket
@ServerEndpoint("/websocket/{uid}")
@OnOpen
@OnClose
@OnMessage

SpringBoot 的 WebSocket

@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Resource
    private MyHandler myHandler;
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(myHandler, "/ws").setAllowedOrigins("*");
    }

public class MyHandler extends TextWebSocketHandler {
    @Override
    public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {
        session.sendMessage(new TextMessage("i got it"));
    }
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        session.sendMessage(new TextMessage("welcome to websocket"));
    }
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        System.out.println("never");
    }

MongoDB

分布式文件存储，C++，可扩展的高性能数据存储

database -> collection ->document -> field

展示库 show dbs
使用库 use xxdb
删除库 db.dropDatabase()

展示表show tables
删除表 db.user.drop()

查询数据 db.user.find()
插入数据 db.user.insert({id:1, name:'dongfang'}) 或 db.user.save({id:1, name:'dongfang'})
更新数据 db.collection.update({id:1}, {$set:{age:25}})
删除数据 db.user.remove({id:1})

查看索引 db.user.getIndex()
创建索引 db.user.createIndex({'age':1})
删除索引 db.user.dropIndex("age_1")
创建联合索引 db.user.createIndex({'age':1, 'id':-1})
查看索引大小 db.user.totalIndexSize()