分类: 前端研究预览模式: 普通 | 列表

一键启动平行目录的node服务端 / vue前端项目，并热更新

作者:admin  日期:2022-11-17

同步发到 https://zhuanlan.zhihu.com/p/584197370

 

项目是用一个git进行管理的。开发时经常需要三端联动调试，一个个启动太麻烦了。于是找了个办法进行多端同时启动，并实现了前后端的热更新。

package.json是根目录的那个，并不是admin(vue)的那一个。主要配置如下：

concurrently用来同时启动两个npm run命令

nodemon是普通node命令的一个替代品，可以实现node开发时的热更新

查看更多...

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

element-ui主题编辑器报request timeout的解决办法

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

 2022年7月，element-ui主题（theme)编辑器一段时间老是报timeout问题，等了一二周也没见解决。一个偶然机会找到一个网上项目，让element官网可以在本地跑起来，当然也可以做theme编辑，特此分享。用这种方法编辑element外观，才是最正规的方法。

 
使用起来很简单，先按package.json中的配置，把项目把本地站跑起来。
 
在本地站编辑完，点“下载”，生成zip压缩包，将压缩包中的theme目录放到特定位置，然后在项目的main.js中引入这个index.css就行了。
 
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 644

websocket前后端通讯模拟

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

 前端VUE代码：

Javascript代码
  1. test_ws() {  
  2.   // let websocket;  
  3.   let url = `ws://192.168.0.73:54000?id=888`;  
  4.   let websocket = new WebSocket(url,['token340987340697']);  
  5.     // 建立连接  
  6.     websocket.onopen = () => {  
  7.       // 发送数据  
  8.       console.clear();  
  9.       console.log("websocket发送数据中",websocket);  
  10.       websocket.send("发送数据!!!!!!");  
  11.     };  
  12.     // 客户端接收服务端返回的数据  
  13.     websocket.onmessage = evt => {  
  14.       console.log("websocket返回的数据：", evt.data);  
  15.     };  
  16.     // 发生错误时  
  17.     websocket.onerror = evt => {  
  18.       console.log("websocket错误：", evt);  
  19.     };  
  20.     // 关闭连接  
  21.     websocket.onclose = evt => {  
  22.       console.log("websocket关闭：", evt);  
  23.     };  
  24.   
  25.     this.my_ws = websocket   
  26. },  

后端node.js+koa：

Javascript代码
  1. app.ws.use((ctx, next) => {  
  2.     /* 每打开一个连接就往 上线文数组中 添加一个上下文 */  
  3.     ctxs.push(ctx);  
  4.     // console.log("🚀 ### ctx1",ctx.query.id)  
  5.     console.log("🚀 @@@@@@@@@@@", ctx.header["sec-websocket-protocol"])  
  6.     ctx.websocket.send("start!!!!"+_.random(999, 9999))  
  7.     ctx.websocket.on("message", (msg) => {  
  8.         console.log("🚀 ### msg2", msg.toString())  
  9.         if (ctx.query.id == '10001') {  
  10.             msg1.push(msg.toString())  
  11.         }  
  12.         if (ctx.query.id == '10002') {  
  13.             msg2.push(msg.toString())  
  14.         }  
  15.         /* for(let i = 0; i < ctxs.length; i++) { 
  16.             if (ctx != ctxs[i]) { 
  17.                 ctxs[i].websocket.send(message) 
  18.             } 
  19.         } */  
  20.     });  
  21.       
  22.     // 客户端主动断开链接时候用 可以先不管  
  23.     ctx.websocket.on("close", (message) => {  
  24.         console.log(ctx.query.id,"🚀 ### close###########")  
  25.         console.log(msg1);  
  26.         console.log('---------------');  
  27.         console.log(msg2);  
  28.         /* 连接关闭时, 清理 上下文数组, 防止报错 */  
  29.         let index = ctxs.indexOf(ctx);  
  30.         ctxs.splice(index, 1);  
  31.     });  
  32. });  

 

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

关于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 | 查看次数: 677

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

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

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

Javascript代码
  1. <Teleport to="#app">  
  2.         <div id="divPopup" style="z-index:20000;" v-show="dialogVisible">  
  3.           <el-button @click="clickH1">yes</el-button>  
  4.           <el-button @click="clickH2">no</el-button>  
  5.         </div>  
  6. </Teleport>  

子组件：

Javascript代码
  1. <script>  
  2.     export default {  
  3.         name: 'teleport',  
  4.         props: {  
  5.             /* 移动至哪个标签内，最好使用id */  
  6.             to: {  
  7.                 type: String,  
  8.                 required: true  
  9.             }  
  10.         },  
  11.   
  12.         mounted() {  
  13.             document.querySelector(this.to).appendChild(this.$el)  
  14.         },  
  15.   
  16.         destroyed() {  
  17.             document.querySelector(this.to).removeChild(this.$el)  
  18.         },  
  19.   
  20.         render() {  
  21.             return <div>{this.$scopedSlots.default()}</div>  
  22.         }  
  23.     }  
  24. </script>  

 

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

一个帧动画--仿做

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

 

点击此处查看DEMO

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

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代码
  1. "scripts": {  
  2.   "mock": "json-server --watch --port 53000 ./mock/mock.js --middlewares ./mock/middlewares.js"...  
  3. },  
