前后端分离开发与跨域问题

前后端分离

传统开发方式

曾几何时,JSP和Servlet为Java带来了无限风光,一时间大红大紫,但随着互联网的不断发展,这样的开发方式逐渐显露其弊端,在移动互联网炙手可热的今天,应用程序对于后台服务的要求发生了巨大的变化;

传统的项目开发与交互流程:

在传统的web开发中,页面展示的内容以及页面之间的跳转逻辑,全都由后台来控制,这导致了前后端耦合度非常高,耦合度高则意味着,扩展性差,维护性差,等等问题

传统开发的问题如下:

  • 耦合度高
  • 调试麻烦,出现问题时往往需要前后台一起检查
  • 开发效率低,前后端相互依赖,沟通成本,维护成本高
  • 扩展性差,无法兼容其他终端
  • 交互逻辑混乱(还记得分页显示吗),最终造成代码腐烂

为了适应快速发展的移动互联网,加快开发速度,就必须找到一种新的项目开发方式,来解决以上问题;

前后端分离开发方式

上述问题产生的根本原因在于前后端没有明显的分界,严重耦合在一起,想要解决这些问题的核心也就是将前后端代码完全分开

前后端分离开发与交互流程:

有啥不一样吗?

对比我们之前编写的整个项目结构和部署环境而言,有以下区别

特性/方式 传统 前后端分离
服务器环境 全部部署到tomca即可 增加一个静态资源服务器
MVC职责 后台负责MVC全部 前台负责VC,后台负责M

简单的说:

前后端分离在传统开发上增加了一个服务器处理静态资源,将View层和Controller层放到了前端,后台仅需处理数据存取相关以及业务逻辑相关

前端：负责View和Controller层。

后端：只负责Model层，业务处理/数据等。

前后端分离的优缺点

优点:

  • 关注点分离,视图层和控制层逻辑移到了前端,后端更注重业务逻辑和系统构架
  • 耦合大大降低,开发效率和维护效率都得到提高
  • 错误友好,后台错误不影响前台界面展示
  • 对于开发者,前后端不再需要过多的涉及彼此的开发语言

缺点:

  • 前端开发者压力更大,需要关注Controller层
  • 增加静态服务器后,系统结构更复杂
  • 更多的HTTP请求,在移动端运行效率差
  • 逻辑靠近前端,不同平台需针对性重复实现,(安卓iOS+web)
  • SEO优化无力,爬虫大多不支持ajax

前后端的重新定义:

在此之前区分前后端是根据硬件环境

分离后根据职责划分:如图

前后端分离页面执行流程(针对浏览器)

Controller层中会使用流程控制来完成数据校验,数据解析,页面的跳转等动作,那么如何完成呢,这就需要使用到JavaScript了

那么一个前后端分离的项目,前端是如何完成最终的数据展示呢?

如果前端是其他的例如iOS,安卓,则无需请求静态页面,页面的绘制是由系统原始语言实现的,只需要向后台请求json数据即可

what is json?

JSON全称(JavaScript Object Notation),js对象表示法,是一种轻量级数据交换格式

特点:

  • 格式简单
  • 解析方便,跨平台
  • 轻量级
  • 内容为字符串

最初产生于web项目中,后来因为太优秀,被各种CS结构项目使用

案例:

{
                "uniquekey":"a56e67162bd84ee9c480e22a1170c14b",
                "title":"人均负债17万从“全民储蓄”到“全民负债” 中国人的钱去哪儿了?",
                "date":"2019-12-22 13:43",
                "category":"头条",
                "author_name":"鹤川倾海",
                "url":"http://mini.eastday.com/mobile/191222134359221.html",
                "thumbnail_pic_s":"http://05imgmini.eastday.com/mobile/20191222/20191222134359_b6ded6df388f5c6747e67bacfc32d125_4_mwpm_03200403.jpg"
}

你可以将其看做Map数据结构,以键值对形式存储,但是一些java中的数据结构json中是没有的例如,集合

不满足现状的前端小伙伴们-node.js

现在你已经知道了前后端分离的概念以及运行流程,作为后端开发的你不禁暗自窃喜,好了以后Controller不归我管了,你正要开始葛优躺时前端小伙伴炸锅了:

尼玛,各种页面跳转逻辑,用户验证逻辑,前端的表单验证………..,难道要在学学java?习惯了js的他们,肯定不愿意

