- 博客(71)
- 收藏
- 关注
RSS订阅原创 根据pdf或word 文档的地址链接打印文件内容
需求点击一个按钮，可以打印后端返回的一个pdf或者word 文档的地址思路点击打印可以弹出一个预览modal然后通过iframe先预览打印内容实现如果是pdf文件src直接为下载地址<iframe src="https://invtest.nntest.cn/fp/Pj_EV98RTt2gGddvGE24TIn6PCvHnCTeScQGyVchKHNcHWCDxjkofCEY3KXuN3GhVkeWSVc7DYwDDQVZUAR8Jw.pdf" width="600" height="
2022-04-25 21:40:25
769
原创 React Hooks 中useContext api的用法
创建一个react项目可以参考：https://blog.csdn.net/weixin_43398820/article/details/123776338背景正常组件之间传递属性如下图所示：app.js中有个全局属性theme，如果想把theme对象作为属性传递到其它子组件中：Header->User->Button如果不用hooks可以像上面那样一层一层的传递下去。useContext的使用useContext主要解决组件多层传递属性的问题，使用useContext就可以在
2022-04-03 16:29:31
1277
原创 React自定义hooks学习
创建一个react项目可以参考：https://blog.csdn.net/weixin_43398820/article/details/123776338使用自定义hooks实现2个小例子例1 获取鼠标当前坐标的自定义hooks新建src–>hook->useMousePosition.tsx文件注：自定义hooks必须以set命名import React,{useState,useEffect} from "react";//因为要返回positions对象所以函数不能
2022-04-01 00:13:14
1368
原创 React Hooks 中useEffect api的用法
创建一个react项目可以参考：https://blog.csdn.net/weixin_43398820/article/details/1237763381. 使用useEffect实现标题更新（无需清除的副作用）import react,{useState,useEffect} from 'react';const LikeButton: react.FC = ()=>{ //like为一个变量默认值为0，setLike更新like的函数 const [like,set
2022-03-30 21:47:09
865
原创 React Hooks 中useState api的用法
利用hooks中的useState实现一个点赞按钮创建一个react项目可以参考：https://blog.csdn.net/weixin_43398820/article/details/123776338在src目录下新建一个components–>LikeButton.tsx文件import react,{useState} from 'react';const LikeButton: react.FC = ()=>{ //like为一个变量默认值为0，setLik
2022-03-27 18:28:58
702
原创 react+typescript 编写一个简单的hello world
开发环境配置利用create-react-app脚手架创建一个支持typescript语法的项目create-react-app官方文档地址：https://create-react-app.bootcss.com/docs/getting-started执行安装命令npx create-react-app my-app --template typescript注：最新的版本的npm需要加上–templatenpx是在安装npm5.2.0+时自动安装的简单了解了一下：npx 会自动查
2022-03-27 17:43:17
2364
原创 css根据元素中子元素的个数设置不同的样式
背景一个div中图片的尺寸根据后台返回的个数决定，要求：一张图片尺寸690px；2张图片每张占320px，4张图片两行展示，每行2张各占320px。大于3张图片，每行3张排列，每张图片各占200px。实现效果...
2021-11-28 13:14:14
1061
原创 手动实现一个输入框组件
背景taro h5中想要实现一个样式如下的输入框：问题：taro组件和taro-ui组件中都没有这种样式的组件，taro h5 中还不支持修改placeholder的样式，自己尝试着实现一个input组件，更能灵活的定义其中的样式。实现js代码import Taro, { Component } from '@tarojs/taro';import { View } from '@tarojs/components';import { AtIcon } from 'taro-ui';i
2021-09-11 10:40:23
539
原创 taro将页面滚动到指定位置
背景实现点击一个按钮可以滚动到当前页面的指定位置。问题首先想到使用taro自己的api （pageScrollTo）实现滚动，查看文档发现selector 参数刚好是自己需要的。（https://taro-docs.jd.com/taro/docs/2.x/apis/ui/scroll/pageScrollTo）然后就写了一个简单的函数function scrollIntoView (id) { Taro.pageScrollTo({ selector: '#id', })
2021-08-28 10:14:26
5291
原创 taro中多行文本的展开和隐藏
实现效果：import { Text, View } from "@tarojs/components";import Taro, { Component } from "@tarojs/taro";import classNames from "classnames";import "./index.scss";const isH5 = process.env.TARO_ENV === "h5";class Test extends Component { state = {
2021-08-18 22:05:19
1212
原创 小程序中文本自动换行
后端返回的文本自动换行要求后端返回的文本在需要换行的地方增加\n原生小程序中直接使用text标签即可，text中的文本遇到\n会自动换行。 // data: { // message:'这是第一个换行；\n,这是第二个换行；\n这是第三个换行；\n' // },<text>{{message}}</text>taro框架中换行 // state = { // message: "这是第一个换行；\n,这是第二个换行；\n这是第三个换行；\
2021-08-17 22:03:16
4673
原创 JSON的解析和序列化
JSON的解析和序列化JSON.stringify()把一个JS对象序列化为一个JSON字符串。stringify()函数的基本用法该函数可以接受三个参数。第一个必填参数为需要序列化的JS对象，第二个可选参数是过滤器，可以是数组或者函数；第三个可选参数是用于缩进结果JSON字符串的选项。const people = { name: 'petter', age: 22, job: 'doctor', hobby: ['run', 'music', 'swim'
2021-08-13 00:00:51
343
原创 《JavaScript高级程序设计》-- 初识对象
ECMAScript 中的对象可以理解成一个散列表，其中的内容就是一组名/值对，值可以是数据或者函数var person = { name:'petter', age:26, job: 'software engineer', sayName(){ console.log(this.name); }}console.log(person.job) //software engineerperson.sayName(); //petter创建了一个名为person的对象，包
2021-07-04 13:07:49
130
1
原创 《JavsScript高级程序设计》-- 函数
文章目录函数定义函数的参数默认参数值参数扩展与收集函数作为值传递函数内部argumentsthiscallernew.target函数的方法函数定义函数声明function sum(a,b) { return a+b;}函数表达式let sum = function(a,b){ return a+b;};与变量初始化一样，函数末尾有分号，该函数可以通过变量sum引用箭头函数let sum = (a,b)=>{ return a+b;};
2021-06-27 23:37:55
110
原创 css 特指度的计算
css 特指度的计算概述同一个元素可能会被多个规则选择，如果每个规则的选择符都不尽相同，那么如何选择最终匹配的规则呢？ /* h1标签显示绿色 */ body h1{ color: green; } h1 { color: gray; } /* h2显示红色 */ h2.grape{ color: red; } h2{ color: purple; } /* h3标签显示黄色 */ #answer{ color: y
2021-06-24 23:15:48
119
原创 《JavaScript高级程序设计》-- Map
Map数据结构是ES6新增的，主要实现对“键/值”式存储，与Object只能使用数值、字符串、符号作为键不同，map可以使用任何JavaScript数据类型作为键。创建创建一个空映射const m = new Map()m instanceof Map //true创建的同时初始化实例，传入的参数需要时可迭代的对象，包含键值对数组。const m1 = new Map( [ ['key1','val1'], ['key2','val2'] ]);console.log(
2021-06-20 16:46:29
97
原创 Map和Object的性能对比
Map和Object的性能比较内存占用存储单个键/值对所占用的内存数量都会随着键的数量线性增加。给定固定大小的内存，Map大约可以比Object多存储50%的键/值对。插入性能向Object和Map中插入新键/值对的消耗大致相当，当涉及到大量的插入操作时，Map的性能更佳function initObj(){ let obj = new Object(); let begin = Date.now(); for(let i=0;i<1000000;i++) { obj['num'+
2021-06-20 16:29:06
1806
原创 《JavaScript高级程序设计》 -- String类型
ECMAScript常用的原始类型有String类型，我们可以通过字面量直接生成一个字符串var str = 'hello world!'str.length //12str.charAt(2) //l原始类型的数据本身不是对象所以不应该有属性和方法才对但是String类型的原始值却可以引用一些方法可以发现声明的字符串变量str可以正常的调用一些方法，这两个方法都是以读的方式访问的，一般以读的方式访问字符串时后台都会自动执行以下三步：创建一个String类型的实例调用实例上的特定方法
2021-06-14 15:36:33
373
3
原创 《JavaScript高级程序设计》-- Array类型
创建数组Array构造函数创建数组创建一个空数组var arr = new Array();//[]arr.length //0创建一个length为10的数组var arr = new Array(10)arr.length //10创建包含指定元素的数组//ECMAScript中数组的每一个元素数据类型可以不一样var arr = new Array(1,2,'a',4,'b')//[1, 2, "a", 4, "b"]arr.length //5注：调用Arr
2021-06-13 16:43:01
535
2
原创 less变量的基本用法
less中变量的基本用法使用@符号来定义变量less转换为css的在线工具：https://www.matools.com/less使用：1. 样式属性值可以直接通过@variable来使用定义好的变量(最基本的用法)@width:100px;@height:@width+50px;#container{ width:@width; height:@height;}编译为：#container { width: 100px; height: 150px;
2021-06-05 16:03:57
2668
原创 electron集成arm64架构的nodejs addon插件
随着macos M1芯片的发布，当前的electron客户端应用要适配arm64架构。搭建mac上面的编译环境，可以根据该链接查看当前支持M1应用的具体版本https://isapplesiliconready.com/zhxcode-v12.2node-v15.1.0python-v3.9.1electron-v11.1.0编写addon代码强烈建议使用napi实现addon，nan api适配性很差，不通版本的electron需要重新编译，并且有些高版本
2021-02-27 16:27:24
3934
2
原创 解决electron-builder打包的exe安装包在window8.1上安装失败的问题
背景在win8.1上面安装electron-builder打包的exe安装包提示内存只读访问失败，安装报错如下图解决方法一通过electron-builder打包应用为msi安装包或者绿色免安装包"build": { "win": { "target": [ { "target": "msi", "arch": [ "x64", "ia32" ] }, {
2020-12-29 09:06:51
1225
3
原创 mysql使用replace into 实现数据的修改和插入操作
当数据存在时根据一个外键去修改该值，当数据不存在时，插出入一条数据。如上图所示：如果eid已经存在则修改eid对应的该条数据，如果eid不存在则插入该条数据。直接通过repalce into插入replace into empsalary (eid,sid) VALUES (9,13)执行结果查看结果可以看到最终的结果并不是我们想要的，没有修改掉eid为9的数据而是在最后另追加了一条数据。想要根据eid去判断是增加还是去修改数据，eid索引必须为Unique。修改eid的索.
2020-11-29 12:49:40
608
原创 electron-vue构建的应用引入font awesome图标库
项目中使用了element中的icon图标，图标集合还是有点少的，可以增加font awesome图标库（font awesome官网）引入font awesome下载font awesome模块npm install font-awesome --savemain.js写入：import 'font-awesome/css/font-awesome.min.css';组件中引用例如在组件中引入麦克风图标<i class="fa fa-microphone" aria.
2020-11-26 18:45:19
673
原创 解决electron windows应用在删除安装目录后重新覆盖安装失败的问题
一. 背景electron-builder打包的windows 应用，因为把之前安装好的exe所在的整个目录删掉了，重新覆盖安装时出现安装失败的情况。二. 解决方法一package.json中修改build中的appId的值，重新打包安装"build": { "appId": "com.net.app" }方法二 每次打包都要重新修改appId值比较麻烦，可以使用下面的方法删除注册表中的信息，重新安装 "nsis": { "guid.
2020-11-26 09:23:09
3843
原创 electron mac应用在安全性与隐私授权后，点击强制退出，应用弹出异常退出报告提示
一. 背景mac应用因为要获取系统的一些权限（例如麦克风和屏幕录制权限）才能正常运行，在手动授权后，会强制退出当前运行的应用，退出应用系统弹出了异常退出报告，具体异常信息如下：二. 解决系统强制退出时（或任务管理器中直接终止一个进程），应用程序因为资源没有及时释放等原因导致程序异常退出。系统会抛出SIGABRT的信号，可以捕获abort信号，以便释放资源。electron app api中有quit事件可以监听到abort信号 app.on('quit',() =>.
2020-11-25 09:14:15
1594
1
原创 vscode中自定义vue模板（name默认为文件名）
配置模板代码File（文件） -> preperences（首选项） -> User Snippets(用户代码片段)输入vue选中vue.json在vue.json文件中输入下面的代码片段{ "vue-template": { "prefix": "vueTemp", "body": [ "<template>", "
2020-10-17 16:00:12
3449
3
原创 nw加载node模块报错The specified module could not be found. C:\Users\zl\AppData\Local\Temp\nw243\lib\*.node
背景nw应用打包，nw是0.12.3版本的，因为使用了第三方的node模块，在打包成exe后报错找不到node模块。步骤其中BJSDK目录下包含’.node’文件，该文件是在index.html中加载的，选择所有要打包的文件，打包成一个zip包。（注：1. 不要把所有文件放在一个文件夹中去打包这个文件夹。2. 要打包成zip包，验证打包成rar和7z最终都会打包失败。）把src.zip压缩包重命名为‘*.nw’文件把app.nw复制到nw.exe同级目录下，可以直接用鼠标把app.
2020-09-10 23:19:10
1388
原创 spring boot 项目使用redis和nginx实现session共享
实现session共享的方案如上图所示，当tomcat想要往session写数据时都往redis中去写，相应的如果想要读取session中的数据时也都从redis中读取，这样就可以实现不同的服务器共享session中的数据了。工程创建引入依赖web、session、redis、如果spring boot版本在2.0.15以上还需要引入security。对应的依赖为：<dependency> <groupId>org.springframework..
2020-08-29 00:10:40
171
原创 spring boot基础 -- redis环境搭建及整合redis
下载redis下载地址 https://github.com/tporadowski/redis/releases。启动redisredis-server.exe redis.windows.confredis5远程连接必须设置密码查看默认密码：127.0.0.1:6379> config get requirepass1) "requirepass"2) ""配置密码：127.0.0.1:6379> config set requirepass 123456OK.
2020-08-22 14:29:01
145
原创 使用electron-vue构建的应用打包后el-dialog弹出框右上角关闭按钮显示异常
背景：electron-vue中使用了element-ui中的el-dialog来显示弹出框，在打包后el-dialog右上角的关闭按钮显示异常，具体现象如下图所示：分析查看错误信息显示element-icons-fonts.woff 和 element-icons-fonts.ttf没有找到。通过asar解压app.asar文件中可以看到文件在element-fonts中但是最终查找是在electron-main-fonts去查找了。解决.electron-vue目录下的webpack
2020-08-14 22:16:11
1118
原创 springboot使用freemarker报错：Circular view path: would dispatch back to the current handler URL again
在springboot中引用freemarker模板引擎实现一个小例子运行访问报错：服务端错误信息：javax.servlet.ServletException: Circular view path [user]: would dispatch back to the current handler URL [/user] again. Check your ViewResolver setup! (Hint: This may be the result of an unspecified vi
2020-08-04 23:28:28
2123
1
原创 springboot基础 -- 容器的相关配置
<dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> <exclusions> <exclusion>...
2020-08-03 23:06:14
106
原创 springboot基础 -- 通过banner修改springboot的默认启动图案
自动生成工具@SpringBootApplicationpublic class BannerApplication { public static void main(String[] args) {// SpringApplication.run(BannerApplication.class, args); SpringApplication app = new SpringApplication(BannerApplication.class)
2020-08-02 23:19:57
149
原创 element-ui实现一个延时退出确认框
element-ui实现：点击一个按钮弹出一个确认框，设置一个倒计时，当事件为0秒，在没有点击任何按钮的情况下，自动触发确认按钮事件。<template> <div> <el-button type="text" @click="openDialog">点击打开 Dialog</el-button> <el-dialog :title="targetIp" :visible.sync="centerDial
2020-06-24 22:53:19
1633
原创 解决electron-vue打包后加载.node文件找不到资源的问题
背景electron-vue加载 .node文件在开发环境可以正常运行，但是打包以后就出现了问题，提示加载不到资源。排查之后发现通过webpack把文件压缩成render.js之后，node文件的加载路径竟然写死成了工程所在的绝对路径。修改 .electron-vue目录下webpack.renderer.config.js文件 module: { rules: [ { test: /\.node$/, use: 'node-loader'
2020-06-22 21:24:44
4047
原创 加载.node文件报错：no suitable image found. unknown file type, first eight bytes
Uncaught Error: Cannot open /Users/mac/Desktop/file/zl/git_project/new_client/electron-bjcast-client/build/mac/wirelessCast.app/Contents/Resources/app.asar/dist/electron/bjcast_project_addon.node: Error: dlopen(/var/folders/2j/xhy537wj5731y95lftfkk1fm0000g
2020-06-21 09:55:45
2553
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人