微信小程序使用data-传参的注意事项
注意事项如果data-后面接的参数名的命名格式是驼峰格式,那么我们拿数据时要把参数名的大写字母转换成小写字符
代码示例HTML代码1<van-button bind:click="goToModifyFriendPage" data-playerName="{{item.playerName}}">修改</van-button>
JavaScript代码上面的HTML代码是data-playerName,但是通过playerName是拿不到数据的
必须把驼峰格式全部变成小写:playername,如下所示
123goToModifyFriendPage(e) { console.log(e.target.dataset.playername);}
微信小程序实现跳转到其他页面
概述微信小程序实现跳转到其他页面可以使用wx.navigateTo方法,该方法保留当前页面的导航方式,用户可以通过左上角的返回按钮返回到原页面,跳转时还可以传递参数给目标页面
如果想要关闭当前页面并跳转到目标页面,可以使用wx.redirectTo方法
代码实现不传递参数123wx.navigateTo({ url: '/pages/somePage/somePage',})
传递参数直接在url中拼接要传递的参数
123wx.navigateTo({ url: '/pages/somePage/somePage?id=1&name=example',})
在目标页面中,通过onLoad生命周期函数接收这些参数
1234onLoad: function(options) { console.log(options.id) // 输出: 1 console.log(options.name) // 输出: example}
Element Plus表格实现多选数据(JS实现)
添加el-table-column标签添加后会出现一列单选框可以多选数据
1<el-table-column type="selection" width="44" />
el-table标签加入@selection-change属性勾选单选框时会触发@selection-change属性的selectSome方法
12345<el-table :data="tableData" stripe style="width: 100%" :border="true" max-height="530" @selection-change="selectSome"> <el-table-column type="selection" width="44" /> ......</el-table>
JavaScript代码selectSome方法的参 ...
MySQL修改数据库和数据表的字符集以及校对规则
概况问题我一般新建数据库时,字符集选用utf-8,校对规则选用utf8_general_ci
然而最近我发现如果存放的数据里面有Emoji表情符号时,会报错无法把数据添加到数据库中
原因我查了一下utf-8字符集不支持存入Emoji表情符号,要存入Emoji表情符号则要使用utf8mb4字符集,然后校对规则使用utf8mb4_unicode_ci,所以一开始创建数据库时推荐使用utf8mb4字符集
其它说明MySQL数据库的字符集以及校对规则和数据表的关系:
表默认使用数据库的字符集和校对规则,也可以选择其它的(可以和数据库的不一样),不过建议弄成一样的
修改过程先备份数据库在进行任何修改之前,请确保对数据库进行备份,以防止意外数据丢失
选中要操作的数据库1USE 你的数据库名称;
查看字符集和校对规则修改之前先看一下当前数据库是什么字符集和校对规则
12345#查看字符集SHOW VARIABLES LIKE 'character_set_database';#查看校对规则SHOW VARIABLES LIKE 'collation_database& ...
微信小程序wx.previewImage退出预览图片后自动触发onShow()的解决办法
问题描述微信小程序使用wx.previewImage预览图片时,退出后会自动触发onShow()方法,但是我不需要触发onShow()方法
解决办法首先在页面初始数据中添加一个refresh字段,用于控制是否执行onShow()方法
1refresh: false
在预览图片JavaScript代码中将refresh设置为true
1234567seeImage(e) { wx.previewImage({ current: e.target.dataset.imageurl, // 当前显示图片的http链接 urls: [e.target.dataset.imageurl] // 需要预览的图片http链接列表 }) this.data.refresh = true},
在onShow方法加入下面代码,当refresh为true时onShow()方法不往下执行,同时设置为false
1234if (this.data.refresh) { this.data.refresh = false return}
MySQL命令行常用命令
说明本博客的默认数据库名称是db_student,默认表是t_student
MySQL命令行必须以;或\g结束,不然按回车键是换行
进入MySQL命令行执行下面命令前需要先打开cmd进入MySQL安装目录的bin文件夹,再执行下面命令即可进入MySQL命令行
1mysql -h localhost -P 3306 -u root -p
参数
说明
-h
后面接IP地址(有空格),如果是本地可省略
-P
后面接端口后(有空格),如果是3306可省略
-u
后面接用户名(有空格)
-p
后面可以接密码(无空格),但是这是不安全的,不建议在命令上输入密码
如果不想进入bin文件夹,打开cmd直接可以使用mysql等命令,我们需要去配置系统变量Path,把bin文件夹的路径添加进去,我的路径是D:\Java\mysql_5.6.24_winx64\mysql-5.6.24-winx64\bin
命令行命令退出命令行1quit
显示所有数据库1show databases;
使用数据库在操作数据库之前必须先使用(切换)对应的数据库
1use db_s ...
使用Apifox Helper插件自动生成接口文档
介绍Apifox Helper是Apifox官方开发的一个IntelliJ IDEA插件,可以根据Controller层的接口方法快速在Apifox中自动生成接口文档,以进行接口测试
Apifox的官网地址:Apifox - API 文档、调试、Mock、测试一体化协作平台
使用文档:帮助中心 | Apifox 使用文档
使用生成API访问令牌根据下图生成一个访问令牌,该令牌只有在创建时才能看到,所以要保管好,不然忘记了就只能再重新新建一个
获取项目ID打开新建的项目,根据下图获取项目的ID
配置Apifox Helper打开IntelliJ IDEA的设置后,根据下图配置Apifox Helper,模块项目ID配置可以有多个
生成接口文档
生成一个类的某个方法的文档
生成一个类的全部方法的文档
生成多个类的全部方法的文档
配置Apifox请求的前置URL打开项目后,根据下图配置请求的前置URL,这样每次请求都会自动加上了
使用npkill查找和清理node_modules包
介绍进行前端开发时,电脑上会有很多node_modules包,会占用很多磁盘空间,我们可以把一些暂时不会打开的项目的node_modules包删除掉,等到要运行项目的时候再安装回来,如果我们一个个手动删除的话,会很麻烦
npkill可以很好的解决上述问题,不仅可以快速找到某个文件夹下的全部node_modules包,还可以根据路径、大小和上次修改时间进行排序,管理起来更加方便
安装打开cmd然后执行下面命令即可完成安装,不安装也可以使用npkill
1npm i -g npkill
使用cmd进入一个文件夹后,执行下面命令即可搜索该文件夹下的全部node_modules包,方向键的上下可以选择node_modules包,用空格键删除,直接删除不会有确认提示
不安装使用1npx npkill
安装后使用1npkill
参数一般只用到-s参数根据size进行排序
参数
说明
默认
-c, --bg-color
更改行突出显示颜色,可用颜色有: blue,cyan,magenta,white,red ,yellow
blue
-d, --directory
设置要开始 ...
IntelliJ IDEA使用MyBatisX插件生成基础代码
介绍使用MyBatis-Plus开发时,一般开发的顺序都是:新建数据库表、实体类、Mapper接口、Mapper.xml文件、Service接口、Service接口实现类,然后才进行相应业务的开发工作
上面的操作都是重复性的,如果已经熟悉了MyBatis-Plus的基本使用,经常做这些重复性的工作对我们没有什么好处,如果这些操作可以自动完成,就可以提高工作效率了
MyBatis-Plus官方出了一个名叫MyBatisX的插件,可以有效解决上述问题,我们只需要自己手动在数据库中新建一张表,然后就可以使用插件自动生成实体类、Mapper接口、Mapper.xml文件、Service接口、Service接口实现类的基础模板了
使用安装直接到IntelliJ IDEA的插件市场安装即可
连接数据库需要在IntelliJ IDEA中配置数据源,具体操作步骤查看博客:IntelliJ IDEA 连接 MySQL 数据库 | LeDao’s Blog (zoutl.cn)
开始生成右键点击对应的数据库表,然后选择MybatisX-Generator
然后配置生成代码的存放位置,图片下的表格是参数的 ...
Vim常用命令或快捷键
介绍Vim是Vi的升级版本,可以当作Vi来使用,完全替代Vi,也就是说:不要使用Vi了,而是使用它的升级版本Vim
下面只列举了一些我常用的命令或快捷键,并不是列举全部,其它没有列出的命令或快捷键如果用到了就在下方放出
常用命令说明我把Vim命令的类型分为命令模式、输入模式和底线命令模式,vim 文件名打开文件后就是命令模式,在命令模式下按下i键就切换到了输入模式,在命令模式下输入:就切换到了底线命令模式
命令模式vim 文件名打开文件后就是命令模式
命令或快捷键
说明
:
切换到底线命令模式
i
切换到输入模式
x
删除当前光标所在处的字符
dd
删除光标所在行
/关键词
向下搜索关键词,按n查找下一个搜索结果,按N则查找上一个
?关键词
向上搜索关键词,按n查找上一个搜索结果,按N则查找下一个,和上面相反
v
切换到可视化模式,一般用于删除一段文本
r
切换到单字符替换模式,用于替换一个字符
R
切换到多字符替换模式,用于替换多个字符
输入模式在命令模式下,按下i键就切换到了输入模式,输入模式没有什么好说的,就和平时在Windows系 ...