JavaScript怎么实现前后端分离

发布时间：2022-03-23 14:23:39 来源：亿速云阅读：493 作者：iii 栏目：web开发

本篇内容介绍了“JavaScript怎么实现前后端分离”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

前后端分离案例

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

第一步

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

<!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","<h2>%</h2>".replace("%",data));
                    document.getElementById("img").src = "";    
                },
                error:function(err){
                    console.log(err);
                    document.getElementById("img").src = "";    
                }
            });
        }
    </script>
</html>

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

创建web项目
创建Servlet
引入fastjson
创建一个bean类
创建一堆bean放入列表中
将列表转为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不同即为跨域

同源限制:

无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
无法向非同源地址发送 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
//预检查间隔时间
'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>

一个简单的前后端分离项目就搞定了

补充:cookie跨域

默认情况下cookie是不允许跨域传输的.可以通过以下方式来解决

第一步

浏览器端设置允许cookie跨域

第二步

服务器端在响应中添加字段,说明允许cookie跨域

该值只能是true,为false无效,默认为false

#'Access-Control-Allow-Credentials:true'

状态保持问题

在传统的项目中我们利用,session+cookie来保持用户的登录状态,但这在前后端分离项目中出现了问题;

sessionid是使用cookie存储在客户端的,而cookie遵守同源策略,只在同源的请求中有效,这就导致了问题出现:

前后端分离后,session+cookie的问题

前后端分离后静态资源完全可能(而且经常....)部署到另一个域下,导致cookie失效,例如这样:

在www.baidu.com中设置的cookie是不会自动发送到cloud.baodu.comde

虽然我们可以在cookie中指定domain来解决,但是cookie必须针对性的设置作用域

这对于有多个不同域要共享cookie时,可操作性差,难以维护

上述问题出现在前后端分离的web项目中,对于前后端分离的原生CS结构项目而言,很多客户端默认是不处理session和cookie的,需要进行相应的设置
在分布式或集群的项目中,共享session和cookie也是一大问题,必须引入第三方来完成session的存储和共享(也可通过中间层做cookie转发如Nginx.Node.js),这也是传统单体服务无法支持分布式和集群的问题所在

正因为有这些问题,导致session+cookie的方式在某些项目中使用起来变得很麻烦,这时候就需要一种新的状态维持的方式;

JWT

JWT全称(json WEB token),是基于json数据结构的数据验证方式,其本质是对json数据进行加密后产生的字符串

JWT的亮点:

安全
稳定
易用
支持 JSON

JWT是如何做的?

回顾,之所以使用session和cookie是因为HTTP的无状态性质,导致服务器无法识别多次请求是否来自同一个用户

JWT可以对用户信息进行加密生成一个字符串,下发到客户端,客户端在后续请求中携带该字符串,服务器解析后取出用户信息,从而完成用户身份的识别,如下图:

session共享和JWT在集群中的不同

JWT的数据结构

JWT是一个很长的字符串，分为成三个部分,中间用点.隔开注意; JWT 内部是没有换行的，这里只是为了便于展示，将它写成了几行。

三个组成部分如下:

Header（头部）
Payload（负载）
Signature（签名）

Header 部分是一个 JSON 对象，描述 JWT 的元数据，例如签名算法等,像下面这样:

{
  "alg": "HS256",
  "typ": "JWT"
}

alg属性表示签名的算法，默认是 HMAC SHA256;

typ属性表示这个令牌(token)的类型统一写为JWT

最后使用base64URL算法转换为字符串;

Payload

Payload 部分也是一个 JSON 对象，用来存放真正需要传递的数据,JWT 规定了7个保留字段,如下:

iss (issuer)：签发人
exp (expiration time)：过期时间
sub (subject)：主题
aud (audience)：受众
nbf (Not Before)：生效时间
iat (Issued At)：签发时间
jti (JWT ID)：编号

服务器需要在Payload中添加用于识别用户身份的数据,也是键值对形式,注意不可使用保留字段,像下面这样

{
  "sub": "test JWT",
  "name": "jerry",
  "isadmin": true
}

Payload同样使用base64URL算法转换为字符串;

强调:Payload数据默是不加密的,攻击者可以通过相同的方式解析获取

若要将用户的关键数据放入其中则必须对其进行额外的加密

Signature

部分是对前两部分的签名，防止数据篡改。

