37.SpringBoot实用篇—开发（上册）

news2024/11/20 12:36:01

目录

一、SpringBoot实用篇—开发。

（1）热部署（开发阶段使用）。

（1.1）手动启动热部署。

（1.2）自动启动热部署。

（1.3）热部署范围配置。

（1.4）关闭热部署。

（2）高级配置。

（2.1）@ConfigurationProperties注解。

（2.2）宽松绑定/松散绑定。

（2.3）常用计量单位绑定。

（2.4）数据校验。

（2.5）进制数据转换规则问题。

（3）@Bean的使用方式。

（4）测试。

（4.1）加载测试专用属性。

（4.2）加载测试专用配置。

（4.3）Web环境模拟测试。

（4.3.1）设置测试端口。

（4.3.2）模拟测试请求。

（4.3.3）模拟测试匹配。

（4.3.3.1）虚拟请求状态匹配。

（4.3.3.2）虚拟请求响应体匹配。

（4.3.3.3）虚拟请求响应体（json）匹配。

（4.3.3.4）虚拟请求响应头匹配。

（4.3.3.5）实际情况。

（4.4）数据层测试回滚。

（4.5）测试用例数据设定（随机数据）。

（5）数据层解决方案（SQL数据库）。

（5.1）内置数据源。（数据源技术选型替换方案）

（5.2）内置持久层技术。（持久层技术选型替换方案）

（5.3）内嵌数据库，仅用于开发阶段。（数据库技术选型替换方案）

（5.4）数据层技术选型总结。

（6）数据层解决方案（NOSQL数据库）。

（6.1）Redis。 

（6.1.1）SpringBoot整合Redis。

（6.2）SpringBoot读写Redis的客户端。

（6.3）jedis的使用。

（6.2）MongoDB。

（6.2.1）MongoDB定义与安装启动。 

（6.2.2）MongoDB的基础CRUD。

（6.2.3）SpringBoot整合MongoDB。 

（6.3）ES（分布式全文搜索引擎）。

（6.3.1）ES的下载与启动、IK分词器下载与使用。 

（6.3.2）索引创建。 

（6.3.3）文档操作（增删改查）。

（6.3.4）SpringBoot整合ES。

（6.3.4.1） Template客户端（低级客户端）。

（6.3.4.2）高级客户端。

（6.3.5）创建索引、添加文档。

（6.3.6）查询文档操作。

一、SpringBoot实用篇—开发。

（1）热部署（开发阶段使用）。

注意：热部署只在开发环境下有效，线上是没有意义的（只是开发程序的辅助功能）。

（1.1）手动启动热部署。

IDEA中启动热部署： build（构建） —> build Object（构建项目）。

（1.2）自动启动热部署。

图1：setting -> Build、 Execution、Deployment -> Compiler -> 勾选 Build project automatically

图2：ctrl + alt + shift + / （同时按下这四个键会弹出注册表，为运行程序设置启动热部署）

（1.3）热部署范围配置。

