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

发布于:2024-08-02 ⋅ 阅读:(35) ⋅ 点赞:(0)

目录

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