DEV Community: Jihao Deng

NFS 协议

Jihao Deng — Fri, 31 Mar 2023 02:00:00 +0000

NFS

NFS协议简介

目前总共有4个大版本，v1至v4，从v2开始开放。

以v3为例，其中主要分为3个部分

文件系统挂载
文件系统访问
文件锁

v4的组合协议 COMPOUND

两种RPC procedures：

NULL：空流程、什么也不做
COMPOUND：组合流程，包含一系列NFS操作

对于一次NFS协议请求，它会包含多个原子操作，即COMPOUND。其结构如下

+-----+--------------+--------+-----------+-----------+-----------+----
| tag | minorversion | numops | op + args | op + args | op + args | ...
+-----+--------------+--------+-----------+-----------+-----------+----

对应的reply信息格式如下：

+------------+-----+--------+-----------------------+----
|last status | tag | numres | op + retVal + results | ...
+------------+-----+--------+-----------------------+----

具体可以通过wireshark抓包查看。

对于一个COMPUND请求，server会按照请求内的OPcode一个一个执行操作，如果执行到一个操作返回了一个非OK的status code，即non-zero status code，那么整个流程会停止，并直接返回。

一个COMPUND请求无法保证想事务一样拥有原子性，所以需要尽量避免构造过于复杂的COMPUND请求。

所有的COMPUND请求都是同步的，一个操作做完才会做下一个。

client-side caching

为了提高访问速度，NFS会在客户端设置缓存，但是需要做额外的事情来确保缓存和远端数据的一致性。

原有的一致性机制比较落后：客户端不定期地检查文件的本地缓存是否还有效，如果一个文件只被一个客户端访问时，这种检查时很多余的。

Data Caching

由于NFS提供了文件共享和文件锁的机制，客户端的缓存不能对这些机制产生影响，所以，NFS客户端不能对上层的应用提供缓存数据的相关接口，换句话说，上层的应用不应感知客户端缓存的存在。

Delegation 机制

为了减少多余的缓存一致性检查，NFSv4引入了delegation机制，这种机制的基本原理是客户端A打开文件时服务器给客户端A颁发一个凭证，只要客户端A持有这个凭证就可以认为没有与其他客户端发生冲突，读写操作中就不需要再去check cache validity。当客户端B试图访问同一个文件时，这两个客户端就发生了冲突。服务器先暂时不响应客户端B的请求，而是向客户端A发送RECALL请求。客户端A接收到RECALL请求后将缓存中的数据刷新到服务器中，然后将凭证交还给服务器。这时服务器再响应客户端B的请求，以后两个客户端就按照之前的老方法检查自己的本地缓存是否有冲突。

由于在出现多客户端访问的情况下还是用的原始的一致性检查方法，所以delegation机制适用只读场景和客户端对数据修改不频繁的场景。

正向通道和反向通道

为了实现delegation机制，NFS客户端和服务器之间会建立两条RPC通道，一条为正向通道，即客户端发送RPC请求，服务器进行处理；另一条则是delegation需要使用的反向通道，即服务器检测到文件冲突后，向客户端发送RPC请求，客户端进行处理（将缓存刷新到客户端，并返还delegation凭证）。

Open Delegation

总共涉及两个操作：

OPEN_DELEGATE_READ
OPEN_DELEGATE_WRITE（Linux不支持）

当 client 持有 OPEN_DELEGATE_READ 时，可以保证对应的文件没有被其他 client 通过 OPEN4_SHARE_ACCESS_WRITE/OPEN4_SHARE_ACCESS_BOTH 打开。

当 client 持有 OPEN_DELEGATE_READ 时，自己仍然可以对文件进行加锁操作，但是需要将对应的操作发送到server，不能本地执行。

Delegation的颁发完全取决于server，一些必要的条件如下：

与client的反向通道有效
与现有的OPEN、delegation、锁没有冲突

/*
 * Attempt to hand out a delegation.
 *
 * Note we don't support write delegations, and won't until the vfs has
 * proper support for them.
 */
static void
nfs4_open_delegation(struct svc_fh *fh, struct nfsd4_open *open,
            struct nfs4_ol_stateid *stp)
{
    struct nfs4_delegation *dp;
    struct nfs4_openowner *oo = openowner(stp->st_stateowner);
    struct nfs4_client *clp = stp->st_stid.sc_client;
    int cb_up;
    int status = 0;

    cb_up = nfsd4_cb_channel_good(oo->oo_owner.so_client);
    open->op_recall = 0;
    switch (open->op_claim_type) {
        case NFS4_OPEN_CLAIM_PREVIOUS:
            if (!cb_up)
                open->op_recall = 1;
            if (open->op_delegate_type != NFS4_OPEN_DELEGATE_READ)
                goto out_no_deleg;
            break;
        case NFS4_OPEN_CLAIM_NULL:
        case NFS4_OPEN_CLAIM_FH:
            /*
             * Let's not give out any delegations till everyone's
             * had the chance to reclaim theirs, *and* until
             * NLM locks have all been reclaimed:
             */
            if (locks_in_grace(clp->net))
                goto out_no_deleg;
            if (!cb_up || !(oo->oo_flags & NFS4_OO_CONFIRMED))
                goto out_no_deleg;
            break;
        default:
            goto out_no_deleg;
    }
    dp = nfs4_set_delegation(clp, fh, stp->st_stid.sc_file, stp->st_clnt_odstate);
    if (IS_ERR(dp))
        goto out_no_deleg;

    memcpy(&open->op_delegate_stateid, &dp->dl_stid.sc_stateid, sizeof(dp->dl_stid.sc_stateid));

