Angular 使用教程——基本语法和双向数据绑定

news2024/12/23 16:13:31

Angular 是一个应用设计框架与开发平台，旨在创建高效而精致的单页面应用

Angular 是一个基于 TypeScript 构建的开发平台。它包括：一个基于组件的框架，用于构建可伸缩的 Web 应用，一组完美集成的库，涵盖各种功能，包括路由、表单管理、客户端-服务器通信等，一套开发工具，可帮助你开发、构建、测试和更新代码。借助 Angular，无论单人项目还是企业级应用，你都能获得平台带来的优势。Angular 的设计目标之一就是让更新更容易，因此你可以用最小的成本升级到最新的 Angular 版本

Angular诞生历史，AngularJS诞生于2009年，由Misko Hevery 等人创建，是一款构建用户界面的前端框架，后为Google收购。AngularJS是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用，通过新的属性和表达式扩展了 HTML，实现一套框架，多种平台，移动端和桌面端。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。Angular是AngularJS的重写，Angular2以后官方命名为Angular，2.0以前版本称为AngularJS。AngularJS是用JavaScript编写，而Angular采用TypeScript语言编写，是ECMAScript 6的超集

Angular官网：https://angular.cn/

目录

1、创建 Angular 项目

2、点击事件

3、if 语句

3.1、if 形式

3.2、if else 形式

3.3、angular 17 @if 形式

4、for 语句

4.1、*ngFor 形式

4.2、angular 17 @for 形式

5、switch 语句

5.1、ngSwitch 形式

5.2、angular 17 @switch 形式

6、双向数据绑定

1、创建 Angular 项目

Angular 和 Node 版本关系

Angular 需要 Node.js 的活跃 LTS 版或维护期 LTS 版

笔者使用的 node 版本是 20.9.0

安装 Angular CLI 

如果已经安装过Angular CLI ，可以跳过

npm install -g @angular/cli

创建项目

在新的文件目录下执行下面创建项目命令

ng new angular-learn

笔者新建的项目名为 angular-learn

创建完成

使用 vs code 打开项目代码

笔者创建的 Angular 版本是17

项目结构

运行项目

npm run start

浏览器访问：http://localhost:4200

项目创建成功

2、点击事件

先将 app.component.html 文件内容清空，只保留<router-outlet></router-outlet>

在 app.component.html 中添加button标签，并按下面代码添加点击事件

<button (click)="add()">添加</button>
<router-outlet></router-outlet>

然后在 app.component.ts 文件中写add 事件内容

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-learn';
  add() {
    alert('晓看天色暮看云，行也思君，坐也思君')
  }
}

运行效果

获取事件本身

app.component.html 


<button (click)="add()">添加</button>
<button (click)="add2($event)">添加2</button>
<router-outlet></router-outlet>

app.component.ts 

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-learn';
  add() {
    alert('晓看天色暮看云，行也思君，坐也思君')
  }
  add2(e:MouseEvent) {
    console.log(e);
  }
}

运行效果

3、if 语句

3.1、if 形式

在 app.component.ts 中定义变量 isPoetry

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-learn';
  add() {
    alert('晓看天色暮看云，行也思君，坐也思君')
  }
  add2(e:MouseEvent) {
    console.log(e);
  }

  isPoetry:boolean = true
}

app.component.html 中写 if 判断


<button (click)="add()">添加</button>
<button (click)="add2($event)">添加2</button>

<p *ngIf="isPoetry">
    山有木兮木有枝，心悦君兮君不知
</p>

<router-outlet></router-outlet>

运行效果

3.2、if else 形式

app.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-learn';
  add() {
    alert('晓看天色暮看云，行也思君，坐也思君')
  }
  add2(e:MouseEvent) {
    console.log(e);
  }

  isPoetry:boolean = true
  isPoetry2:boolean = true

  changePoetry() {
    this.isPoetry2 = false
  }
}

app.component.html


<button (click)="add()">添加</button>
<button (click)="add2($event)">添加2</button>

<p *ngIf="isPoetry">
    山有木兮木有枝，心悦君兮君不知