这样就可以使用npm run mock来启动了。生成的接口类似这样：
mock.js是项目配置文件，我加了一段函数walkSync，用于遍历mock/api目录，这样复杂点的接口，直接在api目录下写个js文件就可以模拟了(支持mock.js语法)。
 
还是以项目中的login.js为例：
Javascript代码
  1. //login.js  
  2. module.exports = {  
  3.     "token": "@guid()",  
  4.     "user_info": {  
  5.         'uid|3333-9999': 100,  
  6.         'organ': '@ctitle(2, 3)研究所',  
  7.         'name': '@cname',  
  8.         'level|1': [0]  
  9.     }  
  10. }  
简单点的接口，比如那种只要返回个成功信息的接口，我就在mock.js中直接生成了，比如：
Javascript代码
  1. {  
  2.     "code": 200,  
  3.     "data": {flag:true},  
  4.     "msg": ''  
  5. }  
 json-server及mock.js的常规用法，网上文档很多，不赘述。

 

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

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

作者:admin  日期:2022-01-21
例题，比如，有这样一个对象：
Javascript代码
  1. let arr = [  
  2.   {id:1,tit:'ttt1'},  
  3.   {id:2,tit:'ttt2',bb:{ cc:{dd:12} }},  
  4.   {id:3,tit:'ttt3',bb:{}},  
  5.   {id:5,tit:'ttt5',bb:{ cc:{dd:''}}},  
  6.   {id:6,tit:'ttt6',bb:{ cc:{dd:null}}},  
  7.   {id:7,tit:'ttt7'},  
  8. ]  
分支内的数据不太规范，有的分支多，有的少。现在要求：输出所有含有dd属性的一级分支（dd如为空值也要排除掉）
想想，怎么写?
 
直接给答案吧，lodash大法好，清晰优美，而且是带变量的写法，不管有多深，一探到底：
Javascript代码
  1. _.each(arr, item=>{  
  2.   let flag = _.get(item, [ 'bb', 'cc', 'dd' ])  
  3.   if(flag){  
  4.     console.log(item)  
  5.   }  
  6. })  
另外，_.isEmpty这个函数也很好用，用于空值判断，可以判断各种不同的空值，比如对象空，数组空，字符空。
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1107

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

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

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

Javascript代码
  1. <template>  
  2.   <el-container class="about">  
  3.     <el-main>  
  4.       <section class="bgBox">  
  5.           <h1>在诗句上任意位置点击，再点击“插入字符”按钮，即可在光标处插入字符</h1>  
  6.           <div class="h20"></div>  
  7.         <el-button type="primary" @click="insertChar">插入字符</el-button>  
  8.         <div class="h30"></div>  
  9.         <div class="edit" contenteditable>  
  10.           <p  
  11.             v-for="(item, index) in sentenses"  
  12.             :key="item"  
  13.             @click="getCurrentSent(index)"  
  14.           >  
  15.             {{ item }}  
  16.           </p>  
  17.         </div>  
  18.       </section>  
  19.     </el-main>  
  20.   </el-container>  
  21. </template>  
  22.   
  23. <script>  
  24. const insertStr = (soure, start, newStr)=>{     
  25.    return soure.slice(0, start) + newStr + soure.slice(start);  
  26. }  
  27.   
  28. import { getTableList, uploadFile } from "@/api/system/api_user";  
  29. export default {  
  30.   data() {  
  31.     return {  
  32.       current_sent: null,  
  33.       sentenses: [  
  34.         "凌波不过横塘路。但目送、芳尘去。",  
  35.         "锦瑟华年谁与度。月桥花院，琐窗朱户。只有春知处。 ",  
  36.         "飞云冉冉蘅皋暮。彩笔新题断肠句。若问闲情都几许。",  
  37.         "一川烟草，满城风絮。梅子黄时雨。"  
  38.       ]  
  39.     };  
  40.   },  
  41.   computed: {  },  
  42.   methods: {  
  43.     getCurrentSent(index) {  
  44.       // 获取当前句子  
  45.       this.current_sent = index;  
  46.     },  
  47.     insertChar() {  
  48.       // 获取getSelection对象，这个对象有很多内容，自己找到有用的数据  
  49.       let select = window.getSelection();  
  50.   
  51.       // 利用insertStr函数，在光标位置插入###三个字符  
  52.       let newSent = insertStr(  
  53.         this.sentenses[this.current_sent],  
  54.         select.anchorOffset - 1,  
  55.         "###"  
  56.       );  
  57.   
  58.       // 更新sentenses数组视图  
  59.       Vue.set(this.sentenses, this.current_sent, newSent);  
  60.     }  
  61.   }  
  62. };  
  63. </script>  
  64. <style lang="scss"></style>  

 

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

纯CSS实现文字水波动画

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

点击打开：

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

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

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

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

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

因此必须统一使用：moment('2021-01')这样的标准格式。
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1734

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 | 查看次数: 2280

snap.svg+vue实现圆形导航

作者:admin  日期:2020-11-24
查看案例请点击此处：
 
使用的技术框架：
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方式，都可以实现。
 
 
 
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2331

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

作者:admin  日期:2020-11-12
做为正当的做法，应该使用
Javascript代码
  1. npm install snapsvg  
  2. 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代码
  1. npm install snapsvg-cjs  
  2. import "snapsvg-cjs"  
经我验证可行。
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3092