spring:
  devtools:
    restart:
      exclude: static/**,public/**,config/application.yml

（1.4）关闭热部署。

第一种：优先级较低，要是在其他地方也设置了该属性，很可能不起作用。 

spring:
  devtools:
    restart:
      exclude: static/**,public/**,config/application.yml
      enabled: false # 关闭热部署

 第二种：java系统属性

@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        System.setProperty("spring.devtools.restart.enabled","false");
        SpringApplication.run(Application.class);
    }
}

（2）高级配置。

（2.1）@ConfigurationProperties注解。

@EnableConfigurationProperties({ServerConfig.class}) 注解的作用是启用对指定配置属性类的管理，使其成为 Spring 容器中的一个 Bean，并可以在其他组件中注入并使用该类的实例来访问配置属性的值。 

（2.2）宽松绑定/松散绑定。

适用范围：@ConfigurationProperties注解。 

（2.3）常用计量单位绑定。

第一种： 

servers:
  ip-address: 192.168.0.2   # 烤肉串模式
  port: 2345
  timeout: -1
  serverTimeOut: 3
  dataSize: 10MB

第二种：

@Component
@Data
@ConfigurationProperties(prefix = "servers")
public class ServerConfig {
    private String ipAddress;
    private int port;
    private Long timeout;
    @DurationUnit(ChronoUnit.HOURS)
    private Duration serverTimeOut;
    @DataSizeUnit(DataUnit.MEGABYTES)
    private DataSize dataSize;
}

（2.4）数据校验。

springboot 3.x版本之后（具体哪开始不支持不清楚），这种已经不起作用了：

 <!--导入JSR303规范，试过了springboot 2.5.0版本还是支持这种的-->
        <dependency>
            <groupId>javax.validation</groupId>
            <artifactId>validation-api</artifactId>
            <<!--version>2.0.1.Final</version>,这里不需要版本，因为已经定义版本了-->
        </dependency>

<!--使用hibernate框架提供的校验器做实现类-->
        <dependency>
            <groupId>org.hibernate.validator</groupId>
            <artifactId>hibernate-validator</artifactId>
        </dependency>

springboot 3.x版本使用这个（里面包含了实现类hibernate-validator依赖）：

        <!--导入JSR303规范，试过springboot 3.1.1 版本可以使用-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-validation</artifactId>
        </dependency>

（2.5）进制数据转换规则问题。

 如果使用数值，而且是以0开头的，它会默认是其他进制（下面最大是7，所以默认八进制）：

datasource:
  driverClassName: com.mysql.cj.jdbc.Driver456
# password: 0127
  password: "0127"

注意：写数值建议使用引号包裹。 

（3）@Bean的使用方式。

@Bean是一个方法级别上的注解，主要用在@Configuration和@Compoment注解的类里。

或者使用@Import(MsgConfig.class)注解指定有@Bean的类。 

@SpringBootTest
@Import(MsgConfig.class)
public class ConfigurationTest {
    @Autowired
    private String msg;
    @Test
    void testConfiguration(){
        System.out.println(msg);
    }
}

（4）测试。

（4.1）加载测试专用属性。

注意：springboot低版本是args优先级高，高版本是properties优先级高。 

args 是一个常见的变量名,它通常用于表示程序中的命令行参数（Command-line Arguments）。 

//properties属性可以为当前测试用例添加临时的属性配置
//@SpringBootTest(properties = {"test.prop=testValue1"})
//args属性可以为当前测试用例添加临时的命令行参数
//@SpringBootTest(args = {"--test.prop=testValue2"})
//是testValue1
//@SpringBootTest(properties = {"test.prop=testValue1"},args = {"--test.prop=testValue2"}) 
//是testValue1
@SpringBootTest(args = {"--test.prop=testValue2"},properties = {"test.prop=testValue1"})  
public class PropertiesAndArgsTest {
    @Value("${test.prop}")
    private String msg;
    @Test
    void testPropertes(){
        System.out.println(msg);
    }
}

（4.2）加载测试专用配置。

注意：不要添加@Configuration，否则将是全局的。在测试类中使用@Import(MsgConfig.class)来指定，则只是在该测试类环境下使用。（加载测试范围配置应用于小范围测试环境）

//@Configuration
public class MsgConfig {
    @Bean
    public String msg(){
        return "bean msg";
    }
}

（4.3）Web环境模拟测试。

（4.3.1）设置测试端口。

  • WebEnvironment.MOCK：在模拟的Servlet环境中启动应用程序（默认值）。
  • WebEnvironment.RANDOM_PORT：在随机可用的端口上启动内嵌的Servlet容器，用于进行集成测试。
  • WebEnvironment.DEFINED_PORT：在指定的端口上启动内嵌的Servlet容器，用于进行集成测试。
  • WebEnvironment.NONE：不启动Web服务器，用于非Web环境下的集成测试。（测试失败）

（4.3.2）模拟测试请求。

（4.3.3）模拟测试匹配。

（4.3.3.1）虚拟请求状态匹配。

（4.3.3.2）虚拟请求响应体匹配。

（4.3.3.3）虚拟请求响应体（json）匹配。

（4.3.3.4）虚拟请求响应头匹配。

（4.3.3.5）实际情况。

注意：要全部满足才通过。 

    @Test
    void testGetById(@Autowired MockMvc mvc) throws Exception {
        MockHttpServletRequestBuilder builder = MockMvcRequestBuilders.get("/books");
        ResultActions action = mvc.perform(builder);

        StatusResultMatchers status = MockMvcResultMatchers.status();
        ResultMatcher ok = status.isOk();

        HeaderResultMatchers header = MockMvcResultMatchers.header();
        ResultMatcher contentType = header.string("Content-Type", "application/json");

        ContentResultMatchers content = MockMvcResultMatchers.content();
        ResultMatcher result = content.json("{\"id\":1,\"name\":\"springboot\",\"type\":\"springboot\",\"description\":\"springboot\"}");
    }

（4.4）数据层测试回滚。

注意：springboot中Junit单元测试（测试类）@Transactional注解默认事务不提交。

1、 @Rollback(true)：要回滚，不要添加数据，但是id还是被占用的，默认就有（即不需要加）。

2、@Rollback(false)：不要回滚，就是要添加数据。

上面的两点都是有@Transactional注解的前提下。

（4.5）测试用例数据设定（随机数据）。

作用：使用随机数据替换测试用例中书写固定的数据。

（5）数据层解决方案（SQL数据库）。

实质：就是代替这些技术的技术。 

（5.1）内置数据源。（数据源技术选型替换方案）

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/test?serverTimezone=UTC
    hikari:
      driver-class-name: com.mysql.cj.jdbc.Driver
      username: root
      password: tan
      maximum-pool-size: 50
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/test?serverTimezone=UTC
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: tan
    hikari:
      maximum-pool-size: 50

（5.2）内置持久层技术。（持久层技术选型替换方案）

 JdbcTemplate之前经常用，这里就不详细介绍用法了。

    @Test
    void testJdbcTemplate(@Autowired JdbcTemplate jdbcTemplate) {
        String sql = "select * from mytable";
        RowMapper<Book> rm = new RowMapper<Book>() {
            @Override
            public Book mapRow(ResultSet rs, int rowNum) throws SQLException {
                Book book = new Book();
                book.setId(rs.getInt("id"));
                book.setName(rs.getString("name"));
                book.setType(rs.getString("type"));
                book.setDescription(rs.getString("description"));
                return book;
            }
        };
        List<Book> list = jdbcTemplate.query(sql, rm);
        System.out.println(list);
    }

（5.3）内嵌数据库，仅用于开发阶段。（数据库技术选型替换方案）

# h2数据库
server:
  port: 8080 # 程序的端口
spring:
  h2:
    console:
      path: /h2
      enabled: true
# 第一次使用的时候需要配置这些，因为需要初始化（以后在浏览器连接数据库就不用了，如果要用程序连接数据库就需要配置连接数据库的这些信息，估计初始化的时候把信息都存到硬盘了）
  datasource:
    url: jdbc:h2:~/test
    driver-class-name: org.h2.Driver
    username: sa
    password: 123456
    hikari:
      maximum-pool-size: 50

注意：h2数据库的测试类时,不能运行启动类(@SpringBootApplication标注的类),不然会报错。

    @Test
    void testJdbcTemplateSave(@Autowired JdbcTemplate jdbcTemplate) {
        String sql = "insert into tbl_book values(4,'springboot','springboot','pringboot')";
        jdbcTemplate.update(sql);
    }

注意：使用h2数据库时，不能使用双引号“”（会报错），只能使用单引号‘’ 。

（5.4）数据层技术选型总结。

（6）数据层解决方案（NOSQL数据库）。

（6.1）Redis。 

（6.1.1）SpringBoot整合Redis。

@SpringBootTest
class Springboot16RedisApplicationTests {
//    @Autowired
//    private RedisTemplate redisTemplate;
    @Test
    void hset(@Autowired RedisTemplate redisTemplate){
        HashOperations ops = redisTemplate.opsForHash();
        ops.put("info","aa","aaa");
    }
    @Test
    void hget(@Autowired RedisTemplate redisTemplate){
        HashOperations ops = redisTemplate.opsForHash();
        Object val = ops.get("info", "aa");
        System.out.println(val);
    }
}

spring:
  data:
    redis:
      host: localhost
      port: 6379

（6.2）SpringBoot读写Redis的客户端。

区别是：一个是需要自己指定泛型（不指定泛型默认Object，内部对数据进行序列化），另外一个就是不需要自己指定泛型。

@SpringBootTest
public class StringRedisTemplateTest {
    @Autowired
    private RedisTemplate<String,String> redisTemplate;
    @Autowired
    private StringRedisTemplate stringRedisTemplate;
    @Test
    void set(){
        ValueOperations<String, String> ops = stringRedisTemplate.opsForValue();
//        ValueOperations<String, String> ops = redisTemplate.opsForValue();
        String username = ops.get("username");
        System.out.println(username);
    }
}

（6.3）jedis的使用。

注意：使用jedis，执行还是不需要变的（相当于数据连接池一样，不需要改变代码）。 

@SpringBootTest
public class StringRedisTemplateTest {
    @Autowired
    private RedisTemplate<String,String> redisTemplate;
    @Autowired
    private StringRedisTemplate stringRedisTemplate;
    @Test
    void set(){
        ValueOperations<String, String> ops = stringRedisTemplate.opsForValue();
//        ValueOperations<String, String> ops = redisTemplate.opsForValue();
        String username = ops.get("username");
        System.out.println(username);
    }
}

（6.2）MongoDB。

（6.2.1）MongoDB定义与安装启动。 

（6.2.2）MongoDB的基础CRUD。

//查询数据
db.getCollection("book").find()
//添加（insert/save）数据（文档），db.book 等价于db.getCollection("book")
db.book.save({"name":"springboot",type:"springboot"})
//查询
db.book.find()
//删除数据
db.book.remove({type:"springboot"})
//修改数据(只修改遇到的第一个)
db.book.update({name:"springboot"},{$set:{name:"springboot2"}})
//删库跑路(这里只删了book（表）文档的所有数据)
db.book.remove({});

（6.2.3）SpringBoot整合MongoDB。 

（6.3）ES（分布式全文搜索引擎）。

（6.3.1）ES的下载与启动、IK分词器下载与使用。 

（6.3.2）索引创建。 

指定分词器与分词规则参考： 

{"mappings":{"properties":{"id":{"type":"keyword"},"name":{"type":"text","analyzer":"ik_max_word","copy_to":"all"},"type":{"type":"keyword"},"description":{"type":"text","analyzer":"ik_max_word","copy_to":"all"},"all":{"type":"text","analyzer":"ik_max_word"}}}}

（6.3.3）文档操作（增删改查）。

（6.3.4）SpringBoot整合ES。

（6.3.4.1） Template客户端（低级客户端）。

（6.3.4.2）高级客户端。

在Elasticsearch7.15版本之后,Elasticsearch官方宣布弃用了它的高级客户端RestHighLevelClient。 

注意：虽然已经弃用了，但是这里我还是使用这种方法，因为网上很多文章还是使用这种，要么就比较复杂的，这里为了方便，就使用这种了。

注意事项：elasticsearch服务端与客户端要一致，不然测试会报错。

        <dependency>
            <groupId>org.elasticsearch.client</groupId>
            <artifactId>elasticsearch-rest-high-level-client</artifactId>
            <version>7.16.2</version>
        </dependency>
    @BeforeEach
    void setUp() {
        HttpHost host = HttpHost.create("http://localhost:9200");
        RestClientBuilder builder = RestClient.builder(host);
        client = new RestHighLevelClient(builder);
    }

    @AfterEach
    void tearDown() throws IOException {
        client.close();
    }

 提示：经常使用的IDEA工具的alt+insertScrlk快捷键就有这两个方法。

（6.3.5）创建索引、添加文档。

索引（表）、文档（表的一条记录）。 

如果出现报错，看看这个类是否导入的是这个包的类，我就是导入错的包，一直报错。import org.elasticsearch.client.indices.CreateIndexRequest;

（6.3.6）查询文档操作。

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/755699.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

概率栅格

概率栅格

欢迎访问我的博客首页。 概率栅格 1. miss 表与 hit 表 1. miss 表与 hit 表 miss 表和 his 表是一维数组&#xff0c;它们存放的都是空闲值&#xff0c;用于更新概率栅格。其下标 i i i 代表旧空闲值&#xff0c;元素 t a b l e [ i ] table[i] table[i] 代表旧空闲值 i i …
阅读更多...
openGauss学习笔记-10 openGauss 简单数据管理-创建表

openGauss学习笔记-10 openGauss 简单数据管理-创建表

文章目录 openGauss学习笔记-10 openGauss 简单数据管理-创建表10.1 语法格式10.2 参数说明10.3 示例 openGauss学习笔记-10 openGauss 简单数据管理-创建表 在当前数据库中创建一个新的空白表&#xff0c;该表由命令执行者所有。在不同的数据库中可以存放相同的表。您可以使用…
阅读更多...
android avd

android avd

avd 记录~ avd 创建avd 默认位置安装位置.android/avd 下.android/avd/xxxx.ini 文件.android/avd/.avd 下config.ini 文件 扩展没尝试命令 avd 创建 https://developer.android.google.cn/studio/run/managing-avds?hlzh-cn https://blog.csdn.net/m0_37792384/article/det…
阅读更多...
深入分析 workflow 线程池

深入分析 workflow 线程池

深入分析 workflow 线程池 线程池是日常开发中很常用的一种管理线程的工具。它是池化技术中的一种。 池化技术的初衷就是将一些资源进行重复利用&#xff0c;来避免重复的构建来提高执行效率。类似的还有数据库连接池&#xff0c;字符串常量池&#xff0c;httpClient 连接池。…
阅读更多...
git下载源码及环境搭建下载源码之后端（一）

git下载源码及环境搭建下载源码之后端（一）

学习目标&#xff1a; git下载源码 步骤&#xff1a; 下载源码 使用 windows R 使用cmd调用命令框下载gitee云上面的 源码文件 输入命令&#xff1a; Git clone &#xff08;此处拼接gitee源代码 地址&#xff09; 若使用 git 命令 clone 项目时 我们需要在系统变量中进行…
阅读更多...
Ceph 存储（最详细！）

Ceph 存储（最详细！）

目录 一&#xff1a;存储基础 1、单机存储设备 &#xff08;1&#xff09;DAS&#xff08;直接附加存储&#xff0c;是直接接到计算机的主板总线上去的存储&#xff09; &#xff08;2&#xff09;NAS&#xff08;网络附加存储&#xff0c;是通过网络附加到当前主机文件系统…
阅读更多...
CSS 伪元素： ::marker 自定义列表序号

CSS 伪元素： ::marker 自定义列表序号

::marker 伪元素 ::marker&#xff0c;可作用在任何设置了 display: list-item 的元素或伪元素上&#xff0c;例如<li>和<summary>。 /** <ul><li>Peaches</li><li>Apples</li><li>Plums</li> </ul> */ ul li::…
阅读更多...
Python教程(3)——python开发工具vscode的下载与安装