问题就是动力,国外的Ryan Dahl这为兄台,决定改变这个现状,于是开发了使用JS作为开发语言的Node.js(2009/5),提供了异步IO,数据库支持,网络支持,等等,广大前端开发者激动落泪,以后别整什么java了,前后台一套JS全搞定,梦想是美好的,java(1996)是强大的,经历了二十几年的努力java已经是如此强大,稳定,node.js作为晚了13年的后期之秀还有很长的路要走;

相信使用一门语言编写所有程序的一天总会到来,也有很多人在努力实现这个梦想,例如RectNative;

Node.js在前后端分离中的作用

大家都知道淘宝网站做得很大面对成百上千的前台页面,想要提高整体开发效率,以及项目扩展性等,必然要采用前后端分离,大量的Controller层逻辑,以及数据校验逻辑,导致前端开发亚历山大,并且没有相对固定的开发模型,非常容易出问题

淘宝目前使用了一种叫做中途岛的构架,利用Node.js来完成了Controller层,并提供了一些其他良好的特性

构架:

职责:

优点:

  • 请求聚合,Node在服务器端整合多个请求响应,一次性返回,效率更高
  • SEO优化
  • JS语言,学习成本低
  • 浏览器与Node.js端代码可重用
  • 服务器渲染

如果将其作为一个前端框架,Node.js对比Vue.js等无疑是重量级的

强调:

前后端分离并不是一定要加入node.js,前后端分离是责任划分问题,与使用什么服务器没有关系;

尝试一下

在页面中使用Ajax来请求数据,服务器返回json数据,前端使用js完成页面渲染

Ajax

Ajax是客户端的一种请求方式,全称(Asynchronous Javascript And XML)

用于异步的向服务器发送HTTP请求并获取响应数据,异步的好处在于,请求期间浏览器不会卡死,可以正常响应用户操作;而常见的表单提交,和直接打开指定地址,都是同步的;

对象转json

json数据的基本形式是键值对,对应着对象中的属性,是有规律的,那就可以使用代码来完成这一转换过程,下面列出了一些常见的json开源工具

  • Gson
  • FastJson
  • Jackson
  • Json-lib

性能对比请看这里对比

这里选择fastjson

下载jar

http://repo1.maven.org/maven2/com/alibaba/fastjson/

案例:

import com.alibaba.fastjson.JSON;

import java.util.ArrayList;

public class Demo {
    public static void main(String[] args) {
        //Bean熟悉
        ArrayList<String> hobby = new ArrayList<>();
        hobby.add("girl");
        hobby.add("music");
        hobby.add("coding");

        //JavaBean
        Person p = new Person("jerry",18,true,hobby);
        p.setDog(new Dog("小花花"));

        //Bean转json字符串
        String s = JSON.toJSONString(p);
        System.out.println(s);

        //json字符转Bean
        Person person = JSON.parseObject(s,Person.class);
        System.out.println(person);

        //ArrAyList转json字符串
        System.out.println(JSON.toJSONString(hobby));
    }
}

前后端分离案例

现在把自己当成是前端,要开发一个前后分离的简单页面,用于展示学生信息列表

第一步

编写一个用于展示表格的静态页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>

    </head>
    <body>
        <table id="tab" border="1">
            <tr>
                <th>编号</th>
                <th>名字</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </table>
        <button onclick="req()">请求数据</button>
        <img id="img" />
    </body>
</html>

不启动tomcat直接在编辑器中打开即可访问,测试他就是一个静态网页,而我们的编辑器就是一个HTTP服务器,可以响应静态网页

第二步

引入jquery使得ajax编写更方便

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

第三步

编写ajax,向服务器发送请求

第四步

将数据展示到页面上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    </head>
    <body>

        <table id="tab" border="1">
            <tr>
                <th>编号</th>
                <th>名字</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </table>
        <button onclick="req()">请求数据</button>
        <img id="img" />
    </body>
    <script>
        function req(){
            document.getElementById("img").src = "img/timg.gif";
            $.ajax({
                url:"http://localhost:8080/MyServer/getData",
                success:function(data){
                    console.log(data);
                    document.body.insertAdjacentHTML("beforeend","<h1>%</h1>".replace("%",data));
                    document.getElementById("img").src = "";
                },
                error:function(err){
                    console.log(err);
                    document.getElementById("img").src = "";
                }
            });
        }
    </script>
</html>

