- 博客(52)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 vue：导航守卫
vue中的导航守卫分为三种全局守卫路由独享组件内1、全局守卫一般放在main.js中beforeEach每一次进入路由，不管什么路由，都要守卫一次router.beforeEach((to, from, next) => { console.log("beforeEach"); next();})beforeResolve当路由内部全都解析完成以后才去执行router.beforeResolve((to, from, next) => { c
2020-06-07 16:10:28
439
原创 vue案例：axios实战
axios 在原理上属于 XMLHttpRequest， 因此也可以算为一个ajax但是是基于promise对象来对结果进行处理操作如下：文件结构前端vue页面（省略样式）<template> <div> <div>{{ "MySQL" }}</div> <button @click="showData(1)">开始获取数据</button> <ul v-for=
2020-06-07 14:58:34
1371
原创 MacOS安装MongoDB数据库
安装方式多样，这里使用最简单的下载安装文件安装下载文件下载地址：https://www.mongodb.com/download-center/community安装下载好文件之后，打开访达，直接双击解压然后将解压之后的文件夹重命名为 mongodb进入访达菜单中的前往→前往文件夹弹框中输入：/usr/local 回车将刚才解压的出来的文件夹放入上一步回车之后打开的文件...
2020-04-20 12:27:35
872
1
原创 node.js上传图片到服务端，并将图片路径传到数据库（更换头像）
思路本地选择图片文件之后，将图片文件转换成base64的数据格式将base64的数据通过ajax专递到后台（post）后台将base64的数据解析成图片进行保存到服务器上文件结构├── page ├── js ├── js.js ├── html.html├── dao ├── dataDao.js└── node.jshtml <input type="...
2020-04-20 11:25:47
5105
原创 MySQL性能优化之进阶篇
4、索引优化4.1、索引是什么，建立索引的原因索引用于快速找出在某个列中有一特定值的行，不使用索引MySQL必须从第一条记录开始读完整个表，直到找出相关的行，表越大查询数据所花费的时间就越多，如果表中查询的列有一个索引，MySQL能够快速到达一个位置去搜索数据文件，而不必查看所有数据，那么将会节省很大一部分时间。例如：有一张person表，其中有 2W 条记录，记录着2W个人的信息。有一个P...
2020-03-27 12:11:56
161
原创 MySQL性能优化之干货篇
3、常用SQL优化3.1、避免SELECT *从数据库里读出越多的数据，那么查询就会变得越慢。并且如果你的数据库服务器和WEB服务器是两台独立的服务器的话，这还会增加网络传输的负载。3.2、避免在where子句中使用!=或<>操作符应尽量避免在where子句中使用!=或<>操作符，否则引擎放弃使用索引而进行全表扫描。3.3、尽量避免全表扫描对查询进行优化，应尽量...
2020-03-27 12:11:07
141
原创 MySQL性能优化之基础篇
1、准备工作1.1、慢查询日志当查询超过一定的时间没有返回结果的话，会记录到慢查询日志中，这个功能有个开关，默认不开启，可以手工开启帮助我们找出执行慢的SQL语句。查看慢 SQL 日志是否启用（on 表示启用）show variables like 'slow_query_log'查看执行慢于多少秒的 SQL 会记录到日志文件中show variables like 'long_qu...
2020-03-27 12:09:46
198
原创 jQuery案例：在网页中模仿可移动的窗口
最近项目中遇到了一个需要，做一个可移动的窗口，而且可以移动的窗口是在一个确定的范围内，不可移动到范围以外。如下图，加颜色的盒子可以在红色框线内进行移动，鼠标按下顶部深色区域可移动，按下浅色区域不可移动。html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
2020-03-16 11:42:56
184
原创 开始你的第一个electron程序
electron是一个使用JavaScript，HTML和CSS构建跨平台的桌面应用只要会html+css+JavaScript制作网页，就能制作出属于你的桌面应用环境配置1、安装nodenode.js中文网的下载地址下载适合自己电脑系统的版本，一步步安装下来就行windows参考：Nodejs安装及环境配置mac下傻瓜式安装，环境系统自动配置完成2、检测是否安装成功windo...
2020-01-13 19:48:39
245
原创 块级作用域中声明函数的一些小问题分析
先看一段简单代码，原题记不大清了，重新写了一个，大致如下function fun() { console.log(a); console.log(b); if (true) { function b() { console.log("ycx") }; var a = 10; } console.log(a); con...
2020-01-08 19:49:29
858
原创 纯css3实现3D立方体图片展示
大致效果原图下载地址csshtml { height: 100%;}body { height: 100%; margin: 0; perspective: 2000px; perspective-origin: 100px 100px; transform-style: preserve-3d;}@keyframes roun...
2020-01-04 16:33:17
726
原创 js模拟瀑布流加载图片
大概这个样子90张高清原图都是我自己做过电脑壁纸的，下载地址待明日上传好之后更新出来html<div class="out"> <div class="in"> <img src="img/img1.jpg" alt="" width="280px"> </div> <div class="in...
2019-12-29 17:15:33
240
原创 js时间线简述
相关概念进程进程是一个具有一定独立功能的程序在一个数据集上的一次动态执行的过程，是操作系统进行资源分配和调度的一个独立单位，是应用程序运行的载体。是操作系统结构的基础。一个程序运行，至少对应一个进程线程线程是程序执行中一个单一的顺序控制流程，是程序执行流的最小单元，是处理器调度和分派的基本单位。一个进程至少有一个线程单线程一段时间内，只能去执行一个功能，只有当前功能执行完成后...
2019-12-29 16:06:56
162
原创 深度克隆：拷贝数据
不同数据类型的拷贝1. 基本数据类型按值传递，拷贝后直接生成一份行的数据，不会影响原来的值2. 对象、数组实际上也是按值传递不同的是数组和对象在变量里面存的实际上是一个地址值，所以是传递的地址，也就是引用，修改会影响原来的值浅拷贝数据的方法举例1. 直接赋值一个变量（浅克隆）var obj = { stuName: "chauncey", stuAge: 23,...
2019-12-25 20:35:06
159
原创 基于canvas的飞机大战小游戏改图版
html<body> <canvas id="game" width="480" height="850"></canvas> <audio id="audio" src="media/ThePhoenix.mp3"></audio> <script src="js/planeWar.js">&l...
2019-12-22 21:35:56
190
原创 JavaScript案例：canvas实现普通4位验证码
效果图html和样式 <style> * { margin: 0px; text-align: center; user-select: none; } body { padding-top: 30px; ...
2019-12-15 22:30:20
173
原创 JavaScript案例：H5 video自定义控制器
video作为h5中新增的标签，定义视频，比如电影片段或其他视频流。video在各个浏览器中的默认控件都不太一样，还不太好看，所以就得自定义分享一个自己写的video控件，实现功能包括暂停/播放、进度条控制、音量调节、时间显示、全屏全屏html<div class="video"> <!-- 视频播放区 --> <video id="...
2019-12-15 20:27:57
1522
原创 近乎于完美的数字笔记——Notion
之前和同桌想找一个好一些的数字笔记工具，所以游走于各大笔记工具之间大致深度体验过印象笔记、有道云笔记、微软OneNote、为知笔记至于这四款笔记的对比，百度上一搜一大把，不过做赘述印象笔记、有道云笔记和为知笔记哪个好用？云笔记 ｜有道云笔记、印象笔记、onenote哪个更好？于我个人来说，平时使用MacBook Pro来coding，主要工作也是coding因此对于编程语言的学习，是一...
2019-12-08 21:26:45
7755
1
原创 利用云服务器制作一个简单的个人小站点
1、购置云服务器现在有很多云平台都可以，阿里云，腾讯云也基本都有针对学生的优惠政策以阿里云为例：进入阿里云主页最底部的学生机，就可以看到阿里云的云翼计划，学生版云服务器9.5元/月（24岁以下自动获得学生身份）。选择“轻量应用服务器”和“云服务器ECS”都可以（以云服务器ECS为例），至于预装环境，熟悉linux系统的可以选择CentOS或者Ubuntu，不熟悉的可以选择windows ...
2019-12-08 14:22:52
373
原创 js操作表格数据，DOM实现数据动态增删查改
基本功能demo中涉及到的管理员密码为：962464。当然啦，那是假的，代码里面能找到，随意修改，模拟敏感操作而生1、增加点击增加按钮，出现信息输入界面，输入完成后确认添加2、删除直接点击“删除”按钮点击全选，出现“删除已选”按钮，删除已选项任意点击某一项或多项前的选择框，出现“删除已选”按钮，删除已选项3、查询姓名、手机号、性别三者单独查询或者联合查询，模糊查询4、排序按学...
2019-12-01 18:10:10
1222
1
原创 vscode基础插件推荐
用vscode半年多了，推荐给了身边的几个朋友用，都表示很好用，很推荐，这里分享几个常用的基础的插件0、vscode插件安装打开后，点击这个图标直接搜索插件名，点需要安装的插件右下角的install，出现设置图标表示安装完成。1、Chinese (Simplified) Language简体中文。像我这英语水平不太好的人，当然还是简体中文看着亲切。需要说明的是中文插件安装之后，需要重启...
2019-12-01 17:02:15
273
原创 云服务器端口配置问题
一些新手（比如说我），在云服务器上配置好项目之后就想着通过ip地址加端口号去访问。然后访问失败。因为在此之前，还有必须进行的端口设置1、找到云服务器的防火墙2、点击左侧高级设置3、选择左侧入站规则，然后点击右侧新建规则4、选择端口5、直接输入端口号6、一直下一步，直到输入名称，可随意，然后完成等等，还没结束7、打开你购买云服务器的商家（以阿里云为例），进入控制台，找到...
2019-11-24 21:18:24
900
原创 JavaScript案例：滑块调节元素颜色
分享一个DOM案例，使用滑块去控制页面中某个元素的颜色HTML页面： Red: <input type="range" name="gerColor" value="171" min="0" max="255" id="r"> <br> Green: <input type="range" name="gerColor" v...
2019-11-23 11:49:31
1242
原创 js闭包理解
闭包即重用变量，同时又可以保护变量不被污染的一种机制由于js作用域的原因，函数内部的变量，只能在函数内部才能访问。但是通过闭包这样一种特殊方法，可以在函数外面访问定义在函数内部的变量。更多的人会使用闭包来保护一个变量，使受保护的变量不被全局污染。具体方法如下：1、用外层函数包裹受保护的变量和操作这个变量的内层函数2、外层函数通过某些方法将内层函数赋值到外层函数之外，例如返回值3、调用...
2019-11-12 21:08:33
136
原创 js预编译理解
首先看一下一下三种情况的输出var a = 100;console.log(a);console.log(a);var a = 100;console.log(a);第一个为100，第二个为undefined，第三个为ReferenceError: a is not defined这就是js预编译的效果。预编译javascript是解释性语言，主要特点为解释一行执行一行，遇...
2019-11-12 19:45:47
161
原创 解决Navicat Premium 12“Authentication plugin 'caching_sha2_password' cannot be loaded”的错误
在云服务器（windows server 2012 r2）上安装好mysql 8.0.18后，然后试图使用Navicat Premium 12去连接数据库。在链接测试的时候，Navicat Premium报出了“Authentication plugin ‘caching_sha2_password’ cannot be loaded”的错误。初步预计是加密规则的问题。上网查询后发现mysql...
2019-11-09 15:18:32
411
原创 JavaScript：将输入的一串数字转换成中文大写，最高可写12位（千亿）
将输入的一串数字转换成中文大写，最高可写12位（千亿）例：输入：10000，输出：壹万输入：10010，输出：壹万零壹拾源码：function toChineseBig(num) { // 将接收到的num转换为字符串 var strNum = String(num); // 定义单位 var ...
2019-11-09 14:45:17
1173
原创 js全选按钮实现
全选功能：勾选或者取消全选按钮，其他按钮自动全部选中或者全部取消。其他按钮未全部被选中时，全选按钮不勾选。其他按钮全部被选中时，全选按钮自动勾选。页面内容：<div> <ul> <li><input type="checkbox" id="check_all"><label for="check...
2019-11-04 21:47:51
1094
4
原创 js数组去重四种方法简单比较
直接上代码。。。定义一个只包含number、string、boolean三种类型的数组var numList = [6, "vip", 234, 684, "ycx", "ycx", 8, 243, true, null, 452, 452, undefined, 37, 6, 2, undefined, 2, false, true, 8, 57];方法一：function uniqu...
2019-11-04 20:49:10
488
原创 JavaScript案例：根据籍贯的文本内容，更新二级联动显示
之前在完成项目的过程中，遇到一个需求，需要将籍贯的文本信息显示到二级联动的下拉框中，用纯js写完了，现分享如下：html主要内容<div class="stuNativePlace">湖北省宜昌市</div><button class="show_btn">点击显示到二级联动菜单中</button><br><select ...
2019-10-27 20:26:54
1121
原创 js鄙视题记录（持续更新）
判断一个字符串是不是回文字符串// 判断一个字符串是不是回文字符串 function isPalindrom(str) { // 先将字符串切割，用空字符串分割，即将字符串中的字符依次加入到数组中 // 然后将得到的数组颠倒顺序 // 最后将数组中的元素用空字符串拼接，形成新的字符串，并且与原先的字符串顺序完...
2019-10-27 16:35:03
138
原创 js控制元素旋转速度
本来是项目中需要画一个叉叉，在一个单独的html页面中利用四个三角形挡住父元素的背景颜色的方法画出来之后，一时兴起用js让它转了起来，最后写了两个按钮控制了速度。源码：<!-- /* * @Author: Chauncey Yuan * @Date: 2019-10-20 20:46:37 * @Last Modified by: Chauncey Yuan * @Las...
2019-10-20 21:21:46
2159
原创 CSS中可以继承的属性
1、字体系列属性font：组合字体font-family：元素的字体font-weight：字体粗细font-size：字体大小font-style：字体风格font-variant：段落设置为小型大写字母字体。font-stretch：对当前的 font-family 进行伸缩变形。font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 ...
2019-10-20 17:50:16
117
原创 css盒子模型
盒子模型注意：盒子模型并不仅仅指的是div标签，也不仅仅是块级元素，而是可以将所有的标签都看成是盒子模型边框（border）盒子模型的边框，可设置宽度、类型、颜色example： /* 设置宽度为1px的红色的实线边框 */border: 1px soild #f00;外边距（margin）父元素或兄弟元素与边框之间的距离设置一个值的时候盒子四周的外边距一样设置两个值的时候...
2019-10-13 14:09:28
174
原创 css居中对齐的几种方式
第一种css.parent { width: 300px; height: 300px; background: #fff000; display: table-cell; vertical-align: middle; text-align: cen...
2019-10-13 13:39:06
764
原创 JavaScript笔记：BOM--event
event 事件浏览器自动触发或者用户手动触发的页面状态的改变事件处理函数：当事件发生时自动调用的函数事件发生之前就需要绑定到事件属性上绑定事件的三种方式：1、在html中绑定<a onclick = "alert('hello world')"></a>2、在js中动态绑定，为事件属性赋值一个函数document.getElementById("xxx...
2019-09-01 12:48:13
124
原创 JavaScript：信息管理基础功能（增删查改）
基本功能1、增加点击增加按钮，出现信息输入界面，输入完成后确认添加2、删除直接点击“删除”按钮点击全选，出现“删除已选”按钮，删除已选项任意点击某一项或多项前的选择框，出现“删除已选”按钮，删除已选项3、查询姓名、手机号、性别三者单独查询或者联合查询4、排序按学号（ID）升序或降序按姓名升序或降序按年龄升序或降序查询后的结果按以上任意一个方式排序5、修改点击修改按钮，...
2019-08-25 23:37:06
227
打通node+MySQL+JavaScript的第一步
2020-03-22
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人