.net core + vue 搭建前后端分离的框架

[步骤一：创建.NET Core后端项目](#步骤一：创建.NET Core后端项目)

步骤二：创建Vue.js前端项目

步骤三：集成后端和前端项目

步骤一：创建.NET Core后端项目

安装.NET Core SDK ：确保你的开发环境中已安装了最新版本的.NET Core SDK。你可以从 .NET 下载页面获取最新版本。
创建.NET Core Web API项目：在命令行或者通过Visual Studio等集成开发环境，创建一个新的.NET Core Web API项目。在命令行中，可以执行以下命令：
bash 复制代码
```
dotnet new webapi -o MyDotNetCoreApp cd MyDotNetCoreApp
```
添加所需的NuGet包：如果需要特定的功能（例如身份验证、数据库访问等），可以添加相应的NuGet包。例如，使用Entity Framework Core进行数据访问：
bash 复制代码
```
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
```
编写后端API：在生成的.NET Core项目中编写你的后端API，定义控制器和服务，连接数据库等。

步骤二：创建Vue.js前端项目

安装Node.js和npm ：确保你的开发环境中安装了Node.js和npm。你可以从 Node.js官网下载安装包并按照说明安装。
创建Vue.js项目：使用Vue CLI来创建一个新的Vue.js项目。在命令行中执行以下命令：
bash 复制代码
```
npm install -g @vue/cli vue create my-vue-app cd my-vue-app
```

集成Vue.js和后端API ：在Vue.js项目中，你可以使用axios等HTTP客户端库来调用后端的API接口。通常情况下，在Vue.js项目的src目录下创建一个服务（如api.js），用于封装调用后端API的方法。

javascript 复制代码

// src/api.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://localhost:5001/api', // 根据实际后端API地址修改
  headers: {
    'Content-Type': 'application/json'
  }
});

export default {
  getProducts() {
    return apiClient.get('/products');
  },
  createProduct(productData) {
    return apiClient.post('/products', productData);
  }
  // 添加其他需要的API调用方法
};

开发Vue.js组件：开发Vue.js组件来构建前端界面。例如，你可以创建一个简单的产品列表组件和创建产品表单组件：

javascript 复制代码

<!-- src/components/ProductList.vue -->
<template>
  <div>
    <h2>Product List</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - {{ product.price }}
      </li>
    </ul>
  </div>
</template>

<script>
import api from '../api';

export default {
  data() {
    return {
      products: []
    };
  },
  created() {
    this.fetchProducts();
  },
  methods: {
    async fetchProducts() {
      try {
        const response = await api.getProducts();
        this.products = response.data;
      } catch (error) {
        console.error('Error fetching products:', error);
      }
    }
  }
};
</script>

html 复制代码

<!-- src/components/CreateProductForm.vue -->
<template>
  <form @submit.prevent="createProduct">
    <label for="productName">Product Name:</label>
    <input id="productName" v-model="productName" required>
    <label for="productPrice">Product Price:</label>
    <input id="productPrice" v-model.number="productPrice" required>
    <button type="submit">Create Product</button>
  </form>
</template>

<script>
import api from '../api';

export default {
  data() {
    return {
      productName: '',
      productPrice: 0
    };
  },
  methods: {
    async createProduct() {
      const productData = {
        name: this.productName,
        price: this.productPrice
      };
      try {
        await api.createProduct(productData);
        // 清空表单字段
        this.productName = '';
        this.productPrice = 0;
        // 或者执行其他操作（如刷新产品列表）
      } catch (error) {
        console.error('Error creating product:', error);
      }
    }
  }
};
</script>

步骤三：集成后端和前端项目

调整CORS设置（如需要）：如果前端项目和后端API不在同一个域下，可能需要在后端项目中配置CORS（跨源资源共享）以允许跨域访问。在.NET Core中，你可以通过配置中间件来实现：

cs 复制代码

// Startup.cs
public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddPolicy("VueCorsPolicy", builder =>
            builder.WithOrigins("http://localhost:8080") // 根据实际前端地址修改
                   .AllowAnyMethod()
                   .AllowAnyHeader()
                   .AllowCredentials());
    });

    // 其他配置
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 其他配置

    app.UseCors("VueCorsPolicy");

    // 其他配置
}

运行项目：分别在后端和前端项目的根目录下执行以下命令启动项目：

cs 复制代码

# 在后端项目根目录下启动.NET Core应用程序
dotnet run

# 在前端项目根目录下启动Vue.js开发服务器
npm run serve

访问应用程序 ：打开浏览器并访问前端项目的地址（默认为http://localhost:8080），即可看到Vue.js前端与.NET Core后端集成的效果。

通过这种方式，你可以利用.NET Core提供的强大功能（如身份验证、数据持久化等）构建稳健的后端，同时利用Vue.js提供的灵活性和响应性构建现代化的用户界面。这种技术栈不仅适用于小型项目，也非常适合大型企业级应用程序的开发。