前后端分离

1 什么是跨域(理解) 跨域 就是跨域名来访问的数据 域名: www.baidu.com (ip 192.168.0.1) www.taobao.com (ip 192.168.0.2) -- 属于跨域 localhost:8080 --- >localhost:80 --(属于跨域) www.wenku.baidu.com www.tieba.baidu.com --二级域名 -- 跨域 192.168.0.3 192.168.0.4 2. 跨域不一定存在跨域问题 什么情况下存在跨域问题: <a href="www.jd.com"> 跨域问题: 浏览器 针对ajax请求的时候,如果不同的服务,存在跨域 浏览器机制: 同源策略拦截跨域的访问 3 怎么解决跨域问题? --面试题 (1) jsonp方式 --json变种 localhost/department/list -- > <scprit src="/localhost/department/list"> 缺点: 需要服务支持 只能发起GET 请求 (2) nginx 反向代理 --现在不用 以前: nginx方案: 缺点:需要安装nginx才能使用 (3)方案3 -- 服务器允许cors这些请求 什么是cors 同源 （相同协议，相同域名，相同端口） cors: 一个w3c标准 跨域资源共享"(Cross-origin

作者：猿码道 链接：https://www.jianshu.com/p/c81008b68350 1. 前言 　　随着互联网的高速发展，前端页面的展示、交互体验越来越灵活、炫丽，响应体验也要求越来越高，后端服务的高并发、高可用、高性能、高扩展等特性的要求也愈加苛刻，从而导致前后端研发各自专注于自己擅长的领域深耕细作。 　　然而带来的另一个问题：前后端的对接界面双方却关注甚少，没有任何接口约定规范情况下各自撸起袖子就是干，导致我们在产品项目开发过程中，前后端的接口联调对接 工作量占比在30%-50%左右，甚至会更高。往往前后端接口联调对接及系统间的联调对接都是整个产品项目研发的软肋。 　　本文的主要初衷就是规范约定先行，尽量避免沟通联调产生的不必要的问题，让大家身心愉快地专注于各自擅长的领域。 2. 为何要分离 　　参考两篇文章《Web 研发模式的演变》、《Web应用的组件化开发》, 目前现有前后端开发模式：“后端为主的MVC时代”，如下图所示： 　　代码可维护性得到明显好转，MVC 是个非常好的协作模式，从架构层面让开发者懂得什么代码应该写在什么地方。为了让 View 层更简单干脆，还可以选择 Velocity、Freemaker 等模板，使得模板里写不了 Java 代码。看起来是功能变弱了，但正是这种限制使得前后端分工更清晰。然而依旧并不是那么清晰，这个阶段的典型问题是： 　　

你有没有遇到过： 前端代码刚写完，后端的接口又变了。 接口文档永远都是不对的。 测试工作永远只能临近上线才能开始。 为什么前后端分离了，你比从前更痛苦？ 　　前后端分离早已经不是新闻，当真正分离之后确遇到了更多问题。要想解决现在的痛，就要知道痛的原因： 为什么接口会频繁变动？ 　　 设计之初没有想好。 这需要提高需求的理解能力和接口设计能力。 　　 变动的成本较低。 　　德国有句谚语：“朝汤里吐口水。” 只有这样，才能让人们放弃那碗汤，停止不合理的行为。前后端同学坐在一起工作的时候效率会有提升，当后端同学接口变化时，只需要口头上通知一下即可，我们没有文档，我们很敏捷啊。没错，我们需要承认这样配合开发的效率会很高，但是频繁的变动会导致不断返工，造成了另一种浪费，这种浪费是可以被减少，甚至是被消除的。 为什么接口文档永远都是不对的？ 　　接口文档在定接口时起到一定作用，写完接口就没有用了。后面接口的频繁变化，文档必定会永远落后于实际接口，维护文档的带来了一定的成本却没能带来价值。除非对外提供的接口，否则文档谁来看呢？没人看，用处又在哪？ 　　有些公司干脆丢掉接口文档，说我们要拥抱敏捷。 　　所以接口文档落后的原因在于 没有给我们带来价值 。 为什么测试工作永远只能临近上线才能开始？ 　　一个需求，后端开发 4 天，前端开发 4 天，联调 4 天，留给测试同学只有2天时间甚至更少

