非为000的博客

原创 nginx配置ssl实现https方法

1、准备nginx配置ssl对应的证书，crt，key文件2、建议单独新建一个文件（本文为server_ssl.conf），具体内容如下# server_ssl.confserver { # 配置HTTPS的默认访问端口为443 # Nginx 1.15.0及以上版本，使用listen 443 ssl代替listen 443和ssl on # listen 443 ssl可以使http,https共同生效 listen 443 ssl; client_max_bod

原创 Docker nginx部署多个web静态资源，且隐藏端口

Docker nginx部署多个web静态资源，且隐藏端口背景：将多个静态资源部署在docker上，希望能直接使用域名访问，而非域名+端口号具体思路：先使用docker创建3个nginx容器1、web1网站部署的nginx 端口812、web2网站部署的nginx 端口823、proxy_nginx 用于代理转发的nginx 端口80说明：1、统一使用nginx来做入口的代理和转发，这种方法，笔者认为比较理想且优质。需要注意的是，proxy_nginx的端口，必须是80

转载 JDK1.8下载与安装完整教程

JDK1.8下载与安装完整教程1.JDK1.8下载2. JDK安装3.环境配置4.检测jdk是否安装成功1.JDK1.8下载首先在Oracle官网上下载jdk1.8.https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html,如下图所示，找到jdk1.8,选择对应的版本，但是现在jdk已经更新到14.0了，所以大家可以根据自己的需要进行下载。此文以jdk1.8为例。下载的时候如需让你登录，可自行注册账号。2

原创 CentOS7安装MySQL-8.0.21详细步骤

一、卸载系统自带的相关安装前准备首先检查系统中是否存在使用rpm安装的mysql或者mariadb，如果有需要先删除后再编译安装。由于MySQL在CentOS7中收费了，所以在CentOS7内部默认集成的数据库改为MariaDB,MariaDB是mysql的一个分支,所以MySQL可能会和MariaDB文件有冲突,所以依然需要继续下载掉MariaDB。1.rpm -qa | grep mysql #检查是否安装了mysql2.rpm -qa | grep mariadb #检查是否安装了m

原创 gulp实现打包js/css/img/html文件，新建本地静态服务，gulp-connect或gulp-webserver实现热更新

全局安装gulp$yarn global add gulp或$npm install --global gulp初始化项目（或在已有项目中初始化，生产package.json文件）注：“entry point” 文件入口为 gulpfile.js引入gulp依赖$yarn add gulp --save-dev或$npm install --save-dev ...

原创 git克隆历史版本（下载指定版本的代码）

步骤一：首先git clone 当前项目至文件夹步骤二：cd 进入clone下来的项目文件夹内步骤三：在git 仓库查看SHA，或输入命令git log 查看提交的历史commit步骤四：复制需要回退版本到的commit后面序列，命令如下即可回退到指定版本 git checkout xxxxxxxxxxxxxxx...

原创 Vue-cli3 移动端底部导航实现思路

