使用 Angular 12、ASP.NET Core Web API 和 SQL Server 开发 Web 应用程序_qq_37757480的博客-程序员ITS301

技术标签: angular.js  database  ASP.NET Core  数据库  

介绍

在本文中,我们将使用最新技术以一种简单易懂的方式从头开始开发一个 Web 应用程序。

  • 后端 = ASP.NET Core Web API
  • 数据库 = SQL Server
  • 前端 = ANGULAR 12.

首先,我们将创建一个数据库、表并插入一些数据。

其次,我们使用ASP.NET Core Web API开发 API。

第三,我们使用 angular 12 开发前端。

步骤 1 -(数据库相关活动)

打开 SQL Server Management Studio 并连接到本地数据库后,创建一个名为 StudentDB 的数据库。

CREATE DATABASE StudentDB;
CREATE TABLE dbo.Student (
    StudentId int IDENTITY(1,1) NOT NULL,
    FullName nvarchar(max) NULL,
    Class nvarchar(max) NULL
);

INSERT INTO dbo.Student VALUES ('Litan Sarker', 'Nine');
INSERT INTO dbo.Student VALUES ('Rohit Sarker','Six');

使用 Angular 12、ASP.NET Core Web API 和 SQL Server 开发 Web 应用程序
第 2 步 -(Web API 相关活动)

现在,在打开 Visual Studio 2019 后创建一个新项目。
使用 Angular 12、ASP.NET Core Web API 和 SQL Server 开发 Web 应用程序
使用 Angular 12、ASP.NET Core Web API 和 SQL Server 开发 Web 应用程序
使用 Angular 12、ASP.NET Core Web API 和 SQL Server 开发 Web 应用程序
使用 Angular 12、ASP.NET Core Web API 和 SQL Server 开发 Web 应用程序
第 3 步 – 现在更改启动类

首先,安装这些,

  • Microsoft.AspNetCore.Mvc.NewtonsoftJson
  • System.Data.SqlClient

来自管理用于 JSON 序列化和数据库的 Nuget 包。
使用 Angular 12、ASP.NET Core Web API 和 SQL Server 开发 Web 应用程序
我们启用 CORS 以禁用安全性并允许来自其他域的请求。安装 NewtonSoft.json 后,我们默认使用 JSON 序列化程序。

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Newtonsoft.Json.Serialization;

namespace WebAPI
{
    
    public class Startup
    {
    
        public Startup(IConfiguration configuration)
        {
    
            Configuration = configuration;
        }

        public IConfiguration Configuration {
     get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
    
            //Enable Cors
            services.AddCors(c =>
            {
    
                c.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
            });

            //Json Serializer
            services.AddControllersWithViews()
                .AddNewtonsoftJson(options =>
                options.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore
                ).AddNewtonsoftJson(options => options.SerializerSettings.ContractResolver
                = new DefaultContractResolver());

            services.AddControllers();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
    
            app.UseCors(options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());

            if (env.IsDevelopment())
            {
    
                app.UseDeveloperExceptionPage();
            }

            app.UseRouting();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
    
                endpoints.MapControllers();
            });
        }
    }
}

第四步

