JenK

JenK 查看完整档案

西安编辑山西大学  |  计算机语言 编辑***科技有限公司  |  清洁工 编辑 wangzc.wang/ 编辑
编辑

理想的光芒很难照进现实

个人动态

JenK 发布了文章 · 7 分钟前

Mysql 简单查询语句汇总

把一些mysql的常用语法进行下汇总

1.简单语句

/*websites  表名   NAME alexa url country  字段*/
SELECT * FROM websites;                      /* 查询表所有数据 */

SELECT NAME FROM websites;                   /* 查询表字段数据 */

SELECT * FROM websites where name = "广西";   /* 查询表字段下条件数据 */

SELECT * from websites where name like "_o%"; /* 模糊查询表下数据 */

SELECT * FROM websites where id BETWEEN "1" AND "5";    /* 查询表下字段范围数据 */

SELECT * FROM websites WHERE name in ("广西","百度");    /* 查询表字段下固定条件数据 */

SELECT DISTINCT country FROM Websites;                  /* 查询去重值 */

SELECT * FROM Websites WHERE country = "CN" AND alexa > 50;  /*查询表下范围条件数据*/

SELECT * FROM Websites WHERE country = "USA" OR country="sh"; /* 查询表下条件不同值 */

SELECT * FROM Websites ORDER BY alexa;                      /* 查询表下值排序结果 */

SELECT * FROM Websites ORDER BY alexa DESC;                 /* 查询表下排序结果降序 */

SELECT * FROM Websites LIMIT 2;      /* 查询表下范围数据 */

SELECT name as zzz from websites;    /*别名查询表下数据*/

2.分页

select _column,_column from _table [where Clause] [limit N][offset M]

select * : 返回所有记录
limit N : 返回 N 条记录
offset M : 跳过 M 条记录, 默认 M=0, 单独使用似乎不起作用
limit N,M : 相当于 limit M offset N , 从第 N 条记录开始, 返回 M 条记录
实现分页:

select * from _table limit (page_number-1)*lines_perpage, lines_perpage

或

select * from _table limit lines_perpage offset (page_number-1)*lines_perpage
查看原文

赞 0 收藏 0 评论 0

JenK 回答了问题 · 4月19日

javascript list转tree,怎么优化

以下数据结构中,id 代表部门编号,name 是部门名称,parentId 是父部门编号,为 0 代表一级部门,现在要求实现一个 convert 方法,把原始 list 转换成树形结构,parentId 为多少就挂载在该 id 的属性 children 数组下,结构如下:

// 原始 list 如下

let list =[
    {id:1,name:'部门A',parentId:0},
    {id:2,name:'部门B',parentId:0},
    {id:3,name:'部门C',parentId:1},
    {id:4,name:'部门D',parentId:1},
    {id:5,name:'部门E',parentId:2},
    {id:6,name:'部门F',parentId:3},
    {id:7,name:'部门G',parentId:2},
    {id:8,name:'部门H',parentId:4}
];
const result = convert(list, ...);

// 转换后的结果如下

let result = [
    {
      id: 1,
      name: '部门A',
      parentId: 0,
      children: [
        {
          id: 3,
          name: '部门C',
          parentId: 1,
          children: [
            {
              id: 6,
              name: '部门F',
              parentId: 3
            }, {
              id: 16,
              name: '部门L',
              parentId: 3
            }
          ]
        },
        {
          id: 4,
          name: '部门D',
          parentId: 1,
          children: [
            {
              id: 8,
              name: '部门H',
              parentId: 4
            }
          ]
        }
      ]
    },
  ···
];

转换方法如下:

function convert(list) {
    const res = []
    const map = list.reduce((res, v) => (res[v.id] = v, res), {})
    for (const item of list) {
        if (item.parentId === 0) {
            res.push(item)
            continue
        }
        if (item.parentId in map) {
            const parent = map[item.parentId]
            parent.children = parent.children || []
            parent.children.push(item)
        }
    }
    return res
}

关注 4 回答 3

JenK 收藏了文章 · 4月16日

简单又好用的高效工具

[TOC]

简单又好用的高效工具

嗨,大家好,我是小魔童哪吒,今天给大家整理了多个方向,多个角度的资源小工具,个个都是神器,经常会用到里面的每一个工具都能给我们带来不同的体验和感受,并且能够相应提高我们工作和生活的效率进而带来满满的幸福感。