现在身份切换回后端开发用于获取表格数据的接口

  1. 创建web项目
  2. 创建Servlet
  3. 引入fastjson
  4. 创建一个bean类
  5. 创建一堆bean放入列表中
  6. 将列表转为json字符串 返回给前端

Servlet代码

package com.kkb;

import java.io.IOException;

public class AServlet extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
    }
    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        String s = "{\"name\":\"jack\"}";
        response.getWriter().println(s);
    }
}

启动服务,测试访问,会发现页面上没有显示服务器返回的结果….

跨越问题

打开浏览器检查页面会发现没有输出服务器返回的消息而是,出现了一个错误信息,这就是前后端分离最常见的跨越问题

什么是跨域

跨越为题之所以产生是因为浏览器都遵循了同源策略

同源策略:

同源策略（Same origin policy）是一种约定，它是[浏览器]最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，浏览器会先发送OPTION请求进行预检查,判断服务器是否允许跨域,如果允许才发送真正的请求,否则抛出异常。

简单的说:

同源策略浏览器的核心安全机制,其不允许在页面中解析执行来自其他服务器数据

如何判断是否跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

同源限制:
  1. 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
  2. 无法向非同源地址发送 AJAX 请求

什么时候产生跨域问题:

浏览器在解析执行一个网页时,如果页面中的js代码请求了另一个非同源的资源,则会产生跨越问题

而浏览器直接跳转另一个非同源的地址时不会有跨域问题

解决跨越问题

既然禁止跨域问题时浏览器的行为,那么只需要设置浏览器运行解析跨域请求的数据即可,但是这个设置必须放在服务器端,由服务器端来判断对方是否可信任

在响应头中添加一个字段,告诉浏览器,某个服务器是可信的

package com.kkb;

import java.io.IOException;

public class AServlet extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        response.setHeader("Access-Control-Allow-Origin","*");
        String s = "{\"name\":\"jack\"}";
        response.getWriter().println(s);
    }
}

其值跨越式某个指定的域名,也可以是*表示信任所有地址

其他相关设置

//指定允许其他域名访问
'Access-Control-Allow-Origin:http://XXX.XXX.XXX'//一般用法（*，指定域，动态设置），注意*不允许携带认证头和cookies
//是否允许后续请求携带认证信息（cookies）,该值只能是true,默认为false
//且需要前端配合进行相应设置才能让cookie跨越
'Access-Control-Allow-Credentials:true'
//预检查间隔时间
'Access-Control-Max-Age: 1800'
//允许的请求类型
'Access-Control-Allow-Methods:GET,POST,PUT,POST'
//列出必须携带的字段
'Access-Control-Allow-Headers:x-requested-with,content-type'

解决了跨越问题后再来完善上面的案例

Servlet代码:
package com.kkb;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;

import java.io.IOException;
import java.util.ArrayList;

public class AServlet extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        //允许来自任何主机的跨越访问
        response.setHeader("Access-Control-Allow-Origin","*");
                //设置响应类型为json数据
        response.setContentType("application/json;charset=utf-8");

        //学生信息
        ArrayList<Student> students = new ArrayList<>();

        Student stu1 = new Student("s1","jack",20,"man");
        Student stu2 = new Student("s2","tom",22,"girl");
        Student stu3 = new Student("s3","jerry",10,"woman");
        Student stu4 = new Student("s4","scot",24,"boy");
        students.add(stu1);
        students.add(stu2);
        students.add(stu3);
        students.add(stu4);
        response.getWriter().println(JSON.toJSONString(JSON.toJSONString(students)));
    }
}
HTML代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    </head>
    <body>
        <table id="tab" border="1">
            <tr>
                <th>编号</th>
                <th>名字</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </table>
        <button onclick="req()">请求数据</button>
        <img id="img" />
    </body>
    <script>
        function req(){
            document.getElementById("img").src = "img/timg.gif";
            $.ajax({
                url:"http://localhost:8080/MyServer/getData",
                success:function(data){
                    data = JSON.parse(data)
                    console.log(data)
                    for (var i = 0; i < data.length; i++) {
                        a = data[i];
                        var row = "<tr><td>id</td><td>name</td><td>age</td><td>gender</td></tr>"
                            row = row.replace("id",a.id);
                            row = row.replace("name",a.name);
                            row = row.replace("age",a.age);
                            row = row.replace("gender",a.gender);
                            document.getElementById("tab").insertAdjacentHTML("beforeend",row);
                    }
                    document.getElementById("img").src = "";
                },
                error:function(err){
                    console.log(err);
                    document.getElementById("img").src = "";
                }
            });
        }
    </script>