    trace_nfsd_deleg_read(&dp->dl_stid.sc_stateid);
    open->op_delegate_type = NFS4_OPEN_DELEGATE_READ;
    nfs4_put_stid(&dp->dl_stid);
    return;
out_no_deleg:
    open->op_delegate_type = NFS4_OPEN_DELEGATE_NONE;
    if (open->op_claim_type == NFS4_OPEN_CLAIM_PREVIOUS &&
        open->op_delegate_type != NFS4_OPEN_DELEGATE_NONE) {
        dprintk("NFSD: WARNING: refusing delegation reclaim\n");
        open->op_recall = 1;
    }

    /* 4.1 client asking for a delegation? */
    if (open->op_deleg_want)
        nfsd4_open_deleg_none_ext(open, status);
    return;
}

文件属性缓存

一个文件的所有属性都是作为一个整体来缓存，不是只缓存部分；client维护一个缓存保鲜时间，超过时间需要向server确认有没有改变发生；client向server发送改变属性的请求，必须再附带一个GETATTR操作，用于更新本地的缓存。

文件属性的缓存基本都属write through的，除了以下三个：

size: The size of the object in bytes
time_modify: The time of last modification to the object.
change: A value created by the server that the client can use to determine if file data, directory contents, or attributes of the object have been modified. 可以简单把它设成文件元数据的最近修改时间，即time_metadata

以上三个属性与文件内容的修改相关，如果把它们的缓存也设为write through，意味着文件data缓存也必须是write through。

client如何校验自己缓存的文件属性？

client 向服务器索取 change 和 time_access 两个属性，通过与自己缓存的 change 属性确定当前的属性缓存是否有效。获取 time_access 是为了更新自己本地缓存的该属性。

client 自己访问本地缓存的对象时，不能更新 time_access 属性，因为它是直写的，并会影响 server 上的 change 属性。

文件名缓存

客户端可以缓存LOOKUP和READDIR的结果，对其设置一个过期时间。如果client对目录进行了修改，则需要通过change属性来决定被修改的目录是否被其他人修改过（有没有冲突）

遗留问题

filehandle啥时候与fsid多对一?
fsid是如何保证全局唯一的？
有冲突，本客户端咋处理?其它客户端咋处理？
获取锁为啥要检查缓存有效性?
啥时候反向通多会无效?
如果确定file system的刷新频率和time_metadata的resolution？如果比time_metadata快咋处理?
nfs的cache和vfs的cache有关系吗?
cache缓存的粒度是啥，文件？？？
梳理下代码里面，cache提供的接口
除了delegation场景外，其它场景如何保证数据的一致性?

获取锁为啥要检查缓存有效性?

对一段数据加锁意味着这段数据不会被别人修改，client可以把它当成是自己的，可以无顾虑的使用自己的本地缓存。如果自己本地的缓存与服务器上的不一致，那么。

但是，文档里也指出：客户端不禁用cache的话，文件范围锁提供的一致性可能不会生效。

filehandle啥时候多对一?

文件句柄是解析路径的时候生成的，所以存在两个文件句柄指向同一个文件系统对象情况，也就是存在同一个客户端内，同一个文件可能有两份缓存，同一个客户端内部甚至都能发生缓存不一致。

如果确定file system的刷新频率和time_metadata的resolution？如果比time_metadata快咋处理?

Linux的NFS代码里对change的种类有以下几种定义：

enum nfs4_change_attr_type {
    NFS4_CHANGE_TYPE_IS_MONOTONIC_INCR = 0,
    NFS4_CHANGE_TYPE_IS_VERSION_COUNTER = 1,
    NFS4_CHANGE_TYPE_IS_VERSION_COUNTER_NOPNFS = 2,
    NFS4_CHANGE_TYPE_IS_TIME_METADATA = 3,
    NFS4_CHANGE_TYPE_IS_UNDEFINED = 4,
};

编号为3的就是使用time_metadata

前三种类似于使用一个递增的counter

最后一种是未定义，相当于是一个默认值？

前4种都可以通过比较大小来决定数据的新旧，越大越新，而最后一种只能比较是否相等

所以，如果file system的刷新频率比time_metadata的单位更快，那么就可以用前面的递增计数器来实现change属性。

nfs的cache和vfs的cache有关系吗？NFS cache缓存的粒度是啥？

VFS的cache就是NFS的客户端cache。缓存的粒度是page，一个page归属于一个inode。客户端在进行read操作时，会先检查缓存的数据是否有效，如果无效则删除与缓存数据的mapping，然后调用vfs的读接口更新缓存数据。

除了delegation场景外，其它场景如何保证数据的一致性?

仅通过现有的client side caching机制无法完全保证数据一致性，在多个客户端访问同一个文件时，需要使用文件锁来实现一致性控制。

delegation机制_ycnian的博客-CSDN博客_nfs delegation

分发delegation_ycnian的博客-CSDN博客

返还delegation_ycnian的博客-CSDN博客

JAVA001 Annotation and Reflection

Jihao Deng — Sun, 04 Jul 2021 09:49:13 +0000

Background

Reflection makes Java a semi-dynamic language. Hardly do we use reflection in our Java development due, it provides us with an alternative way to create object. Normally, we use new keyword or clone() method to create instances. With the help of reflection, we can have the third way.

For annotations, we often see them in frameworks like spring. I believe most of frameworks having annotations are using reflection to get the annotation in our code.

Annotation

An annotation is similar to a class, but it only have attributes. We can use @interface to declare annotations:

// Self-defined annotations:

// The table name
@Target(value=ElementType.TYPE)
@Retention(value=RetentionPolicy.RUNTIME)
@interface AnnoTable {
    // 注解的参数: 参数类型 参数名()
    String value();
}

// The field information
@Target(value=ElementType.FIELD)
@Retention(value=RetentionPolicy.RUNTIME)
@interface AnnoField {
    String fieldName();
    String dataType();
    int length();
}