帮忙关注一下 小魔童哪吒,不定期分享技术,工具,人生思考类的文章,希望能够给你带来不一样的感受,点个关注吧,有知识更新瞬间就能提示到你

工欲善其事必先利其器,不管是编程,写文章,学英语,头脑风暴,都是需要工具的,善用工具才能让我们宝贵的事情投入到更有价值的地方

我们今天分别从如下几个部分来分享带给大家的资源

  • 写博客用到的平台
  • 写博客用到的工具
  • 读书类&资源分享
  • 学习&英语资源分享
  • 音乐类少众的网站
  • 知识&博客类用到的网站
  • 读书&听书类网站或APP
  • 笔记类协同类软件
  • 在线类工具
  • 画图类工具等等

写博客用到的平台

  • 简书
  • 博客园
  • CSDN
  • 知乎
  • 掘金
  • 思否
  • 开源中国
  • 公众号
  • bilibili
  • learnku 社区

https://learnku.com

写博客用到的工具

  • Typora 工具

用于写MARKDOWN 文档

  • 图床工具组合

Typora 工具 + Gitee + PicGO + Node.js , 具体的环境搭建方式,请看我的历史文章,你要是还学不会,请提刀来见 Typora+PicGo+Gitee + node.js 打造个人高效稳定优雅图床

  • markdown 优化工具

将markdown文章转换成适应微信 / 知乎 等不会渲染markdown的平台的文章

http://md.aclickall.com/

https://editor.mdnice.com/

还可以修改代码的主题,预览部分可以直接模拟在手机上预览

  • carbon

https://carbon.now.sh/

写的代码可以在这里生成好看的代码图片

  • 全网指数查询

https://index.chinaz.com/

查询关键词在网络上搜索的次数

读书类资源

学习&英语

音乐

  • 知音律
  • MyFreeMP3

http://tool.liumingye.cn/musi...

免费的音乐资源

知识&博客

https://stackoverflow.com/

读书&听书

  • 听书神器(讯飞)
  • 喜马拉雅
  • 十点读书
  • 路上读书
  • 有书
  • 樊登读书
  • 网易蜗牛读书
  • 微信听书 -- 评价不太好
  • 微信读书

微信公众号上也有很多读书听书频道,也有蛮多精品,只要有一双发现的眼睛,就一定可以找到满意的资源。

笔记类&协同类软件

  • 有道云笔记
  • 语雀
  • 印象笔记
  • notion

国外的软件,如果上网方便用这款软件是极佳的

  • 石墨文档
  • 腾讯文档

在线类工具

  • 菜鸟工具

https://c.runoob.com/

菜鸟工具里面还有很多关于开发的菜鸟教程

  • UU在线工具

https://uutool.cn/

各种万能小工具

  • MikuTools - 工具集合

https://tools.miku.ac/

免费的小工具也非常的多,UI界面也很好看

  • 孟坤工具箱

http://tool.mkblog.cn/

好看的UI小工具,一些工具与上述很相似

  • kalvinbg

https://tools.kalvinbg.cn/

有人脸编辑,人脸合成的小工具,其他的也可以看看

  • 爱资料工具

https://www.toolnb.com/toolsl...

小工具非常强大

  • 在线工具

https://tool.lu/

简介清爽小工具

  • 特别的工具箱

http://www.atoolbox.net/

Linux命令查询工具

  • Bigpig

https://bigjpg.com/zh

使用最新人工智能深度学习技术——深度卷积神经网络。它会将噪点和锯齿的部分进行补充,实现图片的无损放大。

  • TinyPNG

https://tinypng.com/

TinyPNG 是一个不影响图片质量的情况下,将较大的图片压缩,让图片质量和文件大小上找到一个完美的平衡,可以对图片进行很好的大小压缩

  • the stocks

http://thestocks.im/

各种资源素材工具

  • 超能搜

https://www.chaonengso.com/

各种网盘资源搜索,应有尽有

  • pexels

https://www.pexels.com/zh-cn/

免费资源图片,按需索取

  • 墨刀

https://modao.cc/

自己设计图

image-20210411212528772

画图工具

  • xmind

画思维导图,我认为是最好用的一个

  • processon

https://www.processon.com/

免费在线画图工具,流程图等, 但是非会员只免费9张图

以上为本期全部内容,如有疑问可以在评论区或后台提出你的疑问,我们一起交流,一起成长。

