主頁 > 前端設計 > xmall商城學習筆記——JWT改造登錄

xmall商城學習筆記——JWT改造登錄

2020-09-20 07:38:44 前端設計

文章目錄

  • 前言
  • 一、無狀態登錄是什么?
    • 1.有狀態登錄
    • 2.無狀態登錄
    • 3.如何實作無狀態
    • 4.JWT
    • 5.JWT互動流程
  • 二、理解原有解決方案!
    • 1.準備util類
    • 2.xmall-manager-web 重點
  • 三.改造專案
  • 總結


前言

之前給大家許諾的給xmall 加上jwt 校驗的專案終于弄好了,最近一直加班身心俱疲,


提示:以下是本篇文章正文內容,下面案例可供參考

一、無狀態登錄是什么?

了解JWT首先要知道什么是無狀態登錄,什么是有狀態登錄,

1.有狀態登錄

有狀態登錄:有狀態服務,即服務端需要記錄每次會話的客戶端資訊,從而識別客戶端身份,根據用戶身份進行請求的處理,典型的設計如tomcat中的session,
例如登錄:用戶登錄后,我們把登錄者的資訊保存在服務端session中,并且給用戶一個cookie值,記錄對應的session,然后下次請求,用戶攜帶cookie值來,我們就能識別到對應session,從而找到用戶的資訊,
缺點是什么?

  • 服務端保存大量資料,增加服務端壓力
  • 服務端保存用戶狀態,無法進行水平擴展
  • 客戶端請求依賴服務端,多次請求必須訪問同一臺服務器

2.無狀態登錄

微服務集群中的每個服務,對外提供的都是Rest風格的介面,而Rest風格的一個最重要的規范就是:服務的無狀態性,即:

  • 服務端不保存任何客戶端請求者資訊
  • 客戶端的每次請求必須具備自描述資訊,通過這些資訊識別客戶端身份

無狀態登錄的優點

  • 客戶端請求不依賴服務端的資訊,任何多次請求不需要必須訪問到同一臺服務
  • 服務端的集群和狀態對客戶端透明
  • 服務端可以任意的遷移和伸縮
  • 減小服務端存盤壓力

3.如何實作無狀態

無狀態登錄的流程:

  • 當客戶端第一次請求服務時,服務端對用戶進行資訊認證(登錄)
  • 認證通過,將用戶資訊進行加密形成token,回傳給客戶端,作為登錄憑證
  • 以后每次請求,客戶端都攜帶認證的token
  • 服務的對token進行解密,判斷是否有效,

流程圖:
在這里插入圖片描述
整個登錄程序中,最關鍵的點是什么?
token的安全性
token是識別客戶端身份的唯一標示,如果加密不夠嚴密,被人偽造那就完蛋了,

采用何種方式加密才是安全可靠的呢?

我們將采用JWT + RSA非對稱加密

4.JWT

JWT,全稱是Json Web Token,是JSON風格輕量級的授權和身份認證規范,可實作無狀態、分布式的Web應用授權;官網:https://jwt.io

JWT資料格式
JWT包含三部分資料:

  • Header:頭部,通常頭部有兩部分資訊
    宣告型別,這里是JWT
    我們會對頭部進行base64編碼,得到第一部分資料
  • Payload:載荷,就是有效資料,一般包含下面資訊:
    用戶身份資訊(注意,這里因為采用base64編碼,可解碼,因此不要存放敏感資訊)
    注冊宣告:如token的簽發時間,過期時間,簽發人等
    這部分也會采用base64編碼,得到第二部分資料
  • Signature:簽名,是整個資料的認證資訊,一般根據前兩步的資料,再加上服務的的密鑰(secret)(不要泄漏,最好周期性更換),通過加密演算法生成,用于驗證整個資料完整和可靠性
    生成的資料格式:token==個人證件 jwt=個人身份證
    在這里插入圖片描述

5.JWT互動流程

流程圖:
在這里插入圖片描述
步驟翻譯:

  • 1、用戶登錄
  • 2、服務的認證,通過后根據secret生成token
  • 3、將生成的token回傳給瀏覽器
  • 4、用戶每次請求攜帶token
  • 5、服務端利用公鑰解讀jwt簽名,判斷簽名有效后,從Payload中獲取用戶資訊
  • 6、處理請求,回傳回應結果
    因為JWT簽發的token中已經包含了用戶的身份資訊,并且每次請求都會攜帶,這樣服務的就無需保存用戶資訊,甚至無需去資料庫查詢,完全符合了Rest的無狀態規范,