Now let's define a class and use our annotations to describe it:

@AnnoTable("researchers")
class Researcher {

    @AnnoField(fieldName = "rid", dataType = "int", length = 11)
    private int id;

    @AnnoField(fieldName = "age", dataType = "int", length = 11)
    private int age;

    @AnnoField(fieldName = "name", dataType = "varchar", length = 30)
    private String name;

    public Researcher() {
    }
    public Researcher(int id, int age, String name) {
        super();
        this.id = id;
        this.age = age;
        this.name = name;
    }

    // ... getters and setters
}

Get annotation by reflection

public class TestMyAnnotation {
    public static void main(String[] args) throws ClassNotFoundException, NoSuchFieldException {

        // 通过反射获得注解
        Class c1 = Class.forName("annotation.Researcher");
        Annotation[] as = c1.getAnnotations();
        for(Annotation a: as) {
            System.out.println(a);
        }

        // 获得注解中的值
        AnnoTable annotable = (AnnoTable) c1.getAnnotation(AnnoTable.class);
        String value = annotable.value();
        System.out.println(value);

        // only public fields can be got by getField() method
        // private fields should use getDeclaredField()
        Field f = (Field) c1.getDeclaredField("id");
        AnnoField annoField = (AnnoField) f.getAnnotation(AnnoField.class);
        System.out.println(annoField.fieldName());
        System.out.println(annoField.dataType());
        System.out.println(annoField.length());
    }
}

MBP02 Basic select queries in Mybatis-plus

Jihao Deng — Sun, 04 Apr 2021 09:54:48 +0000

Mapper中的基本查询

Continue to use the database table and entity class created in the last blog:

create table users (
  id integer primary key not null auto_increment,
  username varchar(50) not null,
  password varchar(100) not null,
  question varchar(150),
  answer varchar(50)
);

@TableName(value = "users")
public class AppUser {
    @TableId(value = "id", type = IdType.AUTO)
    private Integer id;
    private String username;
    private String password;
    private String question;
    private String answer;
}

public interface AppUserMapper extends BaseMapper<AppUser> {
}

selectById 与 selectBatchIds

AppUser appUser = appUserMapper.selectById(2);

List<Integer> ids = new ArrayList<>();
ids.add(1);
ids.add(2);
ids.add(3);
List<AppUser> users = appUserMapper.selectBatchIds(ids);

通过Map - selectByMap

通过Map来封装查询条件，map中写的是数据表中的列名，而非实体类的属性名。

Map<String,Object> columnMap = new HashMap<>();
columnMap.put("username", "jisu");
columnMap.put("question", "What is my name?");
List<UserInfo> users = userInfoMapper.selectByMap(columnMap);

使用QueryWrapper

QueryWrapper是一个查询构造器，相当于Where条件。

QueryWrapper<AppUser> queryWrapper = new QueryWrapper<>();
queryWrapper.like("username","ha").like("question", "What");

QueryWrapper的方法见下表：

method name	note	example
eq	=	eq("name", "wong")
ne	!=	ne("name", "wong")
gt	>	gt("age", 18)
ge	>=
lt	<
le	<=
or	OR	紧接着的下一个方法不是用ADD连接eq("id", 1).or().eq(age, 18)
between
notBetween
like
notLike
likeLeft
likeRight
inSql
notInSql
groupBy
orderByAsc
orderByDesc

MBP01 Import Mybatis-plus into Spring Boot

Jihao Deng — Sun, 24 Jan 2021 08:24:28 +0000

在Spring Boot项目内引入mybatis-plus

Install

Directly add maven dependencies in [pom.xml]. Note that the version of mysql-connector is no need to mention (see comment).

<!-- mybatis-plus-boot-starter -->
  <dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.4.0</version>
  </dependency>

  <!-- mysql connector -->
  <dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <!-- The managed version is 8.0.21 The artifact is managed in org.springframework.boot:spring-boot-dependencies:2.3.4.RELEASE -->
  </dependency>

注意我们是在spring boot中使用mybatis-plus，所以引入的包必须是mybatis-plus-boot-starter。

Configure

Write configurations in the [application.properties] under the resources folder:

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/xxx?useSSL=true
spring.datasource.username=xxx
spring.datasource.password=xxxxxx

Entity class

Before creating entity classes, database tables should be designed and created.

In this example, I just create a simple user table and a objective table. And there is a one-to-many relationship.

create table users (
  id integer primary key not null auto_increment,
  username varchar(50) not null,
  password varchar(100) not null,
  question varchar(150),
  answer varchar(50)
);

create table objective (
  id integer primary key not null auto_increment,
  name varchar(50) not null,
  user_id integer not null,
  foreign key (user_id) REFERENCES users (id)
);

As for the entity class, I named it AppUser. We need to manually map the class to the table as they are different.

I recommend to use annotation which is clear and readable:

@TableName(value = "users")
public class AppUser {
    @TableId(value = "id", type = IdType.AUTO)
    private Integer id;
    @TableField(value = "username")
    private String username;
    @TableField(value = "password")
    private String password;
    @TableField(value = "question")
    private String question;
    @TableField(value = "answer")
    private String answer;
    @TableField(exit = false)
    private List<Objective> objectives;
}

If the column name in table is exactly the same with param name in class, then @TableField could be omitted.

@TableField(exit = false) indicates that there is no column in database that maps the property.

Primary key

We can use type property in @TableId to set the strategy in table's primary key.

Here are some options that will discussed in this article:

ASSIGN_ID
AUTO
ASSIGN_UUID
INPUT

ASSIGN_ID

The default strategy. Using algorithm (SnowFlake) to create a unique id. The type of primary key should be Long or String in Java, and BIGINT or VARCHAR in mysql.

