创建 ASP.NET Core Web API 传统项目

最后更新时间：2024 年 05 月

传统项目指的是传统编码项目。如果你想创建可视化设计器项目，请参考 创建 Web API 设计器项目。

本教程介绍如何在 SnapDevelop 中创建一个 ASP.NET Core Web API 应用，并且从 Vue 前端应用调用这个 Web API。关于 Vue 应用的详细信息，请参考 创建 Vue 传统项目。

在本教程中，您将学习如何：

  • 创建 Web API 项目

  • 运行 Web API

  • 测试 Web API

  • 从 Vue.js 前端调用 Web API

前提条件

安装组件

在安装 SnapDevelop 时，请确保 传统编码项目 被选中安装。

数据库支持 类别下的数据库类型为可选项。请确保对应的数据库类型被选中和安装。在本教程中，将使用 SQL Server 数据库，因此请选中 SQL Server 数据库支持。

image-20231215110701898

安装示例数据库

如需安装本案例中使用的示例数据库，请按照以下操作：

  1. 安装 SQL Server Express 或 SQL Server 2012 或更高版本。

  2. 从 https://github.com/Appeon/.NET-Project-Example-Database 下载数据库备份文件 AdventureWorks for sqlserver.zip。

  3. 使用下载的数据库备份文件恢复数据库。

    关于如何恢复数据库，请参考 自述文件。

配置网络环境

本案例中使用的示例需要从 NuGet 以及 NPM 源网站下载所需的依赖包（Web API 示例需要连接 NuGet 网站下载所需的依赖包，Vue.js 示例需要连接 NPM 源站点下载所需的依赖包），因此请确保当前机器可以连接互联网。

如果是通过代理连接互联网的话，请首先确认代理正常工作，而且例外列表中没有排除掉 NuGet 以及 NPM 源站点。如果网络连接正常，但 SnapDevelop 仍然提示网络连接错误，请重新启动 SnapDevelop IDE 后再尝试一次。

创建 Web API 项目

  1. 在 SnapDevelop IDE 的主页中选择 新建，或者从菜单中选择 文件 > 新建 > 新建项目。

  2. 在 新建项目 对话框中，选中 传统编码 页面，在模板列表中选择 ASP.NET Core Web API，然后点击 下一步。

    image-20231215110956419

  3. 将项目命名为 Tutorials.WebApi，然后点击 下一步。

    image-20231215131848698

  4. 保持当前设置，然后点击 创建。

    如果您修改了当前设置，这些设置将会被保存作为下一个项目的默认设置。

    • 目标框架 -- 项目要面向的 .NET 版本。虽然这里只列了最新的三种框架（因为创建项目时建议使用最新的框架），但是 SnapDevelop 可以兼容不同框架的项目（包括 Framework 在内的框架）。同一个解决方案中的多个项目可以面向不同的 .NET 版本。项目创建后，可到项目属性页面中修改目标框架。
    • 身份验证类型 -- 要在应用程序中使用的身份验证方法。
    • 配置 HTTPS -- 启用该选项后，将自动为 Web API 服务分配一个 HTTPS 的 URL 以及端口。您可以在项目的 launchSettings.json 文件中进行更改。
    • 启用 Docker -- 启用该选项后，将自动为该项目增加 Docker 支持所需的文件和配置。在安装产品时，需选择安装“Docker 开发”组件，否则该选项不可见。
    • Docker OS -- Docker 运行环境的操作系统：Windows 或 Linux。在安装产品时，需选择安装“Docker 开发”组件，否则该选项不可见。
    • 使用控制器 -- 启用该选项后，将自动生成控制器，否则将不生成控制器。
    • 启用 OpenAPI 支持 -- 启用该选项后将自动在项目中的 Program.cs 文件添加 Swagger 生成器以及下载和启用中间件以便在开发阶段可以访问 Swagger UI 页面直接试用 API。

    image-20231215111134405

项目创建后在解决方案资源管理器中打开。

image-20231215132221861

运行 Web API

下面我们运行一下这个 Web API，看看它提供了哪些接口。

在 SnapDevelop IDE 中按 Ctrl + F5 （或者点击工具栏的 不调试启动 图标）。SnapDevelop 将编译 Web API 项目，启动 Web API 服务，并在浏览器中显示该 Web API 的 Swagger 页面。您在创建 Web API 项目的过程中可以通过 启用 OpenAPI 支持 选项来决定是否生成 Swagger 页面。Swagger 常用于为 Web API 生成文档和帮助页面。有关 Swagger 的更多信息，请参考 https://swagger.io/ 。

image-20231215132434154

该 Web API 的 Swagger 页面显示了该 Web API 中提供的所有接口。您可以展开以及试用（点击 Try it Out ）每个接口。

例如，展开 GET/WeatherForecast 接口，点击 Try it Out 按钮。

image-20231215132700326

然后单击 Execute 按钮。

image-20231215132841307

您将看到五天的天气预报。注意，这些是模拟数据；并非来自数据库。

页面还将返回：

  • 测试该接口 的 Curl 命令。
  • 测试该接口 的 URL。
  • HTTP 响应状态码、正文和标头。

image-20231215132946514

如果您在 Web 浏览器中输入该接口的 URL： https://localhost:7824/WeatherForecast。页面将返回如下 JSON 字符串。

