AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2017-11-01 1112
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 上一篇: http://www.cnblogs.com/cgzl/p/7755801.html 完成client.service.ts: import { Injectable } from '@angular/core'; import { Http, Headers } from '@...

上一篇: 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() {
    // 获取ID
    this.id = this.route.snapshot.params['id'];
    // 获取Client
    this.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() {
    // 获取ID
    this.id = this.route.snapshot.params['id'];
    // 获取Client
    this.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.

下面是我的关于ASP.NET Core Web API相关技术的公众号--草根专栏:

文章标签：
API
.NET
前端开发
JavaScript
容器
内存技术
移动开发
数据格式
JSON
开发框架
关键词：
API Web
API core
.NET web
ASP Core
ASP.NET core
vNext
目录
相关文章
龙大吉
|
3月前
|
Java API 数据库
构建RESTful API已经成为现代Web开发的标准做法之一。Spring Boot框架因其简洁的配置、快速的启动特性及丰富的功能集而备受开发者青睐。
【10月更文挑战第11天】本文介绍如何使用Spring Boot构建在线图书管理系统的RESTful API。通过创建Spring Boot项目，定义`Book`实体类、`BookRepository`接口和`BookService`服务类，最后实现`BookController`控制器来处理HTTP请求，展示了从基础环境搭建到API测试的完整过程。
龙大吉
65 4
土木林森
|
3月前
|
XML JSON API
ServiceStack：不仅仅是一个高性能Web API和微服务框架，更是一站式解决方案——深入解析其多协议支持及简便开发流程，带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架，支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程，提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑，安装简单，通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务，包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议，具备自动验证、自动过滤器等丰富功能，适合快速搭建高性能、可扩展的服务端应用。
土木林森
194 3
追逐时光者
|
2月前
|
开发框架 网络协议 .NET
C#/.NET/.NET Core优秀项目和框架2024年10月简报
C#/.NET/.NET Core优秀项目和框架2024年10月简报
追逐时光者
92 3
东方睿赢
|
2月前
|
前端开发 API 开发者
Python Web开发者必看！AJAX、Fetch API实战技巧，让前后端交互如丝般顺滑！
在Web开发中，前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例，详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理，全面展示了这两种技术的应用技巧，帮助Python Web开发者提升项目质量和开发效率。
东方睿赢
62 1
龙大吉
|
2月前
|
JSON API 数据格式
如何使用Python和Flask构建一个简单的RESTful API。Flask是一个轻量级的Web框架
本文介绍了如何使用Python和Flask构建一个简单的RESTful API。Flask是一个轻量级的Web框架，适合小型项目和微服务。文章从环境准备、创建基本Flask应用、定义资源和路由、请求和响应处理、错误处理等方面进行了详细说明，并提供了示例代码。通过这些步骤，读者可以快速上手构建自己的RESTful API。
龙大吉
162 2
源码星辰
|
3月前
|
监控 负载均衡 API
Web、RESTful API 在微服务中有哪些作用？
在微服务架构中，Web 和 RESTful API 扮演着至关重要的角色。它们帮助实现服务之间的通信、数据交换和系统的可扩展性。
源码星辰
74 2
游客k3xxeidsm2ess
|
3月前
|
人工智能 搜索推荐 API
用于企业AI搜索的Bocha Web Search API，给LLM提供联网搜索能力和长文本上下文
博查Web Search API是由博查提供的企业级互联网网页搜索API接口，允许开发者通过编程访问博查搜索引擎的搜索结果和相关信息，实现在应用程序或网站中集成搜索功能。该API支持近亿级网页内容搜索，适用于各类AI应用、RAG应用和AI Agent智能体的开发，解决数据安全、价格高昂和内容合规等问题。通过注册博查开发者账户、获取API KEY并调用API，开发者可以轻松集成搜索功能。
游客k3xxeidsm2ess
246 9
何雨晨
|
3月前
|
开发框架 .NET API
Windows Forms应用程序中集成一个ASP.NET API服务
Windows Forms应用程序中集成一个ASP.NET API服务
何雨晨
114 9
追逐时光者
|
3月前
|
开发框架 前端开发 API
C#/.NET/.NET Core优秀项目和框架2024年9月简报
C#/.NET/.NET Core优秀项目和框架2024年9月简报
追逐时光者
69 1
东方睿赢
|
3月前
|
前端开发 JavaScript API
惊呆了！学会AJAX与Fetch API，你的Python Web项目瞬间高大上！
在Web开发领域，AJAX与Fetch API是提升交互体验的关键技术。AJAX（Asynchronous JavaScript and XML）作为异步通信的先驱，通过XMLHttpRequest对象实现了局部页面更新，提升了应用流畅度。Fetch API则以更现代、简洁的方式处理HTTP请求，基于Promises提供了丰富的功能。当与Python Web框架（如Django、Flask）结合时，这两者能显著增强应用的响应速度和用户体验，使项目更加高效、高大上。
东方睿赢
62 2

热门文章

最新文章

  • 1
    使用ASP.NET 3.5 Extensions管理浏览器历史：使用客户端
  • 2
    《Pro ASP.NET MVC 3 Framework》学习笔记之四【领域模型介绍】
  • 3
    lzg_ad: 基于.Net安装部署向导制作安装程序
  • 4
    .Net Validator验证框架 [ .Net | Validator Framework | Attribute ]
  • 5
    .Net的混淆属性以及ildasm限制的简单解除方法
  • 6
    一起谈.NET技术，再次分享一个多选文件上传方案
  • 7
    艾伟_转载：基于.NET平台的Windows编程实战（二）—— 需求分析与数据库设计
  • 8
    ADO.NET 2.0 Dataset和Datatable 新功能新特性
  • 9
    .net线程同步的一些知识
  • 10
    利用fluorineFx将DataTable从.Net传递到Flash
  • 1
    【专栏：HTML与CSS前端技术趋势篇】前端框架（React/Vue/Angular）与HTML/CSS的结合使用
    116
  • 2
    【TypeScript技术专栏】TypeScript在Angular开发中的应用
    91
  • 3
    angular引入包、路由权限配置、打包问题与nginx配置问题（简单部署）
    194
  • 4
    【angular】启动项目和路由配置
    59
  • 5
    云HIS医疗管理系统源码——技术栈【SpringBoot+Angular+MySQL+MyBatis】
    251
  • 6
    JAVA云HIS医院管理系统源码、基于Angular+Nginx+ Java+Spring，SpringBoot+ MySQL + MyCat
    148
  • 7
    【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数（多用于通过浏览器地址参数保存用户当前操作状态的需求），实现监听url路由切换、状态变化。
    118
  • 8
    【实用】Angular中如何实现类似Vuex的全局变量状态变化功能？
    126
  • 9
    Angular使用@Input和@Output实现父子组件互相传参（类似Vue的props和this.emit）
    84
  • 10
    1分钟入门angular动画效果animations，敲简单滴哟~~☺
    119

    • 相关课程

    更多
  • Python Web开发基础
  • Java Web开发系列课程 - Spring框架入门
  • 企业Web常用架构LAMP-LNMP实战
  • 高校精品课-西安交通大学-Web 编程技术
  • Java Web项目实战 - 图书商城
  • Java面试疑难点解析 - Java Web开发

    • 相关电子书

    更多
  • Spring Boot2.0实战Redis分布式缓存
  • CUDA MATH API
  • API PLAYBOOK

    • 相关实验场景

    更多
  • 基于Assistant Api的旅游助手
  • 快速体验智能体API应用
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 使用SLB+2ECS+NAS，部署电商web网站的高可用架构
  • 1分钟SAE部署Web在线游戏
  • 云上Web及FTP
    • 下一篇
    DataWorks智能交互式数据开发与分析之旅