</p>
<button (click)="changePoetry()">修改isPoetry2</button>
<ng-container *ngIf="isPoetry2; else elseTemplate">
    <p>与君初相识，犹如故人归</p>
</ng-container>
<ng-template #elseTemplate>
    <p>愿我如星君如月，夜夜流光相皎洁</p>
</ng-template>

<router-outlet></router-outlet>

运行效果

3.3、angular 17 @if 形式


<button (click)="add()">添加</button>
<button (click)="add2($event)">添加2</button>

<p *ngIf="isPoetry">
    山有木兮木有枝，心悦君兮君不知
</p>
<button (click)="changePoetry()">修改isPoetry2</button>
<ng-container *ngIf="isPoetry2; else elseTemplate">
    <p>与君初相识，犹如故人归</p>
</ng-container>
<ng-template #elseTemplate>
    <p>愿我如星君如月，夜夜流光相皎洁</p>
</ng-template>

<!-- angular17 写法 -->
@if (isPoetry2) {
    <p>似此星辰非昨夜，为谁风露立中宵</p>
}
@else {
    <p>曾经沧海难为水，除却巫山不是云</p>
}

<router-outlet></router-outlet>

运行效果

4、for 语句

4.1、*ngFor 形式

app.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-learn';
  add() {
    alert('晓看天色暮看云，行也思君，坐也思君')
  }
  add2(e:MouseEvent) {
    console.log(e);
  }

  isPoetry:boolean = true
  isPoetry2:boolean = true

  changePoetry() {
    this.isPoetry2 = false
  }

  // 定义数组
  poetrys:Array<string> = [
    '死生契阔，与子成说',
    '执子之手，与子偕老',
    '我心匪石，不可转也',
    '有一美人兮，见之不忘'
  ]
}

app.component.html


<button (click)="add()">添加</button>
<button (click)="add2($event)">添加2</button>

<p *ngIf="isPoetry">
    山有木兮木有枝，心悦君兮君不知
</p>
<button (click)="changePoetry()">修改isPoetry2</button>
<ng-container *ngIf="isPoetry2; else elseTemplate">
    <p>与君初相识，犹如故人归</p>
</ng-container>
<ng-template #elseTemplate>
    <p>愿我如星君如月，夜夜流光相皎洁</p>
</ng-template>

<!-- angular17 写法 -->
@if (isPoetry2) {
    <p>似此星辰非昨夜，为谁风露立中宵</p>
}
@else {
    <p>曾经沧海难为水，除却巫山不是云</p>
}

<!-- for 语句 -->
<p *ngFor="let poetry of poetrys let i = index">
    {{i+1}}、{{poetry}}
</p>
<router-outlet></router-outlet>

运行效果

4.2、angular 17 @for 形式


<button (click)="add()">添加</button>
<button (click)="add2($event)">添加2</button>

<p *ngIf="isPoetry">
    山有木兮木有枝，心悦君兮君不知
</p>
<button (click)="changePoetry()">修改isPoetry2</button>
<ng-container *ngIf="isPoetry2; else elseTemplate">
    <p>与君初相识，犹如故人归</p>
</ng-container>
<ng-template #elseTemplate>
    <p>愿我如星君如月，夜夜流光相皎洁</p>
</ng-template>

<!-- angular17 写法 -->
@if (isPoetry2) {
    <p>似此星辰非昨夜，为谁风露立中宵</p>
}
@else {
    <p>曾经沧海难为水，除却巫山不是云</p>
}

<!-- for 语句 -->
<p *ngFor="let poetry of poetrys let i = index">
    {{i+1}}、{{poetry}}
</p>

<!-- angular 17 @for 语句 -->
@for (item of poetrys; track item) {
    <div>{{item}}</div>
} @empty {
    Empty list of poetrys
}
  
@for (item of poetrys; track $index) {
    <p>{{$index+1}}、{{item}}</p>
}
<router-outlet></router-outlet>

5、switch 语句

5.1、ngSwitch 形式

