主頁 > 前端設計 > cgb2007-京淘day13

cgb2007-京淘day13

2020-11-13 12:55:41 前端設計

1.Redis命令

1.1 入門案例操作

 @Test
    public void testHash() throws InterruptedException {
        Jedis jedis = new Jedis("192.168.126.129",6379);
        jedis.hset("person", "id", "18");
        jedis.hset("person", "name", "hash測驗");
        jedis.hset("person", "age", "2");
        Map<String,String> map = jedis.hgetAll("person");
        Set<String> set = jedis.hkeys("person");    //獲取所有的key
        List<String> list = jedis.hvals("person");
    }

    @Test
    public void testList() throws InterruptedException {
        Jedis jedis = new Jedis("192.168.126.129",6379);
        jedis.lpush("list", "1","2","3","4");
        System.out.println(jedis.rpop("list"));
    }

    @Test
    public void testTx(){
        Jedis jedis = new Jedis("192.168.126.129",6379);
        //1.開啟事務
       Transaction transaction =  jedis.multi();
       try {
           transaction.set("a", "a");
           transaction.set("b", "b");
           transaction.set("c", "c");
           transaction.exec();  //提交事務
       }catch (Exception e){
           transaction.discard();
       }
    }

2 SpringBoot整合Redis

2.1 編輯pro組態檔

由于redis的IP地址和埠都是動態變化的,所以通過組態檔標識資料. 由于redis是公共部分,所以寫到common中.
在這里插入圖片描述

2.2 編輯配置類

package com.jt.config;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;
import redis.clients.jedis.Jedis;

@Configuration  //標識我是配置類
@PropertySource("classpath:/properties/redis.properties")
public class RedisConfig {

    @Value("${redis.host}")
    private String  host;
    @Value("${redis.port}")
    private Integer port;

    @Bean
    public Jedis jedis(){

        return new Jedis(host, port);
    }
}

3 物件與JSON串轉化

3.1 物件轉化JSON入門案例

package com.jt;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.jt.pojo.ItemDesc;
import org.junit.jupiter.api.Test;

import java.util.Date;

public class TestObjectMapper {

    private static final ObjectMapper MAPPER = new ObjectMapper();

    /**
     * 1.物件如何轉化為JSON串的???
     *  步驟:
     *      1.獲取物件的所有的getXXXX()方法.
     *      2.將獲取的getXXX方法的前綴get去掉 形成了json的key=xxx
     *      3.通過getXXX方法的呼叫獲取屬性的值,形成了json的value的值.
     *      4.將獲取到的資料 利用json格式進行拼接 {key : value,key2:value2....}
     * 2.JSON如何轉化為物件???
     *      {lyj:xxx}
     *  步驟:
     *      1. 根據class引數型別,利用java的反射機制,實體化物件.
     *      2. 決議json格式,區分 key:value
     *      3. 進行方法的拼接 setLyj()名稱.
     *      4.呼叫物件的setXXX(value) 將資料進行傳遞,
     *      5.最終將所有的json串中的key轉化為物件的屬性.
     *
     *
     * @throws JsonProcessingException
     */

    @Test
    public void testTOJSON() throws JsonProcessingException {
        ItemDesc itemDesc = new ItemDesc();
        itemDesc.setItemId(100L).setItemDesc("測驗資料轉化")
                .setCreated(new Date()).setUpdated(new Date());
        //1.將物件轉化為JSON

        String json = MAPPER.writeValueAsString(itemDesc);
        System.out.println(json);
        //2.將json轉化為物件 src:需要轉化的JSON串, valueType:需要轉化為什么物件
        ItemDesc itemDesc2 = MAPPER.readValue(json, ItemDesc.class);
        /**
         * 字串轉化物件的原理:
         */
        System.out.println(itemDesc2.toString());
    }
}

3.2 編輯ObjectMapper工具API

package com.jt.util;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

public class ObjectMapperUtil {

    private static final ObjectMapper MAPPER = new ObjectMapper();

    //將物件轉化為JSON
    public static String toJSON(Object target){
        try {
           return MAPPER.writeValueAsString(target);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
            throw new RuntimeException(e);
        }
    }

    //將JSON轉化為物件
    //需求: 如果用戶傳遞什么型別,則回傳什么物件
    public static <T> T toObject(String json,Class<T> targetClass){
        try {
            return MAPPER.readValue(json, targetClass);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
            throw new RuntimeException(e);
        }
    }
}

4 實作商品分類快取實作

4.1 編輯ItemCatController

說明: 切換業務呼叫方法,執行快取呼叫