为什么要了解这个知识 因为笔者参与了学校的一个服务外包项目，我们选用的技术栈是springboot+vue的；又要考虑前后端分离，所谓适应时代的步伐。然而笔者是个菜鸡，所有笔者查看了一些博客，并将其进行总结。 那什么是前后端分离呢？ 传统的web应用开发中，大多数将浏览器当做前后端的分界线。浏览器中为用户进行页面展示的部分称为前端。而将运行在服务器上，为前端提供业务逻辑和数据准备的所有代码称为后端。 前后端分离 前后端分离并不只是开发模式，而是web应用的一种架构模式。开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；在运行阶段前后端分离模式需要对web应用进行分离部署。 简单来说，前后端分离就是把数据操作和显示分离出来，前端专注做数据显示（可通过文字，图片，或者图标等让数据形象直观的显示出来），后端专注于做数据的操作，前端把数据开放给后端，后端对数据进行修改，后端提供接口给前端调用，来开发对数据的操作。 前后端分离大概可以从四个方面来理解 1、交互形式 在前后端分离架构中后端只需要负责按照约定的数据格式向前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互，前端获取到数据后，进行页面的组装和渲染，最终返回给浏览器。 2、代码组织方式 前后端分离代码组织方式有两种。 半分离：前后端共用一个代码库，但是代码分别存放在两个工程中

前后端分离CRUD 一. 跨域问题 1.1 什么是跨域？ 1.2 跨域解决方案 二.crud实现 2.1 条件查询 2.2 添加/修改 2.3 删除 2.4 批量删除 一. 跨域问题 1.1 什么是跨域？ 简单的理解，就是域名，ip，端口只要其中一个不同，就会出现跨域问题。 也就是一个系统访问另一个系统会存在跨域。 跨域不一定会有跨域问题。 因为跨域问题是浏览器对于ajax请求的一种安全限制 也就是说，跨域问题只针对于ajax 1.2 跨域解决方案 Jsonp-- json变种 最早的解决方案，利用动态去填充script标签可以跨域的原理实现。 < sccipt src = ”http : / wwww / ssss” > -- 处理 限制： 需要服务的支持 只能发起GET请求 nginx反向代理(部署) 思路是：利用nginx反向代理把跨域为不跨域，支持各种请求方式 缺点：需要在nginx进行额外配置，语义不清晰 CORS(推荐) 规范化的跨域请求解决方案，安全可靠。 优势： 在服务端进行控制是否允许跨域，可自定义规则 支持各种请求方式 缺点： 会产生额外的请求,要做询问 使用cors方案是，要注意spring的版本，修改为4.2.5 < spring . version > 4.2 .5 . RELEASE < / spring . version >

什么是前后端分离 对接模式 1、项目启动时，前端工程师和后端工程师开会确定JSON数据的详细格式。 字段 类型 作用 必传 2、JSON格式确定后前后端分头开发 3、前端工程师在后端工程师未完成时使用Mock.js技术提供的假数据开发 后端开发完成将程序部署到测试服务器之后，前端工程师连接测试服务器使用真实数据测试，联调。 来源： CSDN 作者： Ocean&&Star 链接： https://blog.csdn.net/zhizhengguan/article/details/103854522