AUTO

Using the auto increment strategy which is supported in database.

ASSIGN_UUID

Similar to ASSIGN_ID, but remove all '-' and the type must be String and VARCHAR.

INPUT

The id is input by users.

Mapper class

Just create an interface that extends BaseMapper. The interface has already intergrates basic CRUD methods.

public interface AppUserMapper extends BaseMapper<AppUser> {
    //public AppUser find
}

There are two ways to let Spring load the mapper classes:

Add @Mapper to every mapper classes, or
Add @MapperScan(basePackages="com...mapper") at the application entry class (shown below in the code)

@SpringBootApplication
@MapperScan(basePackages="com.myrrh.passbook.mapper")
public class PassbookApplication {

    public static void main(String[] args) {
        SpringApplication.run(PassbookApplication.class, args);
    }
}

Test

Just add some code in a Controller class (to make it simple, I skipped the service layer).

To run the code, just start the project and type the url in the browser.

@Autowired
AppUserMapper appUserMapper;

@RequestMapping("/testdb")
@ResponseBody
public String testdb() {
    // the id type is AUTO
    AppUser au = new AppUser("jisd", "89hf3", "My post-graduate best friend", "Hue");
    appUserMapper.insert(au);
    return "done";
}

FRNT001 Cross Domain, Cross Origin Request

Jihao Deng — Fri, 22 Jan 2021 01:45:51 +0000

本篇主要讲跨域问题

目前我正在使用spring boot跑后端，node.js跑react前端。后端运行的地址是http://localhost:8080，而前端运行的地址是http://localhost:3000。

现在前端想给后端发送一个axios请求，带有参数（比如用户名和密码），后端会返回一些数据。

Existing code

Backends

To make things simple, I just wrote a controller, using @ResponseBody and @RequestParam to recieve parameters in requests.

@Controller
public class IndexController {

    @RequestMapping("/")
    @ResponseBody
    public String hello() {
        return "Hello Spring Boot";
    }

    @RequestMapping(value="/testusername", method=RequestMethod.POST)
    @ResponseBody
    public String testdata(@RequestParam("username") String username, @RequestParam("password") String password){
        return TestDataHelper.getTestJsonUserInfo(username);
    }

}

The method TestDataHelper.getTestJsonUserInfo(username); would return a simple json String as follow:

{
    name: "Alice",
    email: "alice@hue.au",
    pasl: 2323
}

Frontends

In the frontend, axios is used to send requests. In this example, qs is required to make sure backends side can recieve the params.

qs is installed along with axios, simply import it by import qs from 'qs'.

function doLogin() {
  var username = document.getElementById('lgusername').value;
  var password = document.getElementById('lgpassword').value;
  const axios = require('axios');
  axios({
    method: 'post',
    url: 'http://localhost:8080/testusername',
    data: qs.stringify({username, password})  // use qs to stringify data
  }).then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
}

Problem

Starting both projects, and clicking the button which will run doLogin() function, the backend cannot recieve the request:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This is because the browser is blocking it and it usually only allows a request in the same origin for security reasons. Even only port numbers are different, they still be treated as different origins.

Solution

Here, a simple solution on the backend side (spring boot) will be discussed, which implements a filter to allow cross domain requests.

Another solution applying Cross-Origin Resource Sharing (CORS) which I believe is better but more difficult can be found here: https://web.dev/cross-origin-resource-sharing/

For the filter solution, we can simply create a filter package and add a filter class with a @Component annotation:

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Component;

@Component
public class AccessFilter implements Filter {

    @Override
    public void init(FilterConfig arg0) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
            throws IOException, ServletException {

        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;

        // Response to preflight request doesn't pass access control check: 
        // No 'Access-Control-Allow-Origin' header is present on the requested resource.

        response.setHeader("Access-Control-Allow-Origin", "http://localhost:3000"); // the url that cross domain requests are from
        response.setHeader("Access-Control-Allow-Credentials","true");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With,X-App-Id, X-Token");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");

        chain.doFilter(req, res);

    }

    @Override
    public void destroy() {

    }

}

VUE003 Vue Lifecycle & Hooks

Jihao Deng — Thu, 21 Jan 2021 01:51:11 +0000

Vue的生命周期

Vue实例从创建和销毁的过程就是它的生命周期。

这一过程中会有一些关键时刻。比如渲染完成、初始化完成和被销毁。

Vue的生命周期钩子

对于生命周期中的关键时刻，我们可以以回调方法的方式进行回调，这就是生命周期钩子，被回调的方法叫做生命周期钩子函数。

Vue生命周期图示

参考官网 https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

图中总共显示了8个红色的方框，包含看代表了8个生命周期钩子：

beforeCreate
created
beforeMount 数据被载入前
mounted 数据被载入后
beforeUpdate
updated
beforeDestroy
destroyed

生命周期钩子的用法

为了使用这些钩子，我们只需要在初始化Vue对象的时候重写这些方法即可：

var app = new Vue({
  el: '#app',
  data: function () {
    return {
      message: "Hello, Vue World!"
    }
  },
  beforeCreate: function () {
    console.log("a message in beforeCreate  " + this.message)
  },
  created: function() {
    console.log("a message in created  " + this.message)
  },
  beforeMount: function() {
    console.log("a message in beforeMount  " + this.message)
  },
  mounted: function() {
    console.log("a message in mounted  " + this.message)
  }
})

对于上述代码，beforeCreate中因为message还没有被创建出来，所以会输出undefined，其他三个都会输出data里面的Hello, Vue World!。

这些钩子都是通过this指针来访问Vue对象里面的数据，所以，我们不能使用箭头函数来重写钩子，因为箭头函数并不能用this访问我们的Vue对象。

