使用angular4和asp.net core 2 web api做个练习项目(二), 这部分都是angular

上一篇: http://www.cnblogs.com/cgzl/p/7755801.html

完成client.service.ts:

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { ErrorHandler } from '@angular/core';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';import { Client } from '../models/Client';@Injectable()
export class ClientService {private url = 'http://localhost:5001/api/client';private headers = new Headers({ 'Content-Type': 'application/json' });constructor(private http: Http) { }getAll(): Observable<Client[]> {return this.http.get(this.url).map(response => response.json() as Client[]);}getOne(id: number): Observable<Client> {return this.http.get(`${this.url}/${id}`).map(response => response.json() as Client);}create(client: Client) {return this.http.post(this.url, JSON.stringify(client), { headers: this.headers }).map(response => response.json()).catch(this.handleError);}update(client: Client) {return this.http.patch(`${this.url}/${client.id}`, JSON.stringify(client), { headers: this.headers }).map(response => response.json()).catch(this.handleError);}delete(id: number) {return this.http.delete(`${this.url}/${id}`).map(response => response.json()).catch(this.handleError);}private handleError(error: Response) {if (error.status === 400) {return Observable.throw('Bad Request');}if (error.status === 404) {return Observable.throw('Not Found');}return Observable.throw('Error Occurred');}
}

我个人比较喜欢 observable的方式而不是promise.

然后再Client.Component里面, 注入ClientService, 在NgOnInit里面调用查询方法:

import { Component, OnInit } from '@angular/core';
import { ClientService } from '../../services/client.service';
import { Client } from '../../models/Client';@Component({selector: 'app-clients',templateUrl: './clients.component.html',styleUrls: ['./clients.component.css']
})
export class ClientsComponent implements OnInit {public clients: Client[];constructor(private service: ClientService) { }ngOnInit() {this.service.getAll().subscribe(clients => {this.clients = clients;console.log(this.clients);});}
}

然后修改Client.Component.html:

<table class="table table-striped" *ngIf="clients?.length > 0; else noClients"><thead class="thead-dark"><tr><th>ID</th><th>Name</th><th>Email</th><th>Balance</th><th></th></tr></thead><tbody><tr *ngFor="let client of clients"><td>{{client.id}}</td><td>{{client.firstName + ' ' + client.lastName}}</td><td>{{client.email}}</td><td>{{client.balance}}</td><td><a href="" class="btn btn-secondary btn-sm">明细</a></td></tr></tbody>
</table>
<ng-template #noClients><hr><h5>系统中没有客户..</h5>
</ng-template>

然后把client.component放在dashboard中:

dashboard.component.html:

<app-clients></app-clients>

然后看看浏览器:

我这里还没有数据, 如果有数据的话, 将会显示一个table, header是黑色的.

使用font-awesome

npm install font-awesome --save

然后打开.angular-cli.json:

      "styles": ["styles.css","../node_modules/bootstrap/dist/css/bootstrap.css","../node_modules/font-awesome/css/font-awesome.css"],"scripts": ["../node_modules/jquery/dist/jquery.js","../node_modules/tether/dist/js/tether.js","../node_modules/bootstrap/dist/js/bootstrap.bundle.js"]

重新运行ng serve

修改 client.component.html的明细按钮:

<td><a href="" class="btn btn-secondary btn-sm"><i class="fa fa-arrow-circle-o-right"></i> 明细</a></td>

然后还是使用swagger添加两条数据吧: http://localhost:5001/swagger, 现在的效果:

添加一个总计:

import { Component, OnInit } from '@angular/core';
import { ClientService } from '../../services/client.service';
import { Client } from '../../models/Client';@Component({selector: 'app-clients',templateUrl: './clients.component.html',styleUrls: ['./clients.component.css']
})
export class ClientsComponent implements OnInit {public clients: Client[];public total: number;constructor(private service: ClientService) { }ngOnInit() {this.service.getAll().subscribe(clients => {this.clients = clients;this.getTotal();});}getTotal() {this.total = this.clients.reduce((previous, current) => previous + current.balance, 0);}
}

html:

<div class="row"><div class="col-md-6"><h2><i class="fa fa-users">客户</i></h2></div><div class="col-md-6"><h5 class="pull-right text-muted">总计: {{total | currency:"USD":true}}</h5></div>
</div>
<table class="table table-striped" *ngIf="clients?.length > 0; else noClients"><thead class="thead-dark"><tr><th>ID</th><th>Name</th><th>Email</th><th>Balance</th><th></th></tr></thead><tbody><tr *ngFor="let client of clients"><td>{{client.id}}</td><td>{{client.firstName + ' ' + client.lastName}}</td><td>{{client.email}}</td><td>{{client.balance}}</td><td><a href="" class="btn btn-secondary btn-sm"><i class="fa fa-arrow-circle-o-right"></i> 明细</a></td></tr></tbody>
</table>
<ng-template #noClients><hr><h5>系统中没有客户..</h5>
</ng-template>

Sidebar 侧边栏

打开sidebar.component.html:

<a routerLink="/add-client" href="#" class="btn btn-success btn-block"><i class="fa fa-plus"></i>添加新客户</a>

然后再dashboard中添加sidebar:

<div class="row"><div class="col-md-10"><app-clients></app-clients></div><div class="col-md-2"><app-sidebar></app-sidebar></div>
</div>

添加在了右边. 效果如图:

然后需要在app.module.ts里面添加路由:

const appRoutes: Routes = [{ path: '', component: DashboardComponent },{ path: 'register', component: RegisterComponent },{ path: 'login', component: LoginComponent },{ path: 'add-client', component: AddClientComponent }
];

Add-Client 添加客户的表单:

打开add-client.component.html:

<div class="row"><div class="col-md-6"><a routerLink="/" href="#" class="btn btn-link"><i class="fa fa-arrow-circle-o-left"></i> 回到Dashboard </a></div><div class="col-md-6"></div>
</div><div class="card"><div class="card-header">Add Client</div><div class="card-body"><form #f="ngForm" (ngSubmit)="onSubmit(f)"><div class="form-group"><label for="firstName"></label><input type="text" class="form-control" [(ngModel)]="client.firstName"name="firstName"#clientFirstName="ngModel"minlength="2"required><div *ngIf="clientFirstName.errors.required && clientFirstName.touched" class="alter alert-danger">名字是必填的</div><div *ngIf="clientFirstName.errors.minlength && clientFirstName.touched" class="alter alert-danger">名字最少是两个字</div></div></form></div>
</div>

现在表单里面添加一个字段, 然后在app.module里面添加FormsModule:

import { FormsModule } from '@angular/forms';imports: [BrowserModule,RouterModule.forRoot(appRoutes),HttpModule,
    FormsModule],

现在应该是这个样子:

然后把表单都完成 add-client.component.html:

<div class="row"><div class="col-md-6"><a routerLink="/" href="#" class="btn btn-link"><i class="fa fa-arrow-circle-o-left"></i> 回到Dashboard </a></div><div class="col-md-6"></div>
</div><div class="card"><div class="card-header">添加客户</div><div class="card-body"><form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate><div class="form-group"><label for="firstName"></label><input type="text" class="form-control" [(ngModel)]="client.firstName" name="firstName" #clientFirstName="ngModel" minlength="2"required><div *ngIf="clientFirstName.touched && clientFirstName.invalid"><div *ngIf="clientFirstName.errors.required" class="alert alert-danger">名字是必填的</div><div *ngIf="clientFirstName.errors.minlength" class="alert alert-danger">名字最少是两个字</div></div></div><div class="form-group"><label for="lastName"></label><input type="text" class="form-control" [(ngModel)]="client.lastName" name="lastName" #clientLastName="ngModel" minlength="2"required><div *ngIf="clientLastName.touched && clientLastName.invalid"><div *ngIf="clientLastName.errors.required" class="alert alert-danger">姓是必填的</div><div *ngIf="clientLastName.errors.minlength" class="alert alert-danger">姓最少是两个字</div></div></div><div class="form-group"><label for="email">Email</label><input type="email" class="form-control" [(ngModel)]="client.email" name="email" #clientEmail="ngModel" required><div *ngIf="clientEmail.touched && clientEmail.invalid"><div *ngIf="clientEmail.errors.required" class="alert alert-danger">Email是必填的</div></div></div><div class="form-group"><label for="phone">联系电话</label><input type="text" class="form-control" [(ngModel)]="client.phone" name="phone" #clientPhone="ngModel" minlength="10"><div *ngIf="clientPhone.touched && clientPhone.invalid"><div *ngIf="clientPhone.errors.minlength" class="alert alert-danger">电话最少是10位</div></div></div><div class="form-group"><label for="balance">余额</label><input type="number" class="form-control" [(ngModel)]="client.balance" name="balance" #clientBalance="ngModel" [disabled]="disableBalanceOnAdd"></div><input type="submit" class="btn btn-primary btn-block" value="提交"></form></div>
</div>