/**
     * 業務: 實作商品分類的查詢
     * url地址: /item/cat/list
     * 引數:   id: 默認應該0 否則就是用戶的ID
     * 回傳值結果: List<EasyUITree>
     */
    @RequestMapping("/list")
    public List<EasyUITree> findItemCatList(Long id){
        Long parentId = (id==null)?0:id;
        //return itemCatService.findItemCatList(parentId);
        return itemCatService.findItemCatCache(parentId);
    }

4.2 編輯ItemCatService

package com.jt.service;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.jt.mapper.ItemCatMapper;
import com.jt.pojo.ItemCat;
import com.jt.util.ObjectMapperUtil;
import com.jt.vo.EasyUITree;
import org.omg.PortableInterceptor.SYSTEM_EXCEPTION;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import redis.clients.jedis.Jedis;

import java.util.ArrayList;
import java.util.List;

@Service
public class ItemCatServiceImpl implements ItemCatService{

    @Autowired
    private ItemCatMapper itemCatMapper;
    @Autowired(required = false)    //程式啟動是,如果沒有改物件 暫時不加載
    private Jedis jedis;


    @Override
    public String findItemCatName(Long itemCatId) {

        return itemCatMapper.selectById(itemCatId).getName();
    }


    @Override
    public List<EasyUITree> findItemCatList(Long parentId) {
        //1.準備回傳值資料
        List<EasyUITree> treeList = new ArrayList<>();
        //思路.回傳值的資料從哪來? VO  轉化 POJO資料

        //2.實作資料庫查詢
        QueryWrapper queryWrapper = new QueryWrapper();
        queryWrapper.eq("parent_id",parentId);
        List<ItemCat> catList = itemCatMapper.selectList(queryWrapper);

        //3.實作資料的轉化  catList轉化為 treeList
        for (ItemCat itemCat : catList){
            long id = itemCat.getId();  //獲取ID值
            String text = itemCat.getName();    //獲取商品分類名稱
            //判斷:如果是父級 應該closed  如果不是父級 則open
            String state = itemCat.getIsParent()?"closed":"open";
            EasyUITree easyUITree = new EasyUITree(id,text,state);
            treeList.add(easyUITree);
        }

        return treeList;
    }


    /**
     * Redis:
     *      2大要素:    key: 業務標識+::+變化的引數  ITEMCAT::0
     *                  value: String  資料的JSON串
     * 實作步驟:
     *      1.應該查詢Redis快取
     *          有:  獲取快取資料之后轉化為物件回傳
     *          沒有: 應該查詢資料庫,并且將查詢的結果轉化為JSON之后保存到redis 方便下次使用
     * @param parentId
     * @return
     */
    @Override
    public List<EasyUITree> findItemCatCache(Long parentId) {
        Long startTime = System.currentTimeMillis();
        List<EasyUITree> treeList = new ArrayList<>();
        String key = "ITEMCAT_PARENT::"+parentId;
        if(jedis.exists(key)){
            //redis中有資料
            String json = jedis.get(key);
            treeList = ObjectMapperUtil.toObject(json,treeList.getClass());
            Long endTime = System.currentTimeMillis();
            System.out.println("查詢redis快取的時間:"+(endTime-startTime)+"毫秒");
        }else{
            //redis中沒有資料.應該查詢資料庫.
            treeList = findItemCatList(parentId);
            //需要把資料,轉化為JSON
            String json = ObjectMapperUtil.toJSON(treeList);
            jedis.set(key, json);
            Long endTime = System.currentTimeMillis();
            System.out.println("查詢資料庫的時間:"+(endTime-startTime)+"毫秒");
        }
        return treeList;
    }
}

5. AOP實作Redis快取

5.1 現有代碼存在的問題

1.如果直接將快取業務,寫到業務層中,如果將來的快取代碼發生變化,則代碼耦合高,必然重寫編輯代碼.
2.如果其他的業務也需要快取,則代碼的重復率高,開發效率低.
解決方案: 采用AOP方式實作快取.

5.2 AOP

在軟體業,AOP為Aspect Oriented Programming的縮寫,意為:面向切面編程,通過預編譯方式和運行期間動態代理實作程式功能的統一維護的一種技術,AOP是OOP的延續,是軟體開發中的一個熱點,也是Spring框架中的一個重要內容,是函式式編程的一種衍生范型,利用AOP可以對業務邏輯的各個部分進行隔離,從而使得業務邏輯各部分之間的耦合度降低,提高程式的可重用性,同時提高了開發的效率,

5.3 AOP實作步驟

公式: AOP(切面) = 通知方法(5種) + 切入點運算式(4種)

5.3.1 通知復習

1.before通知 在執行目標方法之前執行
2.afterReturning通知 在目標方法執行之后執行
3.afterThrowing通知 在目標方法執行之后報錯時執行
4.after通知 無論什么時候程式執行完成都要執行的通知

上述的4大通知型別,不能控制目標方法是否執行.一般用來記錄程式的執行的狀態.
一般應用與監控的操作.