二、理解原有解決方案!

1.準備util類

JWTUtil

@Component
public class JwtUtil {
    @Value(value = "60000")
    private String tokenValidTime;

    /***
     * 創建token
     * @param username
     * @param currentTimeMillis
     * @return
     */
    public String createToken(String username,String currentTimeMillis){
        try{
            //加密
            Algorithm algorithm = Algorithm.HMAC256(username);
            Date tokenExpireDate = getExpireTime();
            return JWT.create().withClaim("username",username)
                    .withClaim(RedisConstant.CURRENT_TMIE_MILLIS,currentTimeMillis)
                    .withExpiresAt(tokenExpireDate).sign(algorithm);
        } catch (Exception e){
            throw new XmallException("JWTToken驗證token出現UnsupportedEncodingException例外:" + e.getMessage());
        }

    }

    /***
     * 獲取token過期時間
     * @return
     */
    private Date getExpireTime(){
        long currentTimeMillis = System.currentTimeMillis();
        return new Date(currentTimeMillis+Integer.valueOf(tokenValidTime));
    }

    /**
     * 驗證token
     *
     * @param username
     * @param token
     * @return
     */
    public boolean verifyToken(String username, String token) {
        try {
            Algorithm algorithm = Algorithm.HMAC256(username);
            JWTVerifier verifier = JWT.require(algorithm).withClaim("username", username).build();
            verifier.verify(token);
            return true;
        } catch (Exception e) {
            throw new XmallException("驗證失敗:"+e.getMessage());
        }
    }

    /**
     * 根據key獲取token中攜帶key對應的資訊
     *
     * @param token token
     * @param key   關鍵詞
     * @return 該關鍵詞攜帶的值
     */
    public String getValueFromTokenByKey(String token, String key) {
        try {
            DecodedJWT decodedJWT = JWT.decode(token);
            return decodedJWT.getClaim(key).asString();
        } catch (JWTDecodeException e) {
            return null;
        }
    }

    /**
     * 獲取token中username對應的值
     *
     * @param token
     * @return
     */
    public String getUsernameFromToken(String token) {
        return getValueFromTokenByKey(token, "username");
    }

    /**
     * 獲取token中的創建的時間戳
     *
     * @param token
     * @return
     */
    public String getCurrentTmieMillisFromToken(String token) {
        return getValueFromTokenByKey(token, RedisConstant.CURRENT_TMIE_MILLIS);
    }

在這里插入圖片描述
JedisClientPool 里添加

/**
	 * 設定key ,value 并且設定其過期時間
	 *
	 * @param key
	 * @param value
	 * @param expireTime
	 * @return
	 */
	 @Override
	public String set(String key,String value,int expireTime){
		Jedis jedis = jedisPool.getResource();
		String result = jedis.set(key, value);
		if ("OK".equals(result)) {
			jedis.expire(key, expireTime);
		}
		jedis.close();
		return result;
	}

還需要在JedisClient 介面里寫個方法

在這里插入圖片描述

2.xmall-manager-web 重點

先理一下他原來的解決方法
首先我看找到登錄的地方
在這里插入圖片描述
我們可以看到原來的專案里直接把 password 進行了MD5加密
再和username 組裝成token
呼叫 subject.login(token)
呼叫這個之后會到MyRealm類里執行doGetAuthenticationInfo方法
在這里插入圖片描述
這里可以看到從token中獲取username,去資料庫里查詢,查到 就把資料放到
SimpleAuthenticationInfo類物件里回傳,這里我們注意new 實體化 傳的引數

SimpleAuthenticationInfo(Object principal, Object credentials, String realmName)

第一個是主鍵,第二個是證書,第三個隨便只要不為null

到這兒只是部分登錄的流程,還有幾個重點現在開始講完整的請求程序
先看一下shiro的配置
在這里插入圖片描述
加入一個查詢的請求過來
首先被我們MyPermissionFilter攔截器攔截
在這里插入圖片描述
subject.getPrincipal() 就是我們剛剛說的SimpleAuthenticationInfo 里的第一個引數
如果沒有值就是沒有登錄,如果登錄里就判斷 parms 是否被允許
subject.isPermitted(perms[0])
perms 這個值是哪里來的呢?和shiro框架里的比較,框架里是拿來的的?
第一個問題:
perms的值isAccessAllowed(ServletRequest request, ServletResponse response, Object o) 來之Object o 這個值就是來之組態檔的filterChainDefinitions
但是xmall專案把校驗的配置放到資料庫中了tb_shiro_filter
組態檔里可以看到專案自己實作了MyShiroFilterFactoryBean,這里面可以看到是讀取資料庫中的配置的,一個什么請求后面就帶了需要校驗的權限或者角色
在這里插入圖片描述
第二個問題
還是看回我們的MyRealm
doGetAuthorizationInfo方法獲取了當前賬號所有的角色和權限路徑
在這里插入圖片描述

三.改造專案

在controller 中

@ResponseBody
    @RequestMapping(value = "/login", method = RequestMethod.POST)
    public CommonResult login(String username, String password) {
        String token = userService.login(username, password);
        if (token != null) {
            return CommonResult.success(token);
        }
        return CommonResult.failed("傳入賬號或密碼錯誤", null);
    }

在userService中

/**
     * 用戶登錄
     *
     * @param username
     * @param password
     * @return
     */
    public String login(String username, String password) {
        User user = getUserByUsername(username);
        if (user != null && user.getPassword().equals(password)) {
            // redis存盤的時間戳
            String currentTimeMillis = String.valueOf(System.currentTimeMillis());
            // redis 設定
            redisUtil.set(username, currentTimeMillis);
            return jwtUtil.createToken(username, currentTimeMillis);
        } else {
            return null;
        }
    }

主要作業:1、把username 和password 和資料里比較如果存在
2、存到redis中設定過期時間
3、使用JWT 生成token
然后新建一個MyShiroRealm

public class MyShiroRealm extends AuthorizingRealm {
    private static final Logger log= LoggerFactory.getLogger(MyRealm.class);

