.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提供的灵活性和响应性构建现代化的用户界面。这种技术栈不仅适用于小型项目，也非常适合大型企业级应用程序的开发。