sleepwalker_1992-CSDN博客

原创 JavaScript实现图片文件转base64

图片文件转base64，利用canvas// 图片文件转base64，利用canvasfunction getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; ...

2020-02-05 22:29:44 724

原创 vue-cli 3.x搭建的项目中vue-router的使用

vue-cli 3.x 文档：https://cli.vuejs.org/zh/Vue RouterVue Router基本用法vue-router实现Vue组件之间传参一、选择默认的包含基本的 Babel + ESLint 设置的 preset，创建一个默认的vue项目，项目目录结构如下：二、安装vue-router，并在项目中使用1、安装 np...

2020-02-05 16:03:46 2336

原创 js-cookie

1、安装npm install js-cookie2、应用<template> <div> <button @click="setCookie">创建cookie</button> <button @click="getCookie">读取cookie</button> <but...

2019-05-21 20:12:05 506 1

原创 Element-UI实现Tree 树形控件节点添加图标

Element-UI实现Tree 树形控件节点添加图标：属于自定义节点内容，可以通过两种方法进行树节点内容的自定义：render-content 和 scoped slot。1、scoped slot实现在节点区添加图标传入两个参数 node 和 data ，分别表示当前节点的 Node 对象和当前节点的数据<template><div> &l...

2019-03-28 19:54:16 16367 6

原创 Element-UI的Select组件实现全选

选中状态变化的时候，分五种情况1、点击全选，选中全部2、全选状态下，再次点击全选，取消全部选中3、全选状态下，取消了某个选中，就需要取消全选和当前这个数据的选中4、没有全选，但是勾选了除全选外的所有数据，就是全选了，就选中所有5、没有全选，但也没有勾选除全选外的所有数据，不做处理<template> <div> <el-sel...

2019-03-28 19:29:52 8234

原创 JavaScript Cookie

一、Cookie的使用JavaScript 可以使用 document.cookie 属性来创建、读取、及删除 cookie。1、创建cookie // 创建cookie document.cookie="username=sleepwalker"; // 创建cookie, 并设置过期时间 // 默认情况下，cook...

2019-01-08 21:42:56 592

原创 Element-UI实现椭圆搜索框

1、Element-UI复合型输入框实现的搜索框<div> <el-input placeholder="请输入内容" v-model="input" class="input-with-select"> <el-select v-model="select" slot="prepend" placeholder=&quo

2019-01-08 21:38:20 13905 3

原创 Element-UI的Switch 开关修改为字在按钮上

1、Element-UI的Switch 开关用法http://element-cn.eleme.io/#/zh-CN/component/switch2、修改后的示意图3、样式修改<template> <div> <el-switch v-model="value" width="46" activ...

2019-01-08 21:28:04 12261 4

原创 pycharm 安装激活破解方法

1、pycharm下载安装https://www.jetbrains.com/pycharm/2、打开http://idea.lanyus.com/下载破解补丁3、将补丁复制到pycharm安装目录的bin目录下D:/Program Files/JetBrains/PyCharm 2018.3/bin4、修改该bin目录下的pycharm.exe.vmoptions（32...

2018-11-25 16:20:39 15143 3

原创 webstorm 安装激活破解方法

1、webstorm下载安装http://www.jetbrains.com/webstorm/2、打开http://idea.lanyus.com/下载破解补丁3、将补丁复制到webstorm安装目录的bin目录下D:/Program Files/JetBrains/WebStorm 2018.3/bin4、修改该bin目录下的 WebStorm.exe.vmoptio...

2018-11-25 14:52:44 3407

原创 node实现自启动浏览器打开某网址

方法一、利用child_process.exec()child_process是node.js的内置模块var c = require('child_process');// 使用默认浏览器打开c.exec('start http://www.baidu.com');// 使用指定浏览器打开c.exec('start firefox http://www.baidu.com');...

2018-11-06 11:25:31 8781

原创 Express生成器