Python教程(3)——python开发工具vscode的下载与安装

Python的开发工具有很多款&#xff0c;很多都是非常好用的&#xff0c;其中vscode作为其中一款Python的开发工具&#xff0c;是非常轻量级的&#xff0c;今天我们来介绍一下vs code的下载与安装。 vscode的下载与安装 首先需要到vscode的官网&#xff0c;这个谷歌或者百度一下…
阅读更多...
【C++11】包装器 和 bind函数 的定义与 使用

【C++11】包装器 和 bind函数 的定义与 使用

包装器 在C11标准中&#xff0c;没有提供内置的包装器功能&#xff0c;但我们可以使用一些技术手段来实现包装器的效果。下面介绍两种常用的方法&#xff1a; 函数对象包装器 函数对象包装器&#xff08;Function Object Wrapper&#xff09;&#xff1a; C11引入了 std::fu…
阅读更多...
CCLINK IE 转MODBUS-RTU网关modbusrtu地址对照表

CCLINK IE 转MODBUS-RTU网关modbusrtu地址对照表

远创智控YC-CCLKIE-RTU。这款产品的主要功能是将各种MODBUS-RTU、RS485、RS232设备接入到CCLINK IE FIELD BASIC网络中。 那么&#xff0c;这款通讯网关又有哪些特点呢&#xff1f;首先&#xff0c;它能够连接到CCLINK IE FIELD BASIC总线中作为从站使用&#xff0c;同时也能连…
阅读更多...
晶体三极管总结