VUE002 Vue Directives

Jihao Deng — Tue, 29 Dec 2020 04:50:19 +0000

Vue的指令

指令就是html标签元素中带有v-的特殊属性。除了v-for，这些属性的值都是单个javascript表达式。当指令的值发生变化时，这些变化会响应式地作用于DOM。

常见的Vue指令

v-show
v-if
v-else
v-for
v-bind
v-model
v-on
v-cloak

v-show 与 v-if

v-show会根据表达式的真假来切换元素的CSS属性display，如果表达式为假，则会给标签加上style="display: none;"这条属性。

对于下面的代码：

<div id="app">
  <h1 v-show="12>13">{{ message }}</h1>
</div>

在浏览器打开后，<h1>标签不会显示，按下F12后，代码如下所示：

<div id="app">
  <h1 style="display: none;">Hello, Vue World!</h1>
</div>

v-if会根据表达式的真假来渲染元素。

如果上面的例子用v-if，则整个<h1>标签都不会出现在网页源代码里。

v-for

基于数据源来对元素进行多次渲染，数据源可以是数组或者对象，v-for后面的值依然是一个js表达式，带有这个属性的标签（加上它的子标签）会被循环创建多次。

具体的例子如下：

<body>
  <div id="app">
    <div v-for="item in dataSource">
      Name: {{item.name}}<br>
      Age: {{item.age}}
    </div>
  </div>
</body>

<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      return {
        dataSource: [
          {name: 'Alice', age: 13},
          {name: 'Bob', age: 12},
          {name: 'Carol', age: 12},
          {name: 'Daniel', age: 13},
        ]
      }
    }
  })
</script>

渲染后的结果为：

<div id="app">
    <div>
      Name: Alice<br>
      Age: 13
    </div><div>
      Name: Bob<br>
      Age: 12
    </div><div>
      Name: Carol<br>
      Age: 12
    </div><div>
      Name: Daniel<br>
      Age: 13
    </div>
</div>

v-for进阶

除了上述的简单例子，v-for还支持一个可选的第二个参数，即当前项的索引。当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，我们需要用v-bind来为每一个元素指定一个key：

<div id="app">
  <li v-for="(item, index) in dataSource" v-bind:key="index">
    {{ index + 1 }} - {{ item.name }} - {{item.age}} 岁
  </li>
</div>

v-for也可以用于遍历json对象。比如对于下面这个例子：

dataObj: {
  name: "Hue",
  identity: "Fairy",
  age: 3,
  hp: 10938,
  mp: 1080,
  level: 35,
  dps: 2405
}

可以这样使用v-for：

<li v-for="(val, name, index) in dataObj" v-bind:key="index">
  {{index + 1}} - {{name}} : {{val}}
</li>

v-bind

为一个标签动态绑定一个或者多个属性，或者为一个组件的prop绑定到js表达式。

如果属性是class或style，其值支持数组或对象。其他的属性的值只能是基本数据类型。

<body>
  <div id="app">
     <input type="text" v-bind:placeholder="myPlaceHolder">
     <!-- v-bind:class="{'表达式成立时的类名', 表达式}" -->
     <!-- v-bind:class="['类名1', '类名12', '类名3']" -->
     <button v-bind:class="{'active': 12>11}">Yes</button>
     <button v-bind:class="['active', 'warning']">No</button>
  </div>
</body>

<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      return {
        myPlaceHolder: "Username"
      }
    }
  })
</script>

虽然这个例子实用性为零，但是它使得我们仅仅通过修改myPlaceHolder的值就可以更改DOM。

v-bind可以进一步简写，比如上面的例子中，v-bind:placeholder可以简写为:placeholder。

v-model

对表单元素<input>，<textarea>，<select>等元素创建双向绑定，即：

数据的变化会影响视图
视图的变化会影响数据

具体可以参考官网 https://cn.vuejs.org/v2/guide/forms.html

<body>
  <div id="app">
    <!-- input box 输入框 -->
    <h2>{{ "Hello " + username }}</h2>
    <p>{{ message }}</p>
    <input type="text" v-model="username">
    <br>
    <textarea v-model="message"></textarea>
    <br>
    <!-- selector group 单选 -->
    <input type="radio" value="One" v-model="picked">
    <label>One</label>
    <br>
    <input type="radio" value="Two" v-model="picked">
    <label>Two</label>
    <br>
    <span>Picked: {{ picked }}</span>
    <br>
    <!-- Mutiple selector 多选 -->
    <input type="checkbox" value="Jack" v-model="checkedNames">
    <label>Jack</label>
    <input type="checkbox" value="John" v-model="checkedNames">
    <label>John</label>
    <input type="checkbox" value="Mike" v-model="checkedNames">
    <label>Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
  </div>
</body>

<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      return {
        username: "John",
        message: "",
        picked: "",
        checkedNames: []
      }
    }
  })
</script>

对于上面的例子，当表单的内容变化时，那些含有{{ }}的标签里面的内容也会同步发生变化。

对于单选radio，vue会根据v-model绑定的值来决定它们是不是一组。

v-on

v-on的作用是监听DOM事件，并在触发时运行一些JavaScript代码。

官方文档 https://cn.vuejs.org/v2/guide/events.html

比如按钮的点击事件，可以写成v-on:click：

<h1>{{message}}</h1>
<button v-on:click="message = message + 's'">change text</button>

但是在实际应用中，许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在v-on指令中是不可行的。因此v-on还可以接收一个需要调用的方法名称。可以在new Vue()中传入methods参数来定义方法（this对象很关键）。

<body>
  <div id="app">
     <h1>{{message}}</h1>
     <button v-on:click="changeText">change text</button>
  </div>
</body>