1、全局安装express-generatorexpress-generator：Express 应用程序生成器工具，包含了express命令行工具。npm install express-generator -g2、express命令行参数3、创建一个名为express-news的express应用，并设置使用ejs模板引擎，创建完成后，会提示下面操作的命令4、安装依...

2018-11-05 15:42:01 1265

原创 Vue项目中使用Sass变量自定义ag-grid表格主题样式

1、在Vue项目中新建一个样式文件 src/assets/styles/table.scss ，引入ag-grid默认的样式文件table.scss$ag-icons-path: "../../../node_modules/ag-grid-community/src/styles/icons/";@import '../../../node_modules/ag-grid-c...

2018-11-02 11:33:39 3231

原创利用cellRendererFramework将Vue组件渲染为ag-grid表格单元的内容

1、Vue组件内定义私有组件，用cellRendererFramework来渲染ag-grid表格单元的内容<template> <div>  <ag-grid-vue class="table ag-theme-balham" :columnDefs="co...

2018-11-02 09:27:14 7146 2

原创 ag-grid在Vue项目中的基本使用

ag-grid官网1、安装npm install ag-grid-community ag-grid-vue --save-dev2、在main.js中引入ag-grid的样式文件// 引入ag-grid的样式文件import '../node_modules/ag-grid-community/dist/styles/ag-grid.css';import '../node...

2018-11-01 11:41:38 22305 9

原创移动APP开发框架总结

一、移动APP开发框架1、vuxVUX- Vue 移动端 UI 组件库2、Mint UIMint UI - 基于 Vue.js 的移动端组件库3、vantVant- 轻量、可靠的移动端 Vue 组件库4、weexWeex 是一个使用 Web 开发体验来开发高性能原生应用的框架。Weex 致力于使开发者能基于当代先进的 Web 开发技术，使用同一套代码来构建 ...

2018-10-30 10:57:00 6441

原创 Express+EJS实现一个新闻列表页面的新增和查看

1、模块化思路服务模块：负责启动服务路由模块：负责路由判断业务模块：负责处理具体路由的业务代码数据操作模块：负责进行数据库操作配置模块：负责各个模块中用到的配置信息2、项目目录新建项目文件夹，安装express和EJS3、配置模块config.js// 配置模块：const path = require('path');module.export...

2018-10-30 09:32:45 1382

原创 EJS的简单使用

EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。1、安装npm install ejs2、标签含义简洁的模板标签：<% %><% '脚本' 标签，用于流程控制，无输出。 <%_ 删除其前面的空格符 <%= 输出数据到模板（输出是转义 HTML 标签） <%- 输出非转义的数据到模板 &lt...

2018-10-25 16:10:10 3910

原创 Express基础

1、Express框架基本介绍Express 是基于node.js平台开发的 Web开发框架，同时也是node.js的一个模块。Express官网 Express中文网 Express的npm搜索Express特点：（1）实现路由功能（2）中间件功能（3）对req和res对象扩展（4）集成其他模块引擎2、express实现HelloWorld（1）...

2018-10-24 10:47:08 446

原创 node.js实现一个新闻列表页面的新增和查看（模块化）

1、模块化思路模块一（服务模块）：负责启动服务模块二（扩展模块）：负责扩展 req 和 res 对象，封装一些好用的API模块三（路由模块）：负责路由判断模块四（业务模块）：负责处理具体路由的业务代码模块五（数据操作模块）：负责进行数据库操作模块六（配置模块）：负责各个模块中用到的配置信息封装一个模块的步骤：（1）思考，该模块要封装什么代码，实现什么功能？（2）...

2018-10-23 11:25:03 1340

原创 node.js实现一个新闻列表页面的新增和查看

1、设计路由当用户请求 / 或 /index 时，显示新闻列表 - get请求当用户请求 /detail 时，显示新闻详情 - get请求当用户请求 /submit 时，显示添加新闻页面 - get请求当用户请求 /add 时，将用户提交的新闻保存到 data.json 文件中 - get请求当用户请求 /add 时，将用户提交的新闻保存到 data.json 文件中 - po...