    @Autowired
    private UserService userService;

    @Autowired
    JwtUtil jwtUtil;

    @Autowired
    JedisClient redisUtil;

    /**
     * 回傳權限資訊
     * @param principal
     * @return
     */
    @Override
    protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principal) {
        // 從token中獲取username
        String username = jwtUtil.getUsernameFromToken(principal.toString());
        TbUser tbUser = userService.getUserByUsername(username);
        SimpleAuthorizationInfo authorizationInfo=new SimpleAuthorizationInfo();
        //獲得授權角色
        authorizationInfo.setRoles(userService.getRoles(username));
        //獲得授權權限
        authorizationInfo.setStringPermissions(userService.getPermissions(username));
        return authorizationInfo;
    }

    /**
     * 先執行登錄驗證
     * @param auth
     * @return
     * @throws AuthenticationException
     */
    @Override
    protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken auth) throws AuthenticationException {
        // 在shiro中獲得用戶(token)
        String token = (String) auth.getCredentials();
        // 驗證token 首先查看token是否包含username,其次查看其中的username是否在資料庫里,最后,校驗token的正確性
        String username = jwtUtil.getUsernameFromToken(token);
        if (username == null) {
            throw new AuthenticationException("無效token");
        }
        // 驗證用戶是否存在
        TbUser tbUser = userService.getUserByUsername(username);
        if(tbUser == null){
            throw new AuthenticationException("無效token");
        }

        String redisUsername = String.format("%s%s", RedisConstant.REDIS_USERNAME_PREFIX, username);
        //資料庫里取的username 和token和redis里的比較是否一致
        if(jwtUtil.verifyToken(username,token) && redisUtil.exists(redisUsername)){
            // redis中存盤的token
            String currentTimeMillisRedis = redisUtil.get(redisUsername); //根據key可以獲取存盤的時間戳
            //從引數token中獲取時間戳 和redis里存的比較是否一致
            if(jwtUtil.getCurrentTmieMillisFromToken(token).equals(currentTimeMillisRedis)){
                //得到用戶賬號(token)和密碼(token)存放到authenticationInfo中用于Controller層的權限判斷 第三個引數隨意不能為null
                return new SimpleAuthenticationInfo(token,token,"MyShiroRealm");
            }
        }
        throw new AuthenticationException("無效token");
    }
}

這里主要變化就是doGetAuthenticationInfo登錄的方法
主要是JWT 解碼token 獲得引數 去資料庫查找比較,在和redis 里比較是否一致
一致就把subject.login(token) 傳過來的JWT加密過的token 放到
SimpleAuthenticationInfo(token,token,“MyShiroRealm”) 實體化物件里回傳