实现思路1.vue项目页面入口为App.vue文件(所有页面都将映射到该文件的<router-view/>中)2.初始化进入的页面为router.js文件中path: '/'所对应的页面(例如如下的Home.vue文件为初始页面)routes: [ { path: '/', name: 'Home', component: () =&g...

原创 Canvas篇

Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。可用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。Canvas 的默认大小为300像素×150像素（宽×高，像素的单位是px）<canvas> 看起来和 <img> 元素很相像，唯一的不同就是它并没有 src 和 alt 属性。实际上，<canvas&g...

原创 js中a[b] a.b区别

JS对象中，a.b与a[b]并没有什么区别，都是获得该对象的某个属性不同之处在于a[b]中的b必须是个字符串注： 在数组里，只能是arr[a]，不能写成arr.a。扩展： A[i] 是数组 的第 i 个 ；A[i].key 是数组 的第 i 个 的 key 属性。...

原创 scrapy_“图片下载”

1.通过命令 scrapy startproject netbian（‘netbian’是项目名称，随便取)， scrapy genspider xxx xxx,com 新建项目架构，生成项目结构如下，具体自行百度2.在items.py文件自定义数据存储（注： “image_urls”, "images"均为图片管道默认保留字）# -*- coding: utf-8 -*-impo...

原创 scrapy_初识篇（1）

1.scrapy startproject myproject2.scrapy genspider $ scrapy genspider -lAvailable templates: basic crawl csvfeed xmlfeed$ scrapy genspider -d basicimport scrapyclass $classname(scr...

原创 一维数组，二位数组排序

原创 vue-cli3构建TS项目（基础篇）

概述：Vue三个TS官方库vue-class-componentvue-property-decoratorvuex-class1.通过vue-cli3生产项目vue create xxxvue-cli3脚手架生成项目目录说明│ .browserslistrc│ .gitignore│ .postcssrc.js // postcss 配置│ babel.co...

原创 egg-mysql访问 MySQL 数据库(egg-mysql篇)

egg.js实现思路：符合Router -> Controller -> Service -> MySQL模式(Config配置)

原创 vue 实现二维码 vue-qart 和 qrcodejs2

一.使用vue-qartnpm安装$ npm install vue-qart --save$ npm install vue-qart --save引入import VueQArt from 'vue-qart'components: {VueQArt} 相关配置data () { return { config: { ...

原创 vue图片懒加载（Vue-Lazyload）使用

首先在npm上下载vue-lazyload的包$ npm install vue-lazyload --save在main.js里面import这个包import VueLazyload from 'vue-lazyload'// 设置参数Vue.use(VueLazyload, { preLoad: 1.3, //预加载的宽高比 error: 'dist...

原创 Vue-cli3项目 配置webpack (Vue.config.js)

1.webpack配置路径别名2.webpack全局注入通用样式3.webpack引入第三方插件，如Amap，QRcode等在项目的根目录下新建 vue.config.js 文件（是根目录，不是src目录），如图：配置实例如下：const path = require('path')const resolve = dir =&amp;gt; path.join(__dirname, di...

原创 JS文档归纳

在html中引入外部js文件,并调用带参js文件 html文件 ES6规范引入了新的数据类型Map，SetMap是一组键值对的结构，具有极快的查找速度。用JavaScript写一个Map如下：var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);m.get('Michael'...

原创 vue2调用高德地图(Amap)及其UI组件

vue调用高德地图只需四步，具体如下：1、申请高德KEY。方法自行百度 http://lbs.amap.com/dev/key/app； 2、在项目的index.js文件中引入高德地图JS_API，如下： 3、在项目build/webpack.base.conf.js中加入如下代码：externals: { 'AMap': 'AMap', 'AMapUI': '...

原创 遍历对象的常用方法

前段时间XX从数据库两张表中直接拿取数据，接口直接返回两个对象，页面需要将两个对象中数据一一对应展示，如下： 页面需要展示如下： 项目名称：谢翔飞获得“特惠贷 项目名称: 谢翔飞获得“特惠贷”扶贫实施方案》的通知 贷款方式: 个人贷款 覆盖总人数: 1 。。。 直接上代码...

原创 vue 修改外部引入组件样式

在vue组件中，为了使样式私有化（模块化），不对全局造成污染，可以在style标签上添加scoped属性，以表示它的只属于当下的模块； 但是因为在我们需要修改公共组件（三方库或者项目定制的组件）的样式的时候，scoped往往会造成更多的困难，需要增加额外的复杂度。对此，解决方法如下： 注：“需要修改的样式” 为当前组件自己的样式（class），可以在浏览器中F12查看...

原创 vue-cli中使用@import 从外部引入样式

外部引入 CSS 有2种方式，link标签和@import； ~直接上代码~注：@import中路劲需要使用 “~”（“~”是 stylus-loader中的定义）

原创 qs.parse()、qs.stringify()、JSON.stringify() 用法及区别

qs是一个npm仓库所管理的包，可通过npm install qs命令进行安装。 qs.stringify()将对象序列化成URL的形式，以&amp;amp;进行拼接。 qs.parse()将URL解析成对象的形式 。 JSON.stringify()是正常类型的JSON。 JSON中同样存在stringify方法，但与qs.stringify()之间的有较大区别，如下...

原创 vue-awesome-swiper用法

1、npm安装swiper插件npm install vue-awisome-swiper --save2、在main.js中全局注册(import并Vue.use) 注：需要引入swiper.css样式 3、在组件中使用

原创 vue项目中，定义并使用 全局变量，全局函数

一、定义变量，并全局使用原理： 1. 单独新建一个全局变量模块文件，模块中定义一些变量初始状态，用export default 暴露出去。 2. 在main.js中引入，并通过Vue.prototype挂载到vue实例上面。供其他模块文件使用； 3. 或者直接引入到需要的模块文件中使用；项目目录 步骤1、新建 global_variable...

原创 axios二次封装

涉及点： 1、axios官方文档（axios安装、请求拦截器、响应拦截器、axios请求配置选项） 2、promise使用 （resolve、reject、.then、.catch） 3、函数封装，全局使用本文封装理念：单独封装一个axios模块文件，并将其挂在至main.js中，供全局使用步骤1：npm安装axios至当前项目中，如下npm instal...

原创 一分钟学会在vue中使用iconfont图标集

在iconfont中新建icon项目步骤1：加入需要的图标至购物车→点击“购物车”→点击“添加至项目”→新建项目→点击“下载至本地”（在下载前，根据喜好选择下载类型，本文选择font class）； 在vue中使用iconfont步骤2：将下载好的文件拷贝到vue的static文件夹下面；步骤3：将iconfont.css引入到index.html文件中（全局引入...

原创 localStorage、sessionStorage、Cookie的区别及用法

HTML5中与本地存储相关的两个重要内容：Web Storage与本地数据库。1、其中，Web Storage存储机制是对HTML4中cookie存储机制的一个改善。由于cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的Web Storage存储机制。2、本地数据库是HTML5中新增的一个功能，使用它可以在客户端本地建立一个数据库，原本必须保存在服务器端数据...

原创 Java_jdk，Android_sdk，Gradle的环境变量的配置

右键我的电脑(或者win+E→计算机→属性)，打开属性，点击高级系统设置，点击环境变量（一下所有操作均在“系统变量”中进行）： Java_jdk的环境变量的配置步骤一：系统变量→新建 “JAVA_HOME” 变量 。 变量值填写jdk的安装目录（本人是 E:\jdk)步骤二：系统变量→Path 变量→编辑（或双击） 点击“新建” ，分两行输入“%JAVA_HO...

原创 篇三、组件通信（非父子组件间传值 Vuex ~ 状态管理）

Vuex用法vuex主要使用场景为大型单页面应用，更适合多人协同开发。vuex写法多种，在此只写两种自认为最常用方案。 步骤一：vuex安装、全局引入利用npm包管理工具安装，命令行如下（注：在开发环境中安装vuex时，需要加 --save）：npm install vuex --save 步骤二：vue-cli中使用vuex的方式为了后续维护，...

原创 篇二、组件通信（子组件传值给父级 $emit ~ 自定义事件）

$emit 用法（$emit写在子组件中）当子组件需要向父组件传值时，就会用到自定义事件。子组件用$emit()来触发事件，父组件用$on()来监听子组件事件。子组件 父组件 ...

原创 篇一、组件通信（父级传值给子组件 props ）

Vue props

原创 Vue $ref用法

在父组件中通过$ref给子组件动态添加属性，具体代码如下； 注：由于是给子组件添加$ref，所以必须添加$el（this.$refs.classifyfix.$el）。

原创 10分钟搭建Vue环境及安装脚手架（Vue入门篇）

Vue入门、 Vue环境搭建、Vue-cli、npm/cnpm

转载 移动端CSS初始化reset.css

移动端CSS初始化reset.css

原创 Bootstrap知识点归纳

Bootstrap知识点归纳

原创 rem、em、px换算

注意点： - html {font-size:62.5%;} - body {font-size:14px;}

原创 封装offsetTop、offsetLeft

用于屏幕滚动事件，window.onscroll = function(){} scroll().top //滚动高度

原创 QQ聊天消息展示，提交评论实现

仿QQ、微信聊天消息显示，提交评论等实现

原创 图片无缝滚动

图片无缝滚动原理及实现，定时器使用