app.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-learn';
  add() {
    alert('晓看天色暮看云，行也思君，坐也思君')
  }
  add2(e:MouseEvent) {
    console.log(e);
  }

  isPoetry:boolean = true
  isPoetry2:boolean = true

  changePoetry() {
    this.isPoetry2 = false
  }

  // 定义数组
  poetrys:Array<string> = [
    '死生契阔，与子成说',
    '执子之手，与子偕老',
    '我心匪石，不可转也',
    '有一美人兮，见之不忘'
  ]

  author:number = 2
  changAuthor() {
    this.author = 3
  }
}

app.component.html


<button (click)="add()">添加</button>
<button (click)="add2($event)">添加2</button>

<p *ngIf="isPoetry">
    山有木兮木有枝，心悦君兮君不知
</p>
<button (click)="changePoetry()">修改isPoetry2</button>
<ng-container *ngIf="isPoetry2; else elseTemplate">
    <p>与君初相识，犹如故人归</p>
</ng-container>
<ng-template #elseTemplate>
    <p>愿我如星君如月，夜夜流光相皎洁</p>
</ng-template>

<!-- angular17 写法 -->
@if (isPoetry2) {
    <p>似此星辰非昨夜，为谁风露立中宵</p>
}
@else {
    <p>曾经沧海难为水，除却巫山不是云</p>
}

<!-- for 语句 -->
<p *ngFor="let poetry of poetrys let i = index">
    {{i+1}}、{{poetry}}
</p>

<!-- angular 17 @for 语句 -->
@for (item of poetrys; track item) {
    <div>{{item}}</div>
} @empty {
    Empty list of poetrys
}
  
@for (item of poetrys; track $index) {
    <p>{{$index+1}}、{{item}}</p>
}

<button (click)="changAuthor()">修改作者</button>
<!-- angular switch语法 -->
<div [ngSwitch]="author">
    <p *ngSwitchCase="1">
        青天有月来几时 我今停杯一问之
    </p>
    <p *ngSwitchCase="2">
        明月几时有，把酒问青天
    </p>
    <p *ngSwitchDefault>
        江畔何人初见月，江月何年初照人
    </p>
</div>
<router-outlet></router-outlet>

运行效果

5.2、angular 17 @switch 形式

app.component.html


<button (click)="add()">添加</button>
<button (click)="add2($event)">添加2</button>

<p *ngIf="isPoetry">
    山有木兮木有枝，心悦君兮君不知
</p>
<button (click)="changePoetry()">修改isPoetry2</button>
<ng-container *ngIf="isPoetry2; else elseTemplate">
    <p>与君初相识，犹如故人归</p>
</ng-container>
<ng-template #elseTemplate>
    <p>愿我如星君如月，夜夜流光相皎洁</p>
</ng-template>

<!-- angular17 写法 -->
@if (isPoetry2) {
    <p>似此星辰非昨夜，为谁风露立中宵</p>
}
@else {
    <p>曾经沧海难为水，除却巫山不是云</p>
}

<!-- for 语句 -->
<p *ngFor="let poetry of poetrys let i = index">
    {{i+1}}、{{poetry}}
</p>

<!-- angular 17 @for 语句 -->
@for (item of poetrys; track item) {
    <div>{{item}}</div>
} @empty {
    Empty list of poetrys
}
  
@for (item of poetrys; track $index) {
    <p>{{$index+1}}、{{item}}</p>
}

<button (click)="changAuthor()">修改作者</button>
<!-- angular switch语法 -->
<div [ngSwitch]="author">
    <p *ngSwitchCase="1">
        青天有月来几时 我今停杯一问之
    </p>
    <p *ngSwitchCase="2">
        明月几时有，把酒问青天
    </p>
    <p *ngSwitchDefault>
        江畔何人初见月，江月何年初照人
    </p>
</div>

<!-- angular17 switch -->
@switch (author) {
    @case (1) {
        <p>若非群玉山头见 会向瑶台月下逢</p>
    }
    @case (2) {
        <p>春宵一刻值千值千金,花有清香月有阴</p>
    }
    @default {
        <p>情催桃李艳，心寄管弦飞</p>
    }
}
<router-outlet></router-outlet>

