前后端分离搭建的简单实现
前言
本片博客描述欠缺,如果有细心的小伙伴有什么地方看不懂或者感觉写的有问题之处,请留言我,我会根据留言内容更改
搭建前后端分离
为什么要前后端分离
前后端分离是目前非常流行的一种开发模式,他的项目分工更加明确:
后段:负责处理,存储数据
前段:负责显示数据
前段和后端开发人员通过接口进行数据交换
好处:
1.一套后端接口为所有UAN提供数据(PC端,APP端,桌面端等)
2.前,后端代码彼此独立互不影响
坏处:
1.当接口改变的时候,非常麻烦
2.需要前后端人员联 – 联调的开发时间(开发 + 测试 + 联调)占项目的15% - 60%
在进行前后端分离的时候,需要注意一个非常重要的问题:跨域问题
跨域问题
什么是跨域?
跨域是指跨域名的访问,以下情况都属于跨域:
跨域原因说明 | 示例 |
---|---|
域名不同 |
www.jd.com 与 www.taobao.com
|
域名相同,端口不同 |
www.jd.com:8080 与 www.jd.com:8081
|
二级域名不同/子域名不同 |
item.jd.com 与 miaosha.jd.com
|
协议不同 |
http://jd.com 与https://jd.com
|
域名和ip地址 |
http://jd.com 与192.168.23.12
|
如果域名和端口都相同,但是请求路径不同,不属于跨域,如:
www.jd.com/item
www.jd.com/goods
跨域引起的原因?为什么会引起跨域?
1.浏览器的同源策略引起跨域问题
2.跨域不一定引起跨域问题
跨域没有引起了问题:
11.3.跨域的三种解决方案:
1.Jsonp
最早的解决方案,利用script标签(不受限)可以跨域的原理实现
限制:
需要服务的支持
只能发起GET请求
2.nginx反向代理
思路是:利用nginx反向代理把跨域为不跨域,支持各种请求方式
3.CORS
规范化的跨域请求解决方案,安全可靠(w3c组织的标准)
优势:
在服务端进行控制是否允许跨域,可自定义规则
支持各种请求方式:GET POST PUT DELETE
限制访问的电脑的IP地址
缺点:
会产生额外的请求(可能发一次/二次请求)理解:
我们会采用nginx搭建静态页面服务器+cors的跨域方案
12.CORS解决跨域
12.1.什么是CORS
CORS是一个W3C标准,全称是:跨域资源共享,它允许浏览器想跨源服务器发出XML HttpRequest请求,从而克服了AJAX只能同源使用的限制
CORS需要浏览器和服务器同时支持,目前所有的浏览器都支持该功能(IE浏览器不能低于IE10)
浏览器端:
目前所有的浏览器都支持(除了IE10以下不能)整个CORS通信过程,都是浏览器自动完成,不需要用户参与
服务器端:
CROS通信与AJAX没有任何差别,因此不需要改变以前的业务逻辑,只不过,浏览器会在请求头中携带一些头的信息,我们需要以此判断是否允许其跨域,然后在响应头中加入一些信息即可(这一般过滤器完成功能)
12.2.CORS原理(过于复杂,简单的介绍)
浏览器会将ajax请求分为两类,其处理方案略有不差异:请求简单,特殊请求
简单请求:
只能是head、get、post请求
头信息不超过5种数据
只需要发送一次请求
特殊请求:
发送一次或者两次请求
put、delete等请求
第一次请求是预检请求,判断服务器是否会处理该请求,第二次请求是预检通过之后,向服务器发送真正的请求
解决跨域问题对前后端分离的简单实现
先看一张图,两个开发工具,分别是开发前端和后端的
我要实现的需求:
项目前后端分离,浏览器访问前段页面,前端页面通过vue请求后端数据,并将数据回显到页面上
步骤:
1.在项目中添加config目录将SpringMVC已经帮我们写好了CORS的跨域过滤器导入到config目录中
2.将静态页面部署到nginx服务器上
我的项目目录:
GlobalCorsConfig 配置文件
package com.czxy.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;@Configuration
public class GlobalCorsConfig {@Beanpublic CorsFilter corsFilter() {//1.添加CORS配置信息CorsConfiguration config = new CorsConfiguration();//1) 允许的域,不要写*,否则cookie就无法使用了//TODO 要修改此处 允许访问的域(前段页面会通过这个域访问后端)config.addAllowedOrigin("http://localhost:8082");//2) 是否发送Cookie信息config.setAllowCredentials(true);//3) 允许的请求方式config.addAllowedMethod("OPTIONS");config.addAllowedMethod("HEAD");config.addAllowedMethod("GET");config.addAllowedMethod("PUT");config.addAllowedMethod("POST");config.addAllowedMethod("DELETE");config.addAllowedMethod("PATCH");// 4)允许的头信息config.addAllowedHeader("*");//2.添加映射路径,我们拦截一切请求UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();configSource.registerCorsConfiguration("/**", config);//3.返回新的CorsFilter.return new CorsFilter(configSource);}
}
将页面部署到Nginx服务器上(Mac 终端配置,Windows可以之间找到Nginx的配置文件打开配置)
注意:我后端接口的指定端口为8080,在前端通过axios发送ajax请求,请求数据的是要在被请求请求的接口前加上http://localhsot:8080/
通过vi /usr/local/etc/nginx/nginx.conf命令进入到nginx的配置文件,在nginx的配置文件中配置访问页面的端口号,和前端在本地电脑的路径
如下所示:
注意进入配置文件后
配置内容编写在http{}中
配置内容:
server {listen 访问页面的端口号(要与后端配置访问端口一致);server_name localhost; #通过什么方式访问location ~/.*\(html|htm|js|css)$ { #允许访问的文件类型(比如页面是.html的,vue.js是js......)root 前端页面的路径;}
}
配置好了 点击esc :wq 保存并退出
重启Nginx服务 sudo brew services restart nginx
测试
启动SpringBoot启动类
根据在nginx.conf配置类中配置的端口访问页面
我配置的是8082,访问方式为localhost,那我访问页面的格式为:
localhost:8082/页面.html
测试结果:前端成功请求到了后端数据,搭建成功
前后端分离搭建的简单实现相关推荐
- 基于flask+vue前后端分离 一款简单的旅游网站源码,带admin管理系统
介绍 毕业设计-flask-vue前后端分离 一款简单的旅游网站,带admin管理系统 软件架构 软件架构说明 使用Python-flask 轻量级框架编写后端程序,前端采用Vue编写,后端接口都在蓝 ...
- Django3与Vue3前后端分离搭建
Django3Vue3前后端分离项目 https://blog.csdn.net/weixin_47021806/article/details/118410146 请转到最新文档,有实测案例与例图 ...
- SpringCloud工程搭建之前后端分离搭建(可选)
六.前后端分离搭建(可选) 完整工程源码:https://gitee.com/forwardxiang/spring-cloud-demo.git 6.1 创建前端工程 6.1.1 导入依赖 由于是纯 ...
- 几十行python代码构建一个前后端分离的目标检测演示网站,代码开源
在深度学习更讲究实用和落地的今天,构建一个简单的,可以利用浏览器和后端交互的演示性 Demo 可以说非常重要且实用了.本文我们将简单的介绍如何用几十行核心代码构建一个好用的.前后端分离的Demo. 2 ...
- SpringBoot+Vue前后端分离项目的搭建及简单开发(这次保证看明白~)
文章目录 概述 一.搭建SpringBoot后端 1.sql脚本 2.新建SpringBoot项目 3.MP代码生成 4.编写Controller 二.搭建Vue前端 1.IDEA安装Vue.js插件 ...
- 基于springboot 快速搭建简单前后端分离项目-后台框架
目录 1.新建project 2.选择依赖 3.简单配置 4.数据库准备 5.完成后台逻辑代码 5.1创建java实体对象 5.2创建repository 5.3单元测试 5.4编写controlle ...
- 最简单的前后端分离部署(Koa2)
前后端分离开发应该已经是很多公司的标配了,然而,在前端工程化的体系下,开发环境代码和生产环境代码往往是平级的,不再是整个文件夹往服务器上一扔就了事,这让每次的部署过程相当繁琐. 如下是常见的项目目录: ...
- 从壹开始前后端分离【 .NET Core2.2 +Vue2.0 】框架之六 || API项目整体搭建 6.1 仓储+服务+抽象接口模式...
前言 1.@LearningCoding 小伙伴关于用Sqlsugar在mysql数据库上的研究成果: sqlsugarcore支持mysql等数据库,在DbContext里面只需要设置dbtype为 ...
- flask 接口 让别人能访问_flask搭建一个前后端分离的系统
我们通常说三端,pc端,android端和ios端.如果前后端不分离,相当是要做三套系统.如果前后端分离的话,可以共用一个后端,前端各自做自己的,不用管后端. 前后端不分离 在前后端不分离的应用模式中 ...
最新文章
- 清华北大,已经没人本科就找工作了
- 一行代码发一篇 ICML?
- MATLAB利用YCBCR切割出人脸头像
- oracle 条件查询,比较运算符,逻辑运算符,特殊运算符,判断空值,大小写敏感,多行,多列子查询...
- 五种常用的异常值检测方法(均方差、箱形图、DBScan 聚类、孤立森林、Robust Random Cut Forest)
- C++--Qt使用Http协议
- LeetCode(40):组合总和 II
- MyBatis+Oracle实现主键自增长
- python 论文插图_插图论文
- java 不安全操作_Java新手求助:怎么会出现使用了未经检查或不安全的操作。
- 【图像融合】基于matlab小波变换全聚焦图像融合【含Matlab源码 1372期】
- 国内优秀的PHP后台管理系统(CMS)整理
- 华为OD岗位面试流程及总结
- 【vue】ramda.js在vue中的使用
- html和css如何制作小球,雨林寒舍 | CSS3制作3D跳动的小球
- Linux系统搭建GPU加速的PyTorch环境
- 拼多多增长黑客模式实战
- 第一次尝试miniprogram-automator
- 网站开发之ie下在线浏览pdf文件无需本地支持
- cf各区服务器所在位置,为什么说“黑区”是CF第一服务器
热门文章
- Win10 Outlook和Foxmail中如何添加QQ邮箱账户
- Hooks的基本介绍
- 织梦分页php,织梦DedeCMS网站首页分页插件
- 初识Matlab2012a的神经网络工具箱(1)
- DOS Network一月项目月报 1
- 意云丰揭秘:这么多年来互联网上的几种兼职赚钱骗局
- linux组的管理命令,Linux用户与组管理命令
- MySQL8.0新特性抢先看,性能又双叒提升了,真香啊
- linux系统USB摄像头反应慢,Linux下OpenCV打开USB接口的UVC摄像头及索引号是202的原因...
- 用python做一个向女友表白程序