- 博客(51)
- 收藏
- 关注
RSS订阅原创 Linux学习笔记（二）
linux系统很多软件支持使用systemctl命令控制启动、停止、开机自启systemctl start | stop | status | enable | disable 服务名
2024-07-13 16:07:26
322
原创 Linux学习笔记（一）
命令格式command [-options] [parameter]command：命令名，相应功能的英文单词或单词的缩写[-options]：选项，可用来对命令进行控制，也可以省略parameter：传给命令的参数，可以是零个、一个或者多个
2024-07-05 22:23:47
544
原创 element-ui input 输入框赋值后，无法再输入的问题解决
初始值form的属性没有定义，后续直接给form添加属性并赋值，vue没有监听到form值变化，输入选项就没有重新渲染，所以出现无法输入（实际已赋值）。
2023-11-01 08:38:37
2419
转载 js获取一段时间内的工时，排除去周末、非工作时间
js获取一段时间内的工时，排除去周末、非工作时间需求：每天8小时, 上午8:00~12:00, 下午13:00~17:00 (排除周六、周日)。
2023-10-26 16:23:15
407
原创 echarts自动轮播tooltip
1. 将自动轮播的工具函数封装到 utils/echart-tooltip-carousel.js。2.在vue3中使用的示例。
2023-08-10 08:30:00
624
2
原创 quill 富文本编辑器 @提及
3. 在vue2中使用的示例，已省去无关代码。(示例来自自行封装的Quill.vue通用组件)无论哪个示例，记得引入css样式。在源码的 dist/quill.mention.css。使用插件quill-mention实现在quill 富文本编辑器使用@或#提及用户。
2023-08-09 17:20:37
995
原创 当一个 form 元素中只有一个输入框时，在该输入框中按下回车提交表单，并阻止默认的表单提交
当一个 form 元素中只有一个输入框时，在该输入框中按下回车，会默认提交该表单，导致刷新整个页面。而需求是不可以刷新页面，而是异步提交表单。监听输入框的回车事件 @keydown.enter.native="shipContainerBill"，自行提交表单。W3C 标准: 当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。加上 @submit.native.prevent 阻止form表单默认提交事件。
2023-06-08 08:32:08
409
原创 element-ui table 列渲染错乱
当table表格通过v-if配置是否显示列，且列的数量过多时（大概10列以上），就会出现渲染混乱。(例如：页面组件是缓存的keep-alive，首次渲染表格没问题。但是切换到其他组件再切换回来时，表格列就会出现错乱。通过v-if控制表格的列是否展示，每列通过showColumn函数检查用户的配置，返回true或false（是否显示该列）。每一列添加唯一key属性值，问题解决。
2023-04-23 16:45:37
519
1
原创 用vue做一个音乐播放器
开源协议MIT Licensegithub: https://github.com/huangweizhi/xz-music.gitgitee: https://gitee.com/weizhihuang/xz-music.git使用了开源的网易云音乐 NodeJS 版 APIvue全家桶 vite + vue3 + vue-router4 +pinia2
2023-03-15 17:00:43
669
原创 element-ui table 设置表格滚动条位置
在切换不同页面时（被 keep-alive 缓存的组件间切换），页面中的element-ui table的滚动条位置没有停留在原来的位置。目前需要切换不同的页面返回来后，滚动条保持在原来的位置。
2023-03-01 08:32:26
4553
原创 Vue history模式路由 部署到二级目录 配置
增加一个环境变量VUE_APP_BASE_URL，将环境变量VUE_APP_BASE_URL值设为 '/cms'。3.1 改为hash模式路由，将router mode配置注释掉。3.2 修改网站目录，对应修改VUE_APP_BASE_URL。修改publicPath（打包后公共资源文件访问路径）。示例：部署到二级目录/cms。2、vue2项目配置。
2023-02-15 12:22:04
1071
原创 nginx代理匹配的上下文路径是否带走
，域名+端口 后面不带 / 则带走上下文路径，主域名后面带 / 则不带走上下文路径。location匹配路径，而匹配的上下文路径是否带走主要看proxy_pass。），相当于域名+端口后面带了 / ，所以不带走上下文路径。(不带走上下文路径)(不带走上下文路径)(不带走上下文路径)
2023-02-10 12:05:40
751
原创 OBS华为云对象存储 签名计算
OBS提供的SDK已集成了签名计算，建议您使用SDK进行开发。但是在没有提供对应SDK的场景下（小程序），这时候就要自行计算。以Header中携带签名为例，计算得到签名（Header中携带签名、URL中携带签名。基于浏览器上传的表单中携带签名。OBS根据应用场景，提供了。）后，返回签名头域（
2023-02-07 12:35:36
782
原创 微信小程序页面wxml中使用wxs，实现“过滤器”功能（处理页面中的数据）
WXS（WeiXin Script）是小程序的一套脚本语言，结合。，可以构建出页面的结构。
2022-12-09 11:07:24
1312
原创 Promise.all()统一处理未知数量的Promise实例(遍历生成)
Promise.all()统一处理未知数量的Promise实例(遍历生成)
2022-11-24 17:00:39
522
原创 微信小程序检测、更新版本，版本更新管理器wx.getUpdateManager()
解决：可以使用版本更新管理器wx.getUpdateManager()，在每次进入小程序时执行一遍版本更新的检测。问题：小程序发布后（全量发布），若用户不是首次打开小程序，可能会出现不能立即更新到最新版本的情况。全部代码如下噢，和官方文档的示例差不多，/app.js。
2022-11-18 14:02:55
1658
原创 解决vue-router4缓存页与不缓存页切换失效的问题
路由配置中，name要唯一且和组件名称要相同，否则缓存无效。keepAlive用于说明该组件是否缓存。这样会存在一个问题，当从缓存页切到不缓存页，再从不缓存页返回到缓存页时，缓存失效，缓存页会重新加载。还是按照官方的方法来吧，使用include属性。
2022-10-14 09:52:29
1698
1
原创 vue-devtools安装（v6.4.1）
导入devtool插件的路径是 D:\HBuilderProjects\devtools-6.4.1\packages\shell-chrome。4.4、选择文件夹 D:\HBuilderProjects\devtools-6.4.1\packages\shell-chrome。3、我的项目所在地址是 D:\HBuilderProjects\devtools-6.4.1。2、下载并解压到本地后，在项目根目录运行。4.1、右上角点开 更多程序-扩展程序。4.3、加载已解压的扩展程序。4.2、打开开发者模式。
2022-09-28 10:29:06
962
原创 将nuxt.js项目部署到域名二级目录下
6.2、打包后正常是将如下四个文件/夹复制到服务器对应目录下，如果有自定义的中间件服务，也要一起复制过去。引入了外部(static目录下)的css、js，或者是使用了axios，需要同步修改相对应的配置。6.3、在服务器对应目录下，运行npm install 安装依赖，npm start 启动项目。2、先配置用于区分开发环境(dev)和生产环境(prod)的env变量，参考我的文章。说明一下：配置router即可实现变更应用的根URL，例如像下面的配置，项目将运行在。6、部署到域名下的二级目录。
2022-09-25 12:30:09
2725
原创 nuxt.js中使用cross-env配置env环境变量
也可以添加多个变量，例如 ：cross-env NODE_ENV=prod baseURL=http://localhost:3100 nuxt build。在需要的脚本之前加入 cross-env NODE_ENV=dev ，表示执行该脚本时，添加env环境变量NODE_ENV（变量名），dev(值)。process.env.NODE_ENV 或 context.env.NODE_ENV。4、配置完成，现在可以通过两种方式访问env环境变量。3、在nuxt.config.js添加如下配置。
2022-09-25 10:15:31
2106
4
原创 js实现表格按行滚动
3、滚动控制：为了实现按行滚动，需要拿到div表格的每一行的高度，然后定时、逐行执行滚动（即对tbody滚动高度值定时进行累加，每次累加表格行的高度，然后tbody的style属性的top取滚动高度值的负值）。1、表格模仿table的结构，使用div元素构建，其中在tbody外包了一层div(tbody-container)，以便对超出tbody-container的内容进行隐藏。最近又有同样的需求，不过是vue项目，所以又做了一个基于 js实现的表格按行滚动，原理相同。优化了表格内容见底后即滚回顶部。
2022-09-02 11:12:18
2846
原创 react-native-navigation 实现底部导航栏布局（Android）
应用中的每个屏幕组件都必须使用唯一的名称进行注册，Navigation.registerComponent()。1、在react-native项目中安装react-native-navigation。2、 导航组件注册及配置文件src\navigation\index.js。RN 0.60 或更高版本，可以通过自动链接来执行必要的配置，运行。3、更改入口文件index.js。示例项目安装的模块的版本。...
2022-08-29 11:23:23
1536
1
原创 Vue 高德地图 输入提示和POI搜索插件结合使用 拾取对应地点坐标
7、效果：在搜索框输入地点名称，产生输入提示，点击某个提示选项后，进行POI搜索，地图会自行标记出搜索地点。点击地图任意位置，或者POI搜索结果的marker，都会拿到相对应的坐标。4、JSAPI 的加载：这里使用官方文档推荐的方式，使用 JSAPI Loader ，并按 NPM 方式使用 Loader。1、准备好高德地图的key和安全密钥jscode，key的平台类型是Web 端 ( JSAPI )。如上述代码，在配置文件中设置安全密钥，这样只要外部引用key就会执行 设置安全密钥 的代码。...
2022-08-26 11:24:51
4512
12
原创 react-native-vector-icons的使用（android）
示例中：react-native版本0.66.4 react-native-vector-icons版本9.2.0。2、在文件android\app\build.gradle中添加如下代码。
2022-08-10 20:52:48
991
原创 react-navigation的使用，实现app底部导航栏
配置文件android/app/src/main/java//MainActivity.java。修改app/nav/Nav.js，options添加tabBarIcon属性，它接收一个函数返回reactnode。Android需要进行如下配置。6、icon图标的引入(使用。1、在项目中安装所需的包。3、将整个应用程序包在。4、封装一个导航组件。......
2022-07-27 16:26:57
2236
原创 在element-ui menu组件基础上，封装一个动态侧边菜单栏组件
组件由两个文件构成，都放在了Sidebar目录下，分别是index.vue和SideItem.vue，使用时直接引入index.vue即可。菜单栏数据从路由表获取，示例中通过mapGetters从store中获取permission_routes。在不考虑权限时，这些数据可以直接从router/index.js文件引入，permission_routes是根据登录用户权限筛选后的路由。示例中路由表的数据格式如下：菜单栏组件逻辑：菜单栏由el-menu整体包裹，可展开的菜单项由el-submenu包裹，
2022-07-12 20:58:57
1659
2
原创 vue-i18n 插件实现国际化，支持切换不同语言
文档https://kazupon.github.io/vue-i18n/zh/started.html 1、安装依赖包vue-i18n$ npm install vue-i18n --save2、国际化相关的代码都放在项目的src/lang目录下src/lang/en.jssrc/lang/zh.jssrc/lang/index.js如果项目使用了element ui，element ui也需要进行国际化，它可以与 vue-i18n 搭配使用实现多语言切换https://element.ele
2022-07-07 20:28:26
720
原创 在 Vue.js 中使用 Font Awesome
官方文档https://fontawesome.com/docs/web/use-with/vue/1、安装核心包：npm i --save @fortawesome/fontawesome-svg-core2、安装Font Awesome Vue组件:Vue 2.xnpm i --save @fortawesome/vue-fontawesome@latest-23、按需安装图标包：免费图标npm i --save @fortawesome/free-solid-svg-iconsnpm i --
2022-06-23 11:16:39
547
原创 git 本地仓库关联新的远程仓库
1. 删除已关联的远程仓库 $ git remote rm origin2. 关联新的远程仓库 $ git remote add origin http://localhost:3000/huangweizhi/jqwlscan.git3. 推送本地分支 $ git push -u origin master $ git push -u origin dev
2022-06-22 16:25:21
517
原创 Vue alias 配置路径别名，解决无法快捷跳转问题
配置路径别名，在项目vue.config.js文件中添加如下配置：这样就可以在项目中使用别名了： 但是会有一个问题，Ctrl+鼠标左键 点击引入的login，无法跳转到login方法。解决方法：项目根目录新建jsconfig.json文件，配置如下:重启vscode即可。...
2022-06-20 17:02:25
2204
1
原创 react或vue项目部署到nginx服务器、history路由模式、nginx代理解决跨域的配置
需求：后台服务地址：http://127.0.0.1:5000前端地址：http://127.0.0.1 （history路由模式）前端向后台发送请求的地址：http://127.0.0.1/api配置： nginx.conf配置文件：
2022-06-03 19:37:22
1031
原创 element-ui表格行不对齐
element-ui在表格存在固定列的情况下，首次渲染会出现滚动列的部分和固定列的部分不对齐的情况。解决方法：el-table添加属性ref="table"，在调用后台接口获取表格数据完成之后，调用表格方法doLayout()，对表格进行重新布局。async getData() { let queryInfo = {...this.searchForm, ...this.sortObj} queryInfo.warehouseCode = this.$store
2022-05-13 08:44:50
2644
原创 xlsx将html table导出为excel表格
示例中已省略部分无关的代码。一、安装xlsx$ npm install xlsx --save二、导出excel方法将导出excel方法写在混入中，在每个需要的页面混入。isShowTableColumn 控制不需要打印的列 (XLSX会根据拿到的table的dom来转换成excel，将isShowTableColumn设为false，临时将不需要展示的列从dom中删除)，打印前将isShowTableColumn设为false，等dom更新后（Vue.nextTick方法）再调用XLS
2022-04-26 12:27:02
1155
原创 mongodb常用命令
cmd打开本地mongo：mongo查看数据库：show dbs创建数据库：use wechat删除数据库:db.dropDatabase()创建集合：db.createCollection("words")删除集合：db.words.drop()查询文档：db.words.find()_______________________________________________扩展工具命令（需安装mongodb-database-tools）:在m
2022-04-17 15:44:03
137
原创 node-windows实现将Node.js项目作为Windows服务运行
一、项目安装node-windows$ npm install node-windows@1.0.0-beta.6最新版本1.0.0-beta.7出现无法启动服务，这里用的版本是1.0.0-beta.6二、在项目根目录增加两个文件nw.js和nw-uninstall.jsnw.jslet path = require('path'); let Service = require('node-windows').Service; let svc = new Service
2022-04-11 10:06:48
3054
原创 在vue项目中使用less全局变量
一、使用less使用less，需要安装开发依赖：$ npm install lessless-loader --sav-dev在项目中使用less：二、less全局变量在全局less文件中定义全局变量：在其他地方引用less全局变量:此时全局变量并未生效，需要安装开发依赖：$ npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-dev并在vue.confi...
2022-03-23 15:21:20
15075
4
原创 vue 过滤器使用
数据处理函数 utils/index.js:// 字节转换为单位大小export const bytesToSize = (bytes=0) => { if(bytes <= 0) return '0 B'; var k = 1024 var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] var i = Math.floor(Math.log(bytes) / Math.log(k)) re
2022-02-15 14:45:26
225
原创 vue-quill-editor的使用
1、安装vue-quill-editor模块：$nmp installvue-quill-editor --save2、安装quill-image-extend-module模块（可选，用于将图片上传到服务器）：$nmpinstallquill-image-extend-module --save3、自定义中文样式（可选），src/assets/css/global.css:/* 富文本编辑器 */.editor { line-height: normal !important;}...
2022-02-15 14:28:37
1792
原创 vue-router 路由导航守卫使用
未登陆时，前端路由自动跳转到登录界面。登陆时，允许访问其他前端路由。// src/router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'const Login = () => import('../views/Login.vue')const Home = () => import('../views/Home.vue')const Welcome = () => import('..
2022-01-19 16:45:59
416
原创 vue项目中使用 axios 实现拦截网络请求，并添加请求头
在vue项目入口文件main.js中添加如下代码：// main.js// 引入axiosimport axios from 'axios'// 设置url地址axios.defaults.baseURL = 'http://localhost:3000/admin/'//request请求拦截axios.interceptors.request.use(config => { // 添加请求头示例(自行定义) config.headers.Authorization =
2022-01-19 16:33:49
1172
chrome浏览器vue-devtools插件v6.4.1
2022-12-12
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人