- 博客(64)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 4、VUE中的computed和watch
computed在实际的应用中，我们会有一些原始数据，同时在应用中又会有一些数据是根据某些原始数据派生出来的，针对这样的一种情况，vue 定义了一个专门用来处理这种派生数据的选项：computed<div id="app"> <label><input type="radio" v-model="gender" value="" /> 所有</label> <label><input type="radio" v-model="g
2020-11-02 16:57:28
260
原创 3、VUE的事件
绑定事件在 vue 中，事件通过指令 v-on 进行绑定，v-on 缩写 @<组件 v-on:事件名称="表达式" /><组件 @事件名称="表达式" />组件的 methods 选项在组件选项中，提供了一个 methods 选项，用来存放组件中使用的函数方法，且存放在 methods 中的函数方法可以通过组件实例（this）进行访问let app = new Vue({ el: '#app', methods: { fn() {
2020-11-02 16:56:54
316
原创 2、VUE指令的使用
内容输出大胡子语句通过 大胡子语句 我们可以很方便的中模板中输出数据，但是这种方式会有一个问题，当页面加载渲染比较慢的时候，页面中会出现 大胡子语句 ，vue 提供了几个指令来解决这个问题指令中的表达式不需要使用 大胡子语句v-text<p v-text="title"></p>弊端：v-text 会填充整个 innerHTMLv-cloak<p v-cloak>{{title}}</p>需要配合 css 进行处理<st
2020-11-02 16:55:06
268
原创 1、VUE的基础使用
vue的引用通过script标签的方式进行引用。<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>组件vue 的核心功能之一就是组件组件基本分类根组件可复用的功能组件根组件的创建通过 vue 提供的构造函数可以实例化出来一个跟组件实例对象let app = new Vue(options);应用最顶层的组件，一般情况下，一个独立的应用有且只有一个根组件（节点）<
2020-11-02 16:54:21
245
原创 ES6中async函数
语法结构异步函数声明式async function name([param]){}异步函数表达式let name = async function([param]){}用法示例：async function myAsync() { return "hello world";}let promise = myAsync();promise.then((value) => { console.log(value); // hello world});await表
2020-10-29 15:27:22
217
原创 个人博客如何选择图床
前言自2020年8月9日jsdelivr发表了“新规则”后，便引起QQ群、v2ex、知乎等各大平台的议论。小康新规则中有一条是这样说的：running an image hosting website and using jsDelivr as a storage for all uploaded images大概意思就是不允许作为图站使用。于是便有了歧义。要多少的图片才能算是图站？博客里面图片放里面算吗？上传的图片怎样才不行？虽然到目前为止，我的曾使用的还没有被和谐，但为了长久，只能考虑其他图
2020-10-24 23:56:33
1544
原创 hexo博客每天定时提交网址给百度
项目说明首先说明下这是一个hexo的插件，和其他插件一样，只需要npm i即可安装。先说说我的需求：需求产生于建站之初，那时百度还搜索不到我的小康博客，因此借助Leancloud的环境搭建了一个每天定时提交的小程序，当时使用django框架进行的开发。后来由于各种原因，发现已经server 500了，不过不清楚原因，但无所谓了，因为我打算合理用actions进行重新开发。同样的出于原版的参考还是打算用python完成，但发现官网贴心的提供了一个curl命令提交。好吧，这就省下了很多事。因此开发了此插件。其
2020-10-01 22:47:58
354
原创 Node安装及更换源
NodeJs的安装无论是何种系统进行安装，都需要到其官网进行下载。WindowsWindows版本以Windows10 64位为例，为了方便我选择msi安装方式进行安装。下载安装步骤选择安装位置下一步接下来一路下一步即可。验证是否安装成功终端内输入命令node -v即可验证node是否安装成功。输入npm -v即可验证npm是否安装成功。Linux下载安装包如果是服务器，那么上传到服务器。如果是本地，那么直接解压即可。解压命令参考t
2020-09-29 08:02:00
5606
原创 通过码云的issue实现一个“说说”Demo
title: Speak开坑记录katex: falsetags:Speakcategories:Projectabbrlink: 3e39cf25date: 2020-09-21 17:20:25项目说明一个基于Gitee的“说说”，通过在gitee仓库中的issue进行说说的展示。项目灵感来自于：微博开坑记录项目最早写于2020年8月9日，但当时的做法是通过外部载入各种依赖（JQuery、marked等）进行的，虽然中间还有一次试图将其并入js内部，但采用的方式仅仅是通.
2020-09-22 09:04:31
431
原创 Canvas学习记录
Canvas的基本用法canvas元素<canvas id="tutorial" width="150" height="150"></canvas>canvas元素与img元素相似，但其没有src属性和alt属性。其只有两个属性width（默认值300像素）和height（默认值150像素）。如果没有为其设置宽度和高度时，那么将初始化为默认大小。该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。
2020-09-14 16:47:07
451
原创 JavaScript开发中的常用代码参考
前言此文记录项目开发中的通用代码块及编码方法的总结。一个最简单的服务器框架（NodeJS）// 导入模块 （yarn add express 或 npm i express 安装）const express = require("express");// 实例化对象const app = express();// 定义端口号const port = 3000;// 设置路由/** * 当访问根路径时返回Hello World */app.get("/", (req, res) =&
2020-09-12 22:41:24
218
原创 小项目-模仿一个京东投票系统
项目准备启动项目步骤：安装依赖yarn install ## 或者 npm inpm可能会警告一些东西，但无所谓。推荐yarn运行项目node admin.js前端开发参考接口文档，进行前端进行开发。首页开发首页需要展示较多数据，但一次性加载完全部数据则会及其消耗性能，因此需要进行分页处理。如果有一万条数据，想让其绑定到页面中，怎么做好一些？一种方案文档碎片，遍历数据，把对应的数据和结构都添加到文档碎片中（或基于字符串拼串），再把文档碎片扎入到
2020-09-09 20:22:59
280
原创 基于promise封装自己的Ajax库
基于promise封装自己的Ajax库模拟axios利用promise封装一个自己的Ajax库。一、基础框架封装Ajax库之前，我们要将其框架结构写出来。我们通过一个匿名函数，将我们的核心函数暴露给全局。对这个核心函数进行方法（get、post等）的添加。(function anonymous(window) { //默认配置项 let _default = { // 请求方式 method: "GET", // URL
2020-09-07 18:48:29
190
原创 通过JSONP实现跨域访问
跨域访问说到跨域访问就要谈到浏览器的同源策略，所谓同源指的就是协议相同、域名相同、端口号相同，三个条件必须全部匹配，否则就会收到限制，例如：Cookie、LocalStorage 和 IndexDB 无法读取DOM 无法获得AJAX 请求不能发送而互联网默认原则就是同源策略，也就是说不允许跨域访问。常见的跨域可以通过标签元素实现，例如link、script、img、iframe等标签。<!DOCTYPE html><html lang="en"><hea
2020-09-05 16:38:39
1612
原创 原生JS实现一个Ajax跨域请求
什么Ajax在现实Ajax之前，我们需要了解下什么Ajax？Asynchronous JavaScript + XML（异步 JavaScript 和 XML）, 其本身不是一种新技术，而是一个在 2005 年被 Jesse James Garrett 提出的新术语，用来描述一种使用现有技术集合的‘新’方法。当使用结合了这些技术的 AJAX 模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。异步交互接下来便要弄清楚什么是异步
2020-08-29 23:38:34
1003
原创 基于promise封装属于自己的Ajax库
分析实现一个自己的ajax库，那么我们需要有一些配置，用于修改baseURL、url等信息。let _default = { method: "GET", url: "", baseURL: "", headers: {}, dataType: "JSON", data: null, // => post系列请求 params: null, // => get系列请求基于？传参 cache: true,};接下来便是核心函
2020-08-25 18:15:49
143
原创 二、fetch中的基础语法
参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetchfetch概念fetch不是Ajax，它诞生的目的是为了代替Ajax，它是js中内置的API。基于fetch可以实现客户端和服务端的信息通信由于fetch是2018年提出，因此存在浏览器兼容问题。fetch('https://v1.hitokoto.cn', { method: 'GET',}).then(result => {
2020-08-25 08:59:31
340
原创 一、Axios基础
参考文档：http://www.axios-js.com/zh-cn/docs/axios库基本概念它是一个类库，基于promise管理的Ajax库关于get、post方法的参数url第一个参数，请求的url地址options对象。get方法axios.get('https://v1.hitokoto.cn/', { params: { c: "b" }}).then(function (res) { console.log(res)
2020-08-25 08:58:47
156
原创 四、实现跨域访问
同源策略同源：协议相同、域名相同、端口号相同如果非同源那么将收到的限制：Cookie、LocalStorage和IndexDB无法读取DOM无法获得AJAX请求不能发送互联网默认原则：同源策略（不允许跨域访问）常见跨域link元素script元素img元素iframe元素JSONP通过动态创建 script 标签，通过 script 标签的 src 请求没有域限制来获取资源例如在 html 页面中，将 script 标签地址改为后端接口。网页通过添加一个<scri
2020-08-22 19:48:08
130
原创 三、jQuery中的Ajax
JQuery中的Ajax方法load方法$.get和$.post方法$.ajax方法$.getScript方法和$.JSON方法事件ajaxStart和ajaxStopajaxComlete、ajaxSend、ajaxError、ajaxSuccess事件load方法$element.load(url,[data],[callback])url异步请求的地址data异步请求的数据.。如果传入参数那么请求方式为post，否则为get。请求数据为键值对形式。ca
2020-08-22 19:47:35
164
原创 二、JSON数据格式
JSON语法规则”名称/值“对的集合。例如对象、字典{ "name": "好人", "job": [1, 2, 3, 4, 5]}字符串必须使用双引号。值的有序列表。例如数组。[ 1,2,3]JSON的值可以是字符串、数值、布尔值、null、对象、数组。JSON可以独立成文件，扩展名为json。JavaScript中的JSONjson字符串数据格式符合JSON格式的要求，类型是字符串var jsonString = '{"name":"张
2020-08-22 19:46:55
537
原创 一、Ajax的基本用法
同步交互与异步交互同步交互指发送一个请求，需要等待返回，然后才能够发送下ー个请求。同步交互相当于排队，轮到下一个的情况会因为前一个而有所不同。与排队类似。例如学生在食堂买饭，只有等前边同学买完才能轮到自己。客户端向服务器端发送请求，必须等待结果返回，才能向服务端再次发送请求。异步交互所谓异步交互，就是指指发送一个请求，不需要等待返回，随时可以再发送下一个请求。同步交互与异步交互的区别在于同步交互需要等待结果，而异步交互不需要等待。异步交互相比同步交互的优势主要具有以下几点用户操作无
2020-08-21 16:21:16
354
原创 Chrome代码调试指南
打开开发者工具在Chrome菜单选择：更多工具->开发者工具在页面原色上右键单击，选择检查快捷键打开最近关闭状态cmd+opt+i或ctrl+shift+i快速查看DOM或样式Command+Option+c或Control+shift+c快速进入Console查看log运行JavaScriptCommand+Option+j或Control+shift+jF12打开使用Elements调试DOM查看与选择DOM节点将鼠标移动到需要被查看
2020-08-19 17:21:15
1378
2
原创 git的基本使用
Git是什么分布式版本控制系统的安全性要高很多，因为每个开发人员电脑里都有完整的版本库，某一个开发人员的电脑坏掉了不要紧，随便从其他开发人员那里复制一个就可以了。而集中式版本控制系统的中央服务器要是出了问题，所有开发人员都没法工作。Gt是一个开源的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。G是Linus Torvalds为了帮助管理 Linux内核开发而开发的一个开放源码的版本控制软件。 Torvalds开始着手开发Gt是为了作为一种过渡方来替代Bitkeeper，后
2020-08-15 15:08:04
116
原创 七、Nginx代理以及面向未来的HTTP
windows下使用nginx通过官网下载Nginx，将其解压。在命令行内输入./nginx.exe即可启动。基础代理配置如果启动的nginx进程过多，可能会导致代理不生效！通过taskkill /IM nginx.exe /F命令可以清除所有nginx进程。通过include server/*.conf实现为单独一个站点设置配置文件http{ include server/*.conf}此配置代表将server文件下的所有conf文件导入。最简单的代理ser
2020-08-15 15:07:28
121
原创 六、HTTP各种特性总览
更多HTTP头特性可参考：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/HeadersCORS跨域请求的限制与解决在返回数据时设置头信息即可，例如：const http = require("http");http.createServer(function (req, res) { res.writeHead(200,{ "Access-Control-Allow-Origin":'*' })}).listen(88
2020-08-15 15:06:56
179
原创 五、HTTP协议基础及发展历史
经典五层模型介绍第三层物理层定义物理设备如何传输数据数据链路层在通信的实体间建立数据链路连接网络层数据在节点之间传输创建逻辑链路传输层向用户提供可靠的端到端（End-to-End）服务传输层向高层屏蔽了下层数据通信的细节应用层为应用软件提供了很多服务，构建与TCP协议之上。屏蔽了网络传输相关细节HTTP协议的发展历史HTTP/0.9只有一个命令GET没有HEADER等描述数据的信息服务器发送完毕，就关闭TCP连接HTTP/1.0增加了很多命令增
2020-08-15 15:06:03
151
原创 四、跨域资源共享
跨域资源共享是什么CORS全称为Cross-Origin Resource Sharing，被译为跨域资源共享，新増了一组HTTP首部字段，允许服务器声明哪些源站有权限访问哪些资源。跨域资源共享标规范要求，对那些可能对服务器数据产生副作用的HTTP请求方法（特别是GET以外的HTTP请求，或者搭配某些MIME类型的POST请求），浏览器必须首先使用OPTIONS方法发起一个预检请求，从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的HTTP请求。在预检请求的返回中，服务器端也可以通知客户
2020-08-11 20:58:37
225
原创 三、HTTP缓存机制与Cookie
HTTP的缓存机制缓存是什么缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。当Web缓存发现请求的资源已经被存储，它会拦截请求，返回该资源的拷贝，而不会去源服务器重新下载。缓存需要合理配置，因为并不是所有资源都是永久不変的。重要的是对一个资源的缓存应截止到其下次发生改变（即不能缓存过期的资源）。缓存服务器端的数据的优点缓解服务器端的资源消耗和运行压力，提升服务器端的整体性能。减少服务器端资源加载的延迟，进而成少显示某个资源所用的时间减少对带宽造成的压力，避免网络阻塞问题的出现
2020-08-11 20:58:07
344
原创 二、HTTP消息
HTTP报文HTTP报文是什么HTTP报文，又称HTTP消息，是服务器和客户端之间交换数据的方式。有两种类型的消息：请求，由客户端发送用来触妓一个服务器上的动作；响应，来自服务器的应答。HTTP消息由采用ASCII编码的多行文本构成。在HTTP/1.1及早期版本中，这些消息通过连接公开地发送。在HTTP/2中，为了优化和性能方面的改进，曾经可人工阅读的消息被分到多个HTTP帧中。HTTP请求报文HTTP响应报文HTTP消息HTTP消息结构start line：一行起始行用于描述要执行的
2020-08-11 20:57:33
543
原创 一、HTTP是什么
HTTP是什么？HTP全称为 Hypertext Transfer Protocol，被译为超文本传输协议，是互联网上应用最为广泛的一种网络协议。HTTP协议是在Web上进行数据交换的基础，是一种“客户端——服务器端”协议。也就是说，请求通常是由像浏览器这样的接受方发起的。一个完整的Web文档通常是由不同的子文档拼接而成的，像是文本、布局描述、图片、视频、脚本等等。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。HTTP请求与响应消息客户端和服务端通过交换各自的消息（与数据流正好
2020-08-11 20:57:01
1950
原创 四、mongoose的使用
mongoose核心概念schema约束字段/列数据model模型对应 集合 后期用它来实现数据增删改查简介安装npm i mongooseschema英文网： http://mongoosejs.com中文网： http://mongoosejs.net/作用：用来约束MongoDB文档数据（哪些字段必须，哪些字段可选的）model一个模型对应一个集合。后面通过模型管理集合中的数据。使用基本模型// 一、导入模块const mongoose
2020-07-08 21:04:07
198
原创 三、MongoDB高级操作
排序&分页准备数据use test3db.c1.insert({_id:1,name:"a",sex:1,age:1})db.c1.insert({_id:2,name:"a",sex:1,age:2})db.c1.insert({_id:3,name:"b",sex:2,age:3})db.c1.insert({_id:4,name:"c",sex:2,age:4})db.c1.insert({_id:5,name:"d",sex:2,age:5})db.c1.find()排
2020-07-08 21:03:22
289
原创 二、MongoDB基本操作及增删改查
基本操作登陆数据库mongo查看数据库语法show databases;选择数据库use 数据库名如果切换到一个没有的数据库，例如use admin2，那么会隐式创建这个数据库。（后期当该数据库有数据时，系统自动创建）use admin2查看集合show collections创建集合db.createCollection('集合名')删除集合db.集合名.drop()删除数据库通过use语法选择数据通过db.dropDataBase()删除数
2020-07-08 21:02:46
780
原创 一、MongoDB的安装
Windows系统由于二进制包安装了半个小时，还是卡在进度条不动。因此决定使用压缩包进行安装。下载安装包下载地址下载完成后将其解压，例如我解压到了F:\MongoDB文件下。接下来进入该文件创建data与logs文件以管理员身份启动终端，然后输入如下命令 mongod --install --dbpath F:\MongoDB\data --logpath F:\MongoDB\logs\mongo.log开启数据库服务net start mongodb链
2020-07-08 21:02:13
144
原创 十、Promise的使用
Promise用来做什么用来解决回调地狱。回调地狱也就是回调函数中嵌套了回调函数，代码阅读性低。例如如下代码：const fs = require("fs");// 读A文件fs.readFile(`${__dirname}/etc/a.txt`, "utf-8", (err, data) => { if (err) { console.log(err); } else { console.log(data); // 读B文件 fs.readFile
2020-07-07 16:27:20
202
原创 九、英雄管理（cqmanager）系统
查看源代码准备mysql-ithm的使用安装npm i mysql-ithm使用参照文档即可。简单示例// 导入模块const hm = require("mysql-ithm");//2.连接数据库//如果数据库存在则连接，不存在则会自动创建数据库hm.connect({ host: "localhost", //数据库地址 port: "3306", user: "root", //用户名，没有可不填 password: "root", //密码，.
2020-07-06 19:54:24
470
原创 八、NPM包管理
如何写NodeJs模块遵守commentjs规范。导入模块暴露出去（导出）一个简单的示例：// 定义一个对象let db = { baseUrl: "http://127.0.0.1:3000/", insert: function () { console.log("插入方法"); }, delete: function () { console.log("删除方法"); },};// 将其暴露出去modu
2020-07-04 21:55:52
140
原创 七、NodeJs数据库管理
建表MySQL程序可以使用PHP study集成工具。链接、操作数据库可以使用phpstudy自带的工具也可以使用navicat工具。SQL语句-增删改查插入数据insert into 表名(字段名1，字段名2) values(值1，值2);例如：insert into user(name,description) values('陈浩南','铜锣湾扛把子');删除数据delete from 表名 where 条件;条件一定要写，如果不写则会删除该表中所有的数据删除。例如
2020-07-04 21:55:20
420
原创 六、中间件与跨域
什么是中间件在路由相应之前就会执行中间件的内容，例如在中间件中进行赋值，这种就可以在路由执行时使用这个值。所以中间件就是服务器开启之后和路由响应之前执行的一个函数。这个函数可以操作req与res。使用next()向下传递到下一个中间件，最后传到路由。例如开启三个中间件的写法：app.use((req, res, next) => { console.log("中间件1"); req.requestTime = Date.now(); next();});app.use((req
2020-07-04 21:54:47
687
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人