运行效果

6、双向数据绑定

想要实现双向数据绑定，需要引入angular 内置的 FormsModule 模块

在 app.component.ts 文件中引入

import { FormsModule } from '@angular/forms';

并在 @Component 的 import 中添加 FormsModule

app.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, FormsModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-learn';
  add() {
    alert('晓看天色暮看云，行也思君，坐也思君')
  }
  add2(e:MouseEvent) {
    console.log(e);
  }

  isPoetry:boolean = true
  isPoetry2:boolean = true

  changePoetry() {
    this.isPoetry2 = false
  }

  // 定义数组
  poetrys:Array<string> = [
    '死生契阔，与子成说',
    '执子之手，与子偕老',
    '我心匪石，不可转也',
    '有一美人兮，见之不忘'
  ]

  author:number = 2
  changAuthor() {
    this.author = 3
  }

  poetryContent:string = '彼采葛兮，一日不见，如三月兮'

}

app.component.html


<button (click)="add()">添加</button>
<button (click)="add2($event)">添加2</button>

<p *ngIf="isPoetry">
    山有木兮木有枝，心悦君兮君不知
</p>
<button (click)="changePoetry()">修改isPoetry2</button>
<ng-container *ngIf="isPoetry2; else elseTemplate">
    <p>与君初相识，犹如故人归</p>
</ng-container>
<ng-template #elseTemplate>
    <p>愿我如星君如月，夜夜流光相皎洁</p>
</ng-template>

<!-- angular17 写法 -->
@if (isPoetry2) {
    <p>似此星辰非昨夜，为谁风露立中宵</p>
}
@else {
    <p>曾经沧海难为水，除却巫山不是云</p>
}

<!-- for 语句 -->
<!-- <p *ngFor="let poetry of poetrys let i = index">
    {{i+1}}、{{poetry}}
</p> -->

<!-- angular 17 @for 语句 -->
<!-- @for (item of poetrys; track item) {
    <div>{{item}}</div>
} @empty {
    Empty list of poetrys
}
  
@for (item of poetrys; track $index) {
    <p>{{$index+1}}、{{item}}</p>
} -->

<button (click)="changAuthor()">修改作者</button>
<!-- angular switch语法 -->
<div [ngSwitch]="author">
    <p *ngSwitchCase="1">
        青天有月来几时 我今停杯一问之
    </p>
    <p *ngSwitchCase="2">
        明月几时有，把酒问青天
    </p>
    <p *ngSwitchDefault>
        江畔何人初见月，江月何年初照人
    </p>
</div>

<!-- angular17 switch -->
@switch (author) {
    @case (1) {
        <p>若非群玉山头见 会向瑶台月下逢</p>
    }
    @case (2) {
        <p>春宵一刻值千值千金,花有清香月有阴</p>
    }
    @default {
        <p>情催桃李艳，心寄管弦飞</p>
    }
}

<input [(ngModel)]="poetryContent" type="text" style="width: 200px;">
{{poetryContent}}
<router-outlet></router-outlet>

运行效果

​​​​​​​

至此完

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1199830.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于SSM的考研图书电子商务平台的设计与实现

基于SSM的考研图书电子商务平台的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…
阅读更多...
HDMI之编码篇

HDMI之编码篇

概述 HDMI 2.0b（含）以下版本，采用3个Channel方式输出。传输又分为3三种周期，视频数据，数据岛以及控制周期。视频传输采用8/10编码。数据岛采用4/10编码（TERC4）。控制周期采用2/10。编码都拓展成了10bits。 上图中，Pixel component(e.g.B)->D[7:0]表示视频数据周期…
阅读更多...
linux之IPC

linux之IPC

linux之IPC 什么是IPC共享内存(shm)ftokshmgetshmatshmdtshmctl 消息队列msggetmsgrcvmsgsndmsgctl 旗语(信号量)semgetsemctlsemopsem三级标题三级标题 ipc命令守护进程查看守护进程 什么是IPC IPC: Inter(内核) Process(进程) Communicton&#xff08;通信&#xff09; 共享内…
阅读更多...
【Delphi】 各个平台使用 ntfy 效果说明