5.around通知(功能最為強大的) 在目標方法執行前后執行.
因為環繞通知可以控制目標方法是否執行.控制程式的執行的軌跡.

5.3.2 切入點運算式

1.bean(“bean的ID”) 粒度: 粗粒度 按bean匹配 當前bean中的方法都會執行通知.
2.within(“包名.類名”) 粒度: 粗粒度 可以匹配多個類
3.execution(“回傳值型別 包名.類名.方法名(引數串列)”) 粒度: 細粒度 方法引數級別
4.@annotation(“包名.類名”) 粒度:細粒度 按照注解匹配

5.3.3 AOP入門案例

package com.jt.aop;

import lombok.extern.apachecommons.CommonsLog;
import org.aspectj.lang.JoinPoint;
import org.aspectj.lang.ProceedingJoinPoint;
import org.aspectj.lang.annotation.Around;
import org.aspectj.lang.annotation.Aspect;
import org.aspectj.lang.annotation.Before;
import org.aspectj.lang.annotation.Pointcut;
import org.springframework.stereotype.Component;
import org.springframework.stereotype.Controller;
import org.springframework.stereotype.Service;

import java.util.Arrays;

@Aspect //標識我是一個切面
@Component  //交給Spring容器管理
public class CacheAOP {

    //切面 = 切入點運算式 + 通知方法
    //@Pointcut("bean(itemCatServiceImpl)")
    //@Pointcut("within(com.jt.service.ItemCatServiceImpl)")
    //@Pointcut("within(com.jt.service.*)")   // .* 一級包路徑   ..* 所有子孫后代包
    //@Pointcut("execution(回傳值型別 包名.類名.方法名(引數串列))")
    @Pointcut("execution(* com.jt.service..*.*(..))")
    //注釋: 回傳值型別任意型別   在com.jt.service下的所有子孫類   以add開頭的方法,任意引數型別
    public void pointCut(){

    }

    /**
     * 需求:
     *      1.獲取目標方法的路徑
     *      2.獲取目標方法的引數.
     *      3.獲取目標方法的名稱
     */
    @Before("pointCut()")
    public void before(JoinPoint joinPoint){
        String classNamePath = joinPoint.getSignature().getDeclaringTypeName();
        String methodName = joinPoint.getSignature().getName();
        Object[] args = joinPoint.getArgs();
        System.out.println("方法路徑:"+classNamePath);
        System.out.println("方法引數:"+ Arrays.toString(args));
        System.out.println("方法名稱:"+methodName);
    }

    @Around("pointCut()")
    public Object around(ProceedingJoinPoint joinPoint){
        try {
            System.out.println("環繞通知開始");
            Object obj = joinPoint.proceed();
            //如果有下一個通知,就執行下一個通知,如果沒有就執行目標方法(業務方法)
            System.out.println("環繞通知結束");
            return null;
        } catch (Throwable throwable) {
            throwable.printStackTrace();
            throw new RuntimeException(throwable);
        }

    }
}



5.4 AOP實作Redis快取

5.4.1 業務實作策略

1).需要自定義注解CacheFind
2).設定注解的引數 key的前綴,資料的超時時間.
3).在方法中標識注解.
4).利用AOP 攔截指定的注解.
5).應該使用Around通知實作快取業務.

5.4.2 編輯自定義注解

@Target(ElementType.METHOD)         //注解對方法有效
@Retention(RetentionPolicy.RUNTIME) //運行期有效
public @interface CacheFind {

    public String preKey(); //定義key的前綴
    public int seconds() default 0;   //定義資料的超時時間.

}

5.4.3 方法中標識注解

在這里插入圖片描述

5.4.4 編輯CacheAOP

package com.jt.aop;

import com.jt.anno.CacheFind;
import com.jt.util.ObjectMapperUtil;
import lombok.extern.apachecommons.CommonsLog;
import org.aspectj.lang.JoinPoint;
import org.aspectj.lang.ProceedingJoinPoint;
import org.aspectj.lang.annotation.Around;
import org.aspectj.lang.annotation.Aspect;
import org.aspectj.lang.annotation.Before;
import org.aspectj.lang.annotation.Pointcut;
import org.aspectj.lang.reflect.MethodSignature;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.stereotype.Controller;
import org.springframework.stereotype.Service;
import redis.clients.jedis.Jedis;

import java.lang.reflect.Method;
import java.util.Arrays;

@Aspect //標識我是一個切面
@Component  //交給Spring容器管理
public class CacheAOP {


    @Autowired
    private Jedis jedis;