晶体三极管总结

目录 1.3.1晶体管的结构与类型 1.3.2晶体管的电流放大作用 1.3.3晶体管的共射特性曲线 晶体三极管中有两种带有不同的极性电荷的载流子参与导电&#xff0c;故称之为双极型晶体管&#xff08;BJT&#xff09;Bipolar Junction Transistor 1.3.1晶体管的结构与类型 晶体三极…
阅读更多...
PowerShell设置最美界面

PowerShell设置最美界面

在 Windows 上安装 scoop&#xff1a; scoop是什么 windows下的安装源搜索工具&#xff0c;有点类似centos下的yum和Ubuntu下的apt。用这个拉下来安装的软件没有广告。 scoop官方网址&#xff1a; https://scoop.sh/A command-line installer for Windowshttps://scoop.sh/ …
阅读更多...
scratch二级、三级常考大题

scratch二级、三级常考大题

目录 1. 绘制多彩五角星 2. 躲避陨石 3. 数星星 4. 古堡历险记 5. 五彩糖葫芦 6. 疫情隔离和核酸检测模拟 7. 画正方形 8.大鱼吃小鱼 9. 接水果 10. 绘制正方形 1. 绘制多彩五角星 1.准备工作 &#xff08;1&#xff09;选择背景stars、角色Pencil&#xff1b; &am…
阅读更多...
工作日志3 对类型的判断 slice的截取对于jq的使用 el-table的表头和内容的位置

