当前位置: 首页 > news >正文

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

http://www.lryc.cn/news/412310.html

相关文章:

  • 小阿轩yx-KVM+GFS 分布式存储系统构建 KVM 高可用
  • centos安装mysql 5.7版本
  • SQL——查询sql执行顺序
  • 钉耙编程(3)
  • python 线程池处理文件
  • AI技术和大模型对人才市场的影响
  • 解释“location”和“position”
  • Netty 必知必会(三)—— ByteBuf
  • 芋道以开源之名行下作之事 恬不知耻 标榜自己开源 公开源码+sql 不用再加入知识星球
  • wordpress中,wp_posts 文章的状态 有哪些,分别对应什么数值
  • 输入成绩问题(c语言)
  • 基于域名+基于ip+基于端口的虚拟主机+上线商务系统
  • vue每次路由跳转前将页面滚动到顶部
  • 【Qt】QDateTimeEdit
  • Redis和Mysql如何保持数据一致性
  • Java中Optional相关
  • AI在HR候选人关系管理中的革新应用
  • HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字+烟花特效)
  • 【Python机器学习系列】一文教你实现决策树模型可视化(案例+源码)
  • 如何在Python中使用网页抓取API获得Google搜索结果
  • Postman高频面试题及答案汇总(接口测试必备)
  • JavaEE 初阶(13)——多线程11之“定时器”
  • 2024最新全开源付费进群系统源码二开修复版 支持易支付
  • 【奥顺苹果CMS二开泛目录4.X版】PHP站群程序新增首页堆砌关键词新增四套seo模板
  • day06 项目实践:router,axios
  • ⌈ 传知代码 ⌋ 基于矩阵乘积态的生成模型
  • 软件测试必备技能
  • TL3568编译uboot报错
  • qiankun 微前端 隔离子应用样式,解决 ant-design-vue 子应用样式污染问题(已落地)
  • 一个前后端分离架构的低代码开发平台,支持微服务架构,支持开发SAAS项目(附源码)