搜索到
104
篇与
的结果
-
零基础学HTML5+CSS3---图片热区链接 <area>标记主要用于图像地图，通过该标记可以在图像地图中设定作用区域（又称为热点），这样当用户的鼠标移到指定的作用区域点击时，会自动链接到预先设定好的页面。图像热区链接的定义方式1.设置图片首先需要在图像文件中设置映射图像名。在添加图像的<img>标记中使用usemap属性添加图像要引用的映射图像的名称。<img src="图像地址" usemap="#映射图像名称">2.定义热区图像及热区的链接<map name = "映射图像名称" id = "映射图像名称"> <area shape="热区形状" coords="热区坐标" href="链接地址" title="标题"> </map>表示设定热点的形状为矩形，左上角顶点坐标为（X1,y1），右下角顶点坐标为（X2,y2）。表示设定热点的形状为圆形，圆心坐标为（X1,y1），半径为r。表示设定热点的形状为多边形，各顶点坐标依次为（X1,y1）、（X2,y2）、（x3,y3）...示例 <img src="img/main.jpeg" usemap="#beauty"> <map name="beauty" id="beauty"> <area shape="rect" coords="0,0,60,60" href="img/topleft.jpeg" title="美女"> </map> -
零基础学HTML5+CSS3---字体 斜体、下划线、删除线说明[alt type="success"][tag type="success"]<em>文字斜体标记[/tag][tag type="success"]<u>文字下划线标记[/tag][tag type="success"]<strike>文字删除线标记[/tag][/alt]示例代码<body style="color: mediumvioletred;"> <h3>书名：<em>《山海经》</em></h3> <h4>出版日期：<u>古代</u></h4> <h4>原价：<strike>200</strike> 促销价：300</h4> </body>文字的上标与下标说明[card-default width="100%" label="说明"][tag type="warning"]<sup>上标标记内容[/tag][tag type="danger"]<sub>下标标记内容[/tag][/card-default]示例代码<body style="color: mediumvioletred;"> <h2>数学公式</h2> 2X+4<sup>2</sup>=16 <h2>化学符号</h2> 水：H<sub>2</sub>O </body>特殊符号说明一般情况下，特殊符号由前缀&、字符名称和后缀分号;组成。常见特殊符号如下表：特殊符号实体名称含义''"引号<<左尖括号>>右尖括号✖️×乘号©©居右 居右原格式标记说明<pre>原格式标记，保留代码中的原始格式。示例代码 <pre> ^_^ </pre>[alt type="success"]<pre>标签中如果有html标签，仍然会被渲染[/alt]水平线说明水平线用于段落与段落之间的分隔。通过<hr>来创建水平线。示例代码 <hr style="margin-top: 20px;border: 1px solid royalblue;"> <pre> ^_^ </pre> <hr>
-
angular基础知识之路由 基本使用首先从@angular/router库中导入一些常量。修改我们的app.module.ts文件，增加以下内容import { RouterModule, Routes } from '@angular/router'; import { HashLocationStrategy, LocationStrategy, registerLocaleData } from '@angular/common';增加路由const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent } ]修改imports增加以下内容RouterModule.forRoot(routes),修改providers增加以下内容{ provide: LocationStrategy, useClass: HashLocationStrategy }安装路由器platformBrowserDynamic().bootstrapModule(AppModule)完整代码app.module.ts修改后，完整代码如下，请忽略无效内容import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http'; import { RouterModule, Routes } from '@angular/router'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { NZ_I18N } from 'ng-zorro-antd/i18n'; import { zh_CN } from 'ng-zorro-antd/i18n'; import { HashLocationStrategy, LocationStrategy, registerLocaleData } from '@angular/common'; import zh from '@angular/common/locales/zh'; import { FormsModule } from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NzDatePickerModule } from 'ng-zorro-antd/date-picker'; import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzFormModule } from 'ng-zorro-antd/form'; import { NzInputModule } from 'ng-zorro-antd/input'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzSelectModule } from 'ng-zorro-antd/select'; import { NzGridModule } from 'ng-zorro-antd/grid'; import { NzCardModule } from 'ng-zorro-antd/card'; import { SimpleHttpComponent } from './simple-http/simple-http.component'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { NzMenuModule } from 'ng-zorro-antd/menu'; import { AboutComponent } from './about/about.component'; import { HomeComponent } from './home/home.component'; registerLocaleData(zh); const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent } ] @NgModule({ declarations: [ AppComponent, SimpleHttpComponent, AboutComponent, HomeComponent ], imports: [ BrowserModule, AppRoutingModule, FormsModule, HttpClientModule, RouterModule.forRoot(routes), HttpClientJsonpModule, BrowserAnimationsModule, NzDatePickerModule, NzButtonModule, NzFormModule, NzInputModule, NzIconModule, NzSelectModule, NzGridModule, NzCardModule, NzMenuModule ], providers: [ { provide: NZ_I18N, useValue: zh_CN }, { provide: LocationStrategy, useClass: HashLocationStrategy } ], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule)创建模块我们创建两个模块，分别是Home、About修改App模板文件，配置路由<ul nz-menu nzMode="horizontal"> <li nz-submenu nzTitle="Home" nzIcon="mail" [routerLink]="['home']"></li> <li nz-submenu nzTitle="About" nzIcon="mail" [routerLink]="['about']"></li> </ul> <br /> <router-outlet></router-outlet><router-outlet>用于展示路由内容，[routerLink]用于配置节点的路由配置完成后，我们可以访问一下首页传递参数我们可能需要路由中传递参数，那么我们继续改造。修改路由参数修改about的路由，我们传递一个name属性。修改后如下const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'about/:name', component: AboutComponent }, { path: 'about', component: AboutComponent } ]修改模块import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-about', templateUrl: './about.component.html', styleUrls: ['./about.component.css'] }) export class AboutComponent implements OnInit { route: ActivatedRoute; name: string = ""; constructor(route: ActivatedRoute) { this.route = route route.params.subscribe( param => { this.name = param['name'] console.log(param) } ) } ngOnInit(): void { } }修改about模板<p>about works!</p> <br> {{name}}
-
angular HTTP请求 Angular有自己的HTTP库，我们可以用它来调用外部API。 在老的版本中HTTP模块位于@angular/http ，新的版本已经迁移到@angular/common/http。导入http模块在app.module.ts中，引入http模块import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http';然后注入模块@NgModule({ declarations: [ AppComponent, SimpleHttpComponent ], imports: [ HttpClientModule, HttpClientJsonpModule ], providers: [{ provide: NZ_I18N, useValue: zh_CN }], bootstrap: [AppComponent] })新建一个测试模块执行以下命令创建模块ng g c SimpleHttp引入HttpClient在新建模块的ts文件中，引入HttpClient模块，并在构造函数中注入。import { HttpClient } from '@angular/common/http'; private httpClient: HttpClient; constructor(httpClient: HttpClient) { this.httpClient = httpClient }使用let url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1" this.httpClient.get(url).subscribe((response) => { console.log(response); }, (err) => { console.warn(err) })其他除了get方法，还有我们常用的post、put、delete、request等方法。传递参数当然我们可以给后台传递参数的，这里我模拟一个login请求。post处理请求时，我们可能需要传递头部还有返回值类型信息，不然会报错。后台用Spring Boot模拟登陆@RestController public class LoginController { @PostMapping("login") @CrossOrigin public String Login(@RequestBody LoginEntity loginEntity){ LoginEntity entity = loginEntity; return "success"; } }前端完整调用代码import { Component, OnInit } from '@angular/core'; import { HttpClient ,HttpHeaders} from '@angular/common/http'; @Component({ selector: 'app-simple-http', templateUrl: './simple-http.component.html', styleUrls: ['./simple-http.component.css'] }) export class SimpleHttpComponent implements OnInit { private httpClient: HttpClient; private headers = new HttpHeaders({'Content-Type': 'application/json'}); constructor(httpClient: HttpClient) { this.httpClient = httpClient } ngOnInit(): void { let url = "http://localhost:8080/login" let param = { userName:'张三' } this.httpClient.post(url,param,{headers:this.headers,responseType:'text'}).subscribe(function(response) { console.log('我取到数据了：'+response) }, function(err){ debugger console.log('报错了:'+err) }) } }
-
简约精致苹果风格 LINUX 系统：CUTEFISHOS 近又新出了一个 Linux 桌面发行版「CutefishOS」基于 Ubuntu，桌面风格非常苹果味，根据官方的介绍，做更好的桌面操作系统、注重简洁、美观和实用性。访问百度网盘：https://pan.baidu.com/s/1KjdN-C2Vdf5OTVwKYXYh5Q (提取码: 7dx2)天翼网盘：https://cloud.189.cn/web/share?code=Qzi6biUFfi2q（访问码：sbi6）官方：https://cn.cutefishos.com2021年09月12日昨天趁着周六在家里电脑安装了一下，简单说一下体会吧，因为我上午安装的，晚上就把电脑搞崩了￣□￣｜｜系统安装上之后，虽然是测试版，但是还是挺流畅的。整体界面比较简洁，类似Mac风格，但是感觉没那么精致。基于Ubuntu，所以Ubuntu的那套逻辑都能正常用。
-
angular监听表单变化及双向数据绑定 监听表单变化FormGroup及FormControl都带有EventEmitter（事件发射器）用于监控表单控件的变化。要监听控件的变化，我们通过以下步骤：通过调用control.valueChanges访问这个EventEmitter然后调用.subscribe方法添加一个监听器。html代码如下<nz-card style="width:300px;"> <form [formGroup]="myForm" nz-form (ngSubmit)="onSubmit(myForm.value)"> <nz-form-item> <nz-form-label [nzSpan]="6" nzFor="sku">sku</nz-form-label> <nz-form-control [nzSpan]="14"> <input nz-input name="sku" type="text" id="sku" [formControl]="myForm.controls['sku']"> <nz-tag *ngIf="myForm.controls['sku'].hasError('required') && myForm.controls['sku'].touched" [nzColor]="'magenta'">请输入SKU</nz-tag> <nz-tag nzColor="error" *ngIf="myForm.controls['sku'].hasError('invalidSku')"> <i nz-icon nzType="close-circle"></i> <span>error</span> </nz-tag> </nz-form-control> </nz-form-item> <nz-form-item> <button type="submit" nz-button class="primary">Submit</button> </nz-form-item> </form> </nz-card>ts代码如下import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms'; @Component({ selector: 'app-demo-form-sku-form-builder', templateUrl: './demo-form-sku-form-builder.component.html', styleUrls: ['./demo-form-sku-form-builder.component.css'] }) export class DemoFormSkuFormBuilderComponent implements OnInit { myForm: FormGroup constructor(formBuilder: FormBuilder) { this.myForm = formBuilder.group({}) let formControl: FormControl = new FormControl("", Validators.compose( [Validators.required, this.skuValidator] )) this.myForm.addControl("sku", formControl) formControl.valueChanges.subscribe((value: string) => { console.warn('值改变' + value) }) this.myForm.valueChanges.subscribe((form: any) => { console.warn('表单改变：' + JSON.stringify(form)) }) } ngOnInit(): void { } onSubmit(form: any): void { debugger this.myForm.controls['sku'] console.log(form) } skuValidator(formControl: FormControl): { [s: string]: boolean } { if (!formControl.value.match(/^123/)) { return { invalidSku: true } } return { invalidSku: false } } } 双向数据绑定ngModel是一个特殊的指令，它将模型绑定到表单中。ngModel的特殊之处在于它实现了双向绑定。相对于单向绑定来说，双向绑定更加复杂和难以推断。Angular通常的数据流向是单向的：自顶向下。但对于表单来说，双向绑定有时会更加容易。我们在ts文件添加一个sku属性，修改后如下import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms'; @Component({ selector: 'app-demo-form-sku-form-builder', templateUrl: './demo-form-sku-form-builder.component.html', styleUrls: ['./demo-form-sku-form-builder.component.css'] }) export class DemoFormSkuFormBuilderComponent implements OnInit { myForm: FormGroup sku: string constructor(formBuilder: FormBuilder) { this.sku = '' this.myForm = formBuilder.group({}) let formControl: FormControl = new FormControl("", Validators.compose( [Validators.required, this.skuValidator] )) this.myForm.addControl("sku", formControl) formControl.valueChanges.subscribe((value: string) => { console.warn('值改变' + value) }) this.myForm.valueChanges.subscribe((form: any) => { console.warn('表单改变：' + JSON.stringify(form)) }) } ngOnInit(): void { } onSubmit(form: any): void { debugger this.myForm.controls['sku'] console.log(form) } skuValidator(formControl: FormControl): { [s: string]: boolean } { if (!formControl.value.match(/^123/)) { return { invalidSku: true } } return { invalidSku: false } } } html模板中通过[(ngModel)]绑定我们添加的属性<nz-card style="width:300px;"> <form [formGroup]="myForm" nz-form (ngSubmit)="onSubmit(myForm.value)"> <nz-form-item> <nz-form-label [nzSpan]="6" nzFor="sku">sku</nz-form-label> <nz-form-control [nzSpan]="14"> <input nz-input name="sku" type="text" id="sku" [formControl]="myForm.controls['sku']" [(ngModel)]="sku"> <nz-tag *ngIf="myForm.controls['sku'].hasError('required') && myForm.controls['sku'].touched" [nzColor]="'magenta'">请输入SKU</nz-tag> <nz-tag nzColor="error" *ngIf="myForm.controls['sku'].hasError('invalidSku')" > <i nz-icon nzType="close-circle"></i> <span>error</span> </nz-tag> </nz-form-control> </nz-form-item> <nz-form-item> <button type="submit" nz-button class="primary">Submit</button> </nz-form-item> </form> <div> sku:{{sku}} </div> </nz-card>
-
angular内置指令 ngIf用来决定显示或隐藏元素，指令条件可以是表达式。app.component.html代码<nz-card style="width:300px;" nzTitle="Card title" [nzExtra]="extraTemplate"> <p *ngIf=false>1</p> <p *ngIf="doNotDisplay">2</p> <p *ngIf="display()">3</p> </nz-card> <ng-template #extraTemplate> <a>More</a> </ng-template>app.component.ts代码import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { doNotDisplay: boolean = false display(): boolean { return true } } 隐藏的元素不会创建。ngSwitchngSwitch指令可以通过ngSwitchCase、ngSwitchDefault走不通的分支。app.component.html代码<nz-card style="width:300px;" nzTitle="Card title" [nzExtra]="extraTemplate" [ngSwitch]="choice"> <p *ngSwitchCase="1">1</p> <p *ngSwitchCase="2">2</p> <p *ngSwitchCase="3">3</p> <p *ngSwitchDefault>default</p> </nz-card> <ng-template #extraTemplate> <a>More</a> </ng-template>app.component.ts代码import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { choice: string = "4" }ngStyle给DOM元素设置CSS属性。最简单的用法[style.property]=valueapp.component.html代码<nz-card style="width:300px;" nzTitle="Card title" [nzExtra]="extraTemplate"> <p *ngIf=false>1</p> <p *ngIf="doNotDisplay">2</p> <p *ngIf="display()" [style.background-color]="backgroundColor">3</p> </nz-card> <ng-template #extraTemplate> <a>More</a> </ng-template>app.component.ts代码import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { doNotDisplay: boolean = false backgroundColor: string = 'red' display(): boolean { return true } }另外一种方式是使用键值对<nz-card style="width:300px;" nzTitle="Card title" [nzExtra]="extraTemplate"> <p *ngIf=false>1</p> <p *ngIf="doNotDisplay">2</p> <p *ngIf="display()" [ngStyle]="{'background-color':backgroundColor}">3</p> </nz-card> <ng-template #extraTemplate> <a>More</a> </ng-template>ngClassapp.component.css中定义一个类.bordered{ border: 1px dashed royalblue; }app.component.html代码<div [ngClass]="'bordered'" style="height: 400px;"></div>也可以通过如下代码<div [ngClass]="{bordered:false}" style="height: 400px;"></div>ngFor用于循环app.component.html代码<ul> <li *ngFor="let color of colors" [ngStyle]="{color:color}">{{color}}</li> </ul>app.component.ts代码import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { colors:Array<String> constructor(){ this.colors=[ 'red','blue','green' ] } }循环时，我们也可以获取索引<ul> <li *ngFor="let color of colors;let index=index" [ngStyle]="{color:color}">{{index}}--{{color}}</li> </ul>ngNonBindable指定不编译或者绑定页面中的某个特殊部分。app.component.html代码<p ngNonBindable> {{content}} </p> <p> {{content}} </p>app.component.ts代码import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { content:string="<div>content</div>" }innerHTML、innerText通过{{}}输出内容，会强制转换成文本。我们可以通过[innerHTML]输出html。[innerText]可以将html代码强制输出文本。app.component.html代码<div [innerHTML]="content"> </div> <div [innerText]="content"> </div>app.component.ts代码import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { content:string="<div>测试</div>" }
-
angular组件的输入与输出 所谓组件的输入与输出，其实就是给组件传值或者组件往外传值。类似于父组件向子组件传值或者子组件回调父组件的方法（也可以回调传值）。angular在模板上，通过[]实现组件的输入，()实现组件的输出。组件的输入比如有一个test的组件，其中有一个name属性，我们需要通过app组件将name传递给test组件。方式一：通过@Input()注解@Input()注解适合数据比较少的情况。首先，我们需要在TestComponent类中增加一个name属性，然后导入Input，然后在name属性前增加@Input()注解。import { Component, EventEmitter, OnInit,Input } from '@angular/core'; @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.css'] }) export class TestComponent implements OnInit { @Input('newName') name: string; constructor() { this.name = "" } ngOnInit(): void { } } @Input('newName')中的newName代表我们起的一个别名，也就是说在传值的时候，我们是通过[newName]将值传递到组件的name属性。然后我们在模板文件test.component.html增加输出，以便测试值是否传递。<p>{{name}}</p>我们在app.component.html中调用app-test组件，并通过[]传值。<app-test [newName]='"test"'></app-test>测试方式二：通过Inputs[]配置项首先，我们需要在TestComponent类中增加一个name属性，然后在@Component注解中，增加Inputs[]配置项。import { Component, EventEmitter, OnInit } from '@angular/core'; @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.css'], inputs: ['name:newName'] }) export class TestComponent implements OnInit { name: string; constructor() { this.name = "" } ngOnInit(): void { } } inputs: ['name:newName']中，name代表当前类的属性，冒号后面的newName代表别名，也就是说在传值的时候，我们是通过[newName]将值传递到组件的name属性。然后我们在模板文件test.component.html增加输出，以便测试值是否传递。<p>{{name}}</p>我们在app.component.html中调用app-test组件，并通过[]传值。<app-test [newName]='"test"'></app-test>组件的输出angular中通过()实现组件的输出。比如我们在app-test组件中，定义了一个like方法，此方法执行时，回调父组件的ringWasPlace方法，并传递一个字符串。在app.component.ts代码如下import { Component, EventEmitter, OnInit,Input } from '@angular/core'; @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.css'], outputs: ['putRingOnIt'] }) export class TestComponent implements OnInit { putRingOnIt: EventEmitter<string> @Input('newName') name: string; constructor() { this.name = "" this.putRingOnIt = new EventEmitter(); } ngOnInit(): void { } liked(): void { this.putRingOnIt.emit('oh oh oh') } }父组件模板文件app.component.html<app-test [newName]='"test"' (putRingOnIt)="ringWasPlace($event)"></app-test> <h1> {{message}} </h1>父组件类app.component.ts如下import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { message: string; constructor() { this.message = "" } ringWasPlace(message: string):void { this.message = message; } } 测试，点击一下like按钮，看到输出如下
-
开启angular之旅 前言这年头，作为新生代的农民工真的太难了。虽说活到老，学到老，但是学习的速度永远跟不上技术的迭代。细数一下，做过的东西真不少了。[timeline] [timeline-item]13年，Delphi[/timeline-item] [timeline-item]14、15、16年，C# WinForm+WPF[/timeline-item] [timeline-item]17、18年，C# WebForm+jQuery+bootstrap[/timeline-item] [timeline-item]19年，转java+spring boot+微服务+jQuery[/timeline-item] [timeline-item]20年，java+spring boot+vue+element UI[/timeline-item] [timeline-item]21年，java+spring boot+微服务+angular[/timeline-item][/timeline]这迭代速度，也是没谁了。现在公司使用angular，虽然基本不会使用，但是作为技术储备，还是打算在学习一下angular。angular开发环境打开安装nodejs进入nodejs官网，找到自己对应版本，下载安装即可安装完成后，输入node -v npm -v显示以下内容代表安装成功npm替换淘宝源npm config set registry https://registry.npm.taobao.org安装angular/cliangular/cli是一个类似工具的东西，具体的我也没有深究，根据我使用一次的直观感受，它的作用就是，安装它后，我们可以通过各种不同的命令行来实现angular项目的创建，运行，调试等等npm install -g @angular/cli输入ng version输出以上页面，代表安装成功。创建angular项目ng new 项目名称创建angular项目，如下示例：创建名为 angular的项目ng new angular生成项目如下运行angular项目在项目文件夹下，输入ng serve打包运行项目，然后我们可以通过默认的4200端口访问http://localhost:4200/查看项目
-
关于node的一些默认配置 作为一个后端高企前端真的非常费劲。其实，之前也接触过Node，但是基本属于能用但是不会用的地步。最近在开发时，将一个angular的前端项目从windows迁移到linux继续开发，中间遇到了很多问题，借此记录一下。Linux默认配置可以通过npm config list查看Node的配置列表。也可以通过一下命令，通过可编辑文件的方式编辑配置文件。npm config edit配置文件位于登录用户（我这里使用root登录）的目录下，是个隐藏文件，可以通过以下命令查看cd /root ls -aWin默认配置可以通过npm config list查看Node的配置列表。在windows系统中，npm全局包下载位置在'C:\用户\AppData\Roaming\npm\node_modules'中。修改全局包存储位置可以通过npm config set命令修改默认全局包的存储路径比如npm config set prefix /usr/lib/node_modules将全局包存储路径改到/usr/lib/node_modules也可以通过npm config delete命令删除某个配置项比如npm config delete prefix删除配置的全局包信息。
-
Spring Cloud集成Sentinel之持久化规则 在使用Sentinel我们发现，只要重新启动Sentinel的Java 客户端服务，Sentinel控制台配置的限流规则，就清空不存在了，下面介绍怎么持久化Sentinel规则。我们继续修改前面的代码。增加依赖 <!-- sentinel-datasource-nacos --> <dependency> <groupId>com.alibaba.csp</groupId> <artifactId>sentinel-datasource-nacos</artifactId> </dependency>修改配置增加增加Nacos数据源server: port: 8401 spring: application: name: cloudalibaba-sentinel-service cloud: nacos: discovery: server-addr: 192.168.120.180:1111 sentinel: transport: dashboard: 192.168.120.180:9000 # 默认8719端口，假如端口被占用，依次+1，直到找到未被占用端口 port: 8719 datasource: ds1: nacos: server-addr: 192.168.120.180:1111 dataId: nacos-consumer-order groupId: DEFAULT_GROUP data-type: json rule-type: flow management: endpoints: web: exposure: include: "*"在Nacos配置中心，增加配置[{ "resource": "/testQPSA", "limitApp": "default", "grade": 1, "count": 1, "strategy": 0, "controlBehavior": 0, "clusterMode": false }]需要注意：dataId、groupId、data-type属性，Nacos配置中心需要与配置文件的保持一致。此时，我们再次1s内多次刷新http://localhost:8401/testQPSA，看到会被限流
-
el-table隐藏顶部复选框 有时候我们使用el-table的选择框时，如果涉及修改、删除时，可能一次只允许用户选择一条，这样的话，如果使用顶部的全选复选框就不合适了。我们可以提供两种方式，一种是隐藏顶部的复选框，另一种是将顶部复选框改成文字，禁止点击。多选框那一列加label-class-name <el-table v-loading="loading" :data="assetClass.assetClassPropertyList" row-key="propertyId" :row-class-name="rowClassName" @selection-change="handleSelectionChange" ref="table"> <el-table-column type="index" width="50" align="center" label="序号"/> <el-table-column type="selection" width="50" align="center" label-class-name="DisabledSelection"/> <el-table-column prop="propertyName" label="属性名称" show-overflow-tooltip align="center"> <template slot-scope="scope"> <el-input v-model="scope.row.propertyName" size="mini" maxlength="64" :show-word-limit="true"></el-input> </template> </el-table-column> <el-table-column prop="isRequired" label="是否必填" :formatter="isRequiredFormatter" width="100"> <template slot-scope="scope"> <el-switch v-model="scope.row.isRequired" active-value="Y" inactive-value="N" ></el-switch> </template> </el-table-column> </el-table>style加样式隐藏顶部复选框<style scoped> /*表格全选框去除空框*/ .el-table >>> .DisabledSelection .cell .el-checkbox__inner { display: none; position: relative; } </style>将顶部复选框改成汉字<style scoped> /*表格全选框去除空框*/ .el-table >>> .DisabledSelection .cell .el-checkbox__inner { display: none; position: relative; } /*表格全选框改为：选择*/ .el-table >>> .DisabledSelection .cell:before { content: "选择"; position: absolute; left: 7px; } </style>