【Delphi】 各个平台使用 ntfy 效果说明

目录 一、Delphi 中使用 ntfy 库下载地址 二、各个平台使用效果说明 1. android 平台 2. ios 平台 3. windows 平台 三、总结 一、Delphi 中使用 ntfy 库下载地址 官方的文档地址&#xff1a;ntfyDelphi 接口库地址&#xff1a;GitHub - hazzelnuts/ntfy-for-delphi at …
阅读更多...
冯·诺依曼结构

冯·诺依曼结构

一、约翰冯诺依曼---计算机之父 约翰冯诺依曼&#xff08;John von Neumann&#xff0c;1903年12月28日—1957年2月8日&#xff09;&#xff0c;出生于匈牙利布达佩斯&#xff0c;匈牙利裔美籍数学家、计算机科学家、物理学家和化学家&#xff0c;美国国家科学院院士&#xff…
阅读更多...
OpenCV：图像旋转与缩放

OpenCV：图像旋转与缩放

人工智能的学习之路非常漫长&#xff0c;不少人因为学习路线不对或者学习内容不够专业而举步难行。不过别担心&#xff0c;我为大家整理了一份600多G的学习资源&#xff0c;基本上涵盖了人工智能学习的所有内容。点击下方链接,0元进群领取学习资源,让你的学习之路更加顺畅!记得…
阅读更多...
Java Web——TomcatWeb服务器

Java Web——TomcatWeb服务器

目录 1. 服务器概述 1.1. 服务器硬件 1.2. 服务器软件 2. Web服务器 2.1. Tomcat服务器 2.2. 简单的Web服务器使用 1. 服务器概述 服务器指的是网络环境下为客户机提供某种服务的专用计算机&#xff0c;服务器安装有网络操作系统和各种服务器的应用系统服务器的具有高速…
阅读更多...
linux入门---自旋锁和读写锁

linux入门---自旋锁和读写锁

自旋锁 首先通过一个例子来带着大家理解自旋锁&#xff0c;在生活中大家肯定都等过人比如你们一家人准备出去玩可是出发的时候妻子发现自己还没有化妆于是连忙赶回了家这个时候其他人就得在楼下等着&#xff0c;但是这个等又分为两种情况第一种是真的在楼下等其他的什么事都没…
阅读更多...
Nginx：不同域名访问同一台机器的不同项目

Nginx：不同域名访问同一台机器的不同项目

Nginx很简单就可以解决同一台机器同时跑两个或者多个项目&#xff0c;而且都通过域名从80端口走。 以Windows环境下nginx服务为例&#xff0c;配置文件nginx.conf中&#xff0c;http中加上 include /setup/nginx-1.20.1/conf/conf.d/*.conf;删除server部分&#xff0c;完整如…
阅读更多...
RT-Thread Studio开发 新手入门

RT-Thread Studio开发 新手入门

文章目录 前言一、RT-Thread Studio 与 STM32CubeMX 下载安装二、新建工程三、点亮LED灯四、按键中断五、串口通信六、OLED显示 前言 软件开发环境&#xff1a;RT-Thread Studio、STM32CubeMX 硬件&#xff1a;STM32F407ZGT6 一、RT-Thread Studio 与 STM32CubeMX 下载安装 …
阅读更多...
【图像处理：OpenCV-Python基础操作】

【图像处理：OpenCV-Python基础操作】

【图像处理&#xff1a;OpenCV-Python基础操作】 1 读取图像2 显示图像3 保存图像4 图像二值化、灰度图、彩色图&#xff0c;像素替换5 通道处理&#xff08;通道拆分、合并&#xff09;6 调整尺寸大小7 提取感兴趣区域、掩膜8 乘法、逻辑运算9 HSV色彩空间&#xff0c;获取特定…
阅读更多...
哈希表之闭散列的实现

哈希表之闭散列的实现

