前端
今天也想MK代码
游走在技术边上的躯壳。
展开
-
命令行修改微信小程序开发AppId
痛点在多个小程序多个环境下开发,频繁切换,有时候还记不住Appid,重新找,实在烦人。解决方案微信小程序appid 修改作用于project.config.json,意味着通过脚本修改project.config.json 下的appid即可。思路通过 node 的 process.argv 获取命令行参数,根据参数获取不同的appid,进行修改通过 node 的readFileSync、writeFileSync进行对微信小程序配置文件project.config.json读写操作即可。原创 2022-03-02 14:56:23 · 1638 阅读 · 0 评论 -
React学习----路由懒加载
React 使用webpack 打包时,会生成一个main.js的文件。当页面组件增多时,main.js 也跟着变大,从而减慢页面的加载速度。使用 compression-webpack-plugin 配合 nginx,将文件压缩,这种方法可行,但是加载首页的时候,效果还是不理想。于是,想到了把main.js 拆分多个。从而减少首屏js大小,加快加载速度。未用懒加载Index 组件:class Index extends React.Component { ...}export defaul原创 2021-01-16 16:08:24 · 552 阅读 · 0 评论 -
webpack ——自定义Loader,将i18n英文单词首字母转大写
问题在客户要求下要将项目中中英文切换,英文要以英文单词首字母大写为准。可是前期开发人员并没有规范。 多以这种: "headerFontColor":"top font MAV Mac /MAC(V)",存在,可是emmmmm…一个一个修改,必si。方法 1去看了vue-i18n 官网,找到formatter可实现。实践:// 实现自定义格式class CustomFormatter { constructor (options) { } // 英文处理 u原创 2021-01-08 16:11:46 · 584 阅读 · 0 评论 -
Node + Express+ Mysql + Jsonwebtoken 实现登陆token检验
安装npm install body-parser -Snpm install express --savenpm install mysql -Snpm install express-jwt -Snpm install jsonwebtoken -S简单服务创建一个空项目,npm init -y 加载 package.json 文件。在项目下创建app.js, 开启服务:const express = require('express')const bodyParser =原创 2021-01-07 17:27:40 · 664 阅读 · 0 评论 -
echarts + 百度地图 飞线
效果:代码地址集成js <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你自己申请得百度地图ak"></script> <script src="./dist/echarts.min.js" ></script> <script src="./dist/extension/bmap.min.js">原创 2020-11-04 18:03:33 · 3365 阅读 · 5 评论 -
axios 多文件Form表单提交
设置 headers let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }使用 FormData 设置参数 let fromData = new FormData() // 参数为对象时, 使用 JSON.stringify 转字符串 fromData.append('operation', JSON.stringify( pam原创 2020-10-26 15:14:55 · 458 阅读 · 0 评论 -
前端拖拽drag的使用
HTML设置 draggable 属性,可推拽<div class="target" draggable="true">合格</div> <div class="target" draggable="true">不合格</div> <div class="target" draggable="true">合格</div> <div class="target" draggable="true">合格&l原创 2020-10-16 21:22:19 · 1022 阅读 · 0 评论 -
在谷歌浏览器中Response中set-cookie无效
在谷歌浏览器中Response中set-cookie无效原创 2020-10-12 15:27:38 · 2551 阅读 · 0 评论 -
Android集成腾讯TBS浏览服务
背景在使用Android的webview嵌套页面,从而打包成APP,实现apk。但是,文件下载功能出现了问题,总是下载不了。TBS官网介绍:腾讯浏览服务是致力于优化移动端webview体验的整套解决方案。该方案由SDK、手机QQ浏览器X5内核和X5云端服务组成,解决移动端webview使用过程中出现的一切问题,优化用户的浏览体验。同时,腾讯还将持续提供后续的更新和优化,为开发者提供最新最优秀的功能和服务。集成可查看官网快速接入试试水初始化 x5,创建 MyAplication 类:im原创 2020-10-10 11:06:47 · 1991 阅读 · 5 评论 -
Javascript正则表达式之断言
正则表达式创建正则表达式创建正则表达式有两种方式:let regex = new RegExp('a', 'i');// 等价于let regex = /a/i;正则表达式函数一种是RegExp实例对象的函数:test(): 返回值是true 或 falselet word = 'hello world' let regexp = /hello/let result = regexp.test(word) // trueexec(): 如何符合正则表达式,返回值是一个数组,否原创 2020-09-07 16:20:02 · 1581 阅读 · 1 评论 -
node+socket.io+nginx配置实现聊天页面
socket.iosocket.io官网文档服务端服务端主要实现一个信息转发站,类似于:信息a -> server -> 信息b 流程的工作。创建一个文件夹 demo,在其文件夹下运行npm init 初始化一个工程。安装express,socket.io模块 npm install express@4.15.2 ; npm install socket.ioindex.js代码,实现一个简单的服务:const { Server } = require('http');var原创 2020-09-05 21:07:57 · 487 阅读 · 0 评论 -
Spring Boot整合quartz实现自定义时间调度器
这几天突然想弄一个,可以通过接口实现自定义定时任务,之前使用的是@Scheduled。 经查询quartz可实现。话不多说,直接上码。引用 <dependency> <groupId>org.quartz-scheduler</groupId> <artifactId>quartz</artifactId> <version>2.3.2</version> </dependency>原创 2020-08-26 11:32:04 · 777 阅读 · 0 评论 -
H5使用qrcode实现扫码
Qrodeqrcode.js 可用于识别二维码,生成二维码。下载地址本文源码Qrode 基本使用生成二维码<div id="qrcode"></div><script type="text/JavaScript">new QRCode(document.getElementById("qrcode"), "这是一个二维码"); // 设置要生成二维码的链接</script>解析二维码qrcode.decode(imgSrc)原创 2020-08-19 16:51:25 · 4128 阅读 · 0 评论 -
创建简易的脚手架以及上传代码到npm
第一步创建空文件夹 TextCLI, 执行npm init,得到初始化package.json第二步配置 package.json:第三步安装 commander child_process,执行shell的插件。cnpm install commander child_process --save第四步配置index.js。创建index.js。#! /usr/bin/env node const program = require('commander');var proces原创 2020-08-12 11:57:39 · 389 阅读 · 0 评论 -
webpack配置Vue项目(工程模板)
使用 npm i wtechtec-template-vue npm install 结构介绍build 文件夹存放webpack 配置文件:src 文件夹存放路由,vuex,页面,assets静态资源等routervuexsvg使用在svg文件夹下创建一个name.svg文件在name.svg文件中,粘贴svg数据在页面 <svg-icon icon-class="logo"></svg-icon>工具jsviews存放vue原创 2020-08-12 10:38:51 · 135 阅读 · 0 评论 -
H5两个button之间缝隙移除
问题发现两个按钮没有设置margin,padding,以及没有做换行操作,也是不紧贴。如图:而我想要的是两个按钮紧贴一起显示。解决方式1: 设置父级的字体大小为0。 font-size: 0px;即可。方式2: 设置父级的display。 display: flex | inline-flex等原因H5某些标签带有空格和换行。这些不可见字符的大小会随着父级的字体大小而产生间隙。资料...原创 2020-08-11 10:27:16 · 652 阅读 · 0 评论 -
前端 移动端 Mint UI 体验
下载npm i mint-ui -S官网引用import MintUI from 'mint-ui'import 'mint-ui/lib/style.css'Vue.use(MintUI)如使用过程报错,未能找的组件。可使用一下方式:import { Button, Cell } from 'mint-ui'Vue.component(Button.name, Button)Vue.component(Cell.name, Cell)下拉 上拉例子引用:import { Lo原创 2020-08-10 18:59:13 · 203 阅读 · 0 评论 -
webpack 设置img 的src属性出现 [object Object]
第一步webpack配置url-loader、file-loader配置 { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', exclude:[resolve('src/icons/svg')], options: { esModule: false, //原创 2020-08-10 14:02:21 · 1184 阅读 · 0 评论 -
react学习--简单优化访问网页加载慢问题
经过几天的奋斗。基本页面代码已完成,马上放服务器。效果如下:…等。当访问主页时,等的时间实在是太久,这怎么行?于是查看了一下Network,发现:24 + 秒,我的天。。。。。不行,得整顿整顿代码。1、devtool 设置false找到react项目中 node_modules --> react-scripts–>config–>webpack.config.js, 设置 devtool 为 false。打包。嗯,好像没啥用。依然很慢,但是项目打包js中少了原创 2020-08-10 08:52:42 · 2178 阅读 · 0 评论 -
React学习-- 路由,Redux简单应用,aixos封装
React路由操作下来,真心觉得,没有 Vue 路由好用。。。。1、 安装 路由npm install --save react-router-dom2、在src下创建router 文件夹并创建index.js 来管理你的路由;import Login from '../modules/login/login'; // 定义的模块import Main from '../modules/main/mian';import Page1 from '../components/Page1 ';原创 2020-08-10 08:53:27 · 159 阅读 · 0 评论 -
Vue 手写一个分页组件
今天遇到一个需求是在分页组件中的每页显示个数选择器加个所有的选择。系统分页组件用的是 element ui pagination,当本人在 page-sizes 属性中添加‘所有’进去。出现的内容如下:这。。。怎么行。于是自己动手写了一个。1、创建 wtecthtec-pagenation.vue在components 目录下2、设置 props 参数,也就是分页组件需要配置的参数,:/* 需要参数 :pageSizes:对象数组,显示每页显示个数选择器 [{value:100,name:10原创 2020-08-09 11:03:02 · 1215 阅读 · 0 评论 -
Vue使用阿里矢量图 SVG
1、下载 svg-sprite-loadernpm install svg-sprite-loader2、在文件夹components 创建 TheNav.vue<template> <svg class="svg-icon" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg></template><script>exp原创 2020-08-09 11:00:48 · 1602 阅读 · 0 评论 -
Webpack创建React项目
一、安装Webpack1. 创建空文件夹 mkdir webpackCreateReact用vscode 、idea或其他开发软件打开 webpackCreateReact文件夹2. 加载 package.jsonnpm init -y3.安装webpacknpm install -D webpack webpack-clinpm install webpack-merge -D二、初始化项目目录1、创建 src 文件夹,存放组件,js,css 等文件2、创建 build文件原创 2020-08-09 10:59:00 · 218 阅读 · 0 评论 -
前端导出表格之XLSX使用
导入xlsxnpm install xlsxXLSX官网引用import XLSX from xlsxH5 table 导出表格在页面创建table<table border="" id="table"> <tbody> <tr> <td rowspan='2'>表头1</td> <td colspan="2">表头2</td> </tr> <tr >原创 2020-08-09 10:45:40 · 10565 阅读 · 5 评论