好家伙要是文章对你还有点作用的话,请帮忙点个关注,分享到你的朋友圈,分享技术,分享生活,分享知识,分享快乐

技术是开放的,我们的心态,更应是开放的。拥抱变化,向阳而生,努力向前行。

作者:小魔童哪吒

查看原文

JenK 赞了回答 · 4月9日

解决思否认证没响应

已督促工作人员帮你认证。

关注 2 回答 1

JenK 提出了问题 · 4月9日

解决思否认证没响应

为什么现在认证一直没有响应呢?说是10个工作日?但是都好久了一直没消息

关注 2 回答 1

JenK 提出了问题 · 4月9日

解决思否认证没响应

为什么现在认证一直没有响应呢?说是10个工作日?但是都好久了一直没消息

关注 2 回答 1

JenK 回答了问题 · 4月9日

js 如何区分 赋值为 undefined 和 没有值

image.png

没有值可能是null、可能是是空字符串''、也可能是undefined
建议看下js的基本数据类型。

关注 3 回答 2

JenK 发布了文章 · 4月9日

Element Ui图片预览组件通过按钮触发图片预览

element ui的Image 图片组件的大图预览需要点击一个图片才能进行触发大图预览,那么我们不想通过点击小图进行图片预览要怎么做呢?

预览

先看下DEMO

场景

项目中需要点击按钮去向后台请求图片地址,然后再进行大图预览

实现思路

我们可以把这个默认预览的小图用一个统一的图片进行代替,提前放在项目的静态文件中,
然后把这个图片定位到按钮的上方,再将图片的透明度设置为0,这样点击按钮其实是点击了按钮上方的小图

第一步

我们先实现个表格样式

<table border=1>
    <tr>
      <th>序号</th>
      <th>订单号</th>
      <th>操作</th>
    </tr>
    <tr>
      <td>1</td>
      <td>0356894598</td>
      <td>
        <div class='img'>
          图片预览
          <div class="demo-image__preview">
            <el-image lazy :data-original="url" @click='clickimg' :preview-src-list="srcList">
            </el-image>
          </div>
        </di>
      </td>
    </tr>
</table>

再加点样式

.img {
  width: 100px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  position: relative;
}
.demo-image__preview {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  cursor:pointer;
}
.demo-image__preview .el-image {
  width: 100%;
  height: 100%;
}

image.png
你会发现图片的小图脱离文档里覆盖在了文字的上方,然后我们加个透明度给他

.demo-image__preview {
 ..省略代码..
 ..省略代码..
 opacity: 0;
}

image.png
这样,点击文字其实就是点击小图达到以假乱真的效果,然后我们加入js

  data() {
    return {
      url:
        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLMfiju_jWNy52oXUtPINHL9-PKyGJC6i01w&usqp=CAU",
      srcList: []
    };
  },
  methods: {
    async clickimg() {
      this.srcList = [
        (await this.getimgById(0)).src,
        (await this.getimgById(1)).src,
        (await this.getimgById(2)).src
      ];
    },
    getimgById(id) {
      let imglist = [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg"
      ];
      return new Promise((res) => {
        res({ src: imglist[id] });
      });
    }
  }

这里模拟了一个根据id请求图片的接口,可以自行替换。
你学会了吗?




不过有网友发现了Elementui中的图片预览也是一个组件,并且可以单独使用(cdn下目前无法使用)