<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      return {
        message: "sfsf"
      }
    },
    methods: {
      changeText: function (event) {
        this.message = this.message + "s";
      }
    }
  })
</script>

类似与v-bind:可以用:替代，v-on:可以用@替代。上面的v-on:click可以简写成@click。

更多复杂的使用可以参考官网。

v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

换句话说，v-cloak算作一个元素的属性，在页面加载完毕后，这个属性会自动删除。

VUE001 Hello World in Vue

Jihao Deng — Fri, 25 Dec 2020 05:58:30 +0000

What is Vue.js ?

参考它的官网： cn.vuejs.org

Hello world

引入Vue

最直接的方法还是在html页面中引入js文件：

<head>
  <meta charset="UTF-8" />
  <title>Vue start</title>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

初始化Vue

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

使用Vue主要分为两步：

指定Vue的控制区域
指定对应需要渲染的数据
渲染数据到页面

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Vue start</title>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    {{ message }}
  </div>
</body>

<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      return {
        message: "Hello, Vue World!"
      }
    }
  })
</script>

</html>

以上代码首先引入了Vue：var app = new Vue({})，然后指定了Vue的控制区域：一个id为app的<div>标签，然后给定了数据message: 'Hello Vue!'，最后，通过插值语法渲染数据到页面上：{{ message }}。

注意，很多基础教程中，Vue里面的data的值直接给的是一个对象，如下所示，但是当以后使用Vue组件的时候，data的值一般都是函数，这里我们直接一步到位。

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: "Hello, Vue World!" // 直接使用一个对象
    }
  })
</script>

RCT007 React Hooks

Jihao Deng — Fri, 25 Dec 2020 00:58:09 +0000

React Hooks

Hooks主要用于解决函数式组件无状态、无生命周期的问题。

本篇主要介绍以下几个Hooks：

useState 状态
useEffect 类似生命周期中的 didMount 和 didUpdate
useParam 获取参数（内部封装）
useHistory 通过js api操作路由跳转

useState 与 useEffect

现在我们实现一个点赞的函数组件，其中有一个点赞数的状态count，以及两个按钮：赞和踩，它们的效果分别是点赞数+1和-1。每次点赞数改变，浏览器都会在控制台中打印一段话。

使用useState让组件拥有state状态，使用useEffect来监听某个状态的改变。

useState语法：

const [count, setCount] = useState(0);

其中，count是状态名，setCount是设置这个状态的方法，它会调用render函数，useState(0)是将这个状态的初始值设为0。

useEffect语法：

useEffect(()=>{
  console.log('count updated, current count: ' + count);
}, [count])

其中，第一个参数是一个箭头函数，代表要执行的内容，第二个参数是一个列表，你面的内容就是要监听的内容，如果列表为空，则监听所有。也就是说，useEffect()里面第二个参数变了，就会执行第一个参数里面的代码。

实例代码

import React, {useState,useEffect} from 'react'

export default function Count() {
  const [count, setCount] = useState(0);
  useEffect(()=>{
    console.log('count updated, current count: ' + count);
  }, [count])
  return (
    <div>
      <h1>Like or Dislike ?</h1>
      <p>current likes: {count}</p>
      <button onClick={()=>{setCount(count + 1)}}>Like</button>
      <button onClick={()=>{setCount(count - 1)}}>Dis</button>
    </div>
  )
}

useParam 与 useHistory

useParam语法：

声明：

const params = useParams();

此时，params就是一个json数据，可以直接使用params.xxx来获取参数的值。

useHistory语法：

声明：

const history = useHistory();

跳转：

<button onClick={()=>{
  history.push('/')
}}>Home</button>

实例代码

import React from 'react'
import {useParams,useHistory} from "react-router-dom";

export default function Profile() {
  const params = useParams();
  const history = useHistory();
  return (
    <div>
      <p>The params: {JSON.stringify(params)}</p>
      <p>The user ID is: {params.userId}</p>
        <button onClick={()=>{
            history.push('/')
        }}>Home</button>
    </div>
  )
}

// 之前使用class组件时的版本，相比之下函数组件更加简单明了
// export default class Profile extends React.Component {
//   jumpHome = () => {
//     this.props.history.push('/')
//   }
//
//   render() {
//     return <div>
//       <h1>this is detail</h1>
//       {/* 获取路由参数 */}
//       <p>当前的参数值为：{this.props.match.params.userId}</p>
//       <button onClick={this.jumpHome}>Home</button>
//     </div>
//   }
// }

RCT006 React Route

Jihao Deng — Tue, 22 Dec 2020 09:20:22 +0000

React路由

路由就是可以根据url来使react渲染标签，比如url是/login就渲染<Login / >标签，是/home就渲染<Home />标签。

react-router-dom

react-router-dom是 React 的实现路由功能的组件。

安装

npm install react-router-dom --save

基本路由

在src目录下新建pages文件夹用于存储页面
在pages内新建几个页面（实际上每个页面就是一个react组件）
在src目录下新建文件route.js

BrowserRouter / HashRouter

HashRouter 会在url后面自动加上"#"。会加载所有匹配到的内容。

Switch

Switch是react 4.0的新特性，只要找到能够匹配的路由，就会停止匹配。

Link/NavLink

相当于<a>标签，路由封装。

基本路由部分的代码

route.js

// import {BrowserRouter as Router,Route,Switch} from "react-router-dom";
import { HashRouter as Router, Route, Switch } from "react-router-dom";
import React from 'react'
import Contact from "./pages/contact";
import Login from "./pages/login";
import Home from "./pages/home";
import NoMatch from "./pages/404";

