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

目录

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

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

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

---

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

1. 安装.NET Core SDK： 确保你的开发环境中已安装了最新版本的.NET Core SDK。你可以从 .NET 下载页面获取最新版本。

2. 创建.NET Core Web API项目： 在命令行或者通过Visual Studio等集成开发环境，创建一个新的.NET Core Web API项目。在命令行中，可以执行以下命令：

   dotnet new webapi -o MyDotNetCoreApp cd MyDotNetCoreApp

3. 添加所需的NuGet包： 如果需要特定的功能（例如身份验证、数据库访问等），可以添加相应的NuGet包。例如，使用Entity Framework Core进行数据访问：

   dotnet add package Microsoft.EntityFrameworkCore.SqlServer

4. 编写后端API： 在生成的.NET Core项目中编写你的后端API，定义控制器和服务，连接数据库等。

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

1. 安装Node.js和npm： 确保你的开发环境中安装了Node.js和npm。你可以从 Node.js官网 下载安装包并按照说明安装。

2. 创建Vue.js项目： 使用Vue CLI来创建一个新的Vue.js项目。在命令行中执行以下命令：

   npm install -g @vue/cli vue create my-vue-app cd my-vue-app

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

   // 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调用方法
   };
   

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

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

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

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

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

   // 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");
   
       // 其他配置
   }
   

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

   # 在后端项目根目录下启动.NET Core应用程序
   dotnet run
   
   # 在前端项目根目录下启动Vue.js开发服务器
   npm run serve
   

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

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