之前总结过一篇 vue-cli 2.x+express+json-server实现前后端分离的帖子 ， @vue/cli3.0及4.0搭建的项目 与vue-cli2.x的项目结构有很大的不同。这里对@vue/cli 4.0+express实现前后端分离的经验进行总结。 一、准备： @vue/cli 4.0搭建的vue前端项目 Express 应用生成器 npm install express-generator -g 二、这里首先对express搭建后端项目进行介绍 express 项目名 cd 项目名 cnpm install cmd 下启动： set DEBUG=项目名:* & npm start 使用该express项目向前端返回数据，需要进行简单配置： 1. 安装cors npm install cors --save 2. 在app.js中配置 在routes文件夹下添加接口文件，如product.js，内容仿照index.js改写。如果需要多个接口，则在routes下添加多个文件。 var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('/', function(req, res, next) { var data = {

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> What? 什么是Rest? REST即表述性状态传递（英文：Representational State Transfer，简称REST）,是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是RESTful。 REST本质上是使用URL来访问资源种方式。众所周知，URL就是我们平常使用的请求地址了，其中包括两部分：请求方式与请求路径，比较常见的请求方式是GET与POST，但在REST中又提出了几种其它类型的请求方式，汇总起来有六种：GET、POST、PUT、DELETE、HEAD、OPTIONS。尤其是前四种，正好与CRUD（Create-Retrieve-Update-Delete，增删改查）四种操作相对应，例如，GET（查）、POST（增）、PUT（改）、DELETE（删），这正是REST与CRUD的异曲同工之妙！需要强调的是，REST是“面向资源”的，这里提到的资源，实际上就是我们常说的领域对象，在系统设计过程中，我们经常通过领域对象来进行数据建模。 REST是一个“无状态”的架构模式，因为在任何时候都可以由客户端发出请求到服务端，最终返回自己想要的数据，当前请求不会受到上次请求的影响。也就是说，服务端将内部资源发布REST服务，客户端通过URL来访问这些资源，这不就是SOA所提倡的

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 1.基本要求 技术要求 前端：vue、element-ui 后端：spring boot、spring cloud、ssm、jwt 环境要求 注册中心 项目名：exam_eureka 端口号：8600 网关 项目名：exam_zull 端口号：8700 2.功能1：客户登录 环境要求： 项目名：exam_customer 服务名：examcustomer 端口号：9060 数据库：cloud_db1 功能：客户登录 登录成功 登录失败 3.功能2：页面布局 4.功能3：添加影院 环境要求1：影院服务 项目名：exam_cinema_service 服务名：examcinema 端口号：9070 数据库：cloud_db2 环境要求2：电影服务 项目名：exam_film_service 服务名：examfilm 端口号：9080 数据库：cloud_db3 需求1：显示区域信息，并完成添加影院功能 需要2：保存影院的同时，保存上映的影片 5.功能4：影院列表 需求1.1 ： 展示基本信息 需求1.2 ：展示分页信息 需求1.3：条件查询 需求2：同时显示上映影片 6.功能5：批量删除 需求1：删除影院数据 需求2：删除中间表数据 7.功能6

01 1.后端端口号和前端不同, 2.前端接收问题 3.@RequestBody @RequestBody主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的); GET方式无请求体，所以使用@RequestBody接收数据时，前端不能使用GET方式提交数据，而是用POST方式进行提交。 在后端的同一个接收方法里，@RequestBody 与@RequestParam()可以同时使用，@RequestBody最多只能有一个，而@RequestParam()可以有多个。 注:一个请求，只有一个RequestBody;一个请求，可以有多个RequestParam 1 什么是跨域(理解) 跨域 就是跨域名来访问的数据 域名: www.baidu.com(ip 192.168.0.1) www.taobao.com(ip 192.168.0.2) – 属于跨域 ​ localhost:8080 — >localhost:80 --(属于跨域) ​ www.wenku.baidu.com www.tieba.baidu.com --二级域名 – 跨域 ​ 192.168.0.3 192.168.0.4 2. 跨域不一定存在跨域问题 什么情况下存在跨域问题: ​ 跨域问题: 浏览器 针对ajax请求的时候,如果不同的服务,存在跨域 浏览器机制: 同源策略拦截跨域的访问 3