我們接著看自定義的MyLoginFilter

public class MyLoginFilter extends BasicHttpAuthenticationFilter {
    private static final Logger log= LoggerFactory.getLogger(MyPermissionFilter.class);

    @Value(value="60000")
    private String tokenValidTime;

    @Value(value="80000")
    private String inValidTokenLiveSaveTime;

    @Autowired
    JwtUtil jwtUtil;

    @Autowired
    JedisClient redisUtil;

    /**
     * 判斷請求頭中是否含有token
     *
     * @param request
     * @param response
     * @return
     */
    @Override
    protected boolean isLoginAttempt(ServletRequest request, ServletResponse response) {
        return !StringUtils.isEmpty(this.getAuthzHeader(request));
    }


    /**
     * 正常情況下回傳true,如果遇到Token過期的話,這里呼叫重繪token,遇到其他的例外,這里回傳401,
     *
     * @param request
     * @param response
     * @param mappedValue
     * @return
     */
    @Override
    protected boolean isAccessAllowed(ServletRequest request, ServletResponse response, Object mappedValue) {
        String token = this.getAuthzHeader(request);
        if (isLoginAttempt(request, response) == true) {
            try {
                this.executeLogin(request, response);
            } catch (Exception e) {
                Throwable throwable = e.getCause();
                if (throwable instanceof TokenExpiredException) {
                    // 執行重繪token
                    String newToken = this.refreshToken(token);
                    if (!StringUtils.isEmpty(newToken)) {
                        // 將重繪之后的token放在回應的頭上 前端下次取出很本地的比較,如果不一樣的話做token的替換,
                        ((HttpServletResponse) response).setHeader(AUTHORIZATION_HEADER, newToken);
                        ((HttpServletResponse) response).setHeader("Access-Control-Expose-Headers", AUTHORIZATION_HEADER);
                        return true;
                    }
                }
            }
            this.response401(response);
            return false;
        }
        return true;

    }


    @Override
    protected boolean executeLogin(ServletRequest request, ServletResponse response) throws Exception {
        String token = this.getAuthzHeader(request);
        JwtToken jwtToken = new JwtToken(token);
        Subject subject = getSubject(request, response);
        subject.login(jwtToken);
        return true;
    }


    /**
     * 重繪過期的token
     *
     * @param needRefreshToken
     * @return
     */
    private String refreshToken(String needRefreshToken) {
        // 過期token的username
        String needRefreshTokenUsername = jwtUtil.getUsernameFromToken(needRefreshToken);

        if (redisUtil.exists(needRefreshTokenUsername)) {
            // 如果redis中存在過期token的key 則獲取存盤的時間戳
            String redisTokenTimeMillis = redisUtil.get(needRefreshTokenUsername);
            // 需要被重繪的token中獲取時間戳
            String needRefreshTokenTimeMillis = jwtUtil.getCurrentTmieMillisFromToken(needRefreshToken);

            // 相等執行重繪token的步驟
            if (redisTokenTimeMillis.equals(needRefreshTokenTimeMillis)) {
                String currentTimeMillis = String.valueOf(System.currentTimeMillis());
                redisUtil.set(RedisConstant.REDIS_USERNAME_PREFIX + needRefreshTokenUsername, currentTimeMillis);

                String newToken = jwtUtil.createToken(needRefreshTokenUsername, currentTimeMillis);

                // 這里的目的是為了防止 前端同時多請求 所帶來重繪token多次的問題(當第二個請求帶著老得token來的時候,在myRealm中增加此判斷 這樣的請求不會認為其過期)
                // 而這里的過期時間是按照前端設定了請求8秒沒有回傳則默認為請求超時, 這里給老得token16秒的存在時間,
                redisUtil.set(RedisConstant.REDIS_EXPIRE_TOKEN_PREFIX + needRefreshTokenUsername, needRefreshToken, Integer.valueOf(inValidTokenLiveSaveTime));
                return newToken;
            }
        }
        return "";
    }


    /**
     * 將非法請求跳轉到 /401
     */
    private void response401(ServletResponse resp) {
        try {
            HttpServletResponse httpServletResponse = (HttpServletResponse) resp;
            httpServletResponse.sendRedirect("/401");
        } catch (IOException e) {
            log.error(e.getMessage());
        }
    }
}