闭散列实现哈希表 在闭散列实现哈希表中&#xff0c;我们选择线性探测法来解决哈希冲突。在哈希表的简介部分&#xff0c;我们已经介绍过线性探测法啦&#xff01; 线性探测&#xff1a;从发生冲突的位置开始&#xff0c;依次向后探测&#xff0c;直到寻找到下一个空位置为止…
阅读更多...
【Springboot】基于注解式开发Springboot-Vue3整合Mybatis-plus实现分页查询(二）——前端el-pagination实现

【Springboot】基于注解式开发Springboot-Vue3整合Mybatis-plus实现分页查询(二）——前端el-pagination实现

系列文章 【Springboot】基于注解式开发Springboot-Vue3整合Mybatis-plus实现分页查询—后端实现 文章目录 系列文章系统版本实现功能实现思路后端传入的数据格式前端el-table封装axois接口引入Element-plus的el-pagination分页组件Axois 获取后台数据 系统版本 后端&#xf…
阅读更多...
Day58_《MySQL索引与性能优化》

Day58_《MySQL索引与性能优化》

文章目录 一、SQL执行顺序二、索引简介1、关于索引2、索引的类型Btree 索引Btree 索引 三、Explain简介四、Explain 详解1、id2、select_type3、table4、type5、possible_keys6、key7、key_len8、ref9、rows10、Extra11、小案例 五、索引优化1、单表索引优化2、两表索引优化3、…
阅读更多...
Spring Boot 整合xxl-job实现分布式定时任务

Spring Boot 整合xxl-job实现分布式定时任务

xxl-job介绍 XXL-JOB是一个分布式任务调度平台&#xff0c;其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线&#xff0c;开箱即用。 xxl是xxl-job的开发者大众点评的许雪里名称的拼音开头。 设计思想 将调度行为抽象形成“调度…
阅读更多...
multilinear多项式承诺方案benchmark对比

multilinear多项式承诺方案benchmark对比

1. 引言 前序博客有&#xff1a; Lasso、Jolt 以及 Lookup Singularity——Part 1Lasso、Jolt 以及 Lookup Singularity——Part 2深入了解LassoJolt Lasso lookup中&#xff0c;multilinear多项式承诺方案的高效性至关重要。 本文重点关注4种multilinear多项式承诺方案的实…
阅读更多...
linux 不同用户不同jdk

linux 不同用户不同jdk

0、 解压一个新版本的jdk 1、 检查root用户下的环境变量&#xff0c;是否配置了JAVA_HOME&#xff0c;基于这个变量再配置的PATH变量是实现切换的前提。 2、 创建新用户 adduser jdk11 passwd jfjfjfjfjfjfj123 3、 编辑改用下的 .bashrc 文件 执行命令进行编辑&#xff0…
阅读更多...
【Nginx】深入浅出搞懂Nginx

【Nginx】深入浅出搞懂Nginx

Nginx是一款轻量级的Web服务器、反向代理服务器&#xff0c;由于它的内存占用少&#xff0c;启动极快&#xff0c;高并发能力强&#xff0c;在互联网项目中广泛应用。 反向代理服务器&#xff1f; 经常听人说到一些术语&#xff0c;如反向代理&#xff0c;那么什么是反向代理&a…
阅读更多...
BGP基本配置实验

BGP基本配置实验

目录 一、实验拓扑 二、实验需求 三、实验步骤 1、IP地址配置 2、内部OSPF互通&#xff0c;配置OSPF协议 3、BGP建立邻居关系 4、R1和R5上把业务网段宣告进BGP 5、消除路由黑洞&#xff0c;在R2、R4上做路由引入 6、业务网段互通 一、实验拓扑 二、实验需求 1、按照图…
阅读更多...
开发者测试2023省赛--UnrolledLinkedList测试用例

开发者测试2023省赛--UnrolledLinkedList测试用例

测试结果 官方提交结果 EclEmma PITest 被测文件UnrolledLinkedList.java /** This source code is placed in the public domain. This means you can use it* without any restrictions.*/package net.mooctest;import java.util.AbstractList; import java.util.Collectio…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023