现在,创建一个名为 Models 的文件夹并添加两个名为 Student.cs、department.cs 的类文件

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebAPI.Models
{
    
    public class Student
    {
    
        public int StudentId {
     get; set; }
        public string FullName {
     get; set; }
        public string Class {
     get; set; }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebAPI.Models
{
    
    public class Department
    {
    
        public int DepartmentId {
     get; set; }
        public string DepartmentName {
     get; set; }
    }
}

现在,打开 appsettings.json 文件并将其替换为以下内容,

{
    
  "ConnectionStrings": {
    
    "StudentAppCon": "Data Source=.; Initial Catalog=StudentDB; Integrated Security=true"
  },
  "Logging": {
    
    "LogLevel": {
    
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

第 6 步

现在,添加 StudentController。
使用 Angular 12、ASP.NET Core Web API 和 SQL Server 开发 Web 应用程序
现在,在 StudentController 中进行以下更改,在这里我们实现依赖注入并使用原始 SQL 查询执行 CRUD 操作。

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Threading.Tasks;
using WebAPI.Models;

namespace WebAPI.Controllers
{
    
    [Route("api/[controller]")]
    [ApiController]
    public class StudentController : ControllerBase
    {
    
        private readonly IConfiguration _configuration;
        public StudentController(IConfiguration configuration)
        {
    
            _configuration = configuration;
        }

        [HttpGet]
        public JsonResult Get()
        {
    
            string query = @"Select StudentId, FullName, Class from dbo.Student";
            DataTable table = new DataTable();
            string sqlDataSource = _configuration.GetConnectionString("StudentAppCon");
            SqlDataReader myReader;
            using(SqlConnection myCon = new SqlConnection(sqlDataSource))
            {
    
                myCon.Open();
                using (SqlCommand myCommand = new SqlCommand(query, myCon))
                {
    
                    myReader = myCommand.ExecuteReader();
                    table.Load(myReader);

                    myReader.Close();
                    myCon.Close();
                }
            }

            return new JsonResult(table);
        }


        [HttpPost]
        public JsonResult Post(Student objStudent)
        {
    
            string query = @"Insert into dbo.Student values
                ('" + objStudent.FullName + "','" + objStudent.Class + "')";
            DataTable table = new DataTable();
            string sqlDataSource = _configuration.GetConnectionString("StudentAppCon");
            SqlDataReader myReader;
            using (SqlConnection myCon = new SqlConnection(sqlDataSource))
            {
    
                myCon.Open();
                using (SqlCommand myCommand = new SqlCommand(query, myCon))
                {
    
                    myReader = myCommand.ExecuteReader();
                    table.Load(myReader);

                    myReader.Close();
                    myCon.Close();
                }
            }

            return new JsonResult("Added Successfully");
        }

        [HttpPut]
        public JsonResult Put(Student objStudent)
        {
    
            string query = @"Update dbo.Student set
                FullName = '" + objStudent.FullName + @"',
                Class='" + objStudent.Class + "' where StudentId = " + objStudent.StudentId;
            DataTable table = new DataTable();
            string sqlDataSource = _configuration.GetConnectionString("StudentAppCon");
            SqlDataReader myReader;
            using (SqlConnection myCon = new SqlConnection(sqlDataSource))
            {
    
                myCon.Open();
                using (SqlCommand myCommand = new SqlCommand(query, myCon))
                {
    
                    myReader = myCommand.ExecuteReader();
                    table.Load(myReader);

                    myReader.Close();
                    myCon.Close();
                }
            }

            return new JsonResult("Updated Successfully");
        }


        [HttpDelete("{id}")]
        public JsonResult Delete(int id)
        {
    
            string query = @"Delete from dbo.Student where StudentId = " + id;
            DataTable table = new DataTable();
            string sqlDataSource = _configuration.GetConnectionString("StudentAppCon");
            SqlDataReader myReader;
            using (SqlConnection myCon = new SqlConnection(sqlDataSource))
            {
    
                myCon.Open();
                using (SqlCommand myCommand = new SqlCommand(query, myCon))
                {
    
                    myReader = myCommand.ExecuteReader();
                    table.Load(myReader);

                    myReader.Close();
                    myCon.Close();
                }
            }

            return new JsonResult("Deleted Successfully");
        }

    }
}

步骤 7 – Angular(前端)相关活动

现在,让我们创建一个 Angular 项目。

首先,通过以下方式从 https://nodejs.org/en/download/ 和 angular CLI 安装 Node.js,

npm install -g @angular/cli

现在在特定文件夹中,打开命令提示符并通过以下方式创建一个 angular 项目,

ng new angular12

? Would you like to add Angular routing? (y/N) y

CSS

需要几分钟才能完成。
使用 Angular 12、ASP.NET Core Web API 和 SQL Server 开发 Web 应用程序
现在,通过以下命令创建组件,

  • ng g c student
  • ng g c student/show-stu
  • ng g c student/add-edit-stu

使用 Angular 12、ASP.NET Core Web API 和 SQL Server 开发 Web 应用程序
然后,打开app.module.ts,修改如下代码,

import {
     NgModule } from '@angular/core';
import {
     BrowserModule } from '@angular/platform-browser';

import {
     AppRoutingModule } from './app-routing.module';
import {
     AppComponent } from './app.component';
import {
     StudentComponent } from './student/student.component';
import {
     ShowStuComponent } from './student/show-stu/show-stu.component';
import {
     AddEditStuComponent } from './student/add-edit-stu/add-edit-stu.component';

import {
     HttpClientModule } from "@angular/common/http";
import {
     SharedService } from "./shared.service";
import {
     FormsModule,ReactiveFormsModule } from "@angular/forms";
import {
     DepartmentComponent } from './department/department.component';
import {
     ShowDepComponent } from './department/show-dep/show-dep.component';
import {
     AddEditDepComponent } from './department/add-edit-dep/add-edit-dep.component';

@NgModule({
    
  declarations: [
    AppComponent,
    StudentComponent,
    ShowStuComponent,
    AddEditStuComponent,
    DepartmentComponent,
    ShowDepComponent,
    AddEditDepComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [SharedService],
  bootstrap: [AppComponent]
})
export class AppModule {
     }

现在,让我们创建一个共享服务。

ng g s shared

导入 HttpCient 和 observables 模块。Observables 用于处理异步请求和响应。

import {
     Injectable } from '@angular/core';
import {
     HttpClient } from "@angular/common/http";
import {
     Observable } from "rxjs";

@Injectable({
    
  providedIn: 'root'
})
export class SharedService {
    
    readonly APIUrl = "http://localhost:5000/api";
    constructor(private http: HttpClient) {
    }
    getStudentList(): Observable < any[] > {
    
        return this.http.get < any > (this.APIUrl + '/Student');
    }
    addStudent(val: any) {
    
        return this.http.post(this.APIUrl + '/Student', val);
    }
    updateStudent(val: any) {
    
        return this.http.put(this.APIUrl + '/Student', val);
    }
    deleteStudent(id: any) {
    
        return this.http.delete(this.APIUrl + '/Student/' + id);
    }
    getDepartmentList(): Observable < any[] > {
    
        return this.http.get < any > (this.APIUrl + '/Department');
    }
    addDepartment(val: any) {
    
        return this.http.post(this.APIUrl + '/Department', val);
    }
    updateDepartment(val: any) {
    
        return this.http.put(this.APIUrl + '/Department', val);
    }
    deleteDepartment(id: any) {
    
        return this.http.delete(this.APIUrl + '/Department/' + id);
    }
}

步骤 9

现在,在 app.routing.ts 文件中进行以下更改。

import {
     NgModule } from '@angular/core';
import {
     RouterModule, Routes } from '@angular/router';
import {
     StudentComponent } from "./student/student.component";
import {
     DepartmentComponent } from "./department/department.component";

const routes: Routes = [
  {
    path:'student', component:StudentComponent},
  {
    path:'department', component:DepartmentComponent}
];

@NgModule({
    
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
     }

第 10 步

为设计添加引导程序文件。

打开 index.html 并使用 BootStrap 安装更改它。

<!doctype html>
<html lang="en">
<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <meta charset="utf-8">
  <title>Angular12</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>

现在打开 student.component.html 并将其替换为以下代码,

<app-show-stu></app-show-stu>

现在,打开 show-stu.component.ts 并将其替换为以下代码

import {
     Component, OnInit } from '@angular/core';
import {
     SharedService } from "src/app/shared.service";

@Component({
    
  selector: 'app-show-stu',
  templateUrl: './show-stu.component.html',
  styleUrls: ['./show-stu.component.css']
})
export class ShowStuComponent implements OnInit {
    
  studentList:any = [];
  modalTitle:any;
  activateAddEditStuCom:boolean = false;
  student:any;

  constructor(private sharedService: SharedService) {
     }

  ngOnInit(): void {
    
    this.refreshStudentList();
  }

  refreshStudentList() {
    
    this.sharedService.getStudentList().subscribe(data =>{
    
      this.studentList = data;
    });
  }

  AddStudent(){
    
    this.student={
    
      StudentId:0,
      FullName:"",
      Class:""
    }
    this.modalTitle = "Add Student";
    this.activateAddEditStuCom = true;
  }

  EditStudent(item: any){
    
    this.student = item;
    this.activateAddEditStuCom = true;
    this.modalTitle = "Update Student";
  }

  deleteClick(item: any){
    
    if(confirm('Are you sure??')){
    
      this.sharedService.deleteStudent(item.StudentId).subscribe(data =>{
    
        alert(data.toString());
        this.refreshStudentList();
      })
    }
  }

  closeClick(){
    
    this.activateAddEditStuCom=false;
    this.refreshStudentList();
  }
}

现在,打开 show-stu.component.html 并将其替换为以下代码

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"
(click)="AddStudent()" data-keyborad="false">
  Add Student
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">{
    {
    modalTitle}}</h5>
        <button type="button" class="btn-close" (click)="closeClick()" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <app-add-edit-stu [student]="student" *ngIf="activateAddEditStuCom">
        </app-add-edit-stu>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<table class="table table-striped">
    <thead>
      <tr>
          <th>Student ID</th>
          <th>Full Name</th>
          <th>Class</th>
          <th>Options</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let dataItem of studentList">
        <td>{
    {
    dataItem.StudentId}}</td>
        <td>{
    {
    dataItem.FullName}}</td>
        <td>{
    {
    dataItem.Class}}</td>
        <td>
          <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"
          (click)="EditStudent(dataItem)">Edit</button>
            <button type="button" class="btn btn-primary" (click)="deleteClick(dataItem)">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>

现在,打开 add-edit-stu.component.ts 并将其替换为以下代码

import {
     Component, OnInit, Input } from '@angular/core';
import {
     SharedService } from "src/app/shared.service";

@Component({
    
  selector: 'app-add-edit-stu',
  templateUrl: './add-edit-stu.component.html',
  styleUrls: ['./add-edit-stu.component.css']
})
export class AddEditStuComponent implements OnInit {
    

  @Input() student:any;
  StudentId:string = "";
  FullName: string ="";
  Class: string ="";

  constructor(private service: SharedService) {
     }

  ngOnInit(): void {
    
    this.StudentId = this.student.StudentId;
    this.FullName = this.student.FullName;
    this.Class = this.student.Class;
  }

  addStudent(){
    
    var val = {
    StudentId:this.StudentId,
      FullName:this.FullName,
      Class:this.Class};
      this.service.addStudent(val).subscribe(res =>{
    
        alert(res.toString());
      })
  }

  updateStudent(){
    
    var val = {
    StudentId:this.StudentId,
      FullName:this.FullName,
      Class:this.Class};
      this.service.updateStudent(val).subscribe(res =>{
    
        alert(res.toString());
    })
  }
}

现在,打开 add-edit-stu.component.html 并将其替换为以下代码

<div class="form-group row">
    <label class="col-sm-2">Student FullName</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" [(ngModel)]="FullName"
        placeholder="Enter Full Name">
    </div>
</div>

<div class="form-group row">
    <label class="col-sm-2">Class</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" [(ngModel)]="Class"
        placeholder="Enter Class">
    </div>
</div>

<button (click)="addStudent()" *ngIf="student.StudentId==0" class="btn btn-primary">
    Add
</button>

<button (click)="updateStudent()" *ngIf="student.StudentId!=0" class="btn btn-primary">
    Update
</button>

结论

在本文中,我们逐步讨论了如何使用 .Net core angular 12 和 SQL Server 构建应用程序。希望通过阅读和学习,您将从本文中受益,想要了解更多.Net Core请点击链接

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_37757480/article/details/120908180

智能推荐

php cms 自动分词,灵活运用PHPAnalysis分词组件,实现Phpcms v9关键词自动分词_消费者报道的博客-程序员ITS301

在2019年12月下旬,Phpcms官网phpcms.cn关闭后,原有的分词api接口(http://tool.phpcms.cn/api/get_keywords.php)已经失效,在录入标题后再也不能自动提取关键词到关键词的输入栏了,针对这一问题,CMSYOU在之前的分词经验基础上,做了几个分词系统的分析,最后完善整理出来Phpcms v9关键词自动分词组件,今天在这里与大家分享中文分词的那些...

[转]关于C#操作WPS和office兼容性的问题_JackieZhengChina的博客-程序员ITS301

最近一直在做的开发是关于导出word的功能,一开始的做法是在VS中直接添加引用office PIA,Microsoft.Office.Interop.Word,VS08有两个版本,V11和V12,V11对应的是office03,V12对应的office07,试验之后得出结论,这两个PIA的引用只会影响开发机器的使用,就是说要与开发机器的office版本相对应。在目标机器上都是可以使用的,没有问题。接下来说一下关于PIA的事情,Primary Interop A...

Powerdesigner物理模型显示注释_shuzhiduxing的博客-程序员ITS301_powerdesigner 模型显示注释

Powerdesigner物理模型显示注释信息,或者说按自己的设定格式显示;

编写一个程序_Q1871283492的博客-程序员ITS301_编写一个程序

编写第一个java程序第一步:新建文本文档 将后缀名改为.java第二步:格式:public class test{public static void main(String[] args){System.out.println(“我的第一个程序”);}}注意:新建的文件名必须跟代码中 class 后面的名报持一致,不能用中文第三步:按住windos+R 然后输入 cmd 进入...

springboot整合redis,redisTemplate 空指针_程序猿-硕的博客-程序员ITS301_redistemplate 空指针

今天创建了一个springboot项目,想整合一下redis数据库,结果redisTemplate一直未空指针异常,最后总结:出现在的原因有两点1.对@Autowired和@Resource不熟2.对spring依赖注入和new没搞明白

随便推点

ElasticSearch、可视化界面elasticsearch-head及kibana的安装与配置(Windows系统下)_落花雨时的博客-程序员ITS301_elasticsearch可视化界面

概述这里主要讲述Windows的安装配置,Linux其实跟这个差不多,整体难度很低,跟安装个QQ难度差不多,但是有一点需要强调一下,那就是ElasticSearch相关的所有东西版本必须是一致的,比如本文要安装的是7.6.2版本的,那么kibana也必须是7.6.2版本的,elasticsearch-head仅仅是个可视化界面,版本不做要求(官方也就仅仅一个版本),但是我们下一篇要讲的ik分词器,必须与ElasticSearch的版本一致,否则会闪退。安装配置ElasticSearch官网下载是极其

overleaf(LATEX)插入表格,图片_小樊努力努力再努力的博客-程序员ITS301_overleaf插入表格

overleafoverleaf是一个 让科学更加开放、好复制、共同合作的网站。Overleaf CEO兼共同创办人是 John Hammersley 博士 在文档中国加上这个 overleaf基础入门_Junewang0614的博客-程序员ITS301_overleaf教程5.插入表格 表格科研很神器给你了,自己摸索着用,认识字就行 Create LaTeX tables online – TablesGenerator.comhttps://www.tablesgenerator.com/

idle运行python_使用IDLE运行Python PyUnit单元测试_weixin_39714565的博客-程序员ITS301

在IDLE中有没有办法直接运行PyUnit(unittest模块)单元测试?我问,因为我有一个简短的测试模块,当我运行它与python mymodule.py从Cygwin shell我得到所有测试通过,但是当我使用Run->运行模块从IDLE测试通过,但是我得到一个异常(SystemExit:False).例如,以下是一个示例测试模块来重现:#!/usr/bin/pythonimport uni...

UART接口介绍_jgw2008的博客-程序员ITS301

http://www.cnblogs.com/hzl6255/p/4297817.htmlUART接口介绍目录1. 简介2. RS2323. UART4. 连接5. Linux中UART实例 1. 简介UART, Universal Asynchronous Receiver-Transmitter, 通用异步收发传输器

由浅入深玩转华为WLAN—20 漫游系列(7)不同AC之间二层漫游【二层上线+直连式+直接转发模式】_网络之路Blog的博客-程序员ITS301

说明之前介绍过在AC间漫游的新概念以及一些处理过程,对比AC内漫游相对从配置角度来说不是非常大,只是转发的过程有点小变化,这个可以参考之前介绍的转发过程即可。二层漫游的数据包转发过程(该图中直接转发与隧道转发方式没差别)漫游前数据包的走向1、STA发送数据给HAP2、HAP收到数据报文后,发送给HAC(如果是旁挂模式的处理方式,则不太一样,在隧道模式下会转发给HAC,而直接转发方式下,直接由网关交换机直接处理业务报文交给上层设备)3、HAC收到以后,直接把业务报文送给上层网络.

json server使用以及使用npm run启动_mngss的博客-程序员ITS301_json server启动

1、使用json server(1) 下载:npm i json-server -D(2)创建mock文件夹此时项目结构如下:进入mock文件夹,输入命令:json-server --watch db.json,即可启动。 如下图:运行成功后,系统会自动在mock文件里创建db.json文件,浏览器输入localhost:3000即可访问。(3)自定义端口 json-server -watch db.json --port 端口号例如 json-server --watch db.jso

推荐文章

热门文章

相关标签