<template>
    <div>
        <el-button @click="showViewer=true">预览</el-button>
        <el-image-viewer
             v-if="showViewer"
             :on-close="()=>{showViewer=false}"
             :url-list="imgList" />
    </div>
    </template>
    <script>
    export default {
    name: 'Index',
    components: {
            'el-image-viewer':()=>import('element-ui/packages/image/src/image-viewer')
        },
    data() {
        return {
         showViewer: false,
         imgList:[ 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg']
        }
    }
</script>
查看原文

赞 4 收藏 4 评论 0

JenK 回答了问题 · 4月9日

vue有没有放大局部dom的插件

Fullscreen_API

全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式,并且在不需要时退出全屏模式。这种 API 让你可以简单地控制浏览器,使得一个元素与其子元素,如果存在的话,可以占据整个屏幕,并在此期间,从屏幕上隐藏所有的浏览器用户界面以及其他应用。

可以在全屏 API 指南这篇文章了解更多细节。

关注 4 回答 3

JenK 回答了问题 · 4月8日

解决这样的效果怎么实现?

帮你改造了下代码,你可以参考下
demo
大致思路:
循环给数组对象添加isActive的字段,当个数小于5的时候,点击变为true,当超过5的时候,点击新的标签不会触发,点击已选中的进行取消选中的操作

关注 3 回答 3

JenK 回答了问题 · 4月8日

vue 如果是JS插入的html事件,能实现吗?

你这么写就有点违背vue数据驱动视图了,你可以更改为如下写法:
查看DEMO

  <ul>
    <template v-for='(item,index) in liList'>
      <li @click='delLi(item.id)' v-if='!item.isDel'>删除{{item.id}}</li>
    </template>
  </ul>
data() {
    return {
      liList: [
        {
          id: 0,
          isDel: false
        },
        {
          id: 1,
          isDel: false
        },
        {
          id: 2,
          isDel: false
        }
      ]
    };
  },
  methods: {
    delLi(index) {
      this.$set(this.liList[index], "isDel", true);
    }
  }

关注 4 回答 3

JenK 回答了问题 · 4月8日

swiper,翻页箭头如何放到wrapper外面使用

给你写了个demo


你可以看看swipernavigation api,将按钮放在swiper-container外面
image.png
image.png

关注 3 回答 1

JenK 关注了用户 · 4月8日

思否编辑部 @writers

让我们陷入困境的不是无知,而是看似正确的谬误论断。思考、否定、再思考,出家人不打诳语,撰文者不说空话。

欢迎通过私信投稿、提建议、分享素材、传闲话。

联系邮箱 pr@sifou.com 小姐姐微信:https://segmentfault.com/n/13...

关注 6261

JenK 回答了问题 · 4月8日

前端怎样判断话筒是否有声音?

试试这个库Recorder
demo

关注 3 回答 2

JenK 回答了问题 · 4月8日

websocket wss报错

搞个自签名证书,再整个域名,在整个服务器,代价有点大了。
实在不行就用ws就行了。

关注 4 回答 4

JenK 回答了问题 · 4月8日

解决POST请求方式的url怎么用websocket,想实现系统消息实时提醒

wshttp是两种协议,你这个情况下只能是用轮询来操作了,比如每隔几秒去调用下接口

关注 4 回答 3

JenK 回答了问题 · 4月7日

vue cli3 里面的config.js跨域地址动态配置

vue.config.js的代理只会在dev环境生效,production环境是不行的

关注 5 回答 4

JenK 回答了问题 · 4月7日

解决小程序可以直接引入angular进行开发吗?

目前没有
1.没市场: 小程序是天朝特产, Angular 在国内跟 vue 用户有数量级的差距(参看 cnpm 下载量),做了也没人用
2.不合适: Angular 体积太大,包括内置全家桶,小程序一个轻量级应用,而且有大小限制, Angular这么大怎么用?所以国内基本上都是vue 打天下,还有小程序这种体量的应用,用 Angular 就是大炮打蚊子,复杂度够不上用 Angular 的程度
3.难度大:国内(比如知乎上)天天鼓吹 Angular 的各种 Angular 专家根本玩不转 Angular,连 Angular 的很多原理他们都搞不清楚,一问细节全当缩头乌龟了,鼓吹的角度无非设计哲学、一键全家桶、公司背景、协作效率,毕竟细节不清楚只能吹吹宏观层面了,要魔改可别难为这群布道师了,要真魔改还得靠他们的外国大佬改,vue 因为源码简单,国内能玩转的人数都数不清,美团稍微魔改一下就是 mpvue,难度比 Angular 低不知道多少倍.

关注 2 回答 1

JenK 回答了问题 · 4月7日

解决请问div获取文本框的值

demo

<div>
  <input type="text" readonly value='https://' id='input1'>
  <input type="text"  value='' id='input2' placeholder='请输入网站'>
  <button id='btn'>合并输出</button>
</div>

<div id="dom"></div>

js

document.getElementById("btn").onclick = function () {
  let input1 = document.getElementById("input1").value;
  let input2 = document.getElementById("input2").value;
  document.getElementById("dom").innerHTML = `你输入的网址是${input1}${input2}`;
};

关注 3 回答 2

JenK 赞了回答 · 4月6日

解决ant design vue 如何做时间段选择

好像没找到现成的组件来弄,我直接用一个div包裹2个time-picker,将它们的边框设置为none并加以样式调整,让其看起来像一个整体选择

关注 2 回答 2