湖南长沙前端开发与培训－通途工作室-前端开发,技术培训,动效研究,求职信息

websocket前后端通讯模拟

作者:admin 日期:2022-06-13

前端VUE代码：

Javascript代码

test_ws() {
// let websocket;
let url = `ws://192.168.0.73:54000?id=888`;
let websocket = new WebSocket(url,['token340987340697']);
// 建立连接
websocket.onopen = () => {
// 发送数据
console.clear();
console.log("websocket发送数据中",websocket);
websocket.send("发送数据!!!!!!");
};
// 客户端接收服务端返回的数据
websocket.onmessage = evt => {
console.log("websocket返回的数据：", evt.data);
};
// 发生错误时
websocket.onerror = evt => {
console.log("websocket错误：", evt);
};
// 关闭连接
websocket.onclose = evt => {
console.log("websocket关闭：", evt);
};
this.my_ws = websocket
},

后端node.js+koa：

Javascript代码

app.ws.use((ctx, next) => {
/* 每打开一个连接就往上线文数组中添加一个上下文 */
ctxs.push(ctx);
// console.log("🚀 ### ctx1",ctx.query.id)
console.log("🚀 @@@@@@@@@@@", ctx.header["sec-websocket-protocol"])
ctx.websocket.send("start!!!!"+_.random(999, 9999))
ctx.websocket.on("message", (msg) => {
console.log("🚀 ### msg2", msg.toString())
if (ctx.query.id == '10001') {
msg1.push(msg.toString())
}
if (ctx.query.id == '10002') {
msg2.push(msg.toString())
}
/* for(let i = 0; i < ctxs.length; i++) {
if (ctx != ctxs[i]) {
ctxs[i].websocket.send(message)
}
} */
});
// 客户端主动断开链接时候用可以先不管
ctx.websocket.on("close", (message) => {
console.log(ctx.query.id,"🚀 ### close###########")
console.log(msg1);
console.log('---------------');
console.log(msg2);
/* 连接关闭时, 清理上下文数组, 防止报错 */
let index = ctxs.indexOf(ctx);
ctxs.splice(index, 1);
});
});

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 94

关于faker.js，中文化/删库后地址/国内镜像

作者:admin 日期:2022-05-31

一个中文化做得比较全的版本，比如中文名，省份，地址，公司名啥的，亲测可用。

https://github.com/layerssss/Faker-zh-cn.js/

原作者删库后，被github给冻结了，志愿者重新维护了这个库：https://github.com/faker-js/faker

GITEE国内镜像，未测，https://gitee.com/mirrors/faker-js

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 148

vue2实现Teleport，用来做跨组件DOM挂载

作者:admin 日期:2022-04-20

父组件调用：（to="#app"的意思是把#divPopup挂载到#app节点上）

Javascript代码

<Teleport to="#app">
<div id="divPopup" style="z-index:20000;" v-show="dialogVisible">
<el-button @click="clickH1">yes</el-button>
<el-button @click="clickH2">no</el-button>
</div>
</Teleport>

子组件：

Javascript代码

<script>
export default {
name: 'teleport',
props: {
/* 移动至哪个标签内，最好使用id */
to: {
type: String,
required: true
}
},
mounted() {
document.querySelector(this.to).appendChild(this.$el)
},
destroyed() {
document.querySelector(this.to).removeChild(this.$el)
},
render() {
return <div>{this.$scopedSlots.default()}</div>
}
}
</script>

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 266

一个帧动画--仿做

作者:admin 日期:2022-03-25

点击此处查看DEMO

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 379

json-server+mock.js构建vue/小程序均可用的mock体系

作者:admin 日期:2022-03-03

前端开发经常在vue-cli、小程序中切换，所以要搭建一个独立的mock环境，json-server就很符合我的需要。它就是独立的node程序，使用时用单独的命令行启动。常见使用场景就是， json-server全局安装，每个项目需要的mock配置放在mock目录下，要使用时，只要用单独的命令行启动即可。

常用的启动命令如下：

json-server --watch --port 53000 ./mock/mock.js --middlewares ./mock/middlewares.js

在vue中使用时，可以在package.json中做如下关联：

Javascript代码

"scripts": {
"mock": "json-server --watch --port 53000 ./mock/mock.js --middlewares ./mock/middlewares.js"...
},

