SpringCloud工程搭建之前后端分离搭建(可选)

六、前后端分离搭建(可选)

完整工程源码：https://gitee.com/forwardxiang/spring-cloud-demo.git

6.1 创建前端工程

6.1.1 导入依赖

由于是纯前端部署，除了继承父工程依赖外，只需要引入web依赖即可：

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId>
</dependency>

6.1.2 编写启动类

不需要Eureka等其他微服务，因此仅给出springboot的启动类注解即可：

@SpringBootApplication
public class LayUIApplication {public static void main(String[] args) {SpringApplication.run(LayUIApplication.class, args);}
}

6.2 配置前端工程

6.2.1 配置前端服务的端口

没有其他微服务，仅仅提供web访问，因此application.yml只需要配置端口即可：
```
server:port: 80
```

6.2.2 导入前端资源

在springboot默认静态资源目录：

#查找源码中ResourceProperties类
classpath:/META-INF/resources/
classpath:/resources/
classpath:/static/
classpath:/public

将js/css/图片等资源导入到static目录中，将HTML页面文件导入到public目录，结构如下：

6.3 前端服务请求

前端采用layui框架，简单易用，但是需要注意有些细节，例如layui表单渲染的下拉框，在使用jQuery选中并更改数据后，需要使用layui表单重新(form.render(‘select’))渲染才会起作用。

由于后端服务与本前端不在一个同源域中，因此需要在后端服务中配置跨域。以下是前端中发起Ajax的例子：

$.ajax({type: "POST",url: "http://127.0.0.1:9091/bill/update" ,data: JSON.stringify(data.field),dataType: "json",contentType: "application/json; charset=UTF-8",success: function (vo) {if (vo.code === 200) {window.location.href = "table.html";} else {layer.alert("账单信息更新失败！" + vo.msg);}}
});

6.4 后端服务跨域配置

为了简化问题，这里先介绍没有网关，前端直接访问后端业务微服务的情况下，使用注解的方式配置跨域：

@CrossOrigin //也可以注解在具体的方法上
@RefreshScope
@RestController
@RequestMapping("bill")
public class BillController {//省略
}

当外部访问经过网关时，无需在业务微服务配置跨域，若这两处都配置了跨域反而可能会因为回复的头部信息重复导致前端报错（除非在Gateway配置了去重操作），具体网关配置参考：5.3.2 Gateway配置跨域

SpringCloud工程搭建之前后端分离搭建(可选)相关推荐

php node.js django,Vue.js和Django搭建前后端分离项目示例详解
本篇文章主要介绍了Django+Vue.js搭建前后端分离项目的示例,具有一定参考价值,有兴趣的可以了解一下在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法. 笔者是个渣渣,一切都是 ...
Nodejs搭建前后端分离开发模式下的微信网页项目
原文链接:<Nodejs搭建前后端分离开发模式下的微信网页项目>- 陈帅华本文涉及对前后端分离及微信网页项目中的前端如何在本地环境中开发与调试的思考. 主要问题 1.如何配置微信公众平台 ...
vue项目内封装axios.，使用Mock，搭建前后端分离环境。Axios + Promise + Mock
1.安装Mock npm install mockjs --save-dev 1.1加入相关Mock代码在SRC目录下创建文件夹mock,在里面创建虚拟接口地址及数据: // mock/index. ...
前后端分离搭建的简单实现
前言本片博客描述欠缺,如果有细心的小伙伴有什么地方看不懂或者感觉写的有问题之处,请留言我,我会根据留言内容更改搭建前后端分离为什么要前后端分离前后端分离是目前非常流行的一种开发模式,他的项目分 ...
Laravel8 Sanctum API认证+Vue问卷搭建前后端分离SPA应用
Laravel8 Sanctum API认证+Vue问卷搭建前后端分离SPA应用 1 Sanctum 扩展安装与配置 1.1 安装Sanctum 1.2 配置API中间件 1.3 跨域访问配置 1. ...
SpringCloud微服务前后端分离开发中出现的弱智问题之（不支持当前请求方法）
SpringCloud微服务前后端分离开发中出现的弱智问题之(不支持当前请求方法) 问题背景问题解决为什么说这是一个弱智问题,因为这多是编写代码不仔细造成的. 问题背景当当后台API发布的接口与 ...
linux的django路径,Ubuntu下使用Django搭建前后端分离的全栈项目
README Ubuntu16.04: Python3.6.2: Django1.11: 开发工具使用了pycharm(Ubuntu): 2017-12-08:更新到留言板第一步,在Linux环境中 ...
ASP.NET Core 实战：使用ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目
一.前言这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业的发展,让自己扩展出新的技能树,对自 ...
Jenkins搭建前后端分离项目流水线实战
文章目录项目简介流水线建设前端流水线pipline script nginx配置流水线pipline script 后端流水线pipline script 后端数据库初始化流水线pipline ...

SpringCloud工程搭建之前后端分离搭建(可选)

六、前后端分离搭建(可选)

6.1 创建前端工程

6.1.1 导入依赖

6.1.2 编写启动类

6.2 配置前端工程

6.2.1 配置前端服务的端口

6.2.2 导入前端资源

6.3 前端服务请求

6.4 后端服务跨域配置

SpringCloud工程搭建之前后端分离搭建(可选)相关推荐

最新文章

热门文章