</html>

一个简单的前后端分离的案例就搞定了

思考用户身份身份状态保持的问题?

原文地址：https://www.cnblogs.com/yangyuanhu/p/12081525.html

时间： 2024-10-22 02:58:15

前后端分离开发与跨域问题的相关文章

前后端分离，解决跨域问题及django的csrf跨站请求保护

1. 前后端分离解决跨域问题 解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现: 关于跨域,前端会先发送OPTIONS请求,进行预检,检查后端是否允许前端设置的相应的请求头,请求内容 function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie

前后端分离下的跨域问题

问题产生的原因 前后端分离项目中,前端和后台服务可能没有部署在一台服务器上.这样的话,前后端ip就会不一致,那么就会产生跨域,往往前后端项目部署的端口通常也可能会不一样,这样也会产生跨域问题.再就是使用的域名不一致也会产生这样的问题. 错误信息 Failed to load http://192.168.2.111:8080/login: No 'Access-Control-Allow-Origin' header ispresent on the requested resource. Or

springboot shiro 前后端分离，解决跨域、过虑options请求、shiro管理session问题、模拟跨域请求

一.解决跨域.过虑options请求问题 1.创建过虑类 import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.stereotype.Component; import javax.servlet.*; import javax.servlet.annotation.WebFilter; import javax.servlet.http.HttpServletRequest; im

Vue + SpringBoot + nginx：（1）开发环境npm run dev下，通过nginx解决前后端分离造成的跨域问题

前面看了很多的博客,在使用nginx进行反向代理的时候,都是讲通过 build 后...但是,我只是希望在 npm run dev 的时候进行 nginx 的反向代理,因为我只是在开发环境啊!!! build 个锤子... 前提:后端环境已经搭建完成.前端页面可通过npm进行启动.下载好nginx 前端页面接口:8081(这个端口可以通过配置文件自定义) 服务端接口:8902 nginx 包 大体思路: 1.nginx 上配置好监听的端口号(这样前端页面访问端口就能被检测到).代理到服务端的地址

解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题

问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, 既然每次请求都是一个新的会话, 那我们去获取session的时候自然就是null了. 解决办法如下: 环境: vue 2.0 springboot 2.1.6 一.前端部分 1.  在vue引入axios的位置添加以下代码 import axios from 'axios' axios.defau

前后端分离Django解决跨域的问题

现在,前端与后端分处不同的域名,我们需要为后端添加跨域访问的支持 否则前端无法使用axios无法请求后端提供的api数据,我们使用CORS来解决后端对跨域访问的支持. 使用django-cors-headers扩展 在 Response(headers={"Access-Control-Allow-Origin":'客户端地址/*'}) 文档:https://github.com/ottoyiu/django-cors-headers/ 安装 pip install django-co

前后端分离ajax请求跨域问题

解决方案一(服务器端): 1.java语言 如果您使用的mvc框架是spring4.2以上的话,一个@CrossOrigin就可以搞定.将@CrossOrigin加到Controller上,那么这个Controller所有的请求都是支持跨域的,代码如下: @Controller @CrossOrigin public class GreetingController {} 将@CrossOrigin加到请求方法上,那么这个请求是支持跨域的,代码如下 @CrossOrigin @RequestMa

前后端分离开发部署模式

前后端分离开发部署模式 Other 2015-06-13 在开始讨论这个话题之前我们先来认识一下传统的开发模式. 一.传统开发模式 相信很多做过Web开发童鞋应该都会经历这样一种开发模式,利用后端语言提供的模版引擎编写HTML/XML页面,比如: PHP 开发有 Smarty模板引擎 Java web工程有jsp页面 Python 各个Web框架都有各自的模板引擎 NodeJS 的express你懂得 都有一个共同的特点,服务器端后台语言生成解析后的HTML/XML格式返回给客户端,例如浏览器端

vue+mockjs 模拟数据，实现前后端分离开发

在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰富 4.通过随机数据,模拟各种场景. 等等优点. 总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档,在真实的请求上拦截ajax,并根据mockjs的mock数据的规则,模拟真实接口返回的数据,并将随机的模拟数据返回参与相应的数据交互处理,这样真正实现了前后台的分离开发. 与以往的自己