export default function MyRouter() {
  return <Router>
    {/*普通方式，根据path匹配，会加载所有匹配到的内容，浏览器输入'/login'会加载Home和Login元素*/}
    {/*<Route path = "/" component={Home}></Route>*/}
    {/*<Route path = "/login" component={Login}></Route>*/}
    {/*<Route path = "/contact" component={Contact}></Route>*/}

    {/*如果用switch，浏览器输入'/login'也只会加载Home元素，因为'/login'先匹配了'/'*/}
    {/*<Route>标签内加入 exact 可以精准匹配 */}
    {/*如果导入的是HashRouter，会自动加上# 如 http://localhost:3000/login#/ */}
    <Switch>
      <Route exact path="/" component={Home}></Route>
      <Route path="/login" component={Login}></Route>
      <Route path="/contact" component={Contact}></Route>
      <Route path="*" component={NoMatch}></Route>
    </Switch>

  </Router>
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import MyRouter from './route.js';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <MyRouter/>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

home.js

import React from 'react'
import {Link} from "react-router-dom";

export default function Home() {
    return (
      <div>
        <h1>Welcome to Cheap as Chips Cleaning</h1>
        {/* just like <a> */}
        <Link to="/login">Sign In</Link> 
        <br/>
        <Link to="/contact">Contact Us</Link>
        <br/>
      </div>
    )
}

动态路由

实际上就是在路由的url里面加入参数。比如我们加一个profile页面（用class组件编写），从url中传入用户的id。

动态路由部分的代码

route.js

<Switch>
  <Route exact path="/" component={Home}></Route>
  <Route path="/login" component={Login}></Route>
  <Route path = "/contact" component={Contact}></Route>
  <Route path="/profile/:userId" component={Profile}></Route>
  <Route path="*" component={NoMatch}></Route>
</Switch>

profile.js

import React from 'react'

export default class Profile extends React.Component {
  jumpHome = () => {
    this.props.history.push('/')
  }

  render() {
    return <div>
      <h1>this is detail</h1>
      {/* 获取路由参数 */}
      <p>当前的参数值为：{this.props.match.params.userId}</p>
      <button onClick={this.jumpHome}>Home</button>
    </div>
  }
}

如果要使用函数组件来获得参数，则需要引入Hooks。这将会在下一节中介绍。

RCT005 React Scaffold

Jihao Deng — Mon, 21 Dec 2020 02:12:53 +0000

React脚手架

使用React开发一个单独的前端项目，也就是前后端分离后的前端部分。

create-react-app

create-react-app是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具。

安装

利用npm来进行全局安装。

npm install -g create-react-app

创建项目

create-react-app xxx

创建的项目会是一个nodejs的项目，并且已经自动配好了react的环境。

运行项目

通过查看生成的package.json文件，可以知道通过npm run start来运行项目，输入指令后，会自动以端口号3000运行，并打开浏览器。

项目结构

项目内除了node_modules文件夹用来存储包，还有：

src文件夹存储页面（js文件）和css文件，包括入口文件index.js
public文件夹存储静态资源，包括整个项目的基础index.html

create-react-app 的 Hello World

将之前的To do List 迁移到脚手架里，我们需要替换App.js和App.css里面的内容，其他都不需要改变。

App.js

import React from 'react';
import './App.css';

class App extends React.Component {

  state = {
    value: '',
    list: []
  }

  handleAdd = () => {
    const val = this.state.value;
    const list = this.state.list;
    //或 es6结构语法
    // const{val,list} = this.state;
    list.push(val);
    this.setState({
      list: list
      //es6中 当list和value相等时，可以省略key
      //由list:list 简写为 list
    })
  }

  handleInput = (event) => {
    this.setState({
      value: event.target.value
    })
  }

  handelRemove = (event) => {
    var kk = event.target.dataset.bid
    console.log(kk)
    var arr = this.state.list;
    arr.splice(kk, 1)  // delete the item with index kk
    this.setState({
      list: arr
    })
  }

  render() {
    const val = this.state.value;
    const arr = this.state.list;
    const listItem = []
    for (var i = 0; i < arr.length; i++) {
      listItem.push(
        <li key={i}>
          {arr[i]}
          <button data-bid={i} onClick={this.handelRemove}>remove</button>
        </li>
      )
    }

    return (
      <div className="container">
        <p>欢迎学习react</p>
        <h1>Hello World</h1>
        <div>
          <input type="text" value={val} onChange={this.handleInput} placeholder="To do" />
          <button onClick={this.handleAdd}>Add Item</button>
        </div>
        <ul>
          {listItem}
        </ul>
      </div>)
  }
}

export default App;

App.css

.container {
  text-align: center;
  margin: 20px auto;
}
.container p {
  font-size: 10px;
}
.container h1 {
  font-size: 20px;
  color: #02043d;
}

实际上，这个脚手架做的事情是：

App.js里面写了一个<App />标签
index.js里面将 <div> <App /> </div>渲染到了index.html中

也就是说，我们是一个单页面应用，我们开发时只需要修改App等相关文件就可以了。我们项目中看上去是页面跳转，实际上是<App>标签发生了改变，react重新渲染了它。

RCT004 React condition and loop

Jihao Deng — Sun, 29 Nov 2020 04:54:18 +0000

条件渲染与列表渲染

我的笔记里对react.js的学习包含了以下8个内容：

import react.js
JSX
渲染
Components and props
react 生命周期
事件处理
条件渲染 if-else (This note)
列表渲染 for loop (This note)

对于一个有状态的组件，我们可以根据它的状态来决定该渲染哪些东西。比如一个组件有一个prop是isLogin。它为false时渲染一个前往登录页面的超链接，它为true时渲染用户名以及前往用户个人信息页面的超链接。

组件的状态可以是一个列表，比如通过ajax请求获取了一个list，那么可以通过for循环将它们全部转化成html的标签，然后渲染。这种方式比用jQuery快很多。

需求

一个Navbar，根据用户是否登录来渲染登录的链接或profile链接；
一个ToDoList，用户可以在一个输入框内输入信息，然后点击旁边的按钮将这条信息加入到 to do list 中，然后下面会实时显示list中有那些内容，每一条内容后面都跟了一个remove按钮，点击后这一项就会消失。

获取输入框的内容

输入框内的值应该作为组件的一个状态，也就是说，有一个变量var会实时记录输入框里面的值，需要输入框里面的内容是我们直接访问var，而不是寻找输入框并获得它的值。

在js函数中，我们通过event.target获取到某个html标签对象。

// JSX
<input type="text" value={val} onChange={this.handleInput} placeholder="To do"/>

handleInput = (event) => {
  this.setState({
    value: event.target.value
  })
}

获取html标签的属性

在JSX中，我们可以给html标签赋予任意的属性property，但是如果想在通过event.target获取这些属性，这些属性需要有特定的名称。

标签自定义属性data-xxx='value'

在事件中通过event获取event.target.dataset.xxx

// JSX
<button data-bid={i} onClick={this.handelRemove}>remove</button>

handelRemove = (event) => {
  var kk = event.target.dataset.bid
  console.log(kk)
  var arr = this.state.list;
  arr.splice(kk,1)  // delete the item with index kk
    this.setState({
    list: arr
  })
}

代码

class Navbar extends React.Component {
  state = {
    isLogin: false
  }

  render() {
    if(this.state.isLogin) {
      return (
        <div>
          <a href='login.html'>Please sign in</a>
        </div>
      )
    }
    else {
      return (
        <div>
          <a href='profile.html'>Hello</a>
        </div>
      )
    }
  }
}
class ToDoList extends React.Component {

  state = {
    value: '',
    list: []
  }

  handleAdd = () => {
    const val = this.state.value;
    const list = this.state.list;
    list.push(val);
    this.setState({
      list: list
      // in es6, 'list:list' can be simplified as 'list'
    })
  }

  handleInput = (event) => {
    this.setState({
      value: event.target.value
    })
  }

  handelRemove = (event) => {
    var kk = event.target.dataset.bid
    console.log(kk)
    var arr = this.state.list;
    arr.splice(kk,1)  // delete the item with index kk
    this.setState({
      list: arr
    })
  }

  render() {
    const val = this.state.value;
    const arr = this.state.list;
    const listItem = []
    for(var i = 0; i<arr.length; i++) {
      listItem.push(
        <li key = {i}>
          {arr[i]}
          <button data-bid={i} onClick={this.handelRemove}>remove</button>
        </li>
      )
    }

    return (
      <div>
        <div>
          <input type="text" value={val} onChange={this.handleInput} placeholder="To do"/>
          <button onClick={this.handleAdd}>Add Item</button>
        </div>
        <ul>
          {listItem}
        </ul>
      </div>)
  }
}
ReactDOM.render(
  <Navbar />, document.getElementById('navbar')
)
ReactDOM.render(
  <ToDoList />, document.getElementById('react_container')
)

Inline Conditions in JSX

&& Operator

The JavaScript logical && operator can be handy for conditionally including an element.

function Login(isLogged) {
  return (
    <div>
      <h1>Hello!</h1>
      {!isLogged &&
        <h2>
          Please sign in.
        </h2>
      }
    </div>
  );
}

? : Operator

Another method for conditionally rendering elements inline is to use the JavaScript conditional operator condition ? trueCode : falseCode.

function Login(isLogged) {
  return (
    <div>
      <h1>Hello!</h1>
      <h3>
      You are <b>{isLogged ? 'currently' : 'not'}</b> logged in.
      </h3>
    </div>
  );
}

DEV Community: Jihao Deng

NFS 协议

NFS

NFS协议简介

v4的组合协议 COMPOUND

client-side caching

Data Caching

Delegation 机制

正向通道和反向通道

Open Delegation

文件属性缓存

文件名缓存

遗留问题

获取锁为啥要检查缓存有效性?

filehandle啥时候多对一?

如果确定file system的刷新频率和time_metadata的resolution？ 如果比time_metadata快咋处理?

nfs的cache和vfs的cache有关系吗？NFS cache缓存的粒度是啥？

除了delegation场景外，其它场景如何保证数据的一致性?

JAVA001 Annotation and Reflection

Background

Annotation

Get annotation by reflection

MBP02 Basic select queries in Mybatis-plus

Mapper中的基本查询

selectById 与 selectBatchIds

通过Map - selectByMap

使用QueryWrapper

MBP01 Import Mybatis-plus into Spring Boot

在Spring Boot项目内引入mybatis-plus

Install

Configure

Entity class

Primary key

Mapper class

Test

FRNT001 Cross Domain, Cross Origin Request

本篇主要讲跨域问题

Existing code

Backends

Frontends

Problem

Solution

VUE003 Vue Lifecycle & Hooks

Vue的生命周期

Vue的生命周期钩子

Vue生命周期图示

生命周期钩子的用法

VUE002 Vue Directives

Vue的指令

常见的Vue指令

v-show 与 v-if

v-for

v-for进阶

v-bind

v-model

v-on

v-cloak

VUE001 Hello World in Vue

What is Vue.js ?

Hello world

引入Vue

初始化Vue

RCT007 React Hooks

React Hooks

useState 与 useEffect

useState语法：

useEffect语法：

实例代码

useParam 与 useHistory

useParam语法：

useHistory语法：

实例代码

RCT006 React Route

React路由

react-router-dom

安装

基本路由

BrowserRouter / HashRouter

Switch

Link/NavLink

如果确定file system的刷新频率和time_metadata的resolution？如果比time_metadata快咋处理?