现在看起来是这样:

再安装一个库: npm install --save angular2-flash-messages

这个库可以略微灵活的显示提示信息.

npm install --save angular2-flash-messages

在app.module里面:

import { FlashMessagesModule } from 'angular2-flash-messages';imports: [BrowserModule,RouterModule.forRoot(appRoutes),HttpModule,FormsModule,
    FlashMessagesModule],

add-client.component.ts:

import { Component, OnInit } from '@angular/core';
import { FlashMessagesService } from 'angular2-flash-messages';
import { Router } from '@angular/router';
import { Client } from '../../models/Client';@Component({selector: 'app-add-client',templateUrl: './add-client.component.html',styleUrls: ['./add-client.component.css']
})
export class AddClientComponent implements OnInit {public client: Client = {id: 0,firstName: '',lastName: '',email: '',phone: '',balance: 0};public disableBalanceOnAdd = true;constructor(public flashMessagesService: FlashMessagesService,public router: Router) { }ngOnInit() {}onSubmit({ value, valid }: { value: Client, valid: boolean }) {if (!valid) {this.flashMessagesService.show('请正确输入表单', { cssClass: 'alert alert-danger', timeout: 4000 });this.router.navigate(['/add-client']);} else {console.log('valid');}}
}

然后需要在某个地方放置flash messages, 打开app.component.html:

<app-navbar></app-navbar>
<div class="container"><flash-messages></flash-messages><router-outlet></router-outlet>
</div>

然后运行一下:

大约这个样子.

然后修改提交, 注入clientService, 把数据新增到web api:

import { Component, OnInit } from '@angular/core';
import { FlashMessagesService } from 'angular2-flash-messages';
import { Router } from '@angular/router';
import { Client } from '../../models/Client';
import { ClientService } from '../../services/client.service';@Component({selector: 'app-add-client',templateUrl: './add-client.component.html',styleUrls: ['./add-client.component.css']
})
export class AddClientComponent implements OnInit {public client: Client = {id: 0,firstName: '',lastName: '',email: '',phone: '',balance: 0};public disableBalanceOnAdd = true;constructor(public flashMessagesService: FlashMessagesService,public router: Router,public clientService: ClientService) { }ngOnInit() {}onSubmit({ value, valid }: { value: Client, valid: boolean }) {if (this.disableBalanceOnAdd) {value.balance = 0;}if (!valid) {this.flashMessagesService.show('请正确输入表单', { cssClass: 'alert alert-danger', timeout: 4000 });this.router.navigate(['/add-client']);} else {this.clientService.create(value).subscribe(client => {console.log(client);this.flashMessagesService.show('新客户添加成功', { cssClass: 'alert alert-success', timeout: 4000 });this.router.navigate(['/']);});}}
}

可以运行试试. 应该是好用的.

Client Detail 客户明细:

首先在app.module.ts里面添加路由:

const appRoutes: Routes = [{ path: '', component: DashboardComponent },{ path: 'register', component: RegisterComponent },{ path: 'login', component: LoginComponent },{ path: 'add-client', component: AddClientComponent },{ path: 'client/:id', component: ClientDetailsComponent }
];

然后在clients.componet.html修改:

      <td><a href="" [routerLink]="['/client', client.id]" class="btn btn-secondary btn-sm"><i class="fa fa-arrow-circle-o-right"></i> 明细</a></td>

