代码日记
问一个多表查询的简单问题?
先查询出procheck表里每个产品对应最新的checkdate,再拿你的结果连接一下作筛选
(你的SQL语句) t1
JOIN (
SELECT pro_id, MAX(checkdate) AS max_checkdate
FROM procheck
GROUP BY pro_id
) t2
ON t1.procheck__pro_id = t2.pro_id AND t1.procheck__checkdate = t2.max_checkdate;
代码日记
安卓手机可以和巡更系统的巡更点通信吗?
当然可以。实际上市面上常见的巡更手持终端大部分就是定制版的安卓机(早年没安卓的时候都是 WinCE)。
不要把 RFID 想的太神秘,它跟蓝牙、Wi-Fi 等等是一回事儿,都是物理层协议。只要你设备硬件上支持,你想基于它怎么开发那都是你自己的事儿。
代码日记
yarn vite vue3 为什么ctrl-c会报错?
因为ctrl+c不是退出vite的正确方法,你按一下"h"打开帮助就能看到正确的退出方法是按"q",而不是ctrl+c
代码日记
ts循环赋值断言也报错?
type PersonType = typeof person
function cloneObj(obj: PersonType) {
const newObj = {} as PersonType
for (const key of Object.keys(obj)) {
// 报错 为啥会有never类型
// 类型"string|number"不可分配给类型"never"。
// 类型"string"不可分配给类型"never"。
newObj[key as keyof PersonType] = obj[key as keyof PersonType]
}
return newObj
}
const person = {
name: '曜',
sex: '男',
age: 16 // 如果属性值都是字符串就不报错
}
cloneObj(person)
代码日记
ts的extends问题,同时求推荐ts学习文章?
在学习ts的类型的时候遇到这个问题,很是迷惑
type MyEqual =
(() => T extends X ? 1 : 2) extends
(() => T extends Y ? 1 : 2) ? true : false;
这里我理解的是判断T是否同时继承类型X,Y,从而判断X,Y是否是同一类型?(这里不理解,假如T是"symbol|number|string",X是"string",Y是:"number",岂不是得出了X与Y相同?)
还有第二个extends看上去像是判断两个数值是否相等的意思?不能用===吗?有点看不懂ts里面的extends
代码日记
这是一段防抖代码,为什么会出现不同的结果?
"debounce-version1" (https://link.segmentfault.com/?enc=5M4djQn6RXb97dn5%2FIuSsg%3D%3D.M4IlNX7pUgrfVff4Fyn6tiHAcLHsW1lunvGhImsFK0hElPT8VqDDHU8lYs8DbmtFG8coFyIt9FDu%2BPtPWyqctw%3D%3D)
"debounce-version2" (https://link.segmentfault.com/?enc=H7bAur3zI9mr1Gy3yNsiaA%3D%3D.56UgzDeQ8o19EOVC95PM8kK68vn3zxLJZinmVNEXBWtkm2TQkd1DSp04CJ5ZeBZ52w0mTGJF44Y%2B%2FkLmrmlsog%3D%3D)
version1 跟 version2的区别是移动了" if (notCalled && immediate) result = func.apply(context, args);" 的位置
我的预期是这两个代码应该执行结果是一致的,都返回1
但是version1 没有防抖成功
function debounce(func, wait, immediate) {
var timeout
var debounced = function () {
var context = this;
var args = arguments;
var notCalled = !timeout;
if (timeout) clearTimeout(timeout);
if (notCalled && immediate) result = func.apply(context, args);
timeout = setTimeout(function () {
if (!immediate) func.apply(context, args);
timeout = null;
}, wait);
};
return debounced;
}
var counter = 0;
var debouncedIncr = debounce(
function () {
counter++;
if (counter < 10) debouncedIncr();
},
32,
true,
);
debouncedIncr();
console.log(counter, 1, "incr was called immediately");
setTimeout(function () {
console.log(counter, 1, "incr was debounced");
}, 96);
代码日记
Docker容器报权限不足,如何配置权限?
我的Dockerfile配置:
FROM ghcr.io/puppeteer/puppeteer:latest
EXPOSE 4000
# 设置工作目录
WORKDIR /yice
RUN chmod -R 777 /yice
# # 复制源码
COPY ./dist /yice/dist
COPY ./scripts /yice/scripts
COPY ./.env /yice/
COPY ./package.json /yice
COPY ./static /yice/static
COPY ./tsconfig.json /yice/
COPY ./tsconfig.build.json /yice/
COPY ./node_modules /yice/node_modules
CMD npm run start:prod
报错信息:
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/aa4df9d9d8f7e3ee94f62825f2191e56.png)
我已经尝试过以下几种方法:
* Dockerfile配置中添加"RUN chmod -R 777 /yice"
* Dockerfile配置添加 "USER root",它会报:
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/add04e0ca3e42672921842849a67a692.png)
找不Chrome,然后因为ghcr.io/puppeteer/puppeteer:latest镜像切换的用户名为"pptruser",所以我手动在代码里给puppeteer配置"executablePath: '/home/pptruser/node_modules/chrome' ",它又报找不到
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/dc8b3c6e1d2edae81be0900d53ff74ed.png)
* Dockerfile配置添加 "USER pptruser",它还是报:
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/aa4df9d9d8f7e3ee94f62825f2191e56.png)
请问有没有大佬指点下?感谢🙏了
代码日记
echarts的鼠标位置和数据点展示的tooltip位置对应不上?
知道原因了,是代码中有给body设置zoom的写法,zoom了多少,给echarts的外层div恢复多少就行了
代码日记
如何在data中 使用/导入/混入 另外一个vue文件中的data函数中的某个对象?
mixins混入似乎会将全部选项都加入,我只是想要data中的某个对象(混入一部分)
代码日记
域名过期,ssl证书有效,如何防止被攻击?
这是一个很有意思的问题,前段时间在 V2 的一个帖子问到 “为什么 google 的 ssl 有效期会设置为 3
个月?”,其中就有两条回复提到了这个问题,较短期限的证书时效可以避免因私钥泄漏带来的安全问题,同时也可以在一定程度上避免你提到的这个问题。
当时觉得很有道理,不过也没有深究,刚刚去查了一下相关的资料,了解到了一些信息。
当然,实施这个的前提是,你要把这个请求导向到你的服务器,比如,你提供了一个 DNS 服务受害者使用了你的 DNS,或者修改了目标客户端的 hosts
文件?或者你提供了一个代理服务器等等中间人攻击的方式。
要解决这个问题的话,如果是 App 一类的话,其实比较常见的还是 "SSL Pinning",但是浏览器就不一样了
HTTP Public Key Pinning
在早期时候,一些浏览器支持 "HTTP Public Key Pinning",服务端在响应头中返回一个 "Public-Key-Pins"
头,其中包含了可以被信任的证书的 "pin-sha256" 哈希值,这样就可以解决你提到的这个问题,但是也挺麻烦的。
不过,因为一些其使用率较低,Chrome 67 又终止了对其的支持。(IE 等就从未实现过)
Certificate Transparency
还有另外一个东西 "Certificate Transparency"(证书透明度),这是由 Chrome 牵头发起的,并且在 Chrome
上已经被强制实施。
简单的说,就是当 CA 机构签发证书后,必须向 CT 的日志服务器提交证书信息,任何人都可以通过查阅 CT 日志来检查域名下存在的证书。
个人理解的话,如果你查到这些证书在有效期,并且确定不是你自己申请的话,可以向 CA 机构申请吊销这些证书,再结合 "OCSP Stapling"
来解决你所提到的这个问题。
参考资料
* "有关 TLS/SSL 证书的一切 | 卡瓦邦噶!" (https://link.segmentfault.com/?enc=zaAwc8h2mY9AAw%2BmiBIPQw%3D%3D.WlELHg%2FYSOl1ETNnCtuRuIPlHPhdSkXnhD%2FK3MiuiMK7nVza%2FlmOD105zjyxn4Ud)
* "Certificate Transparency 那些事 | JerryQu 的小站" (https://link.segmentfault.com/?enc=4Sz9MU4us1AOtkdmLn2aXA%3D%3D.gK%2BtpiWIbEATwR0z0oFbOjIErGVVRFGj7f0CuNl2YveEGj%2FoIWfdfjzY1ugCywOjE1AO28tfBzSXbzu5VSnwiw%3D%3D)
* "crt.sh | Certificate Search" (https://link.segmentfault.com/?enc=WhQ8B64w%2BQe64ozHwUOBYw%3D%3D.DNDSKg85bB%2F5S8gpIH1WFA%3D%3D)
* "Certificate Transparency : Certificate Transparency" (https://link.segmentfault.com/?enc=GAL1n7g8tS16MKUe8dwE1A%3D%3D.HAwNaQraNHpxYJecvBkofrNIdDhZCa28fWZ2oXSMHpfqzdNOG8IplahXzULa3yBQ)
代码日记
在 docker-compose.yml 文件中配置 env_file 来指定环境变量文件,但是不生效?
如下是 docker-compose.yml 文件:
services:
node:
image: node
env_file:
- .dev.env
environment:
- MY_NAME=${MY_NAME}
当使用下面的命令启动服务时,会读取不到 MY_NAME 这个变量:
docker-compose up
但是使用 "--env-file" 选项就能使用环境变量文件:
docker-compose --env-file=.dev.env up
这是什么情况?
代码日记
python+selenium+linux?
python selenium linux
提示加载超时
Traceback (most recent call last):
File "/www/wwwroot/hrjob/hr.py", line 34, in <module>
wait.until(EC.presence_of_element_located((By.ID, 'app')))
File "/usr/local/lib/python3.10/dist-packages/selenium/webdriver/support/wait.py", line 95, in until
raise TimeoutException(message, screen, stacktrace)
代码日记
路由传参跳转到另一个页面,参数已经携带了但是页面不刷新?
点击设备所在位置下面的两条数据,路由传参传caller_id和triage_desk_id
点击第一条数据caller_id传的是0
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241213/79f24260e9242ea674a5ef3ec2ddccf3.png)
点击第二条数据caller_id传的是1
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241213/fece96470645be696c307e07c5e621cd.png)
下面是跳转后的页面,triage_desk_id是1的话展示到对应的数据,caller_id是0默认展示图片右侧表格的第一条数据
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241213/32610066d9e154b25e2a80d34979a7f4.png)
caller_id传的是1的时候展示的是叫号器2的这条数据
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241213/749c403f3ab4eb0cc620c4bc5cd242d2.png)
现在的问题就是,第一次跳转的页面的携带的参数可以正常的找到对应的数据,当第二次跳转携带不同的参数,跳转后的页面展示的还是第一次跳转后页面展示的数据。caller_id第一次传的是0展示的没问题,第二次caller_id传的是1展示的还是第一次传0的展示数据,应该是传不用的参数展示不同的参数。请问这个问题怎么解决呢?
{
if (element.id == this.triage_desk_id) {
this.$refs.table.setCurrentRow(res.data[i])
}
})
} else {
this.$refs.table.setCurrentRow(res.data[1])
}
}
},
}
watch: {
$route: {
immediate: true,
handler() {
if (this.$route.query.triage_desk_id) {
this.$nextTick(() => {
this.reload()
})
}
}
},
},
跳转后的页面左侧表格和右侧表格是两个组件
上面的代码是左侧表格的代码
下面的代码是右侧表格的
data() {
return {
caller_id: this.$route.query.caller_id //叫号器
}
}
methods: {
/* 表格数据源 */
datasource({ page, limit, where, order }) {
return getCellList({
...where,
...order,
page,
limit,
triage_desk_id: this.triageId
})
},
done(res) {
if (res.data?.length) {
let data = res.data
if (this.caller_id) {
data.forEach((element, i) => {
if (element.id == this.caller_id) {
this.$refs.table.setCurrentRow(res.data[i])
this.highlight = true
} else {
this.$refs.table.setCurrentRow(res.data[0])
}
})
console.log(this.callId);
} else {
this.$refs.table.setCurrentRow(res.data[0])
}
}
}
}
watch: {
triageId() {
this.reload()
},
$route: {
immediate: true,
handler() {
if (this.$route.query.caller_id) {//需要监听的参数
this.$nextTick(() => {
this.reload()
})
}
}
},
}
我是使用watch监听路由参数的变化,有变化就重新刷新一下表格。
但是路由参数发生了变化,展示的数据还是不对的,请问这个应该咋解决呢??
代码日记
前端项目发布后,通过tomcat部署可以直接访问,通过nginx部署就提示没有返回内容,是哪里配置出问题了?
"root /rkxch/app/portrait/frontend_pc/dist_pro/;" 是什么东西?
不应该是什么 proxy_pass 代理到 tomcat 的端口上嘛?
代码日记
用的虚拟主机去掉index.php存在问题?
说实话,没看懂你提的问题;
如果是为什么会隐藏index.php,因为你开启了"apache .htaccess"的路由重写,这个是适用于单入口文件的php应用,像ThinkPHP、Yii、Laravel等都是单入口应用。
这个就是路由规则:"^(.*)$ index.php?/$1";如果你想知道什么意思,可以去了解一下正则相关知识。
你不想隐藏index.php的话,就把 "RewriteEngine on"改成"RewriteEngine off";
代码日记
【已解决】css如何绘制该图形?
css方案,看完你会想放弃
参考锥形渐变: "https://www.zhangxinxu.com/wordpress/2020/04/css-conic-gradient/" (https://link.segmentfault.com/?enc=Ex0w0T7I2HI2v%2F%2BGClMhcw%3D%3D.ZaKq3Ex4m4ZNxCex7vsXLqpArv8grv6qTN1DuGEYCj7eB%2FerTgFLg8TCWoFUqHwEvCHN0h46RbYJBBWs3u6oiCnRHxeURlLOv8zHX1x1JkE%3D)
代码:
"https://codepen.io/643104191/pen/VwgLOQb" (https://codepen.io/643104191/pen/VwgLOQb)
代码日记
请问 微信小程序 怎样渲染后端传的html格式的数据?
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241130/26a2c2adcfba6dcffb2c4d879ce9da15.png)
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241130/b3ee06efe25e5fb511c12e6851f4595c.png)
后端传了html 代码给我,我在小程序里用了rich-text去做渲染,但是渲染不出来,好像这个只能渲染出一些简单的部分html代码,无法对整个html页面代码进行代码,
代码日记
在vue中页面跳转有几种方法?
一般两个大的方式原生js进行跳转
window.location.href = "http://baidu.com"
或者vue跳转
this.$router.push({ path: "/demo2" })
// 或者router-link 用得比较少,上面的比较常用
demo2
代码日记
webpack 打包的项目在正式环境的 debugger 中,不能正确断点,不能操作断点中的变量?
你看看webpack正式环境配置是不是存在以下配置这个配置nosources-source-map或者hidden-source-map
你换成eval-source-map就行了
代码日记
android spinner 当前选中项如何右对齐?
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241122/27ea5fd648eff23028f9658f1d0a9936.png)
"android spinner" 当前选中项如何右对齐?我的代码如下:
@Getter
@Setter
public class KeyValueSpinnerAdapter extends ArrayAdapter {
private final Spinner spinner;
@Data
@Accessors(chain = true)
public static class Item {
// ...
}
public KeyValueSpinnerAdapter(Context context, Spinner spinner, List items) {
super(context, android.R.layout.simple_spinner_item, items);
this.items = items;
this.spinner = spinner;
}
@NonNull
@Override
public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
TextView textView = (TextView) super.getView(position, convertView, parent);
Item item = this.items.get(position);
textView.setText(item.getName());
return textView;
}
}
代码日记
nmap的closed是一个什么样的状态?
nmap扫描的端口是closed是一个什么样的状态“?
我看这里又说:
"https://zhuanlan.zhihu.com/p/621645945" (https://link.segmentfault.com/?enc=OSwNEY8qGdFocv9CzXap2g%3D%3D.4u0q3meJYxr8ILy3y78C9quSG31WYzU89aKsnC0lYeScXrz8eze4gQM%2BF3HS4lIP)
«关闭的端口对于Nmap也是可访问的(它接受Nmap的探测报文并作出响应), 但没有应用程序在其上监听。
它们可以显示该IP地址上(主机发现,或者ping扫描)的主机正在运行up 也对部分操作系统探测有所帮助。
因为关闭的关口是可访问的,也许过会儿值得再扫描一下,可能一些又开放了。 系统管理员可能会考虑用防火墙封锁这样的端口。
那样他们就会被显示为被过滤的状态,下面讨论。»
这里说"关闭的端口对于Nmap也是可访问的"如何理解呢?"但没有应用程序在其上监听"是怎么判断的呢?
代码日记
nginx 4层代理使用proxy_bind传递真实ip无法生效?
已解决,最后发现是firewalld的问题,关掉firewalld就好了
代码日记
go select case 问题?
ticker1 := time.NewTicker(3 * time.Second)
ticker2 := time.NewTicker(3 * time.Second)
fmt.Println("当前时间为:", time.Now())
go func() {
for {
select {
case <-ticker1.C:
t := <-ticker1.C
fmt.Println("当前时间为=1=:", t)
}
}
}()
go func() {
for {
//从定时器中获取数据
t := <-ticker2.C
fmt.Println("当前时间为=2=:", t)
}
}()
如代码所示
目的都是像间隔3s执行一次
但是实际执行的时候 1 执行一次要比 2 间隔更久
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241120/eb9101397247a55b127ad0e947ffd350.png)
因为最近在弄一个线上项目 这个周期本来是设定10s的最后变成了 一分多钟才执行一次
好奇是什么问题导致的?
代码日记
element-plus,请问如何对一行el-form-item内多个el-input输入框的校验?
请问大佬们,如何对一行el-form-item内多个el-input输入框的进行只能输入整数或者小数的校验?
rtk杆臂
保存
"图片.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241120/c6469557d6b635b5d762633248a6d2e7.png)
"图片.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241120/314536bd27298ff4135e0415d6efcab6.png)
代码日记
turnjs怎么设置成无封面的状态 ?
turnjs怎么设置成无封面的状态 ?初始化要展示两页
百度,文档,尝试都没用
代码日记
为什么输出的水仙花数只有 153 370 371 407?
请救救我的作业!
import java.lang.Math;
public class Main {
public static void main(String[] args) {
int i;
for( i=100;i0){
k+=Math.pow(i%10,3);
i/=10;
}
return k;
}
}
代码日记
LeetCode报错,为什么会执行错误?
"hashmap[num]": num 是数组里的数,它的范围会超过 hashmap 的长度。
代码日记
el-table中设置tree-props树形数据勾选完成后怎么回显选中状态?
获取列表后手动对每一条数据使用elTable 的toggleRowSelection 方法
代码日记
js jquery 如何实现右键点击具体的 dom 元素,然后重写系统的右键菜单?
js jquery 如何实现右键点击具体的 dom 元素,然后重写系统的右键菜单?
我现在有代码如下:
jQuery制作Web页面鼠标右键美化菜单
body{ position:relative;}
ul, li{ margin:0; padding:0; list-style:none; font-size:12px;}
.split{border-bottom:1px solid gray;}
.popup_menu{position:absolute; z-index:90; border:1px solid #AEAEAE; padding:2px; width:120px;border-radius:2px;}
.popup_menu a{ display:block; color:#325B8E; text-indent:12px; text-decoration:none; height:26px; line-height:25px; padding-right:5px;}
.popup_menu a:hover{ background:#57B4E4; color:#fff; border-radius:2px;}
var kyPopupMenu = {};
kyPopupMenu = (function () {
return {
right: function (obj) {
$('.popup_menu').remove();
var menu = 'firework疯狂的土豆专栏网易博客';
popupMenuApp = $(menu)
.find('a').attr('href', 'javascript:;')
.end().appendTo('body');
//绑定事件
$('.app-menu a').on('click', function () {
window.location.href = $(this).attr("url");
});
return popupMenuApp;
}
};
})();
//取消右键
$('html #phpernote').on('contextmenu', function () {
return false;
}).click(function () {
$('.popup_menu').hide();
});
//桌面点击右击
$('html #phpernote').on('contextmenu', function (e) {
var popupmenu = kyPopupMenu.right();
l = ($(document).width() - e.clientX)
鼠标右击这个区域试试
我希望右击 "id="phpernote""这块区域的时候,改写系统的右键菜单,右击除这个 dom 区域之外的其他地方还是显示系统的右键菜单。
现在我如果把 "$('html #phpernote')" 改为 "$('html')" 它就是整个页面重写了。
通过各种引擎搜了一下,都是整个页面都实现右键菜单改写的,不是我期望的,请大佬帮忙看看如何实现,小弟跪谢。
代码日记
JWT 怎么解决用户被禁用的问题?
首先使用"JWT"的目的就是做服务端无状态,不想在服务端存储与用户"Session"有关的数据。而"JWT"内容仅是简单的Base64编码,故不宜存储敏感信息。一般存储用户ID,或者与用户ID唯一映射的一个字符串(隐藏数据库真实用户ID)。
再回到问题本身,可以考虑使用缓存的方式。比如有个专门封装的校验"是否被禁用?" "是否被删除?"
"权限是否发生变化?"的服务。这个服务只是网关层的一个小模块,具体实现可依赖Redis等缓存,加快校验速度。
假设Redis里面存储有 被禁用账号列表? 每次查询一下当前账号是否被禁用。若数据量较大时,还可进行分桶?布隆过滤器等手段优化。
延伸一下,这个流程很适合使用"责任链设计模式"啊。
附加信息比较多,感觉难以做一个通用的解决方案,大概率要根据实际业务来做具体设计。
代码日记
如何在PHP中定义字节数组?
官方文档
«"https://www.php.net/manual/zh/language.types.array.php" (https://link.segmentfault.com/?enc=kEhT8JBMH5PkR%2BNlKZ%2Bdxw%3D%3D.IHSc87tYGV71xBJdtpaG%2FbwItTO3IEPxGdQhe6BhGYbJjSTTDKFpM%2BRAUUlYPnXhlwmHqPofnDEwRC%2BZ8Fv08Q%3D%3D)»
代码日记
webpack采用esm打包,打包后tree shaking失效,请问如何解决?
webpack采用esm打包,打包后tree shaking失效,请问如何解决?
我尝试调整webpack配置,如下:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const isProduction = process.env.NODE_ENV === 'production';
const outputType = process.env.OUTPUT_TYPE;
/** @type {import('webpack').Configuration} */
const config = {
entry: isProduction ? './components/index.ts' : './demo/index.tsx',
externals: !isProduction ? {} : {
react: {
root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react',
module: 'react'
},
"react-dom": {
root: 'ReactDOM',
commonjs2: 'react-dom',
commonjs: 'react-dom',
amd: 'react-dom',
module: 'react-dom'
}
},
experiments: {
outputModule: outputType === 'esm'
},
mode: isProduction ? 'production' : 'development',
module: {
rules: [
{
exclude: /node_modules/,
test: /\.js(x?)$/,
use: [
{ loader: 'babel-loader' }
]
},
{
exclude: /node_modules/,
test: /\.ts(x?)$/,
use: [
{ loader: 'babel-loader' },
{ loader: 'ts-loader' }
]
},
{
exclude: /.min.css$/,
test: /\.(sa|sc|c)ss$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: {
mode: 'global'
}
}
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
'postcss-preset-env'
]
}
}
},
{ loader: 'sass-loader' }
],
}
]
},
output: outputType === 'esm' ? {
chunkFormat: 'module',
clean: true,
filename: '[name].esm.js',
library: {
type: 'module'
},
path: path.resolve(__dirname, '../es')
} : {
clean: true,
filename: '[name].js',
library: {
export: 'default',
name: 'rollup-test',
type: 'umd'
},
path: path.resolve(__dirname, '../lib')
},
plugins: [
...(!isProduction ? [new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, '../demo/index.html'),
title: 'rollup-test'
})] : [])
],
resolve: {
extensions: ['.ts', '.tsx', '.js', 'jsx', '.json']
},
};
module.exports = config;
然后package.json如下:
...
"main": "lib/main.js",
"module": "es/main.esm.js",
"types": "types/index.d.ts",
"sideEffects": false,
"scripts": {
"build": "npm run generate:esm & npm run generate:umd",
"generate:esm": "cross-env BABEL_ENV=esm NODE_ENV=production OUTPUT_TYPE=esm webpack --config ./config/webpack.config.js",
"generate:umd": "cross-env BABEL_ENV=build NODE_ENV=production OUTPUT_TYPE=umd webpack --config ./config/webpack.config.js",
}
...
导出的esm文件也正常,如下
/*! For license information please see main.esm.js.LICENSE.txt */
import*as r from"react";export const id=179;export const ids=[179];export const modules={564:(r,e,t)=>{t.d(e,{bZ:()=>n,zx:()=>s,ZP:()=>a});var o=t(893);const n=function(r){var e=r.children;return(0,o.jsx)("div",{className:"alert-component",children:e})};t(846);const s=function(r){var e=r.children;return(0,o.jsx)("div",{className:"button-component",children:e})},a={Alert:n,Button:s}},251:(r,e,t)=>{var o=t(846),n=Symbol.for("react.element"),s=(Symbol.for("react.fragment"),Object.prototype.hasOwnProperty),a=o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,c={key:!0,ref:!0,__self:!0,__source:!0};e.jsx=function(r,e,t){var o,i={},l=null,f=null;for(o in void 0!==t&&(l=""+t),void 0!==e.key&&(l=""+e.key),void 0!==e.ref&&(f=e.ref),e)s.call(e,o)&&!c.hasOwnProperty(o)&&(i[o]=e[o]);if(r&&r.defaultProps)for(o in e=r.defaultProps)void 0===i[o]&&(i[o]=e[o]);return{$$typeof:n,type:r,key:l,ref:f,props:i,_owner:a.current}}},893:(r,e,t)=>{r.exports=t(251)},846:e=>{e.exports=r}};import e from"./manifest.esm.js";import*as t from"./main.esm.js";e.C(t);var o=(564,e(e.s=564)),n=o.bZ,s=o.zx,a=o.ZP;export{n as Alert,s as Button,a as default};
但是通过"npm link"后"npm run build"发现"tree shaking"失效,无论是否使用,所有文件都构建了
代码日记
如何关闭 github 的 Two-factor authentication?
好像没法关闭,最近好像就得必须开了
代码日记
是否有 Hibernate 和 Mybatis 以外的第三种选择?
最近发现一种基于 Java17、SpringBoot3 和 JOOQ 的现代 Java 技术栈,可以作为 mybatis 和 hibernate
的第三种选择
* "https://www.mjga.cc" (https://link.segmentfault.com/?enc=N72EVjmENSfhIpv%2BVW9N8Q%3D%3D.CUf3jE1edOXlzKrkk9OoYLJgIbKPYe5n0ANEa5swqqM%3D)
* "https://github.com/ccmjga/mjga-scaffold" (https://link.segmentfault.com/?enc=%2FZBjbyAOoUnRS0HBQmTyiw%3D%3D.VM3rk17BTW2vGrRsc%2BOC1w7MX9Dd0iDvPQoM777atneIGICQUDyeyQKZI4aHraHe)
一篇关于它的介绍
* "https://segmentfault.com/a/1190000044572199" (https://segmentfault.com/a/1190000044572199)
这个 JOOQ 是一个 CRUD 库,它用起来有点像 C# 的 LINQ
https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241022/b9cbe246efd5c910d10ef69ad5f82c54.png
关于这第三种选择大家觉得相对 hibernate 和 mybatis 都有什么优势和劣势?查了一下在国外的社区 jooq
倒是挺流行的,国内的话用的不多,但是里面的编程思想可以借鉴。
另外,建议进大家最好从
"https://www.mjga.cc" (https://link.segmentfault.com/?enc=tYOJiWXlkjN3FCZtTwrCeA%3D%3D.SZ4MJUbGkiMTHH6gewvKVh8ENUpMK3UivDikYJcomZI%3D)
上下载代码来使用,这样能够确保获取到最新的代码,Github 上的代码主要作展示用,它的版本可能会落后于从 mjga.cc 下载的内容。
代码日记
nextjs开发react时候从路由获取id请求详情,会执行多次,应该怎么改?
nextjs开发react时候从路由获取id请求详情,会执行多次。id的log出现了4次,res出现了3次
有时候id第一次log获取不到,后续能获取到
export default function test({ data }: Props) {
const router = useRouter();
const { id } = router.query;
const [builder, setbuilder] = useState(data);
const getDetail = useCallback(async () => {
console.log(id);
if (!id) return;
const res = await sanity.getBuilder({
id: id.toString(),
});
console.log(res);
setbuilder(res);
}, []);
getDetail();
}
代码日记
如何在 Chrome DevTools 中模拟 10 倍性能降低?
"chrome devtools" 有没有 能降低 "performance" "10x slowdown" 的选项或者工具?
在 "devtools" 只看到了 "4x" "6x" 的选项
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241016/bad2bcfbba950e75f179bf3981b83c8c.png)
因为业务中有一台性能很差的机器终端,需要模拟 "10x slowdown"的
代码日记
git是如何检测文件变化的?
具体而言, 在执行git status的时候, git到底做了什么?
目前在网上找到的疑似正确答案: git会调用系统函数lstat来读取文件属性, 从而判断文件的大小和修改时间是否有所改变; 于是,
假设某个文件修改后的大小正好和修改前一致, 然后在保存时又强制使用了和之前相同的修改时间来保存, 那么此时git是感知不到这一文件已经发生改变的。
经过个人测试, 发现确实如此, 所以该答案似乎是对的, 但随之产生一些疑惑, 不妨以一个具体的例子说明:
1, 对一个初始化的空库, 新建文档t1.txt, 执行git status, 此时git能将之识别为未追踪文件. 问:
git调用lstat具体读取的是t1.txt的哪一些属性, 从而判断出来t1.txt是一个新文件? 个人猜测是检测创建时间是否等于修改时间, 不知是否正确,
但反正不可能是上述答案中的看文件大小和修改时间是否有变.
2, 将t1.txt暂存, 修改其内容后, 再次git status, 此时git能将之识别为已修改文件. 问:
git调用lstat具体读取的是t1.txt的哪一些属性, 从而判断出来t1.txt是一个有新内容的旧文件? 按照上述答案,
读取的是其当前的文件大小与修改时间, 然后就要与它以往的文件大小与修改时间做对比, 看是否有改变. 但是问题来了,
t1.txt之前的文件大小与修改时间现在已经被新值覆盖掉了, 那还怎么比对? 最直观的想法肯定是存进了版本里, 但发现起码对于修改时间,
index和blob里都是没有的, 所以目前猜测是由操作系统负责保存的? 比如大小与修改时间等文件属性其实都存在一个列表里,
所以git才有历史数值可供比对当前数值是否改变.
3, 将t1.txt改名为t2.txt, 再次git status, 此时git能同时识别到t1.txt的删除与t2.txt的新增. 问:
对前者t1.txt的删除, 这应该是比对了index与工作区的结果, 但对于后者t2.txt的新增, git又是怎么调用lstat识别的?
这回是重命名而非新建文件, 所以它的文件大小与修改日期均是未改变的, 亦即其修改日期现在并不等于创建日期, 那git又是怎么识别它是一个新文件的?
4, 再将t2.txt暂存, 会发现相应blob文件的修改日期变了, 亦即改一次文件名就要重新把相同的内容备份完了覆盖一遍, 这个设计不合理吧,
尤其当文件特别巨大时, 不该是这样才对. 对此该怎么理解?
***
贴一下复现的测试结果: 文件内容从1改到2, git检测不到.
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241016/1eb2032d8eed15e1486cbd556677d04c.png)
代码日记
如何控制下拉框高度,使其在父容器之外不撑开高度?
1. 如果用的是主流的 UI 库,弹框类的组件通常都会提供指定元素挂载到哪个父容器下的配置,比如 "antd" 的 "getConainer"
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241014/3bad2395c058e7ac4c0d9895ea7e160d.png)
2. 自己开发的话
* 要么参考主流库的实现
* 要么就用让元素脱离文档流的布局,比如 "absolute","fixed",但这两种定位"各会"受外层元素的"定位",和 "层叠上下文" 的影响,不是很建议
"https://developer.mozilla.org/zh-CN/docs/Web/CSS/position" (https://link.segmentfault.com/?enc=nLWpJK8XN3%2FMJDDFsipTGA%3D%3D.EFp02dqbfvApCw%2Fur6DBJ4aghX%2Bhexcg9cntayz%2BP%2B6dFd3EvZk8dJqgOU%2FqzliB4OsKhAsg2WEkPjC9aP2dRA%3D%3D)
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241014/386d057d29a8b6561258656357f79283.png)
综上,如果不是自己练手的话,最好用现成的组件库,省时省力
这里是一个demo,可以参考一下
Document
body {
position: relative;
}
container
popup
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241014/c7cca3ec19089506513be9b119bbe11a.png)
代码日记
在二次封装axios时,如何选择封装方式?
关于 axios 二次封装方法的问题
1. 通过 class 创建多个实例class Http {
...
}
const http1 = new Http()
const http2 = new Http()
2. 仅通过 axios 创建一个实例import axios from 'axios'
const axiosInstance = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_URL,
timeout: 5000
})
export default axiosInstance
哪种方法更好些呢?或者大家有更好的封装思路吗?
看了一些博客,关于用 class 包装的 axios, 给出来的好处是 不同的服务可以加不同的拦截器
,我刚工作不久,不知道有什么场景需要用到这种需求。我更偏向于第二种方法,感觉我接触到的服务,只需要切换一下 baseUrl,并没有别的需求了。
代码日记
没有前端/客户端的系统如何进行接口测试?
没有前端的时候自然是用接口测试工具呗,postman,apifox之类的。
除http之外的网络应用,比如tcp连接需求的,也有对应的工具,伪装成客户端向服务端建立连接,例如tcpcopy、jmeter之类的工具
代码日记
如何优雅地给多层嵌套的对象赋值?
假设有个对象非常多层,要给某一层进行赋值,那么需要一层层判断是否为空,有没有优雅的写法?
示例
const a = {
b: null
}
此时要给a对象的d属性赋值,就需要一层层判断非空才行...
a.b.c.d.e="hello"; // 如果没有判断,直接赋值报错
代码日记
typescript类型的问题?
const res = await loginApi(data).catch(e=>{
loading.value=false
}) as IResponse;
if (res && res.Code===0) {
wsCache.set(appStore.getUserInfo, res.Data)
// 是否使用动态路由
if (appStore.getDynamicRouter) {
console.log("动态路由")
} else {
}
}else{
ElMessage.error(res.Msg)
}
但看loginApi的类型声明,是没什么问题的,建议为"request.post"添加类型声明。
export const loginApi = (data: UserType): Promise> => {
return request.post({ url: '/BackLogin/Login', data });
}
代码日记
如何优化基于浏览器的 token 验证频率?
我用 react 写了几个页面,其中有几个页面是需要登录后才能够使用,我当前的判断方式是将获取到的 token 保存在浏览器的 localStorage
里,然后访问这些页面的时候,读取浏览器里是否有 token,然后将 token 发送到服务器验证。
我想请问,每次访问这些需要登录的页面,都会发一次到服务器做验证,这样的方式是不是太频繁了?还有其他更优越的方式吗?
代码日记
mac平台下electron使用autoUpdater没有apple签名,有自动更新成功的吗?
mac平台下electron使用autoUpdater没有apple签名,有自动更新成功的吗?"image.png" (/img/bVdbhTF)
是必须要给苹果交钱这自动更新功能才能用吗?
const { app, autoUpdater,dialog } = require('electron');
const server = 'http://localhost:3000';
autoUpdater.setFeedURL({ url: `${server}/download/latest/${process.platform}` });
autoUpdater.on('update-downloaded', (info) => {
// Show a dialog asking the user if they want to restart the app to install the update
dialog.showMessageBox({
type: 'question',
buttons: ['Install and Restart', 'Later'],
defaultId: 0,
message: 'A new update has been downloaded. Would you like to install and restart the app now?'
}, (response) => {
if (response === 0) {
// User clicked 'Install and Restart'
autoUpdater.quitAndInstall();
}
});
});
代码日记
el-select全选时隐藏已选项标签?
Demo效果:
"recording.gif" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241010/de658fe0f6877794d9af679ed3795b41.png)
Demo代码:
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value5: [],
originVal: []
}
},
methods: {
change() {
if (this.value5.length === this.options.length) {
this.originVal = [...this.value5]
this.value5 = ['全部']
}
console.log(this.value5, this.originVal);
},
removeTag(value) {
if (value === '全部') {
this.originVal = []
console.log(this.value5, this.originVal);
this.value5 = []
}
}
}
}
代码日记
ant design react 5 暗黑主题 Menu不生效?
ant design react 5暗黑主题时,menu组件设置darkItemBg不生效是为什么;所有关于暗黑模式的Design
Token都不生效"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241011/6911e7eb068ab784820e8a00af239ab1.png)"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241011/27da99598071407195aee4accd70f73c.png)
代码日记
阿里云ubuntu18.04安装AMH,编译到这个进度就卡死了什么原因?怎么办?
这个是编译mysql过程,如果卡住可能网络问题,或是服务器内存用满等原因导致缓慢。
建议用默认的极速模式先安装好amh,安装完成后在amh软件商店单独编译安装需要的软件,
面板上安装等操作如果卡住,关闭页面等都不会影响。
代码日记
如何解决Vue脚手架安装时遇到的问题?
https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241011/131c2ab9bdff0aae1856e8c0352e89b1.png
新手小白,安装vue脚手架时出现上诉图片上的问题,不知道怎么解决,还望各位大佬相助
代码日记
有没有简单的可以监控网络设备的软件?
有没有简单的,可以监控网络设备的软件
特别是上手简单容易的
代码日记
在 vue3.0 项目中引入 @antv 报错,如何解决这个报错问题呢?
使用更高版本的 NodeJS 看看。