这样就可以使用npm run mock来启动了。生成的接口类似这样：

mock.js是项目配置文件，我加了一段函数walkSync，用于遍历mock/api目录，这样复杂点的接口，直接在api目录下写个js文件就可以模拟了(支持mock.js语法)。

还是以项目中的login.js为例：

Javascript代码

//login.js
module.exports = {
"token": "@guid()",
"user_info": {
'uid|3333-9999': 100,
'organ': '@ctitle(2, 3)研究所',
'name': '@cname',
'level|1': [0]
}
}

简单点的接口，比如那种只要返回个成功信息的接口，我就在mock.js中直接生成了，比如：

Javascript代码

{
"code": 200,
"data": {flag:true},
"msg": ''
}

json-server及mock.js的常规用法，网上文档很多，不赘述。

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 478

lodash的get函数来判断对象深处的空值，太有用了！

作者:admin 日期:2022-01-21

例题，比如，有这样一个对象：

Javascript代码

let arr = [
{id:1,tit:'ttt1'},
{id:2,tit:'ttt2',bb:{ cc:{dd:12} }},
{id:3,tit:'ttt3',bb:{}},
{id:5,tit:'ttt5',bb:{ cc:{dd:''}}},
{id:6,tit:'ttt6',bb:{ cc:{dd:null}}},
{id:7,tit:'ttt7'},
]

分支内的数据不太规范，有的分支多，有的少。现在要求：输出所有含有dd属性的一级分支（dd如为空值也要排除掉）

想想，怎么写?

直接给答案吧，lodash大法好，清晰优美，而且是带变量的写法，不管有多深，一探到底：

Javascript代码

_.each(arr, item=>{
let flag = _.get(item, [ 'bb', 'cc', 'dd' ])
if(flag){
console.log(item)
}
})

另外，_.isEmpty这个函数也很好用，用于空值判断，可以判断各种不同的空值，比如对象空，数组空，字符空。

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 639

在contenteditable的div中的段落文字中获取光标位置，并在光标处插入字符

作者:admin 日期:2021-12-23

vue项目中的一个小需求如题，代码整理如下：

Javascript代码

<template>
<el-container class="about">
<el-main>
<section class="bgBox">
<h1>在诗句上任意位置点击，再点击“插入字符”按钮，即可在光标处插入字符</h1>
<div class="h20"></div>
<el-button type="primary" @click="insertChar">插入字符</el-button>
<div class="h30"></div>
<div class="edit" contenteditable>
<p
v-for="(item, index) in sentenses"
:key="item"
@click="getCurrentSent(index)"
>
{{ item }}
</p>
</div>
</section>
</el-main>
</el-container>
</template>
<script>
const insertStr = (soure, start, newStr)=>{
return soure.slice(0, start) + newStr + soure.slice(start);
}
import { getTableList, uploadFile } from "@/api/system/api_user";
export default {
data() {
return {
current_sent: null,
sentenses: [
"凌波不过横塘路。但目送、芳尘去。",
"锦瑟华年谁与度。月桥花院，琐窗朱户。只有春知处。 ",
"飞云冉冉蘅皋暮。彩笔新题断肠句。若问闲情都几许。",
"一川烟草，满城风絮。梅子黄时雨。"
]
};
},
computed: { },
methods: {
getCurrentSent(index) {
// 获取当前句子
this.current_sent = index;
},
insertChar() {
// 获取getSelection对象，这个对象有很多内容，自己找到有用的数据
let select = window.getSelection();
// 利用insertStr函数，在光标位置插入###三个字符
let newSent = insertStr(
this.sentenses[this.current_sent],
select.anchorOffset - 1,
"###"
);
// 更新sentenses数组视图
Vue.set(this.sentenses, this.current_sent, newSent);
}
}
};
</script>
<style lang="scss"></style>

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 672

纯CSS实现文字水波动画

作者:admin 日期:2021-10-11

点击打开：

http://www.contactu.cn/2021/test_water/test_water.html

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 931

moment定义日期针对苹果手机的一个小bug

作者:admin 日期:2021-05-08

moment('2021-1')这种格式定义一个日期时，安卓机可以通过，苹果机不行，显示NaN,

因此必须统一使用：moment('2021-01')这样的标准格式。

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1440

SVG异形边框及路径动画+CSS动画演示