2018-10-22 23:35:33 2542 2

原创 node.js 模块及模块加载

node.js 模块在node.js开发中，一个文件就可以认为是一个独立的模块一、node.js模块分类1、核心模块，也叫内置模块、原生模块例如：fs,http,path,url所有内置模块，在安装node.js的时候，就已经编译成二进制文件，可以直接加载运行（速度较快）部分内置模块，在node.exe这个进程启动的时候就已经默认加载了，所以可以直接使用2、文件模块...

2018-10-17 21:52:36 711

原创 underscore.js

underscore.js 是一个工具函数库，可以用在浏览器端，也可以用在node.js中。官方文档中文文档在npm中搜索underscoreunderscore是一个JavaScript实用库，提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象，而是像jQuery一样，将数据封装在一个自定义对象中。它弥补了部分jQuery没有实现的功能,同时又是B...

2018-10-17 14:52:04 1078

原创 request和 response对象介绍

http模块中request（http.IncomingMessage 类）和 response（http.ServerResponse 类）对象介绍request：服务器解析用户提交的 http 请求报文，将结果解析到 request对象中，凡是要获取和用户请求相关的数据，都可以通过request对象获取response：在服务器端用来向用户做出响应的对象，凡是需要向用户（客户端）...

2018-10-16 22:10:55 1608

原创利用node.js模拟Apache服务器请求静态资源

利用node.js模拟Apache服务器请求静态资源，思路：1、获取到用户向服务器请求的资源的完整路径2、根据文件的完整路径去读取该文件，如果读取到了，就把文件中数据返回给用户，如果读取不到则返回404在这个过程中涉及到一个问题：用户向服务器请求不同的资源，服务器需要判断请求的资源类型，在响应头中动态设置Content-Type类型可以利用第三方模块 mime 实现： ...

2018-10-16 17:16:48 415

原创 linux .gz文件压缩与解压缩命令

1. 压缩文件gzip 源文件如压缩 b.txt 使用命令 gzip b.txt 注意压缩为 .gz 文件源文件会消失如果想保留源文件使用命令 gzip -c 源文件 > 压缩文件2. 压缩目录gzip -r 目录注意 gzip 压缩目录只会压缩目录下的所有文件不会压缩目录3. 解压gzip -d 压缩文件 ...

2018-10-16 16:41:20 50958

原创 vuex详解

一、vuex的基本使用1、安装npm install vuex --save-dev2、在Vue项目的src文件夹下建一个名为store的文件夹，该文件夹下建一个index.js文件src/store/index.jsimport Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex); // Vuex 的状态存储是响...

2018-10-15 23:08:16 366

原创 node.js实现文件的读写操作

在node.js中，有的模块使用时，无需通过require()函数来加载该模块，可以直接使用，例如：process 模块有的模块使用时，必须经过require()函数来加载该模块，才能使用，例如，fs模块：var fs = require('fs');原因：process模块是全局模块，而fs不是全局模块，全局模块可以直接使用，而非全局模块需要先通过require('')加载该模块no...

2018-10-15 22:48:17 1673 1

原创利用node.js搭建简易的http服务程序

1、通过http模块构建一个简单的http服务程序// 创建一个简单的http服务器程序// 1、加载http模块var http = require('http');// 2、创建一个http服务对象var server = http.createServer();// 3、监听用户的请求事件（request事件）// 回调函数中有两个参数// request 对象包...

2018-10-15 22:20:35 2518

原创 Echarts提示框（tooltip）位置设置

Echarts提示框（tooltip）浮层位置，不设置时，默认位置会跟随鼠标的位置。但是，当提示框位置超出图表所在区域时，就可能出现提示框显示不全的问题，如下所示：这就需要我们去设置提示框位置1、设置提示框位置的方法方法一：通过数组设置提示框位置数组第一个元素设置距离父元素左边的距离，数组第二个元素设置距离父元素上边的距离这种方法设置的提示框位置固定不...