image-20231215133130746

测试 Web API

从 测试 菜单中选择 Web API 测试器。

在 Web API 测试器 中，展开测试列表，双击 Get() 方法。然后在右边单击 发送。返回的数据以 JSON 字符串格式显示在 主体 面板中。

image-20231215133433981

有关 Web API 测试器 的更多信息，请访问教程 使用Web API 测试器。

从 Vue.js 前端调用 Web API

在本节中，我们将创建一个 Vue.js 前端应用作为客户端应用程序来访问 Web API，并实现简单的查询数据的功能。

创建 Vue 项目

请参照 创建 Vue 传统项目 小节的说明创建一个 Vue3 类型项目。假设项目命名为 client。

修改 Vue 项目

下面我们将修改 Vue 项目，使其通过调用 Web API 来实现简单的查询数据的功能。

安装 HTTP 请求库

在 解决方案资源管理器 中右键点击 Vue 项目中的 依赖包 节点，然后选择 安装新的 Node 包。

image-20231215135642603

在 Node 包管理工具中，选择 浏览 选项卡，搜索 axios（axios 是推荐的 HTTP 请求库），然后从搜索结果列表中选择 axios，并点击 安装包。

image-20231215134123822

在 IDE 底部的 输出 窗口中查看安装过程和结果。安装完成后您将在 Node 管理工具的 已安装 选项卡中或者在 Vue 项目的 依赖包 节点下看到 axios 包。

image-20231215134219665

添加 JavaScript 文件

在 Vue 项目的 src 目录下新建一个文件夹，假设命名为 api。然后在 api 目录中添加以下三个 JavaScript 文件。

image-20231215134601376

weather.js -- 封装了相关的 Web API 请求。该文件示例代码为：

import request from './request'

export default {
  async getWeatherForecastAsync() {
    const res = await request.get('/weatherforecast');
    
    return res.data;
  }
}

index.js -- 暴露封装的 Web API 请求模块。该文件示例代码为：

import weather from './weather';

export default {
  weather
}

request.js -- 封装了axios 库的实例。该文件示例代码如下：

其中 baseURL 设置为 Web API 的 URL（可以在 Web API 项目的 launchSettings.json 文件中获取 Web API 的 URL）。

import axios from 'axios';

const service = axios.create({
  baseURL: 'https://localhost:7824',
  timeout: 216000,
  withCredentials: false,
});

export default service;

修改 main.js 文件

修改 Vue 项目的 main.js 文件导入上一小节中定义的 api 模块，并定义全局变量。

import { createApp } from 'vue'
import App from './App.vue'
import api from './api'

const app = createApp(App)

app.config.globalProperties.$api = api;

app.mount('#app')

修改 App.vue 文件

修改 Vue 项目的 App.vue 文件中的 template 和 script 脚本如下：

<template>
  <center>
    <button @click="getWeatherForecast">Get Weather Forecast</button>
	<table border="1" v-if="visible">
      <tr>
		<th>Date</th>
		<th>Summary</th>
		<th>Centigrade</th>
		<th>Fahrenheit</th>
      </tr>
	  <tr v-for="(item, index) in weathers" :key='index'>      
		<td>{{ item.date }}</td>
        <td>{{ item.summary }}</td>
        <td>{{ item.temperatureC }}</td>
        <td>{{ item.temperatureF }}</td>
      </tr>
    </table>
  </center>  
</template>

<script>
import { ref, getCurrentInstance } from "vue";

export default {
	setup() {
		const api = getCurrentInstance().appContext?.app.config.globalProperties.$api;
    
    const visible = ref(false);
    const weathers = ref([{}]);
    
    const getWeatherForecast = async () => {
			weathers.value = await api.weather.getWeatherForecastAsync();		
      
      visible.value = true;
    }  
    
    return {	
      getWeatherForecast,
      weathers,
      visible
    }
  }
}
</script>

修改 Web API

为了保证 Web API 能够被 JavaScript 调用，我们需要在 Web API 的 Program.cs 文件中添加两处代码来解决跨域访问的问题。

添加第一处代码：

builder.Services.AddCors(opts =>
{
    opts.AddPolicy("all", builder =>
    {
        builder.AllowAnyOrigin()
            .AllowAnyHeader()
            .AllowAnyMethod();
    });
});

添加第二处代码：

app.UseCors("all");

运行应用

现在我们可以将 Web API 和 Vue 应用程序运行起来，并查询数据库中的数据。

  1. 运行 Web API （从工具栏中选择 Web API 项目为当前项目，然后点击 不调试启动 图标）。

    Web API 服务启动。

    image-20231215135806250

  2. 运行 Vue 项目（从工具栏中选择 Vue 项目为当前项目，然后在启动图标的下拉列表中选择 npm run serve 启动方式）。

    开发服务器启动。

    Web 页面显示。

  3. 点击 Web 页面中的 Get Weather Forecast 按钮。页面将显示查询到的数据。

其他相关

对于 Web API 项目，您还可以 管理 NuGet 包、调试 Web API 、配置 Web API 项目属性、发布 Web API 等。

对于 Vue 前端应用的操作手册，请参考 创建 Vue 传统项目 手册。