子目录中的 dotnet core vue - C#

在一个项目中使用多个技术栈可以提高开发效率。使用 dotnet core，vue 和 c# 组合可以让你在一个项目中编写前端和后端代码，且不需要学习新的语言或技能。

项目结构

一个通常的 dotnet core 和 vue 项目是这样的：

root/
  client/             # Vue.js app
    src/
      components/
      App.vue
      main.js
  server/             # dotnet core app
    Controllers/
    appsettings.json
    Program.cs
    Startup.cs

其中，client/ 目录包含 Vue.js 脚手架创建的前端代码。server/ 目录则包含 dotnet core 应用程序的声明和控制器。

安装依赖

在开始之前，请确保已经安装了 dotnet core、Node.js 和 vue-cli。

1. 在 client/ 目录下，创建一个新的 Vue.js app:

vue create .

2. 在 server/ 目录下，创建一个新的 dotnet core 应用程序:

dotnet new webapi -n MyProject

修改配置

vue-cli 配置

修改 client/vue.config.js，使其允许客户端与 dotnet core 应用程序通信：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        ws: true,
        changeOrigin: true
      }
    }
  }
}

这将启动一个代理服务器，将客户端请求转发到 dotnet core 应用程序的端口 5000。

dotnet core 配置

将 server/MyProject/Startup.cs 中的 Configure 方法修改如下：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // ...

    app.UseCors(builder => builder
        .AllowAnyOrigin()
        .AllowAnyMethod()
        .AllowAnyHeader());

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

这将启用跨域资源共享（CORS），允许来自任何源的请求，并将这些请求映射到发现的控制器。

编写代码

添加一个控制器

在 server/MyProject/Controllers/ 目录下，添加一个新的控制器 ValuesController.cs：

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;

namespace MyProject.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class ValuesController : ControllerBase
    {
        private static readonly string[] Data = new[]
        {
            "value1", "value2", "value3"
        };

        [HttpGet]
        public ActionResult<IEnumerable<string>> Get()
        {
            return Data;
        }
    }
}

修改 Vue.js 组件

在 client/src/components/HelloWorld.vue 中，使用 axios 获取数据并渲染：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <ul>
      <li v-for="value in values" :key="value">{{ value }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js + dotnet core App',
      values: []
    }
  },
  created() {
    axios.get('/api/values')
      .then(response => {
        this.values = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

运行代码

在根目录中，运行以下命令：

# 安装依赖
npm install

# 启动服务器并编译 vue 应用程序
npm run serve

浏览器中访问 http://localhost:8080，应该能够看到一个包含三个值的列表。这个列表由我写的空的 dotnet core 控制器和 Vue.js 组件生成。