2018-10-12 14:54:57 81046 15

原创 vue-cli搭建的项目中使用vuex实现状态管理

vuex详解1、安装使用vue-cli搭建好项目以后，安装vuexnpm install vuex --save-dev2、创建Vuex.Store实例对于大型应用，需要存储的状态可能很多，我们就将store中的state、getters 、mutations 和 actions分割到单独的文件中。并且把 Vuex 相关代码分割到模块中。在项目的src文件夹下创建一个名为s...

2018-10-09 16:51:29 1191

原创 Vue项目中实现用户登录及token验证

在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转...

2018-10-08 22:42:10 86426 63

原创 vue-router实现Vue组件之间传参

1、假设有两个Vue组件，项目路由文件src/router文件夹下的index.jsimport Vue from 'vue';import Router from 'vue-router';import officeHome from '@/view/officeHome';import home from '@/view/home';Vue.use(Router);expo...

2018-10-07 00:25:01 718

原创 v-on事件修饰符及按键修饰符

v-on 事件修饰符常用的事件修饰符有：.stop 阻止事件冒泡.self 当事件在该元素本身触发时才触发事件.capture 添加事件侦听器是，使用事件捕获模式.prevent 阻止默认事件.once 事件只触发一次什么是事件冒泡<!DOCTYPE html><html lang="en"><head> <...

2018-09-29 22:12:45 4660

原创 JavaScript求一维数组的第三大值

求一个足够长的一维数组中第三大值，数组中元素全是number类型的1、使用排序的方法可以降序或升序排序，这种方法可以求得任意第几大或第几小的值 // 排序的方法有很多，以冒泡排序降序为例： var arr = [6, 10, 9, 3, 8, 15, 11, 16, 14, 19, 1, 7, 2, 18, 17]; for (var i = 0; i &lt...

2018-09-28 14:14:07 592

原创 Vue项目中实现父子组件之间传值

1、路由配置：使用children属性实现路由嵌套，嵌套的组件关系就是父子组件关系 { path: '/father', name: 'father', component: father, children: [ { path: 'son', name: 'son', ...

2018-09-25 21:45:40 1904

原创 HTML5 Web 存储（localStorage和sessionStorage）

HTML5 Web 存储是本地存储，存储在客户端，包括localStorage和sessionStorage。HTML5 Web 存储是以键/值对的形式存储的，通常以字符串存储。localStoragelocalStorage生命周期是永久，除非主动清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通...

2018-09-24 21:25:38 19284 2

原创 vue项目中axios的用法

1、安装npm install axios vue-axios --save-dev2、在main.js中引入import axios from 'axios';import VueAxios from 'vue-axios';Vue.use(VueAxios, axios);3、用法（1）post请求 // post请求调接口 this.a...

2018-09-24 18:14:46 2561

原创 Vue项目中使用element-ui，并引入第三方图标库iconfont

element-ui官网1、安装npm install element-ui --save-dev2、在main.js文件中引入import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);3、上面两步完成后，就可以在项目任意的组件中...

2018-09-23 13:06:59 27051 6

原创 vue-cli 3.x/2.x 搭建的项目中ESlint 语法检测配置说明

vue-cli 3.x 搭建的项目中ESlint 语法检测配置说明vue-cli 3.x搭建的项目中在package.json文件中配置ESlint 语法检测，可以在vue.config.js文件中关闭Eslint 语法检测。vue-cli 2.x 搭建的项目中ESlint 语法检测配置说明vue-cli 2.x搭建的项目中默认的eslint规则，例如：代码末尾不能加分号；...

2018-09-22 23:21:55 3276

jQuery——浏览器窗口两侧跟随的广告案例

jQuery——固定导航栏

MATLAB图像处理源文件

空空如也