工作日志3 对类型的判断 slice的截取对于jq的使用 el-table的表头和内容的位置

在 JavaScript 中&#xff0c;你可以使用多种方式来判断某个值是否为空。以下是几种常见的方法&#xff1a; 使用严格相等运算符 () 检查值是否为 null 或 undefined&#xff1a; var value null; // 或者 undefinedif (value null || value undefined) {// 值为空 }使用逻…
阅读更多...
Linux常用命令——elm命令

Linux常用命令——elm命令

在线Linux命令查询工具 elm 纯文本邮件客户端程序 补充说明 elm命令是一个E-mail客户端管理程序&#xff0c;它提供了纯文本交互式全屏幕界面。 语法 elm(选项)选项 -s<邮件主题>&#xff1a;指定新邮件的邮件主题&#xff1b; -f<目录>&#xff1a;开启程序…
阅读更多...
Flutter 使用JSONToDart 生成bean文件

Flutter 使用JSONToDart 生成bean文件

1. 首先安装插件&#xff0c;进入flile-setting-plugins 2.然后搜索安装jsontodart&#xff0c;之后重启ide使其生效 3.在你需要使用的地方直接鼠标右键 或者使用快捷键AltShiftD 4.然后会出现这样一个弹窗&#xff0c;输入你要用到的json数据&#xff0c;和文件名称点击生成就…
阅读更多...
2023年房地产经纪中介行业研究报告

