跳到主要内容

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

最后更新时间：2025 年 03 月

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

本教程介绍如何在 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-20250310133433901

安装示例数据库​

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

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

  2. 从 https://gitcode.com/snapdevelop/.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-20250310133433902

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

    image-20250310133433903

  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-20250310133433904

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

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-20250310133433905

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

image-20250310133433906

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

image-20250310133433907

添加 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 按钮。页面将显示查询到的数据。