.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组件来构建前端界面。例如，你可以创建一个简单的产品列表组件和创建产品表单组件：

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

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