搜索到
85
篇与
的结果
-
【踩坑实录】Maven项目报错：java.lang.ExceptionInInitializerError 环境说明： 系统：win10 专业版 开发环境：IDEA JDK版本：1.8 mysql：5.5 mybatis：3.5.3 Junit：5.7.0 问题再现： Maven项目运行时报错，控制台报错信息如下： java.lang.ExceptionInInitializerError at com.langp.dao.UserMapperTest.getUserList(UserMapperTest.java:26) at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) at java.lang.reflect.Method.invoke(Method.java:498) ······ Caused by: org.apache.ibatis.exceptions.PersistenceException: ### Error building SqlSession. ### The error may exist in com/langp/dao/UserMapper.xml Process finished with exit code -1 错误原因： 程序在编译过程中找不到对应的配置文件就会报错，但是对应的配置文件却是的的确确存在于项目中的，可是在生成的测试结果target对应目录下找不到对应配置文件，这是因为Maven项目中默认资源配置目录是src/main/resource，而实际有些配置文件会放在src/main/java目录下，就会导致项目编译时导出不了这些配置文件。所以我们需要手动配置资源过滤，使src/main/java的”.properties“文件和”.xml“文件可被导出到测试结果的target文件夹中。 解决方法： 最简单的方式就是将对应的Mapper.xml文件复制到生成测试结果的target文件夹下对应的目录中，但是只要在Maven中执行一次clear操作，target文件夹就被清除了，下次编译时还要重新复制过去。所以还有种更简单的方法： 在Maven项目的配置文件”pom.xml“中添加如下过滤配置信息： <!-- 在build中配置resources，来防止资源导出失败的问题 --> <build> <resources> <resource> <directory>src/main/resources</directory> <includes> <include>**/*.properties</include> <include>**/*.xml</include> </includes> <filtering>true</filtering> </resource> <resource> <directory>src/main/java</directory> <includes> <include>**/*.properties</include> <include>**/*.xml</include> </includes> <filtering>true</filtering> </resource> </resources> </build> 然后，在IDEA中右键依次选择”Maven“->”Reload project“，重新载入依次Maven配置信息即可。 -
踩坑实录|mybatis项目报错：...Exception: Type interface UserMapper is not known to the MapperRegistry 环境说明： 系统：win10 专业版 开发环境：IDEA JDK版本：1.8 mysql：5.5 mybatis：3.5.3 Junit：5.7.0 问题再现： mybatis项目运行时报错，报错信息如下： org.apache.ibatis.binding.BindingException: Type interface com.langp.dao.UserMapper is not known to the MapperRegistry. at org.apache.ibatis.binding.MapperRegistry.getMapper(MapperRegistry.java:47) at org.apache.ibatis.session.Configuration.getMapper(Configuration.java:779) at com.langp.dao.UserMapperTest.getUserList(UserMapperTest.java:28) at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at java.lang.reflect.Method.invoke(Method.java:498) ····· Process finished with exit code -1 错误原因： 报错信息中出现了Type interface com.langp.dao.UserMapper is not known to the MapperRegistry，简单翻译一下就是：类型接口com.langp.dao.UserMapper不为MapperRegistry所知。 所以这个错误肯定是与mapper有关系的。每一个Mapper.xml都需要在mybatis核心配置文件中进行注册，由于mybatis的核心配置文件mybatis-config.xml中缺少对应接口的Mapper.xml，所以运行时就会报错。 解决方法： 在mybatis的核心配置文件中添加如下内容： <!-- 每一个mapper.xml配置文件都需要在mybaits核心文件中注册 --> <mappers> <mapper resource="com/langp/dao/UserMapper.xml"></mapper> </mappers> 其中，resource属性的值是接口对应Mapper.xml文件。添加之后即可解决。
-
Java总结：JDBC连接操作数据库(一) 目录： 前言 一、JDBC结构 1.Java程序 2.JDBC管理器 3.驱动程序 4.数据库 二、JDBC编程的步骤 1、导入包 2、加载驱动程序 3、设置JDBC的连接地址信息 4、创建数据库连接 5、使用SQL语句操作数据库 5.1.Statement接口方法创建表： 5.2.PreparedStatement接口： 6、关闭连接 三、相关的类与方法 1、DriverManager类 ——管理驱动 2、Connection接口 ——建立连接 3、Statement接口 ——执行SQL语句 4、PreparedStatement接口 ——执行SQL语句 5、ResultSet接口 ——存放查询之后返回的结果 前言 Java Database Connectivity简称JDBC，属于Java核心API的一部分，是Java语言中用来规范客户端程序如何来访问数据库的应用程序接口。支持ANSI SQL-92标准，通过调用这些类和接口提供的成员方法，我们可以方便地连接各种不同的数据库，进而使用标准的SQL命令对数据库进行查询、插入、删除、更新等操作。 一、JDBC结构 1.Java程序 主要功能是根据JDBC方法实现对数据库的访问和操作。 主要任务有：请求与数据库建立连接，向数据库发送SQL请求，为结果集定义存储应用和数据类型，查询结果，处理错误，控制传输、提交及关闭连接等。 2.JDBC管理器 即驱动程序管理器，动态地管理和维护数据库查询查询所需要的所有驱动程序对象，实现Java程序与特定驱动程序的连接。 主要任务有：为特定数据库选择驱动程序，处理JDBC初始化调用，为每个驱动程序提供JDBC功能的入口，为JDBC调用执行参数等 3.驱动程序 主要任务：建立与数据库的连接，向数据库发送请求，用户程序请求是执行编译，将错误代码格式化成标准的JDBC错误代码。 编程所使用的数据库系统不同，所需要的驱动程序也有所不同。 4.数据库 按数据结构来存储和管理数据的计算机软件。 常见的数据库比如mysql、Oracle、SqlServer等。 二、JDBC编程的步骤 一次完整的JDBC实现过程分为以下几步： 1、导入包 在程序首部将相关的包导入程序 import java.sql.*; 2、加载驱动程序 使用Class.forName()方法来加载相应的驱动程序。不同数据库所需要加载的驱动程序也不同： // 加载mysql的驱动程序 Class.forName("com.mysql.jdbc.Driver"); //加载oracle的驱动程序 Class.forName("oracle.jdbc.driver.oracleDriver"); 3、设置JDBC的连接地址信息 指定JDBC要连接的地址、端口、数据库、用户名、密码等信息 String username = "root"; String password = "root"; String url = "jdbc:mysql://localhost:3306/test"; // 如果要往表中插入中文，还需要设置编码为utf-8 String url = "jdbc:mysql://localhost:3306/test?seUnicode=true&characterEncoding=utf8"; 其中，"jdbc:mysql"是连接协议，“localhost”是连接地址，“3306”是mysql的连接端口（mysql的默认连接端口是3306），“test”是要连接操作的数据库。 4、创建数据库连接 DriverManager 类中的getConnection() 方法用上一步设置好的url作为参数来创建一个连接对象，并返回这个连接对象给Connection的实例。 //url是上一步创建的连接地址 Connection conn = DriverManager.getConnection(url,username,password); 5、使用SQL语句操作数据库 JDBC中执行SQL语句可以使用Statement接口以及其子接口PreparedStatement接口，下面分别使用不同接口来举例简单说明其用法： 5.1.Statement接口方法创建表： /** * 例子：Statement接口执行创建表，并且插入一组数据 */ // 在当前数据库下创建一个学生表，表中包含主键字段id、姓名name、以及更新时间updatetime String sql1 = "create table student(id int NOT NULL AUTO_INCREMENT primary key,name char(10),updateTime Datetime)"; // 向创建的student表添加一组信息 String sql2 = "insert into student(name,updatetime) values('qwe',sysdate())"; // 创建一个Statement对象 Statement st = conn.createStatement(); // 用executeUpdate()函数执行不返回任何内容的sql语句，如INSERT、UPDATE、DELETE以及其他DDL（数据定义语言）等。其参数为SQL语句 // 执行建表SQL语句 st.executeUpdate(sql1); // execute()函数可以执行传进来的任意SQL语句 // 执行插入数据的SQL语句 st.execute(sql2); // 释放资源 st.close(); 5.2.PreparedStatement接口： /** * 例子：PreparedStatement接口执行查询表中数据的SQL语句 */ String sql3 = "select * from student"; // 创建一个PreparedStatement对象，同时对传入的SQL语句进行预编译 PreparedStatement ps = conn.prepareStatement(sql3); // PreparedStatement接口中的execute()方法是没有参数的，因为SQL语句在创建对象时已传入并且预编译了 ResultSet result = ps.executeQuery(); while(rs.next()){ // 通过索引来获取查询到的值 int id = rs.getInt(1); String name = rs.getString(2); // 通过列名来获取查询到的值 Date date = rs.getDate("updateTime"); } // 释放资源 ps.close(); 6、关闭连接 用完就要释放所连接的数据库及JDBC资源，关闭与数据库的连接 conn.close(); 上面就是是JDBC编程的基本流程，下面对这个过程中涉及到的一些类与方法做简单介绍： 三、相关的类与方法 1、DriverManager类 ——管理驱动 用于管理一组JDBC驱动程序的基本服务。 官方文档介绍：DriverManager (Java Platform SE 8 ) (langp.wang) 其常用成员方法如下： 返回值 方法体 说明 static Connection getConnection(String url) 用指定的数据库URL来创建连接 static Connection getConnection(String url, Properties info) 用指定的数据库URL和相关信息（用户名、用户密码等属性列表）来创建连接 static Connection getConnection(String url, String user, String password) 用指定的数据库URL、用户名和用户密码来创建连接 static Driver getDriver(String url) 定位在给定URL下的驱动程序。 DriverManager尝试从已注册的JDBC驱动程序集中选择适当的驱动程序。 static void deregisterDriver(Driver driver) 从DriverManager的已注册驱动程序列表中删除指定的驱动程序。 static void println(String message) 将消息输出到当前JDBC日志流。 static void setLoginTimeout(int seconds) 驱动程序尝试连接数据库时将等待的最长时间，以秒为单位。 2、Connection接口 ——建立连接 负责建立与指定数据库的连接。 默认情况下，Connection对象处于自动提交模式，这意味着它在执行每个语句后自动提交更改。 如果禁用了自动提交模式，则必须显式调用方法commit()方法才能提交更改；否则，将不会保存数据库更改。 官方文档介绍： Connection (Java Platform SE 8 ) (langp.wang) 其常用成员方法如下： 返回值 方法体 说明 Statement createStatement() 创建一个Statement对象，用于将SQL语句发送到数据库。 PreparedStatement prepareStatement(String sql) 创建一个PreparedStatement对象，用于将参数化的SQL语句发送到数据库。 void close() 立即释放此Connection对象的数据库和JDBC资源，而不是等待它们自动释放。 void commit() 使自上一次提交/回退以来进行的所有更改永久生效，并释放此Connection对象当前持有的所有数据库锁。 void rollback() 撤销对数据库执行的添加、删除或者修改记录等操作，并释放此Connection对象当前持有的所有数据库锁。 3、Statement接口 ——执行SQL语句 用于执行静态SQL语句并返回其产生的结果的对象。 默认情况下，每个Statement对象只能同时打开一个ResultSet对象。 因此，如果一个ResultSet对象的读取与另一个的读取交错，则每个都必须由不同的Statement对象生成。 如果当前存在打开的语句，Statement接口中的所有执行方法都会隐式关闭该语句的当前ResultSet对象。 官方文档介绍： Statement (Java Platform SE 8 ) (langp.wang) 其常用成员方法如下： 返回值 方法体 说明 Connection getConnection() 检索产生此Statement对象的Connection对象 void close() 立即释放此Statement对象的数据库和JDBC资源，而不是在自动关闭时等待它发生 boolean execute(String sql) 执行给定的SQL语句，该语句可能返回多个结果 ResultSet executeQuery(String sql) 执行给定的SQL语句，该语句返回一个ResultSet对象 int executeUpdate(String sql) 执行给定的SQL语句，该语句可以是INSERT，UPDATE或DELETE语句，也可以是不返回任何内容的SQL语句，例如SQL DDL语句 ResultSet getResultSet() 以ResultSet对象的形式检索当前结果 executeUpdate()、executeQuery()与execute()方法的区别： execute()函数：可以执行所有SQL语句。 当执行查询语句时，返回的boolean值指示查询结果的形式，返回值为true时表示查询结果为ResultSet，反之为false（即认为没有查到）；执行其他语句时，如果第一个结果是更新计数或不存在任何结果，则返回false executeUpdate()：执行insert、update、delete等不返回任何内容的非查询语句。 executeQuery()：用于执行select语句。返回一个ResultSet对象，其中包含由给定查询产生的数据； 永不为空 4、PreparedStatement接口 ——执行SQL语句 表示预编译的SQL语句的对象。是Statement的子接口。 创建PreparedStatement对象时需传入一个SQL语句，该SQL语句已预编译并存储在PreparedStatement对象中。然后可以使用该对象多次有效地执行该语句。 官方文档介绍： PreparedStatement (Java Platform SE 8 ) (langp.wang) 其常用成员方法如下： 返回值 方法体 说明 boolean execute() 在此PreparedStatement对象中执行SQL语句，可以是任何类型的SQL语句 ResultSet executeQuery() 在此PreparedStatement对象中执行SQL查询，并返回查询生成的ResultSet对象 int executeUpdate() 在此PreparedStatement对象中执行SQL语句，该对象必须是SQL数据操作语言（DML）语句，例如INSERT，UPDATE或DELETE； 或不返回任何内容的SQL语句，例如DDL语句 5、ResultSet接口 ——存放查询之后返回的结果 表示数据库结果集的数据表，通常通过执行查询数据库的语句来生成。 ResultSet对象有一个游标，该游标指向其当前数据行。 最初，光标位于第一行之前。next()方法可将光标移动到下一行，当ResultSet对象中没有更多行时它将返回false，因此可以在while循环中使用它来迭代结果集。例如： // 假设rs是前面进行查询操作返回的ResultSet对象 while(rs.next()){ // 输出结果 } 用next()方法可以实现访问每一个数据行，那么如何获取数据行中的每一列数据呢？ResultSet接口提供了用于从当前行中检索列值的getter方法，方法名是get+类型，如getBoolean()，getInt()。 getter方法的参数可以是列的索引值或者列的名称，对应的是用索引或者列名来从当前数据行中检索列值。 通常，使用列索引会更有效。 列从1开始编号。为实现最大的可移植性，应按从左到右的顺序读取每一行中的结果集列，并且每一列只能读取一次。 getter方法用列名检索时传入的列名称不区分大小写。 当多个列具有相同的名称时，将返回第一个匹配列的值。 对于在查询中未明确命名的列，最好使用列的索引。 如果使用了列名，则应注意确保它们唯一地引用了预期的列，这可以通过SQL AS子句来确保。 例如： // 假设rs是前面进行查询操作返回的ResultSet对象 while(rs.next()){ // 使用索引来检索 int id = rs.getInt(1); // 使用列的名称来检索 String name = rs.getString("name"); // 且列名不区分大小写 Date updateTime = rs.getDate("UPDATETIME"); } 官方文档介绍： ResultSet (Java Platform SE 8 ) (langp.wang) 其常用成员方法如下： 返回值 方法体 说明 boolean absolute(int row) 将光标移动到此ResultSet对象中的给定行号 boolean first() 将光标移动到此ResultSet对象的第一行 void beforeFirst() 将光标移动到此ResultSet对象的前面，紧挨着第一行 boolean isFirst() 检索光标是否在此ResultSet对象的第一行上 boolean last() 将光标移动到此ResultSet对象的最后一行 void afterLast() 将光标移动到此ResultSet对象的末尾，紧接在最后一行之后 boolean isLast() 检索光标是否在此ResultSet对象的最后一行 boolean next() 将光标从当前位置向前移动一行 void insertRow() 将插入行的内容插入到此ResultSet对象和数据库中 void updateRow() 使用此ResultSet对象的当前行的新内容更新底层数据库 void deleteRow() 从此ResultSet对象和底层数据库中删除当前行 void update类型(int ColumnIndex,类型 x) 使用给定类型x更新指定列 int get类型(int ColumnIndex) 以Java类型的形式获取此ResultSet的对象的当前行中指定列的值 主要参考资料： 《数据库系统概论（第5版）》 王珊 萨师煊 编著 Java SE 1.8 官方文档
-
typecho设置伪静态规则 环境说明： Nginx：1.18 ubuntu：20.04 博客框架：typecho 1.1-17.10.30 前言 记得当时我自己手动搭建好LNMP环境，安装上typecho之后，满心欢喜的打开网站首页，却发现除了首页其他的页面都是打不开的，全部显示“403”。当时还困饶了我大半天（后来才知道是没有正确设置伪静态的原因），一度以为是环境没搭好，重置服务器再搭环境这么试了好几次，还是一样的错误。后来，直到在其官方文档里看到服务器设置伪静态的方法，就尝试了一下，果然有用。（不过很奇怪的是在官方文档中是找不到这个文档页面的，当时还是在搜索引擎中才找到的） 以下为整个过程： 正文 首先找到网站的nginx配置文件，像我这样手动安装nginx的话，配置文件应该在/etc/nginx/site-enabled目录下面。在配置文件中加入以下的配置信息： if (-f $request_filename/index.html) { rewrite (.*) $1/index.html break; } if (-f $request_filename/index.php) { rewrite (.*) $1/index.php; } if (!-f $request_filename) { rewrite (.*) /index.php; } 保存文件之后重启Nginx服务器： sudo nginx -s reload 然后进入博客的后台（域名/admin/），依次点击“网站设置”->“永久链接”->“是否使用地址重写功能”，选择“启用”，然后下面会有错误提示，不用管直接在下面打对勾，强制启用。 现在再访问网站，其他页面就可以打开了。 最后附上一些安装typecho博客过程中其他可能会出现的问题，转自服务器环境设置 - Typecho Docs ： 1. 无法登录后台，出现"405, method not allowed" 这主要是由于nginx的固有bug导致，因为typecho使用的是静态化地址，而nginx 0.7之前的版本是不允许对静态地址做post请求的，所以会出现这个错误。 解决方法 升级nginx至0.7或者0.7以上的版本即可 2. 无法登录后台，点击前台链接或者后台登录时出现"404, not found" 这是nginx的设置时没有注意支持pathinfo导致的，具体关于php pathinfo的信息可以在网上搜索到。 解决方法 一般的出现这种情况时，nginx.conf里的的location设置都是类似这样 location ~ .*\.php$ 要支持pathinfo，要改成 location ~ .*\.php(\/.*)*$ 然后在location里加上 set $path_info ""; set $real_script_name $fastcgi_script_name; if ($fastcgi_script_name ~ "^(.+?\.php)(/.+)$") { set $real_script_name $1; set $path_info $2; } fastcgi_param SCRIPT_FILENAME $document_root$real_script_name; fastcgi_param SCRIPT_NAME $real_script_name;fastcgi_param PATH_INFO $path_info; 在某些老版本的php里面，可能还要打开php.ini里的cgi.fix_pathinfo cgi.fix_pathinfo = 1
-
简单总结CSS中元素形状的平滑变化 目录： 前言 一、transition属性 ——设置过渡效果 1.作用： 2.属性： 3. 默认值： 4.JavaScript语法： 5.使用及说明： 二、transform属性 ——变化效果 1.作用： 2语法： 3.属性值： 三、效果演示代码 1.html代码 2.CSS代码 前言 将鼠标放到图片上面以查看实现效果： 例子涉及到的相关知识点如下： 一、transition属性 ——设置过渡效果 1.作用： 设置元素变化时的过渡效果 2.属性： transition属性包括四个子属性，即transition-property、transition-duration、ransition-timing-function、transition-delay，各个属性的含义见下方表格： 值 描述 transition-property 指定哪个元素属性会发生变化 transition-duration 指定过渡效果需要多少秒或毫秒才能完成 ransition-timing-function 指定过渡效果的变化速度曲线 transition-delay 定义过渡效果延迟多长时间开始 注：使用时应该必须指定 transition-duration 属性，否则效果持续时间为0，不会有任何效果 3. 默认值： all 0 ease 0 4.JavaScript语法： object.style.transition="width 2s"; 5.使用及说明： 举个例子： 存在一个矩形，设置过渡效果为：延迟1s，矩形的宽度变化，过渡时间为0.5s，过渡效果的变化曲线为linear ，代码如下： .div { transition-property: width; transition-duration: 0.5s; transition-timing-function: linear; transition-delay: 1s; } 上面写法看起来就很繁琐，更别说写起来了。所以为了方便，可以将这几个属性合并成transition 属性，上面的就可以这么写： .div { transition: width 0.5s linear 1s; // 部分用不到的属性可以省略，一般都得设置产生过渡变化的属性和过渡时间 } 除了设置单个属性的变化效果，也可以设置多个属性的变化效果，中间用逗号隔开： transition: width 2s, height 1s, transform 2s; 二、transform属性 ——变化效果 1.作用： 设置元素的变化效果，与transition属性一起使用可实现元素的平滑变化 2语法： transform: none|transform-functions; 3.属性值： 值 描述 none 不进行转换。 translate(x,y) 定义 2D 转换。 translate3d(x,y,z) 定义 3D 转换。 scale(x[,y]?) 定义 2D 缩放转换。 scale3d(x,y,z) 定义 3D 缩放转换。 rotate(angle) 定义 2D 旋转，在参数中规定角度。 rotate3d(x,y,z,angle) 定义 3D 旋转。 skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 perspective(n) 为 3D 转换元素定义透视视图。 更多transform变化属性参考： CSS3 transform 属性 | 菜鸟教程 (runoob.com) 三、效果演示代码 1.html代码 <div class="box"> <img src="https://gitee.com/wang-langping/langp/raw/master/%E5%AD%A6%E4%B9%A0%E7%82%B9%E6%BB%B4/web%E5%89%8D%E7%AB%AF/%E7%AE%80%E5%8D%95%E6%80%BB%E7%BB%93CSS%E4%B8%AD%E5%85%83%E7%B4%A0%E5%BD%A2%E7%8A%B6%E7%9A%84%E5%B9%B3%E6%BB%91%E5%8F%98%E5%8C%96/agree.png" alt="网络未连接或图片链接已失效" class="agree"> <img src="https://gitee.com/wang-langping/langp/raw/master/%E5%AD%A6%E4%B9%A0%E7%82%B9%E6%BB%B4/web%E5%89%8D%E7%AB%AF/%E7%AE%80%E5%8D%95%E6%80%BB%E7%BB%93CSS%E4%B8%AD%E5%85%83%E7%B4%A0%E5%BD%A2%E7%8A%B6%E7%9A%84%E5%B9%B3%E6%BB%91%E5%8F%98%E5%8C%96/windmill.png" alt="网络未连接或图片链接已失效" class="windmill"> </div> 2.CSS代码 <style> .box { display: inline-flex; border:1px solid #aaabad; margin:10px; } .agree { width: 60px; height: 60px; margin: 45px; transition: all 0.5s; } /* 设置鼠标悬浮到图片上时图片的变化效果 */ .agree:hover { transform: scale(1.5); } .windmill { margin: 30px; width: 100px; height: 100px; transition: all 3s; } .windmill:hover { transform: rotate(720deg); } </style>
-
openwrt无线中继功能：实现不插网线就能上网 目录： 前言 1.创建接口 2.设置wifi 环境说明： 路由器：小米 R3G 系统版本：openwrt R20.5 前言 话说这学期开学之后，学校里更换掉了原来的所有网线，全部用校园网来代替了。每月要多花10块钱不说，去年年底在电信客服那申请到的公网IP还没捂热呢，就这么没了。 新接入的校园网全部采用无线wifi的方式，原来的路由器就派不上用场了，但是奈何openwrt的功能实在太香，用上之后就再也离不开了。所以openwrt路由不能丢，就得把openwrt上的无线中继功能用起来，作为校园网信号的接收器，实现不插网线就能让路由器联网。 简单研究了一下，本篇博客记录下这个过程。 1.创建接口 在openwrt界面上依次点击“网络”->“无线”，先删除原来的所有无线网络配置，第一项是2.4GHz的wifi配置，第二项是5GHz的wifi设置，确定要转接的wifi的频率，点击对应项后面的“扫描”按钮 选择要接收的wifi，类似于手机连接wifi，点击“加入网络”，输入密码连接 新网络接口的名称可改可不改，其他项保持默认，点击“提交” 然后到网络接口的配置界面，基本也没什么需要改的 往下滚动到接口配置，模式选项是“客户端Clinet”，网络选择之前命名的网络，这个页面中的其他选项基本不需要修改，然后点击“保存并应用” 保存之后，查看接口列表，就多出了刚才设置的那个接口。 此时路由器已经接入了校园网，但是还是不能上网。进入校园网的认证页面，认证一下即可。 2.设置wifi 一般来说路由器还得给我们的手机平板等设备提供wifi，所以还得再单独设置一个wifi出来。 在“无线概况”界面选择添加一个wifi， wifi的信道选择“auto”，频宽选最大，无线电功率选自动或者最大，然后往下翻 在“接口配置”里设置无线模式、wifi名称、网络接口等信息 切换到“无线安全”选项卡，设置wifi的加密方式和密码，完之后点击右下角”保存并应用“ 然后就大功告成了。
-
简单总结Layui中的表单验证 目录： 一、校验规则 1.使用内置校验规则 2.自定义校验规则 二、示例文件的实现代码 1.HTML代码 2.CSS代码 3.JS代码 简单来说，实现Layui框架中的表单验证很简单，只需要给表单元素添加上”lay-verify“属性 示例如下： 一、校验规则 1.使用内置校验规则 Layui对于常见的字符串（如手机号，邮箱，网址等）都设置了相应的校验规则，不用再自己写规则，使用时只需要将校验规则赋值给“lay-verify”属性即可。 Layui中内置的校验规则如下： 规则 说明 required 必填项 phone 手机号 email 邮箱 url 网址 number 数字 date 日期 identity 身份证 例如：设置一个输入框对手机号码进行校验： <!-- 也可以支持多条校验规则同时使用，用“|”隔开 --> 手机号：<input type="text" placeholder="请输入手机号" lay-verify="required|phone"> <button lay-submit>提交</button> 2.自定义校验规则 当然，在大部分时候，Layui中内置的校验规则还是有点不够用，所以我们还是需要来自定义规则来校验表单数据。 用一个实例来简单说明： <!-- username为自定义的规则 --> 用户名：<input type="text" placeholder="请输入用户名" lay-verify="username"> <script> // 用户名长度不能大于16位 layui.form.verify({ // value：表单的值、item：表单的DOM对象 username:function(value,item){ if (value.length > 16){ return "用户名大于16位"; } } }) </script> 这个例子较为简单，只涉及到表单数据的长度判断，若要设置更复杂的规则还需要用到正则表达式，鉴于篇幅长度本篇博客不再赘述。相关的教程可以参考：JavaScript 正则表达式、JavaScript RegExp 对象 二、示例文件的实现代码 提前导入Layui和jQuery的CDN文件： <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.4/css/layui.css"> <script src="https://www.layuicdn.com/layui/layui.js"></script> 1.HTML代码 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend id="title">简单总结Layui中的表单验证</legend><br> </fieldset> <div class="container"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>内置的校验规则</legend> </fieldset> <div class=" layui-collapse" lay-accordion> <!-- 必填项 --> <div class="layui-form layui-colla-item"> <p class="layui-colla-title">必填项校验</p> <!-- layui-show来决定是否默认展开 --> <div class="layui-form-item layui-colla-content layui-show"> <label class="layui-form-label">必填项：</label> <div class="layui-input-inline"> <!-- lay-verify 属性定义校验规则 --> <input type="text" class="layui-input" placeholder="请输入必填项" lay-verify="required"> </div> <div class="layui-form-mid layui-word-aux">此项为必填项</div> <button id="btn-required" class="layui-btn layui-btn-sm" lay-submit>校验</button> </div> </div> <!-- 手机号校验 --> <div class="layui-form layui-colla-item"> <p class="layui-colla-title">手机号校验</p> <div class="layui-form-item layui-colla-content"> <label class="layui-form-label">手机号：</label> <div class="layui-input-inline"> <input type="text" class="layui-input" placeholder="请输入正确格式的手机号码" lay-verify="phone"> </div> <div class="layui-form-mid layui-word-aux">1开头的11位数字</div> <button id="btn-phone" class="layui-btn layui-btn-sm" lay-submit>校验手机号</button> </div> </div> <!-- 邮箱 --> <div class="layui-form layui-colla-item"> <p class="layui-colla-title">邮箱校验</p> <div class="layui-form-item layui-colla-content"> <label class="layui-form-label">邮箱：</label> <div class="layui-input-inline"> <input type="text" class="layui-input" placeholder="请输入正确格式的邮箱" lay-verify="email"> </div> <div class="layui-form-mid layui-word-aux">正确的邮箱格式</div> <button id="btn-email" class="layui-btn layui-btn-sm" lay-submit>校验邮箱</button> </div> </div> <!-- 网址 --> <div class="layui-form layui-colla-item"> <p class="layui-colla-title">网址校验</p> <div class="layui-form-item layui-colla-content"> <label class="layui-form-label">网址：</label> <div class="layui-input-inline"> <input type="text" class="layui-input" placeholder="请输入网址" lay-verify="url"> </div> <div class="layui-form-mid layui-word-aux">http(s)://开头</div> <button id="btn-url" class="layui-btn layui-btn-sm" lay-submit>校验网址</button> </div> </div> <!-- 数字 --> <div class="layui-form layui-colla-item"> <p class="layui-colla-title">数字校验</p> <div class="layui-form-item layui-colla-content"> <label class="layui-form-label">数字：</label> <div class="layui-input-inline"> <input type="text" class="layui-input" placeholder="请输入数字" lay-verify="number"> </div> <div class="layui-form-mid layui-word-aux">数字</div> <button id="btn-number" class="layui-btn layui-btn-sm" lay-submit>校验数字</button> </div> </div> <!-- 日期 --> <div class="layui-form layui-colla-item"> <p class="layui-colla-title">日期校验</p> <div class="layui-form-item layui-colla-content"> <label class="layui-form-label">日期：</label> <div class="layui-input-inline"> <input type="text" class="layui-input" placeholder="请输入日期" lay-verify="date"> </div> <div class="layui-form-mid layui-word-aux">格式：年（YYYY）-月（MM）-日（DD）</div> <button id="btn-date" class="layui-btn layui-btn-sm" lay-submit>校验日期</button> </div> </div> <!-- 身份证 --> <div class="layui-form layui-colla-item"> <p class="layui-colla-title">身份证号校验</p> <div class="layui-form-item layui-colla-content"> <label class="layui-form-label">身份证号：</label> <div class="layui-input-inline"> <input type="text" class="layui-input" placeholder="请输入身份证号" lay-verify="identity"> </div> <div class="layui-form-mid layui-word-aux">正确的身份证号码</div> <button id="btn-identity" class="layui-btn layui-btn-sm" lay-submit>校验身份证号</button> </div> </div> </div> </div> <br><br> <div class="container"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>自定义校验规则</legend> </fieldset> <!-- 自定义规则--> <div class="layui-form layui-collapse" lay-accordion> <div class="layui-form layui-colla-item"> <p class="layui-colla-title">自定义规则</p> <div class="layui-form-item layui-colla-content layui-show"> <label class="layui-form-label">密码</label> <div class="layui-input-inline"> <input type="password" class="layui-input" placeholder="请输入密码" lay-verify="password"> </div> <div class="layui-form-mid layui-word-aux">至少八位数字与字母的组合</div> <button id="btn-custom" class="layui-btn layui-btn-sm" lay-submit>校验</button> </div> </div> </div> </div> 2.CSS代码 <style> #title { text-align: center; margin: 20px; } .container { width: 800px; margin: 20px auto; } button { margin: 5px; float: right; } </style> 3.JS代码 <script> // 注意：自 layui 2.6.0 开始，无需再单独加载指定模块，因为 layui.js 已经包含了所有的内置模块，无需再指定模块 $("#btn-required").click(function () { layer.msg("必填项已填写", { icon: 6 , time: 1000 }) }); $("#btn-phone").click(function () { layer.msg("手机号码格式正确", { icon: 6 , time: 1000 }); }); $("#btn-email").click(function () { layer.msg("邮箱格式正确", { icon: 6 , time: 1000 }); }) $("#btn-url").click(function () { layer.msg("网址格式正确", { icon: 6 , time: 1000 }); }); $("#btn-number").click(function () { layer.msg("填写的值为数字", { icon: 6 , time: 1000 }); }); $("#btn-date").click(function () { layer.msg("日期格式正确", { icon: 6 , time: 1000 }); }); $("#btn-identity").click(function () { layer.msg("身份证格式正确", { icon: 6 , time: 1000 }); }); $("#btn-custom").click(function () { layer.msg("密码格式正确", { icon: 6 , time: 1000 }); }); // 引入layui的form模块，自定义校验规则 layui.form.verify({ //value：表单的值、item：表单的DOM对象 password: function (value,item) { if (/[\u4e00-\u9fa5]+$/.test(value)) { return "密码不能出现汉字噢"; } if (value.length < 8) { return "密码小于8位"; } } }) </script>
-
Bootstrap框架实现简易的模态框 目录： 一、模态框的简单介绍 二、代码实现 1.HTML代码 2.CSS代码 一、模态框的简单介绍 点击按钮以查看实现效果： 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独来源的内容，使用户可以在不离开父窗体的情况下有一些互动，比如提供信息、交互等。 简单来说，模态框是一个div，包含“modal-header”（模态框头部）、“modal-body”（模态框主体）、“modal-footer”（模态框底部）三个子元素。 简单结构大概是这样： 二、代码实现 导入jQuery和Bootstrap： <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"> </script><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 1.HTML代码 <h2>Bootstrap框架实现简易的模态框</h2> <!-- 触发模态框的按钮 data-target的值是要加载的模态框 --> <button class="click btn btn-primary" data-toggle="modal" data-target="#showModal">点击显示模态框</button> <!-- modal属性用于把div识别为模态框窗口，fade是可以设置模态框淡入淡出 aria-labelledby的值是模态框的标题 aria-hidden="true"用于保持模态窗口不可见，直到触发器（比如按钮）被触发为止--> <div class="modal fade" id="showModal" tabindex="-1" role="dialog" aria-labelledby="titleModal" aria-hidden="true"> <!-- modal-dialog 设置弹出层 弹出效果--> <div class="modal-dialog"> <!-- 模态框的底层 --> <div class="modal-content"> <!-- 模态框头部--> <div class="modal-header"> <!-- 关闭按钮 data-dismiss="modal"用来关闭窗口 --> <button class="close" data-dismiss="modal" aria-hidden="true"> <!-- × 转义成“x”关闭符号 --> × </button> <!-- 模态框标题 --> <h4 class="modal-title" id="titleModal">Roookie博客 | 记录 · 收纳 · 分享</h4> </div> <!-- 模态框主体 --> <div class="modal-body"> <br><a href="https://www.langp.wang"> <img src="https://gitee.com/wang-langping/langp/raw/master/icon/1.png" alt="网络连接失败，请检查网络连接"> </a> </div> <!-- 模态框底部 --> <div class="modal-footer"> <!-- 模态框底部的操作按钮 --> <button class="btn btn-info" data-dismiss="modal">确定</button> <button class="btn btn-default" data-dismiss="modal">取消</button> </div> </div> </div> </div> 2.CSS代码 h2,h4,.modal-body{ text-align:center; } .click{ display:block; padding:10px; margin:30px auto; } 更多内容： Bootstrap 模态框（Modal）插件 | 菜鸟教程 (runoob.com)
-
用jQuery实现元素被点击选中的效果 目录： 一、说明 二、代码实现 1.HTML代码 2.CSS代码 3.JS代码 一、说明 页面中存在四个div元素，实现以下效果： 当鼠标放置在div元素上面的时候，元素呈现平滑放大效果； 鼠标点击任意一个元素，元素变大，周围出现阴影，表现出被选中的效果 演示效果如下，鼠标点击即可选中或者用按钮进行多选： 二、代码实现 提前导入jQuery文件： <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> 1.HTML代码 <h2>用jQuery实现元素被点击选中的效果</h2> <div class="box"> <div>元素1</div> <div>元素2</div> <div>元素3</div> <div>元素4</div> <button id="all-selected">全选/取消全选</button> </div> 2.CSS代码 <style> h2 { text-align: center; } .box{ display:flex; border:1px solid #aaabad; width:700px; margin:auto; } /*给盒子设置样式*/ .box>div { border: 3px solid dodgerblue; margin: 30px auto; padding: 15px; border-radius: 10px; /* 定义元素的变化参数，持续时间0.5s，元素所有属性都变化 */ transition: all 0.5s; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -moz-transition: all 0.5s; } /*为盒子添加伪类，实现鼠标放到元素上的效果*/ .box>div:hover { /* 定义变化的效果，盒子的长和宽均变为原来的1.2倍 */ transform: scale(1.2, 1.2); } /* 元素被选中时的效果 */ .selected { box-shadow: 0 0 15px deepskyblue; /* 定义变化的效果，盒子的长和宽均变为原来的1.2倍 */ transform: scale(1.2, 1.2); } #all-selected { width:100px; height:35px; border-radius:5px; display:inline-block; margin: 40px 25px 25px; transition:all 0.5s; } #all-selected:hover{ background-color:#c9c9c9; } </style> 3.JS代码 <script> // 设置一个变量symbol，来判断当前的状态是否为选中 let symbol = true; $(document).ready(function () { // 为box盒子添加点击事件 $(".box>div").click(function () { if (symbol === true) { // 当symbol的值为true时，为点击的元素添加"selected"属性 $(this).addClass("selected"); // 同时symbol的值取反 symbol = false; } else { // 当symbol的值为false时，移除"selected"属性 $(this).removeClass("selected"); // symbol的值取反 symbol = true; } }); // 为“全选”按钮添加全选事件 $("#all-selected").click(function () { if (symbol === true) { $(".box>div").addClass("selected"); symbol = false; } else { $(".box>div").removeClass("selected"); symbol = true; } }); }); </script>
-
IDEA添加并配置Tomcat服务器 目录： 一、提前准备 二、创建Java web项目 三、添加Tomcat服务器 四、启动Tomcat服务器 五、其他操作 更改Tomcat默认端口 环境说明： 系统：Win10专业版 JDK版本：1.8 Tomcat版本：8.5.57 开发环境：IDEA 2020.03 Ultimate 一、提前准备 首先，访问Tomcat官网，选择一个版本的Tomcat进行下载，下载完之后解压。本篇博客以Tomcat8.5为例，下载的是windows 64位。下载完之后解压，记住解压完的文件位置，后面导入服务器时要用到。 其次，要保证当前的计算机正确配置了Java环境，win10系统下Java环境的配置请参考：Win10系统配置Java开发环境 二、创建Java web项目 注意：IDEA的Community版本是无法进行Web开发的，Web开发需要Ultimate版本 打开IDEA，先创建一个Java项目。然后在项目名上依次点击右键->”Add Framework Support“，弹出的窗口中勾选“Web Application”选项，点击右下角“OK”即可。 这样创建出来的就是Java web项目了，原来的项目目录会多出来一个“web”文件夹： 三、添加Tomcat服务器 依次点击“File”->“setting”（或者快捷键Ctrl+Alt+s）打开设置界面，然后选择“Build，Execution，Deployment”->“Application Servers”，点击“+”新添加一个应用服务器： 选择的服务器类型为“Tomcat Server”，注意不要选成“TomEE Server”： 在弹出的窗口中选择本地Tomcat的所在目录，IDEA会自动识别出Tomcat的版本，两连“OK”退出 回到主界面，找到菜单栏右边的“Add Configuration”： 点击左上角“+”，在展开的列表中依次选择“Tomcat Server”->“Local”，新建一个本地服务配置。因为前面添加了Tomcat服务器，所以右侧窗口中出现的配置项已自动填好，有需要的可以根据下图说明来改变部分选项： 然后我们需要把之前新建的这个项目放到Tomcat服务器上运行。切换到选项卡“Deployment”，点击左下角“+”，选择“Artifact”，当前项目就被添加上去了，添加完点击“OK”退出。 四、启动Tomcat服务器 如果前面配置没问题的话，现在左下角会出现“Services”窗口选项，在服务器名称上右键->“Run”，Tomcat服务器就启动了。 等待几秒钟服务器完全启动之后，会自动在浏览器中打开项目，如果没有自动打开那就用“localhost:8080”在浏览器中访问项目。 当前由于我们运行的只是空项目，没有对项目做任何更改，所以项目的运行结果会是下面这样： 到这里就配置成功了。 五、其他操作 更改Tomcat默认端口 在主界面找到菜单栏右边的“Tomcat ”，选择“Edit Configurations”： “HTTP port”是默认端口，更改完之后要重启Tomcat服务器才能生效 暂时这些，其他的碰到再添加。
-
Win10系统配置Java开发环境 目录： 两句废话 一、安装JDK 二、配置环境变量 三、验证环境是否搭建成功 环境说明： 系统：Win10专业版 Java版本：1.8 两句废话 最近收到了升级Win10 20H2版本的更新消息（别问我为什么2021年才收到2020年的更新包，问就是不知道），之前也听说这是修复Bug的一次更新。所以出于对微软的信任，原来的旧系统我并没有备份，就直接升级了系统，系统升级过程还算顺利。但是，我还是太”轻敌“了，新系统用了几天之后，原来的Bug修没修复还真没感觉出来，能感觉出来的反倒是是几个新的Bug：Win+V打不开剪贴板，运行窗口用notepad打不开记事本，快捷键Shift+Win+S无法打开windows自带的截图功能，这几项Bug暂且还能接受，因为有其他第三方软件能够代替这几个功能。最让我难受的一个Bug就是全屏开始菜单里的图标全成了光秃秃的小方块，没有应用名字，也没有图案logo，每次打开开始菜单都得回忆一下要找的应用的位置，非常麻烦，网上提供的方法也基本上都是治标不治本，用了一周多实在是忍受不了这些Bug，于是忍痛重装了系统。 所以话说回来，更新Win10之前一定要把原来的系统备份一遍！！！！这次经历可真是太长记性了。 重装完系统的确清爽多了，但是写Java时，才想起来新系统的Java环境还没配置，所以把配置Java环境的过程记录下来，方便以后查询（以后谁要让我帮他配Java环境，我就把这篇博客链接扔过去）。 嗯，废话讲完了。 附上Oracle官方文档中安装Java环境的相关链接：JDK Installation for Microsoft Windows (oracle.com) 一、安装JDK 首先下载JDK安装包。 Java 官网：Oracle 甲骨文中国 | 集成的云应用和平台服务 JDK 最新版本下载：Java Downloads | Oracle 旧版本 JDK 下载：Java Archive | Oracle 选择一个Java版本之后，选择“Windows x64”版本进行下载。 由于下载 JDK 旧版本需要登录 Oracle 帐号，随便用临时邮箱注册了一个账号，用这个就行： 帐号：linshi@linshiyouxiang.net 密码：Youxiang123@ 本篇博客以JDK 8（也称为JDK 1.8）作为示例来说明。 下载好之后打开安装，安装的是JDK和JRE两部分。安装时直接一路点击“下一步”，安装注意一下安装位置，后面要用。 二、配置环境变量 “计算机”图标上点击右键->属性->高级系统设置（win10 20H2需要在属性窗口的后面才能找到高级系统设置），在高级系统设置窗口的右下角点击“环境变量”。 “环境变量”分为两部分，一个是“用户变量”，这里面配置的环境变量只适用于当前计算机用户，另一个是“系统变量”，设置的环境变量适用于这台计算机上的所有用户。具体设置成哪种环境变量看个人习惯。 添加如下两条环境变量： 环境变量名称 环境变量值 JAVA_HOME C:\Program Files\Java\jdk1.8.0_221 Path %JAVA_HOME%\bin JAVA_HOME的值是JDK的安装路径，如果在上一步安装的时候没有更改安装路径的话，则JDK的默认安装路径为：“C:\Program Files\Java\jdk1.8.0_221 ”，因为版本号的问题，JDK的安装文件夹名称可能会有些许差别，请根据实际情况写。 其实第一个环境变量的名称并不是固定的，在其他的配置Java环境变量的教程中名称也可能不同。这个只是习惯而已，只要保证环境变量值没什么问题即可。 这两条添加完之后，两连“确定”完成配置。 三、验证环境是否搭建成功 使用快捷键Win+R打开运行窗口，输入“cmd”，然后回车打开命令行界面，使用如下命令查看当前系统的Java版本： java -version 结果如下： 结果正确显示出Java的版本信息时，说明Java环境配置成功。
-
免费的网站运行状态监控工具——UptimeRobot 目录： 前言 一、将网站添加到监控列表 二、获取监控网站的api 三、修改项目文件 前言 这是我利用UptimeRobot搭建的网站状态监控站：https://status.wlplove.com UptimeRobot是国外的一个网站监控服务，添加网站到监控列表之后，可以24小时监控网站的运行状态，当网站无法访问时会立即通知用户。该服务提供了免费和付费两个版本，免费版的服务是5分钟检测一次，这个频率对于我的个人网站来说已经足够，所以就不考虑付费了（白嫖怪嘤嘤嘤）。 设置了监控服务之后，在UptimeRobot网站可以查看网站的监控状态，但是配置起来还挺麻烦的，访问速度也不快。因此不使用这种方式，而是基于官方提供的API，在本地搭建一个页面来显示网站的运行状态。 要用到的是github上一个基于UptimeRobot API的项目。 这是项目的github地址：https://github.com/yb/uptime-status 将这个项目clone拉取到本地。 一、将网站添加到监控列表 进入UptimeRobot官网，使用邮箱注册一个账号 之后登陆，点击“Go to Dashboard”，进入监控仪表盘 点击左上角“Add New Monitor”。按照如下设置给自己的网站添加监控： 二、获取监控网站的api 在仪表盘界面点击“My Setting”： 往下找到“Read-only API Key”选项，点击最后一行的“Create the read-only API key”，创建一个API key，然后复制下这个API，后面会用到这个API key。 三、修改项目文件 打开刚才从github上拉取下来的项目文件夹，我们要修改其中的“config.js”这个文件，只需要修改“SiteName”、“SiteUrl”、“ApiKeys”这三项，，前两项就是网站名和网站链接，第三项改成上一步复制的Api Keys，最后还有一个项是“Navi”，是指页面右上角的导航栏菜单项，改不改都行，不影响前面的显示。这个具体的修改细则作者已经在注释中说的很详细了。 整个修改完之后别忘了保存，然后打开 “index.html”，就能看到网站的运行状态了，大概是这样： 接下来把整个项目文件扔到网站的目录下，就算是大功告成了。
-
-
openwrt系统上安装第三方插件 目录： 一.安装插件 1.使用在线方式安装 2.命令行方式安装 3.文件传输方式安装 二.卸载插件 环境说明： 设备：小米R3G 系统：openwrt R20.5 一.安装插件 1.使用在线方式安装 在openwrt界面菜单中依次选择“系统”->“软件包”，打开的界面如下： 在“过滤器”后面的输入框中输入要安装的插件名称，然后查找安装包，切换下方的选项卡到“可用安装包”，从列表中选择一个安装包项，点击前面的“安装”字样就可以安装了，安装完成之后，刷新页面，在“服务”菜单上就能看到了。 使用这种方法安装起来很简单，就像在应用市场查找软件一样，要什么插件直接搜索就可以了。但是有时也会找不到想要安装的安装包。这时候可以选择添加自定义软件源，进入这一页的配置选项卡，在“自定义软件源”下的输入框中输入要添加的新软件源，并保存。 2.命令行方式安装 当想要安装的插件还是无法在线插件库中搜索到时，我们只能选择从诸如github这样的途径安装了，可是这样的途径能提供的都是“.ipk”安装包。那么这时候就需要离线安装插件了。 其中一种方法就是命令行，但是在安装之前先得把安装文件上传到路由器上。理论上来说，安装文件上传到任何位置进行操作都行，但是一般习惯上都是在路由器根目录下的“/tmp”进行操作的，"/tmp"可以理解为一个专门存放临时文件的目录，系统每个用户都有这个目录的读写权限，且系统每隔一段时间回自动清理没有访问过的文件。所以把文件上传到这个目录下进行安装是最适合不过的了。 我们可以选择使用ftp的方式上传插件，或者，把/tmp文件夹设置成共享文件夹，在电脑上访问，直接把安装文件复制到共享文件夹下就可以了。 这里来用共享文件夹的方式来上传插件。在左侧菜单找到“网络存储“->”网络共享“，然后在”共享目录“的选项卡上，添加一个共享文件夹，路径为路由器上的/tmp： 设置完记得在右下角保存。 然后在局域网的另一台计算机上用win+r打开运行窗口，输入“\路由器ip\tmp”，就能访问到共享文件夹了。将“.ipk”安装包复制到这个共享目录下。 然后我们用ssh软件连接到路由器的控制台，使用以下命令安装插件： # 先进入到/tmp目录下 cd /tmp # 安装插件 opkg install 安装包名 # 如果不清楚安装包文件名，用以下命令查看目录下所有文件名称，找到安装包 ls -al 执行完命令之后看到有“success”的字样就说明安装成功。 3.文件传输方式安装 如果不熟悉命令行，还可以使用openwrt自带的文件传输功能，位置为“系统”->“文件传输”，这个功能可以上传文件到路由器，也可以从路由器上下载文件。上传成功之后在下方的“上传文件列表”中点击“安装”，插件就能安装了。 二.卸载插件 卸载软件包比较简单，还是在“系统”->“软件包”菜单下面，默认已经列出了已安装的软件，在下方的列表中选择要删除的软件包，点击前面的“移除”就行了。
-
在网站的下方添加站点运行时间 在网站的下方添加站点运行时间 目录： 在网站的下方添加站点运行时间 1.修改function.php文件 2.修改footer.php文件 环境说明： 博客框架：Typecho V1.1-17.10.30-release 主题：Joe 4.7.7 系统：ubuntu20.04 我的博客目前在用的是 Typecho 框架 + Joe 主题。目前（截止2021 年 3 月）已经更新到了 6.1.0 版本，新版本较旧版本（4.x）在 UI 界面上整体变化不大，主要是多了不少细节，但是同时在设置选项里也阉割掉了不少之前可以设置的项，以及我很喜欢的文章归档功能也没了，所以在新版本主题没有稳定版之前先保持观望状态。可以我又十分眼馋新版本里加入的显示站点运行时间的功能，就去网上找到了些资料，所以有了这篇博客。 2021.07.03 - 更新： 新版本 7.3.0 发布，还是升级了主题，所以本篇问题终结。 以下的方法理论上来说也是适用于wordpress框架的博客，但是由于精力有限（不是我懒），只在 Typecho 框架的 Joe 主题上成功实行，所以本篇博客只讨论 Typecho 的情况。建议在折腾之前生成一次服务器快照，在修改不合适的时候可以回滚到之前的状态。 下面为具体的实施方法： 1.修改function.php文件 进入当前使用的 Typecho 主题的所在目录，找到 function.php 文件，进行编辑。 直接划到文件末尾，找到“ ?> ”结束标志，在结束标志前将以下代码粘贴进去（注意代码格式）： // 设置时区 date_default_timezone_set('Asia/Shanghai'); /** * 秒转时间，格式 年 月 日 时 分 秒 * */ function getBuildTime() { // 在下面按格式输入本站创建的时间 $site_create_time = strtotime('2020-11-29 00:00:00'); $time = time() - $site_create_time; if (is_numeric($time)) { $value = array( "years" => 0, "days" => 0, "hours" => 0, "minutes" => 0, "seconds" => 0, ); if ($time >= 31556926) { $value["years"] = floor($time / 31556926); $time = ($time % 31556926); } if ($time >= 86400) { $value["days"] = floor($time / 86400); $time = ($time % 86400); } if ($time >= 3600) { $value["hours"] = floor($time / 3600); $time = ($time % 3600); } if ($time >= 60) { $value["minutes"] = floor($time / 60); $time = ($time % 60); } $value["seconds"] = floor($time); //在下面可以修改站点运行时间的文字说明和颜色等 echo '本站点运行了<span class="btime" style="color:#6495ED">'.$value['years']. '年'.$value['days']. '天'.$value['hours']. '小时'.$value['minutes']. '分</span>'; } else { echo ''; } } 这段代码里自行修改站点的运行时间以及时间的文字提示，具体修改位置在注释中也有说明，修改完保存。 2.修改footer.php文件 在 Joe 主题中，footer.php 文件在主题目录下的 public 文件夹中，其他主题就不一定了。（反正就是写页脚的那个 php 文件） 打开文件，调用刚才新添加的函数： <?php getBuildTime(); ?> 当然，添加位置决定了运行时间在下方的具体显示位置，我在以下的地方调用了这个函数： 保存之后，刷新之后，就可以查看到效果了，显示位置为页脚的右边：