這邊我們看到了subject.login(),這里就是請求中是不是帶token,如果有就是登錄
還有一個是重繪redis里過期時間,
我就說一些重繪的思路
首先如果MyShiroRealm 中登錄失敗
我們拿著這個token 去redis中找是否存在,再看它的時間戳是否和redis中的一致
生成新的token設定到redis中并設定過期時間
這邊說一下redis中存的資料
redis里存兩種資料
一個是 “XXX”+username,時間戳
一個是 “XXX”+username,token,并設定過期時間

總結

由于篇幅的問題我就不在說了,基本上到這邊就介紹了,
思考一下使用JWT 登錄的時候真的登錄了么?
其實沒有,shiro沒有登錄,因為login 請求過來的時候url里沒有token,只是生成了token回傳,下次發送請求的時候shiro才會登錄,
還有一個shiro組態檔沒貼出來,應該不難把,自己配一下檢驗一下自己,如果真有需要,就在下方留言,

轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/87101.html

標籤:其他

上一篇:求解:Django3版本下ajax登錄視圖,模塊都沒錯,但是啟動之后密碼輸入正確也不跳轉,還顯示都是密碼錯誤

下一篇:Java 面試筆記之常考知識點 ThreadLocal 剖析

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • vue移動端上拉加載

    可能做得過于簡單或者比較low,請各位大佬留情,一起探討技術 ......

    uj5u.com 2020-09-10 04:38:07 more
  • 優美網站首頁,頂部多層導航

    一個個人用的瀏覽器首頁,可以把一下常用的網站放在這里,平常打開會比較方便。 第一步,HTML代碼 <script src=https://www.cnblogs.com/szharf/p/"js/jquery-3.4.1.min.js"></script> <div id="navigate"> <ul> <li class="labels labels_1"> ......

    uj5u.com 2020-09-10 04:38:47 more
  • 頁面為要加<!DOCTYPE html>

    最近因為寫一個js函式,需要用到$(window).height(); 由于手寫demo的時候,過于自信,其實對前端方面的認識也不夠體系,用文本檔案直接敲出來的html代碼,第一行沒有加上<!DOCTYPE html> 導致了$(window).height();的結果直接是整個document的高 ......

    uj5u.com 2020-09-10 04:38:52 more
  • WordPress網站程式手動升級要做好資料備份

    WordPress博客網站程式在進行升級前,必須要做好網站資料的備份,這個問題良家佐言是遇見過的;在剛開始接觸WordPress博客程式的時候,因為升級問題和博客網站的修改的一些嘗試,良家佐言是吃盡了苦頭。因為購買的是西部數碼的空間和域名,每當佐言把自己的WordPress博客網站搞到一塌糊涂的時候 ......

    uj5u.com 2020-09-10 04:39:30 more
  • WordPress程式不能升級為5.4.2版本的原因

    WordPress是一款個人博客系統,受到英文博客愛好者和中文博客愛好者的追捧,并逐步演化成一款內容管理系統軟體;它是使用PHP語言和MySQL資料庫開發的,用戶可以在支持PHP和MySQL資料庫的服務器上使用自己的博客。每一次WordPress程式的更新,就會牽動無數WordPress愛好者的心, ......

    uj5u.com 2020-09-10 04:39:49 more
  • 使用CSS3的偽元素進行首字母下沉和首行改變樣式

    網頁中常見的一種效果,首字改變樣式或者首行改變樣式,效果如下圖。 代碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ......

    uj5u.com 2020-09-10 04:40:09 more
  • 關于a標簽的講解

    什么是a標簽? <a> 標簽定義超鏈接,用于從一個頁面鏈接到另一個頁面。 <a> 元素最重要的屬性是 href 屬性,它指定鏈接的目標。 a標簽的語法格式:<a href=https://www.cnblogs.com/summerxbc/p/"指定要跳轉的目標界面的鏈接">需要展示給用戶看見的內容</a> a標簽 在所有瀏覽器中,鏈接的默認外觀如下: 未被訪問的鏈接帶 ......

    uj5u.com 2020-09-10 04:40:11 more
  • 前端輪播圖

    在需要輪播的頁面是引入swiper.min.js和swiper.min.css swiper.min.js地址: 鏈接:https://pan.baidu.com/s/15Uh516YHa4CV3X-RyjEIWw 提取碼:4aks swiper.min.css地址 鏈接:https://pan.b ......

    uj5u.com 2020-09-10 04:40:13 more
  • 如何設定html中的背景圖片(全屏顯示,且不拉伸)

    1 <style>2 body{background-image:url(https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture); 3 background-size:cover;background ......

    uj5u.com 2020-09-10 04:40:16 more
  • Java學習——HTML詳解(上)

    HTML詳解 初識HTML Hyper Text Markup Language(超文本標記語言) 1 <!--DOCTYPE:告訴瀏覽器我們要使用什么規范--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <!--meta 描述性的標簽,描述一些 ......

    uj5u.com 2020-09-10 04:40:33 more
最新发布
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 07:59:23 more
  • 生產事故-走近科學之消失的JWT

    入職多年,面對生產環境,盡管都是小心翼翼,慎之又慎,還是難免捅出簍子。輕則滿頭大汗,面紅耳赤。重則系統停擺,損失資金。每一個生產事故的背后,都是寶貴的經驗和教訓,都是專案成員的血淚史。為了更好地防范和遏制今后的各類事故,特開此專題,長期更新和記錄大大小小的各類事故。有些是親身經歷,有些是經人耳傳口授 ......

    uj5u.com 2023-04-18 07:55:04 more
  • 記錄--Canvas實作打飛字游戲

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 打開游戲界面,看到一個畫面簡潔、卻又富有挑戰性的游戲。螢屏上,有一個白色的矩形框,里面不斷下落著各種單詞,而我需要迅速地輸入這些單詞。如果我輸入的單詞與螢屏上的單詞匹配,那么我就可以獲得得分;如果我輸入的單詞錯誤或者時間過長,那么我就會輸 ......

    uj5u.com 2023-04-04 08:35:30 more
  • 了解 HTTP 看這一篇就夠

    在學習網路之前,了解它的歷史能夠幫助我們明白為何它會發展為如今這個樣子,引發探究網路的興趣。下面的這張圖片就展示了“互聯網”誕生至今的發展歷程。 ......

    uj5u.com 2023-03-16 11:00:15 more
  • 藍牙-低功耗中心設備

    //11.開啟藍牙配接器 openBluetoothAdapter //21.開始搜索藍牙設備 startBluetoothDevicesDiscovery //31.開啟監聽搜索藍牙設備 onBluetoothDeviceFound //30.停止監聽搜索藍牙設備 offBluetoothDevi ......

    uj5u.com 2023-03-15 09:06:45 more
  • canvas畫板(滑鼠和觸摸)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canves</title> <style> #canvas { cursor:url(../images/pen.png),crosshair; } #canvasdiv{ bo ......

    uj5u.com 2023-02-15 08:56:31 more
  • 手機端H5 實作自定義拍照界面

    手機端 H5 實作自定義拍照界面也可以使用 MediaDevices API 和 <video> 標簽來實作,和在桌面端做法基本一致。 首先,使用 MediaDevices.getUserMedia() 方法獲取攝像頭媒體流,并將其傳遞給 <video> 標簽進行渲染。 接著,使用 HTML 的 < ......

    uj5u.com 2023-01-12 07:58:22 more
  • 記錄--短視頻滑動播放在 H5 下的實作

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 短視頻已經無數不在了,但是主體還是使用 app 來承載的。本文講述 H5 如何實作 app 的視頻滑動體驗。 無聲勝有聲,一圖頂百辯,且看下圖: 網址鏈接(需在微信或者手Q中瀏覽) 從上圖可以看到,我們主要實作的功能也是本文要講解的有: ......

    uj5u.com 2023-01-04 07:29:05 more
  • 一文讀懂 HTTP/1 HTTP/2 HTTP/3

    從 1989 年萬維網(www)誕生,HTTP(HyperText Transfer Protocol)經歷了眾多版本迭代,WebSocket 也在期間萌芽。1991 年 HTTP0.9 被發明。1996 年出現了 HTTP1.0。2015 年 HTTP2 正式發布。2020 年 HTTP3 或能正... ......

    uj5u.com 2022-12-24 06:56:02 more
  • 【HTML基礎篇002】HTML之form表單超詳解

    ??一、form表單是什么

    ??二、form表單的屬性

    ??三、input中的各種Type屬性值

    ??四、標簽 ......

    uj5u.com 2022-12-18 07:17:06 more