    /**
     * 注意事項:  當有多個引數時,joinPoint必須位于第一位.
     * 需求:
     *      1.準備key= 注解的前綴 + 用戶的引數
     *      2.從redis中獲取資料
     *         有: 從快取中獲取資料之后,直接回傳值
     *         沒有: 查詢資料庫之后再次保存到快取中即可.
     *
     * 方法:
     *      動態獲取注解的型別,看上去是注解的名稱,但是實質是注解的型別. 只要切入點運算式滿足條件
     *      則會傳遞注解物件型別.
     * @param joinPoint
     * @return
     * @throws Throwable
     */
    @Around("@annotation(cacheFind)")
    public Object around(ProceedingJoinPoint joinPoint,CacheFind cacheFind) throws Throwable {
        Object result = null;   //定義回傳值物件
        String preKey = cacheFind.preKey();
        String key = preKey + "::" + Arrays.toString(joinPoint.getArgs());

        //1.校驗redis中是否有資料
        if(jedis.exists(key)){
            //如果資料存在,需要從redis中獲取json資料,之后直接回傳
            String json = jedis.get(key);
            //1.獲取方法物件,   2.獲取方法的回傳值型別
            MethodSignature methodSignature = (MethodSignature) joinPoint.getSignature();
            //2.獲取回傳值型別
            Class returnType = methodSignature.getReturnType();
            result = ObjectMapperUtil.toObject(json,returnType);
            System.out.println("AOP查詢redis快取!!!");
        }else{
            //代表沒有資料,需要查詢資料庫
            result = joinPoint.proceed();
            //將資料轉化為JSON
            String json = ObjectMapperUtil.toJSON(result);
            if(cacheFind.seconds() > 0){
                jedis.setex(key, cacheFind.seconds(), json);
            }else{
                jedis.set(key,json);
            }
            System.out.println("AOP查詢資料庫!!!");
        }
        return result;
    }






   /* @Around("@annotation(com.jt.anno.CacheFind)")
    public Object around(ProceedingJoinPoint joinPoint) throws Throwable {
        //1.獲取目標物件的Class型別
        Class targetClass = joinPoint.getTarget().getClass();
        //2.獲取目標方法名稱
        String methodName = joinPoint.getSignature().getName();
        //3.獲取引數型別
        Object[] argsObj = joinPoint.getArgs();
        Class[]  argsClass = null;
        //4.物件轉化為class型別
        if(argsObj.length>0){
           argsClass = new Class[argsObj.length];
            for(int i=0;i<argsObj.length;i++){
                argsClass[i] = argsObj[i].getClass();
            }
        }
        //3.獲取方法物件
        Method targetMethod = targetClass.getMethod(methodName,argsClass);

        //4.獲取方法上的注解
        if(targetMethod.isAnnotationPresent(CacheFind.class)){
            CacheFind cacheFind = targetMethod.getAnnotation(CacheFind.class);
            String key = cacheFind.preKey() + "::"
                         +Arrays.toString(joinPoint.getArgs());
            System.out.println(key);
        }

        Object object = joinPoint.proceed();
        System.out.println("環繞開始后");
        return object;
    }
*/









   /* //切面 = 切入點運算式 + 通知方法
    //@Pointcut("bean(itemCatServiceImpl)")
    //@Pointcut("within(com.jt.service.ItemCatServiceImpl)")
    //@Pointcut("within(com.jt.service.*)")   // .* 一級包路徑   ..* 所有子孫后代包
    //@Pointcut("execution(回傳值型別 包名.類名.方法名(引數串列))")
    @Pointcut("execution(* com.jt.service..*.*(..))")
    //注釋: 回傳值型別任意型別   在com.jt.service下的所有子孫類   以add開頭的方法,任意引數型別
    public void pointCut(){

    }*/

    /**
     * 需求:
     *      1.獲取目標方法的路徑
     *      2.獲取目標方法的引數.
     *      3.獲取目標方法的名稱
     */
   /* @Before("pointCut()")
    public void before(JoinPoint joinPoint){
        String classNamePath = joinPoint.getSignature().getDeclaringTypeName();
        String methodName = joinPoint.getSignature().getName();
        Object[] args = joinPoint.getArgs();
        System.out.println("方法路徑:"+classNamePath);
        System.out.println("方法引數:"+ Arrays.toString(args));
        System.out.println("方法名稱:"+methodName);
    }

    @Around("pointCut()")
    public Object around(ProceedingJoinPoint joinPoint){
        try {
            System.out.println("環繞通知開始");
            Object obj = joinPoint.proceed();
            //如果有下一個通知,就執行下一個通知,如果沒有就執行目標方法(業務方法)
            System.out.println("環繞通知結束");
            return null;
        } catch (Throwable throwable) {
            throwable.printStackTrace();
            throw new RuntimeException(throwable);
        }
    }*/
}



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

標籤:其他

上一篇:JAVA基于Swing和netty仿QQ界面聊天小專案

下一篇:震驚!超詳細的process.env前端環境變數配置教程

標籤雲
其他(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