- 博客(45)
- 收藏
- 关注
RSS订阅原创 前端原生js实现日期格式转换
实现时间格式转换执行结果实现方式执行结果实现方式function dateFormat(fmt, date) { let ret; const opt = { "y+": date.getFullYear().toString(), // 年 "M+": (date.getMonth() + 1).toString(), // 月 "d+": date.getDate().toString(),
2021-12-07 11:48:27
639
原创 前端vue3.0递归实现实现树形结构侧边栏
实现树状结构侧边栏实现效果测试数据tree.json实现思路实现方法定义Menu组件，处理布局在页面中使用实现效果测试数据tree.json[ { "nodeid": "777718a5-18a8-4955-928a-64b683513590", "parentid": "", "nodename": "目录1", "children": [ { "nodeid": "b278006e-cb28-4459-8f1a-e42202a96c
2021-12-03 15:20:27
1814
原创 vue keep-alive使用方式
使用keep-alive做页面缓存使用场景生命周期activateddeactivated根据Router，判断页面是否需要缓存app.vue 写法router/index.js写法使用场景在组件切换过程中仍然将数据保留在内存中，不会重新渲染DOM，例如某些页面进入下一页面并返回后，要求页面不刷新。这时就可以使用keep-alive生命周期当页面被keep-alive包裹时，activated、deactivated这两个生命周期才会被执行activated当组件被激活时调用，可以代替creat
2021-12-02 17:32:13
492
原创 封装统一的前端vue axios请求及响应拦截器
封装拦截器引入所需文件并声明创建axios实例requst请求拦截器response响应拦截器实际使用在开发中通常会对token，特殊错误以及其它需要统一处理的需求。在接口调用时统一操作token接口数据返回后统一处理操作请求等这时就用到了拦截器引入所需文件并声明import axios from 'axios'import Cookies from 'js-cookie'import { Notify, Toast, Dialog } from 'vant'const errorCod
2021-12-02 15:07:58
200
原创 前端mock.js模拟数据请求
mock数据实现无接口情况下前端先行开发安装mock.js创建mock目录mock/index中配置路径接口main.js中进行声明实际使用安装mock.jsnpm install mockjs --save-dev创建mock目录在json文件夹中写入自己需要的json，定义好json数据格式（也可通过mock生成）mock/index中配置路径接口const Mock = require('mockjs');//配置延迟Mock.setup({ timeout: "100-5
2021-12-02 13:58:23
762
原创 前端svg雪碧图
实现页面中直接引用svg创建目录创建组件在index对SvgIcon进行封装main.js中全局注册实际使用创建目录创建组件创建一个公共组件，用来后续引用<template> <i :class="svgClass"> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"></use> &
2021-11-30 17:51:41
345
原创 NodeJS: 从零开始搭建vue脚手架
搭建vue脚手架项目搭建项目创建目录添加需要的js文件功能开发功能一：获取git地址上的代码安装需要的插件具体实现功能二：创建vue模板并写入路由具体实现本地测试模块链接执行命令npm发布npm发布后安装搭建项目创建目录1.mkdir mycli2.cd mycli3.npm init4. 使用开发工具打开目录添加需要的js文件创建bin/cli.js 文件，在package.json内添加一个bin字段，指向脚手架文件6.为创建的js文件更改写入权限：chmod 755 cli.
2021-11-29 15:43:18
1310
原创 前端table表格导出excel
纯前端将表格数据导出excel导出xlsx格式的excel文件方法封装方法调用导出csv格式的excel表格方法封装方法调用导出xlsx格式的excel文件方法封装对表头及表格数据分别进行循环获取/** * * @param jsonData 接口返回数据 * @param nameList 标题表头数据 （非必填） * @param keyList 与表头相对应取值参数名 （非必填） */export function downloadExcel(jsonData,nameList,k
2021-09-29 15:55:28
523
原创 前端实现节流防抖
前端实现节流防抖防抖思路1：再次触发时，重新setTimeout思路2：使用闭包，不改变全局变量进行封装节流思路1:定义定时器，触发定时器便执行操作思路2:定义状态位，状态改变前不可继续调用3.使用闭包防抖在第一次触发事件时，不立即执行函数，而是在一定时间后再执行，如果重新触发事件，则重新执行。思路1：再次触发时，重新setTimeout//判断是否有计时let timer = nullif(timer) { clearTimeout(timer) }timer = setTimeou
2021-09-09 23:56:53
191
原创 前端实现打印html页面
前端打印页面内容确认打印布局打印排版去掉打印页眉页脚调用打印方法确认打印布局打印方法是打印body里面的数据，如果想打印部分数据，则需要将打印布局放在body里面，或者将不需要的布局隐藏。将布局渲染到body会导致页面重新渲染，存在问题，所以可以用css来解决，设置后打印预览就不会出现不需要的布局了。<div id='printNone'>不需要打印的数据</div><div>需要打印的数据</div><style>@media p
2021-09-09 22:31:57
1229
原创 前端纯CSS导入otf字体包
使用font-face引入字体包1.声明font-face2.在样式中使用1.声明font-face<style>@font-face { font-family: GraublauWeb; src: url("../../assets/otf/111.otf");}@font-face { font-family: IndexPhone; src: url("../../assets/otf/222.otf");}</style>2.在样式中使用
2021-08-31 09:39:44
5014
原创 前端vue-qr生成二维码
vue-qr使用方法安装引入使用方法安装引入//安装npm install vue-qr --save//引入import VueQr from 'vue-qr'new Vue({ components: {VueQr}})使用方法API参考官方文档：链接: vue-qr官方文档.<vue-qr :bgSrc='src' :logoSrc="src2" text="Hello world!" :size="200"></vue-qr><vue
2021-08-28 21:54:54
546
原创 前端Html使用html2canvas生成页面截图
html2canvas生成页面图片安装创建公共方法创建img接受数据页面渲染完成后再加载全部数据安装npm install html2canvas//安装完成后在文件内引入import html2canvas from 'html2canvas';创建公共方法createdCvs() { let shareContent = document.querySelector("#id"); // 设置放大倍数 如果生成的图片不需要放大缩小则不添加 const
2021-08-28 21:35:04
450
原创 angular路由知识整理
angular路由基本路由配置1.创建带路由的angular项目2.创建组件并配置路由3.页面中使用路由4.设置默认路由地址路由传值1. 静态传值传值接收2.页面动态传值传值接收3.js动态跳转传值4.get传值动态跳转路由父子路由1.app-routing.moudle.ts文件中声明子路由2.父路由中嵌套子路由基本路由配置1.创建带路由的angular项目//创建是在是否选择路由时选择yesng new my-app2.创建组件并配置路由//创建组件ng g component name
2021-08-25 22:47:34
422
原创 angular父子组件传值
angular父子组件传值父组件到子组件1.父组件传递数据2.子组件接受数据子组件到父组件1.父组件根据ViewChild获取子组件实例2.子组件通过广播的形式，向子组件发送数据子组件操作父组件接收父组件到子组件1.父组件传递数据在父组件中调用子组件，通过[‘属性值’]进行传值//父组件app-home，子组件app-header//父组件中引用子组件，传递title及msg到子组件<app-header [title]="title" [msg]="msg" [run]="run" [h
2021-08-25 16:58:31
2613
原创 promise/axios async/await使用方法汇总
promise使用方法汇总promise与axios结合使用1.创建公共请求2.调用公共请求方法promise请求进行多次回调1.promise 链式请求2.使用promise.all2.使用promise.race3.结合使用async/awaitpromise与axios结合使用1.创建公共请求 promiseFunc: (url) => {// 返回一个promise对象 return new Promise((resolve, reject) => { axi
2021-08-25 13:28:48
1716
3
原创 JS实现网络请求方法汇总
JS实现网络请求方法汇总1.创建service，提供公共方法，模拟网络请求import { Injectable } from '@angular/core';import {Observable} from "rxjs";@Injectable({ providedIn: 'root'})export class RequestService { public data:string ="张三"; constructor() { } run(){ return t
2021-08-24 15:07:12
1377
转载 Git 自动保存用户名密码
清空了git的账户设置，于是每次更新都需要重新输入用户名及密码。所以需要设置 输入一次之后自动保存用户名及密码安装配置好git后，在C:\用户\Administrator\ 目录下有一个 .gitconfig 的文件，这就是git的配置文件，打开这个文件，里面会有你先前配好的name 和email信息，然后你只需要在下面加一行：[credential] helper = store这样再更新或者上传一次代码，之后就不需要重新输入用户名及密码了参考文章：https://blo
2020-08-25 16:44:50
810
原创 React入门：根据官网了解JSX语法
React入门创建新的react应用Hello WorldJSX简介在JSX中嵌入表达式JSX 也是一个表达式JSX 特定属性使用 JSX 指定子元素JSX 防止注入攻击JSX 表示对象创建新的react应用首先要安装node.jsnpx create-react-app my-appcd my-appnpm startHello World编写最简易的React示例：它将在页面上展示一个 “Hello, world!” 的标题。ReactDOM.render( <h1>
2020-07-17 11:00:17
235
转载 Android蓝牙
转载地址：http://mp.weixin.qq.com/s/8cheUgqbXdfh1S0GwF2V-w 虽然是转载，但是我是在平板上看的，完了看着平板，抱着电脑一个字一个字敲的呀，觉得作者写的很全面，就不自己组织语言啦。一、蓝牙介绍：（一）、Bluetooth的由来及现状蓝牙一词源于公元十世纪丹麦国王HaraldBlatand名字中的Blatand。Blatand的英文之意就是B...
2018-04-10 22:25:16
315
转载 学会Android自定义view
之前自己看自定义view，对于一些基础的东西，好多都是一知半解，照葫芦画瓢。前两天看到一篇博客：自定义view，有这一篇就够了。从而对自定义view有了进一步的认识。1.自定义view 当Android中自带的View无法满足我们的业务需求时，就会自己定义我们想要的View。只需重写两个函数：onMeasure()、onDraw()。onMeasure负责对当前View的尺寸进行测量...
2018-03-03 16:52:39
243
2
原创 Android 属性动画
本来想先放实现效果，后来手机实在捉急，只能后续再补啦。 一 实现透明效果：//属性动画变透明 private void alphaAnim(){ //不透明--->透明--->不透明 2s钟时间平均分配 ObjectAnimator objectAnimator=ObjectAnimator.ofFloat(imageView,"alpha",1f
2018-02-02 18:50:35
292
原创 Android Studio中import所有的类文件都是红色的
前些日子其他部门的人把我叫过去，问我为什么Android studio里面import中所有的类文件都是红色的，我当时也是一脸懵呀。后来去搜索，查到解决方案，记录一下 （此图片为在网上有人提问时的图片） 点击flie—>选择Invalidate Catches/Restart这个选项，就可以解决了。
2018-02-01 16:56:29
2066
2
原创 ViewPager+TabLayout+Fragment 的联动效果
实现这个效果需要以下几步 1.导入design包 2.创建若干个fragment 3.创建MyFragmentPagerAdapter继承FragmentPagerAdapter 4.在MainActivity中实现联动 先看效果图： 1.导入design包compile 'com.android.support:design:25.3.1'2.创建3个fragment
2018-01-31 16:23:22
665
原创 Android使用DrawerLayout和NavigationView实现侧滑效果
Android退出design包后，有很多新型的控件，为开发一些UI效果提供了方便。 可以先来看下效果图 首先要导入design包compile 'com.android.support:design:25.3.1'其次是搭布局，在主界面activity_main中搭建DrawerLayout 和NavigationView，界面布局很简单，直接上代码android.supp
2018-01-31 12:04:04
280
原创 使用360加固app，打多渠道包
为了项目的安全考虑，我们通常都会混淆自己的项目。但是混淆后的项目，依然存在着被反编译的风险。所以为了项目安全，使用了360加固。
2017-11-15 17:06:40
3073
原创 Android 集成环信EaseUI
1.Android Studio 中导入EaseUI 2.jar包冲突3.初始化4.启动聊天fragment5.实现音视频聊天6.聊天头像修改为圆角7.混淆
2017-10-11 12:00:24
1043
原创 JavaScript学习(三) 变量 作用域和内存
一 变量：JavaScript的变量为松散型，并不是强制类型不同的数据类型分为：基本类型值和引用类型值。基本类型值：栈内存中简单数据段，即这种值完全保存在内存中的一个位置引用类型值：保存在堆内存中的对象，即这种值保存的实际上只是一个指针，该指针指向内存中的另一个位置，该位置保存对象。1.基本类型值：Undefined，Null，Boolean，Number，String堆内存的大小不固定，
2017-08-27 01:03:37
242
原创 Android实现图片转换成圆形
/** * 转换图片成圆形 * * @param bitmap * 传入Bitmap对象 * @return */ public Bitmap toRoundBitmap(Bitmap bitmap) { int width = bitmap.getWidth();
2017-08-24 22:50:46
686
原创 Glide加载圆角、圆形图片
有时候头像需求带圆角或者是圆形头像，而Glide本身并不具备自己加载圆形图片的功能，所以需要重写BitmapTransformation来达到需求//加载圆形图片public class GlideGetCircle extends BitmapTransformation { public GlideGetCircle(Context context) { super(c
2017-08-24 22:31:39
496
原创 JavaScript学习(一) 数据类型
1.typeof 操作符2.Undefined 类型3.Null类型4.Boolean 类型5.Number 类型6.String 类型7.Object 类型8.functon 函数一：Undefined 和 Nullvar box;alert(typeof box);//box是Undefined类型，值是Undefinedvar box{};//box是Object类型，值是
2017-08-23 23:26:12
187
原创 Android 动态获取权限(6.0 , 7.0)
在Android API23以上，需要动态获取网络权限。以API版本23 6.0手机获取电话权限为例/** * 请求打电话的权限码 */ private static final int REQUEST_CALL_PHONE = 100; /** * 点击按钮申请权限 */ findViewById(R.id.c
2017-08-21 23:19:31
3147
1
原创 Android Sqlite数据库常用语句整理
1.创建表的操作create table 表名（字段名 数据类型(限制)…）create table person(_id Integer primary key,name varchar(10),age Integer);2.删除表drop table 表名drop table person;3.插入数据insert into 表名(字段…) values(字段的值…)insert into
2017-08-20 22:56:44
560
原创 Android Sqlite数据库创建及操作
1.首先需要一个类集成SQLiteOpenHelperpublic class RecordSQLiteOpenHelper extends SQLiteOpenHelper { //数据库名称 private static String name = "temp.db"; //数据库版本号 private static Integer version = 1;
2017-08-20 22:48:55
2970
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人