修改client-detail.component.ts:

import { Component, OnInit } from '@angular/core';
import { ClientService } from '../../services/client.service';
import { FlashMessagesService } from 'angular2-flash-messages';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Client } from '../../models/Client';@Component({selector: 'app-client-details',templateUrl: './client-details.component.html',styleUrls: ['./client-details.component.css']
})
export class ClientDetailsComponent implements OnInit {id: string;client: Client;hasBalance = false;showBalanceUpdateInput = false;constructor(public clientService: ClientService,public router: Router,public route: ActivatedRoute,public flashMessagesService: FlashMessagesService) { }ngOnInit() {// 获取IDthis.id = this.route.snapshot.params['id'];// 获取Clientthis.clientService.getOne(+this.id).subscribe(client => {if (client.balance > 0) {this.hasBalance = true;}this.client = client;});}}

然后修改html:

<div class="row"><div class="col-md-6"><a routerLink="/" class="btn btn-link"><i class="fa fa-arrow-circle-o-left"></i> 回到Dashboard</a></div><div class="col-md-6"><div class="btn-group pull-right"><a [routerLink]="['/edit-client', id]" class="btn btn-secondary">编辑</a><button type="button" class="btn btn-danger" (click)="onDeleteClick()">删除</button></div></div>
</div>
<hr>
<div class="card" *ngIf="client"><div class="card-header"><h3> {{client.firstName + ' ' + client.lastName}}</h3></div><div class="card-body"><div class="row"><div class="col-md-8"><h4>客户ID: {{id}}</h4></div><div class="col-md-4"><h4 class="pull-right">余额:<span [class.text-danger]="!hasBalance" [class.text-success]="hasBalance">{{client.balance | currency: 'USD': true}}</span><small><a (click)="showBalanceUpdateInput = !showBalanceUpdateInput"><i class="fa fa-pencil"></i></a></small></h4><div class="clearfix"><form *ngIf="showBalanceUpdateInput" (submit)="updateBalance(id)" class="form-inline pull-right"><div class="form-group"><input type="number" class="form-control" name="balance" [(ngModel)]="client.balance"></div><button type="submit" class="btn btn-primary">更新</button></form></div></div></div><hr><ul class="list-group"><li class="list-group-item">Email: {{client.email}}</li><li class="list-group-item">联系电话: {{client.phone}}</li></ul></div>
</div>

然后要做一个修改余额的动作, 这是个部分更新, 应该对应http patch.

目前client.service里没有patch, 所以需要添加一个patch方法, 不过首先建立一个PatchModel.ts:.

export interface PatchModel {op: string;path: string;value: any;
}

client.service.ts:

import { PatchModel } from '../models/PatchModel';patch(id: number, patchs: PatchModel[]) {return this.http.patch(`${this.url}/${id}`, JSON.stringify(patchs), { headers: this.headers }).map(response => response.json()).catch(this.handleError);}

然后修改 client-detail.component.ts:

import { PatchModel } from '../../models/PatchModel';updateBalance(id: string) {// 更新客户的余额this.clientService.patch(+id, [{ op: 'replace', path: '/balance', value: this.client.balance }]).subscribe(() => {this.showBalanceUpdateInput = false;this.flashMessagesService.show('更新余额成功', { cssClass: 'alert alert-success', timeout: 4000 });});}

运行一下, 应该好用:

删除动作:

  onDeleteClick() {if (confirm('确定要删除?')) {this.clientService.delete(+this.id).subscribe(() => {this.flashMessagesService.show('客户删除成功', { cssClass: 'alert alert-success', timeout: 4000 });this.router.navigate(['/']);});}}

应该好用, 删除后跳转到dashboard.

编辑客户 Edit-Client

 先添加路由 app.module.ts:

const appRoutes: Routes = [{ path: '', component: DashboardComponent },{ path: 'register', component: RegisterComponent },{ path: 'login', component: LoginComponent },{ path: 'add-client', component: AddClientComponent },{ path: 'client/:id', component: ClientDetailsComponent },
  { path: 'edit-client/:id', component: EditClientComponent }
];

然后修改edit-client.component.html:

<div class="row"><div class="col-md-6"><a [routerLink]="['/client', id]" href="#" class="btn btn-link"><i class="fa fa-arrow-circle-o-left"></i> 回到客户明细 </a></div><div class="col-md-6"></div></div><div class="card"><div class="card-header">编辑客户</div><div class="card-body"><form #f="ngForm" (ngSubmit)="onSubmit(f)" *ngIf="client" novalidate><div class="form-group"><label for="firstName"></label><input type="text" class="form-control" [(ngModel)]="client.firstName" name="firstName" #clientFirstName="ngModel" minlength="2"required><div *ngIf="clientFirstName.touched && clientFirstName.invalid"><div *ngIf="clientFirstName.errors.required" class="alert alert-danger">名字是必填的</div><div *ngIf="clientFirstName.errors.minlength" class="alert alert-danger">名字最少是两个字</div></div></div><div class="form-group"><label for="lastName"></label><input type="text" class="form-control" [(ngModel)]="client.lastName" name="lastName" #clientLastName="ngModel" minlength="2"required><div *ngIf="clientLastName.touched && clientLastName.invalid"><div *ngIf="clientLastName.errors.required" class="alert alert-danger">姓是必填的</div><div *ngIf="clientLastName.errors.minlength" class="alert alert-danger">姓最少是两个字</div></div></div><div class="form-group"><label for="email">Email</label><input type="email" class="form-control" [(ngModel)]="client.email" name="email" #clientEmail="ngModel" required><div *ngIf="clientEmail.touched && clientEmail.invalid"><div *ngIf="clientEmail.errors.required" class="alert alert-danger">Email是必填的</div></div></div><div class="form-group"><label for="phone">联系电话</label><input type="text" class="form-control" [(ngModel)]="client.phone" name="phone" #clientPhone="ngModel" minlength="10"><div *ngIf="clientPhone.touched && clientPhone.invalid"><div *ngIf="clientPhone.errors.minlength" class="alert alert-danger">电话最少是10位</div></div></div><div class="form-group"><label for="balance">余额</label><input type="number" class="form-control" [(ngModel)]="client.balance" name="balance" #clientBalance="ngModel" [disabled]="disableBalanceOnEdit"></div><input type="submit" class="btn btn-primary btn-block" value="提交"></form></div></div>

修改edit-client.component.ts:

import { Component, OnInit } from '@angular/core';
import { ClientService } from '../../services/client.service';
import { FlashMessagesService } from 'angular2-flash-messages';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Client } from '../../models/Client';@Component({selector: 'app-edit-client',templateUrl: './edit-client.component.html',styleUrls: ['./edit-client.component.css']
})
export class EditClientComponent implements OnInit {id: string;client: Client;disableBalanceOnEdit = true;constructor(public clientService: ClientService,public router: Router,public route: ActivatedRoute,public flashMessagesService: FlashMessagesService) { }ngOnInit() {// 获取IDthis.id = this.route.snapshot.params['id'];// 获取Clientthis.clientService.getOne(+this.id).subscribe(client => {this.client = client;});}onSubmit({ value, valid }: { value: Client, valid: boolean }) {if (!valid) {this.flashMessagesService.show('请正确输入表单', { cssClass: 'alert alert-danger', timeout: 4000 });this.router.navigate(['/edit-client', this.id]);} else {this.clientService.update(+this.id, value).subscribe(client => {console.log(client);this.flashMessagesService.show('更新客户成功', { cssClass: 'alert alert-success', timeout: 4000 });this.router.navigate(['/client', this.id]);});}}
}

client.service.ts需要修改一下, 之前的update方法写的不正确也不符合规范:

  update(id: number, client: Client) {return this.http.put(`${this.url}/${id}`, JSON.stringify(client), { headers: this.headers }).map(response => response.json()).catch(this.handleError);}

然后运行, 好用.

先写到这, 估计还得写一篇, 下一篇文章里面要使用identity server 4了, implicit grant flow.

转载于:https://www.cnblogs.com/cgzl/p/7763397.html

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

leelen可视对讲怎么接线_楼宇对讲系统怎么布线 楼宇对讲系统布线方式【介绍】...

随着智能小区规模不断增加&#xff0c;楼宇可视对讲系统应用越来越广泛&#xff0c;因而视频信号的传输方式与布线设计显得越来越重要。视频信号与数据和音频信号不同&#xff0c;可行的一种传输方式为视频信号基带传输&#xff0c;下面小编就简要介绍一下这种传输方式和布线方…

路由汇总实例

5.2.2.2 路由汇总策略 之前提到过&#xff0c;在网络管理员计划好子网选择并进行预期地路由汇总时&#xff0c;手动路由汇总工作能取得最佳效果。例如&#xff0c;之前的例子设定好了一个考虑周全的计划&#xff0c;管理员只使用远离Yosemite路由器并以10.2开头的子网。这个规定…

《操作系统》OS学习(五):连续内存分配 内存碎片、动态分配、碎片整理、伙伴系统

内存碎片 在没有其他方式辅助的情况下&#xff0c;我们分配给一个进程的内存是连续的。在分配时候我们需要有动态分配与碎片处理。如何理解呢&#xff1f;就是每个进程需要一块内存&#xff0c;我们要选取合适的位置的内存分配给它。当有的进程先结束了内存还给操作系统&#…

世界之窗浏览器删除文本框信息_文本框——Excel里的便利贴

工作表里面的单元格应该是足够我们来记录数据和信息了。但是文本框这个功能在工作表中还是存在&#xff0c;可以理解为便利贴功能。插入文本框1.点击“插入”选项卡。2.然后点击“文本框”。3.在下拉菜单里面&#xff0c;有两种可供选择&#xff1a;横排文本框和垂直文本框。在…

RHEL 5服务篇—常用网络配置命令

常用网络配置命令 在“Linux系统管理”的文章中&#xff0c;大家已经学习了Linux系统的基本管理命令和技巧&#xff0c;为了进一步学习Linux网络服务打下了良好的基础。所以我作者以后将陆续推出Linux网络服务的相关文章。希望大家能给与我大大的支持。 今天我们就来学习一下…

清华大学《操作系统》(六):非连续内存分配 段式、页式、段页式存储管理

背景 连续内存分配给内存分配带来了很多不便&#xff0c;可能所有空闲片区大小都无法满足需求大小&#xff0c;这个分配就会失败。基于这种现状&#xff0c;就有了非连续内存分配的需求。非连续分配成功的几率更高&#xff0c;但也面对更多的问题&#xff0c;比如分配时是不是…

C语言第三次博客作业---单层循环结构

一、PTA实验作业。 题目1 1.实验代码 int n,i; double height1,height2;//1为输入身高&#xff0c;2为输出身高。 char sex; //1<height1<3; //N<1; scanf("%d",&n); while(n--){getchar();scanf("%c%lf",&sex,&height1);switch(sex)…

清华大学《操作系统》(七):虚拟存储、覆盖、交换

接下来几节都是对虚拟存储的讲解。虚拟存储是非连续存储管理的扩展。通过将内存中的数据暂存到外存的方式&#xff0c;为进程提供更大的内存空间。虚拟存储出现的主要原因是因为程序规模的增长速度远远大于存储器容量的增长速度&#xff0c;导致内存空间不够用。其实针对内存空…

遵义大数据中心项目工程概况_市委书记张新文到曹州云都大数据中心等项目现场调研建设情况...

4月25日&#xff0c;市委书记张新文到曹县调研重点项目建设情况&#xff0c;研究推进措施。市委常委、秘书长任仲义参加活动。张新文首先来到曹州云都大数据中心项目建设现场&#xff0c;查看项目推进情况。曹州云都大数据中心&#xff0c;是涵盖云计算区、研发办公区、公寓生活…

linux 可执行文件的分析(gcc GUN BUILEIN)

1、GCC The History of GCC 1984年&#xff0c;Richard Stallman发起了自由软件运动&#xff0c;GNU (Gnus Not Unix)项目应运而生&#xff0c;3年后&#xff0c;最初版的GCC横空出世&#xff0c;成为第一款可移植、可优化、支持ANSI C的开源C编译器。GCC最初的全名是GNU C Com…

Cassandra 的数据存储结构——本质是SortedMapRowKey, SortedMapColumnKey, ColumnValue

Cassandra 的数据存储结构 Cassandra 的数据模型是基于列族&#xff08;Column Family&#xff09;的四维或五维模型。它借鉴了 Amazon 的 Dynamo 和 Googles BigTable 的数据结构和功能特点&#xff0c;采用 Memtable 和 SSTable 的方式进行存储。在 Cassandra 写入数据之前&a…

清华大学《操作系统》(八):置换算法

功能&#xff1a;置换算法是指当出现缺页异常时&#xff0c;需要调入新页面而内存已满时&#xff0c;置换算法选择被置换的物理页面。 设计目标&#xff1a; 尽可能减少页面的调入调出次数&#xff1b;把未来不再访问或短期内不访问的页面调出。 页面锁定&#xff1a; 了解具…

烂泥:通过vsphere给esxi添加本地硬盘

公司ESXi服务器的硬盘空间不够使用&#xff0c;现在新加了一块硬盘在ESxi服务器上。在服务器上添加完硬盘后&#xff0c;在Vsphere上是看不到新加硬盘的。 下面我们来通过虚拟机模拟该情况&#xff0c;先添加一块硬盘。如下图&#xff1a; 在Esxi添加完硬盘后&#xff0c;现在通…

清华大学《操作系统》(九):进程和线程

进程 定义&#xff1a; 进程是指一个具有一定独立功能的程序在一个数据集合上的一次动态执行的过程。 组成&#xff1a; 代码数据状态寄存器&#xff08;正在运行的一个程序的所有状态信息&#xff09;&#xff1a;CPU状态CP0、指令指针IP通用寄存器&#xff1a;AX、BX、CX…

开始Flask项目

1.新建Flask项目。2.设置调试模式。3.理解Flask项目主程序。4.使用装饰器&#xff0c;设置路径与函数之间的关系。5.使用Flask中render_template&#xff0c;用不同的路径&#xff0c;返回首页、登录员、注册页。6.用视图函数反转得到URL&#xff0c;{{url_for(‘login’)}}&am…

烂泥:mysql数据库使用的基本命令

1、连接数据库的格式 mysql -h IP -u用户名 -p密码; 1.1连接远程数据库 mysql -h 192.168.1.214 -uroot -p123456 也可写成&#xff1a; mysql -h 192.168.1.214 -u root -p 123456 1.2连接本地数据库 mysql -uroot -p123456 也可写成&#xff1a; mysql -u root -p 123456 2、…

《操作系统》OS学习(十):进程控制

进程切换&#xff08;上下文切换&#xff09;&#xff1a; 定义&#xff1a;暂停当前运行进程&#xff0c;从运行状态变成其他状态&#xff0c;调度另一个进程从就绪状态变成运行状态要求&#xff1a;切换前&#xff0c;保存进程上下文&#xff1b;切换后&#xff0c;恢复进程…

GCC 命令选项使用详解

GCC 命令行详解[转帖] 1、gcc包含的c/c编译器 gcc、cc、c、g gcc和cc是一样的&#xff0c;c和g是一样的&#xff0c;一般c程序就用gcc编译&#xff0c;c程序就用g编译 2、gcc的基本用法 gcc test.c这样将编译出一个名为a.out的程序 gcc test.c -o test这样将编译出一个名为t…

mvn 打包_Spark源码打包编译的过程

前言上篇文章介绍了下 安装sbt环境 启动scala项目安装SBT环境运行Scala项目为什么要弄这个 因为我本来是想对spark源码编译部署spark是用scala语言编译的spark源码https://gitee.com/pingfanrenbiji/sparkspark提供的编译方式编译的前提是将所有的依赖包都下载下来而资源包管理…

清华大学《操作系统》(十一):处理机调度

一、处理机调度概念 进程切换&#xff08;上下文切换&#xff09;&#xff1a;切换CPU的当前任务&#xff0c;从一个进程/线程到另一个&#xff0c;保存当前在PCB/TCB中的执行上下文&#xff0c;读取下一个的上下文 CPU调度&#xff1a;从就绪队列中挑选一个进程/线程作为CPU…