2023年房地产经纪中介行业研究报告

第一章 行业概况 1.1 概述 房地产经纪中介行业是一个专业的服务行业&#xff0c;主要涉及在买家和卖家之间进行房地产交易的媒介服务。这些服务包括评估和定价房产&#xff0c;对房产进行营销和推广&#xff0c;协助谈判和结算交易等。在这个行业中&#xff0c;中介公司通常会…
阅读更多...
C国演义 [第九章]

C国演义 [第九章]

第九章 买卖股票的最佳时机III题目理解步骤dp数组递推公式初始化遍历方向 代码 买卖股票的最佳时机IV题目理解步骤dp数组递推公式初始化遍历方向 代码 买卖股票的最佳时机III 力扣链接 给定一个数组&#xff0c;它的第 i 个元素是一支给定的股票在第 i 天的价格 设计一个算法…
阅读更多...
每日科技分享-POE新增文件和链接发送功能

每日科技分享-POE新增文件和链接发送功能

POE推出新功能 注意POE需要魔法上午才能进去。 实测 实测可以发送论文给chatgpt&#xff0c;然后和AI进行共享的对话。 POE网站链接&#xff1a; 也可以发送链接&#xff0c;实测了一下&#xff0c;似乎有时候并不准确&#xff0c;我发送了关于分层强化的文章&#xff0c;但是…
阅读更多...
按首字母排序分组（类通讯录）

按首字母排序分组（类通讯录）

移动端开发过程中&#xff0c;有遇到按首字母分组排序的&#xff0c;仿通讯录效果 那实现过程中&#xff0c;我们需要安装插件 npm i --save js-pinyin 安装后使用&#xff1a; 在页面中引用 import Pinyin from js-pinyin 调用 const sortByFirstLetter (origin) &g…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023