作者:admin 日期:2021-03-19

演示地址：

http://contactu.cn/2021/vue_svg_tweenmax_demo/index.html

- 根据窗体的width/height参数，自动计算生成SVG的path路径

- tweenmax+MorphSVGPlugin生成小光点绕路径环游的动画，tweenmax的CSS动画生成右下角的色彩变化

- VUE组件化，方便复用

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1926

snap.svg+vue实现圆形导航

作者:admin 日期:2020-11-24

查看案例请点击此处：

http://258754.cn/2020/vue_demo/#/demo/svg_nav

使用的技术框架：

1、snap.svg实现Svg

2、数据与视图双向交互由vue-cli3实现

功能点：

1、图形与数组双向互动。可点击“添加”按钮添加数组中的对象。

2、算法实现path环状节点，角度、弧度、边长的逻辑关系。下图中所有不同颜色的线段，都是通过CSS定义得到的。可以把一个圆环分成3份，也可以分成50份，得到不同的视觉效果。

3、Snap.animate 实现动画、transform用法

4、stroke-dasharray实现线条间隙，比如下例中的白色间隔。

5、viewBox改变Svg中心。

6、textPath路径文字，实现跟随弧度变化的文字

通过这个案例，了解了两种方式，来实现SVG线条。用HTML+CSS方式、或使用snap.svg的JS方式，都可以实现。

附：vue-cli3引用snap.svg出现错误的解决办法

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2001

vue-cli3引用snap.svg出现错误的解决办法

作者:admin 日期:2020-11-12

做为正当的做法，应该使用

Javascript代码

npm install snapsvg
import Snap from 'snapsvg'

来使用svap.svg

但事实上这样是不行的，会报红字错：

vue-router.min.js:6 TypeError: Cannot read property 'on' of undefined

找了很多百度、github issue的很多资料，发现很多人都碰到了这个问题，也提供了Webpack及改写vue-cli3( vue.config.js)的办法，但实验发现都解决不了问题。

最终在stackoverflow.com找到了最简便的解决办法：

Javascript代码

npm install snapsvg-cjs
import "snapsvg-cjs"

经我验证可行。

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2742

使用echarts地图，大屏实现“县乡级行政区划”数据展示的几个难点汇总

作者:admin 日期:2020-06-12

某大屏展示项目中，要实现“点击乡级区划，显示出相应的数据”，

最终效果，链接：http://258754.cn/2020/guidong/demo.html

经过几天的学习，解决了一些疑难问题，特汇总如下以供参考：

难点	解决方法	参考文章或链接
echarts地理图的基础实现-基于geojson	参考了百度官方示例-香港地图	https://echarts.apache.org/examples/zh/editor.html?c=map-HK
外框发光效果实现	geo--itemStyle
得到县一级的geojson数据	很多方法得到，本处给出一个很方便的工具	https://gallery.echartsjs.com/editor.html?c=x4snrWXFGe
网上公开的geojson数据，免费只到县一级，没有乡镇一级地图	1、自己手工绘制，比较粗糙，边界不准 2、找到了精确边界数据的购买渠道，很便宜	geojson.io这个网站可以手工绘制区块
买到的 geojson数据比较旧，今年度新的区划已经发生了合并。	使用mapshaper.org提供的工具，对区划进行了合并，完美解决了问题。合并操作及控制台语法花了点时间。	工具：mapshaper.org 解析贴： https://segmentfault.com/q/1010000013001601
同一页面展示多个图表	vue组件将地图封装了一下	查看本文源码

解决了以上主要问题，绘制类似地图，就只剩一些细节问题了。

本文同时发布到两处：

本人博客：http://www.contactu.cn

知乎专栏《低水平前端》：https://zhuanlan.zhihu.com/c_1040198727197237248

Tags: echart echart geojson geojson

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3647

SVG制作不规则链接热点的最简版演示

作者:admin 日期:2019-02-28

一朋友要做一个“战国地图”，不会做“不规则热点”。我给他做了这个最简版演示。SVG是我用ps描的，很粗略。响应用的是vue.js，其实用jquery也是一样的。

这就是个最简演示，其它常用技术就不解释了。

演示地址：
http://www.contactu.cn/2016/svg/qg.html

分类:前端研究 | 固定链接 | 评论: 2 | 引用: 0 | 查看次数: 8198