签名时需要指定一个密钥（secret）。密钥只有服务器才知道，不能泄露给用户。然后使用 Header 里面指定的签名算法（默认是 HMAC SHA256），按照下面的方式产生签名。

signature = HMACSHA256(base64UrlEncode(header) + "." +  base64UrlEncode(payload),  secret)

最后把 Header、Payload、Signature 三个部分拼成一个字符串,每个部分之间用"点".分隔返回给用户;

总结:

JWT的优点:

满足REST Full的无状态要求(为了提高系统的扩展性,REST要求所有信息由请求端来提供,如此才使得JWT成为了分布式,集群构架的首选方式)

在分布式,集群系统中使身份验证变得非常简单

可用于其他数据交换

合理的使用可减少数据库查询次数

JWT的缺点:

对于同样的数据JWT整体大小超过同样数据的cookie,这会增加网络负担

服务器每次解析JWT都需要再次执行对应的算法,这将增加系统负担

在传统单体服务,和WEBApp形式的前后端分离项目中使用JWT反而不如Session+cookie

注意事项:

JWT的payload部分是不加密的,如果要放入关键数据则必须对其进行加密,或是将最后的JWT整体加密
JWT本身用于认证,一旦泄露,则任何人都可以使用该令牌,获得其包含的所有权限,为了提高安全性.JWT的有效期不应太长,对于一些非常权限,建议在请求时再次验证

Java中JWT的使用:

懂得原理了后我们完全可以自己来实现,但是没有必要,下面是目前用的较多的一个开源库

使用JWT的步骤总体分为三步

生成JWT
验证JWT
提取数据

案例:

package com.kkb;

import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTCreator;
import com.auth0.jwt.JWTVerifier;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.exceptions.JWTDecodeException;
import com.auth0.jwt.exceptions.JWTVerificationException;
import com.auth0.jwt.interfaces.DecodedJWT;

import java.util.Date;
import java.util.HashMap;
import java.util.Map;


public class JWTTool {
    //自定义密钥
    public static final String secretKey = "askjdksadjkasdakjshdjkasdkAakjshdjasdjs";

    /***
     *
     * @param secretKey 密钥
     * @param data 用户数据
     * @param expireTime 有效期
     * @return
     */
    public String getJWTWithHMAC256(String secretKey, HashMap<String, String> data,long expireTime){
        //指定JWT所使用的签名算法
        Algorithm algorithm = Algorithm.HMAC256(secretKey);

        JWTCreator.Builder token = JWT.create()//创建token
                .withIssuer("com.kkb")//指定签发人
                .withExpiresAt(new Date(expireTime));//有效时间
        //添加自定义数据
        if (data != null){
            for (Map.Entry<String, String> a :data.entrySet()) {
                token.withClaim(a.getKey(),a.getValue());
            }
        }
        return token.sign(algorithm);
    }

    public boolean verifyTokenWithHMAC256(String token,String secretKey){
        try{
            Algorithm algorithm = Algorithm.HMAC256(secretKey);
            JWTVerifier verifier = JWT.require(algorithm)
                    .withIssuer("com.kkb")
                    .build();
            verifier.verify(token);
            return true;
        }catch (JWTVerificationException e){
            e.printStackTrace();
            return false;
        }
    }

    public static void main(String[] args) {
        JWTTool jwtTool = new JWTTool();

        //要添加到token中的数据
        HashMap<String,String> data = new HashMap<>();
        data.put("user","jerry");
        data.put("isAdmin","true");

        //有效期
        long expiresTime = new Date().getTime() + 1000 * 60 * 60;

        //生成token
        String token = jwtTool.getJWTWithHMAC256(secretKey,data,expiresTime);
        System.out.println(token);

        //验证token
        //If the token has an invalid signature or the Claim requirement is not met
        if (jwtTool.verifyTokenWithHMAC256(token,secretKey)){
            System.out.println("token 有效");
            try{
                //提取数据
                DecodedJWT decode = JWT.decode(token);
                System.out.println("数据:"+decode.getClaim("user").asString());
                System.out.println("数据:"+decode.getClaim("isAdmin").asString());
                System.out.println("签发:"+decode.getIssuer());
                System.out.println("有效期"+decode.getExpiresAt());

            }catch (JWTDecodeException e){
                //If the token has an invalid syntax or the header or payload are not JSONs,
                System.out.println("解析token失败");
            }
        }else {
            System.out.println("token 无效");
        }
    }
}

“JavaScript怎么实现前后端分离”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！

向AI问一下细节