前后端分离工程搭建

前端 vue-cli-service
后端 ASP.NET Core WebAPI

1. 后端搭建

1.1 新建项目:

模板:Web->ASP.NET Core Web 应用程序->.NET Framework->ASP.NET Core 2.1->API

编辑TestProject.csproj,添加GenerateDocumentationFile配置节

<PropertyGroup>
  <TargetFramework>net461</TargetFramework>
  <GenerateDocumentationFile>true</GenerateDocumentationFile>
</PropertyGroup>
1.2 配置IIS调试

编辑 Properties–>launchSetting.json文件

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iis": {
      "applicationUrl": "http://xxxxxx/TestProject",
      "sslPort": 0
    }
  },
  "$schema": "http://json.schemastore.org/launchsettings.json",
  "profiles": {
    "TeamCheck": {
      "commandName": "Project",
      "launchBrowser": true,
      "launchUrl": "api/values",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "http://localhost:5000"
    },
    "IIS": {
      "commandName": "IIS",
      "launchBrowser": true,
      "launchUrl": "swagger/",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}
1.3 配置Swagger

详细操作见往期博客 ASP.Net MVCWebApi下集成Swagger UI

2.前端工程

2.1 vui ui

在这里插入图片描述

  • Base URL:/team/
  • PWA App Name:teamcheck
  • package.json修改name为小写
添加依赖
  • element-ui
  • axios
  • moment
  • lodash
  • font-awesome
END
### 使用 Vue 和 Spring Boot 搭建前后端分离应用程序 #### 创建 Spring Boot 后端服务 为了创建一个基于 Spring Boot 的后端服务,可以利用 Spring Initializr 初始化项目结构。确保选择了 Web、Thymeleaf (如果计划用于模板渲染),以及其他必要的依赖项。 配置 `application.properties` 文件来设置服务器属性和其他全局参数: ```properties server.port=8081 server.servlet.context-path=/ spring.application.name=spring-boot-vue-app spring.http.encoding.force=true spring.http.encoding.charset=UTF-8 ``` 上述配置指定了服务器监听端口为 8081,并设置了应用名称以及字符编码方式[^2]。 #### 构建 Vue.js 前端工程 对于前端部分,则采用 Vue CLI 工具快速构建一个新的 Vue 应用程序。通过命令行工具执行以下指令初始化新项目: ```bash vue create frontend-project cd frontend-project npm install --save axios vue-axios ``` 这里安装了 Axios 来处理 HTTP 请求,这有助于从前端向后端发起 API 调用[^3]。 #### 实现跨域资源共享(CORS) 为了让前后端能够顺利通信,在 Spring Boot 中需启用 CORS 支持。可以在控制器类上添加注解 @CrossOrigin 或者是在全局范围内配置 CORS 过滤器以允许来自特定域名的请求访问资源。 #### 测试连接 启动两个独立的服务实例分别代表前后两端。在终端窗口中运行下面两条命令之一开启各自的服务: - **Spring Boot**: 执行 Maven/Gradle 描述符中的 main 方法或者直接调用 jar 包; - **Vue Dev Server**: 输入 `npm run serve` 或者 `npm run dev` 启动本地开发环境[^1]。 当两者都处于活动状态时,就可以测试二者之间的交互情况了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值