Node安装及更换源
NodeJs的安装 无论是何种系统进行安装,都需要到其官网进行下载。 Windows Windows版本以Windows10 64位为例,为了方便我选择msi安装方式进行安装。 下载 安装步骤 选择安装位置 下一步 接下来一路下一步即可。 验证是否安装成功 终端内输入命令node -v即可验证node是否安装成功。输入npm -v即可验证npm是否安装成功。 Linux 下载安装包 如果是服务器,那么上传到服务器。如果是本地,那么直接解压即可。 解压命令参考tar -xvf 文件名。 切换用户,切换用户到root用户,并将解压出来的文件夹移动。 1mv node /usr/local/src/ 变基环境变量 12export NODE_HOME=/usr/local/src/nodeexport PATH=$NODE_HOME/bin:$PATH 运行命令source /etc/profile使配置生效 多版本管理 对于node的多版本管理推荐使用nvm。其GitHub开源(Windows)地址:https:// ...
2、VUE指令的使用
内容输出 大胡子语句 通过 大胡子语句 我们可以很方便的中模板中输出数据,但是这种方式会有一个问题,当页面加载渲染比较慢的时候,页面中会出现 大胡子语句 ,vue 提供了几个指令来解决这个问题 指令中的表达式不需要使用 大胡子语句 v-text 1<p v-text="title"></p> 弊端:v-text 会填充整个 innerHTML v-cloak 1<p v-cloak>{{title}}</p> 需要配合 css 进行处理 12345<style>[v-cloak] { display: none;}</style> v-html 为了防止 xss 攻击,默认情况下输出是不会作为 html 解析的,通过 v-html 可以让内容作为 html 进行解析 v-once 只渲染元素和组件一次,后期的更新不再渲染 v-pre 忽略这个元素和它子元素内容的编译 12345678910111213141516 ...
1、VUE的基础使用
vue的引用 通过script标签的方式进行引用。 1<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 组件 vue 的核心功能之一就是组件 组件基本分类 根组件 可复用的功能组件 根组件的创建 通过 vue 提供的构造函数可以实例化出来一个跟组件实例对象 1let app = new Vue(options); 应用最顶层的组件,一般情况下,一个独立的应用有且只有一个根组件(节点) 12345678910111213141516171819202122232425<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal ...
Speak开坑记录
项目说明 一个基于Gitee的“说说”,通过在gitee仓库中的issue进行说说的展示。项目灵感来自于:微博 开坑记录 项目最早写于2020年8月9日,但当时的做法是通过外部载入各种依赖(JQuery、marked等)进行的,虽然中间还有一次试图将其并入js内部,但采用的方式仅仅是通过jQuery的getScript方式,由于同时间所用Hexo博客主题作者更新了pjax,导致出现了一些出人意料地错误。直到9月20日,最终决定通过webpack打包,将其放在一起并放弃jQuery(为了减少体积)。 基本架构 为了方便使用,采用了类似jQuery的写法。 1234567891011121314151617181920212223242526272829303132333435363738// 导入代码高亮模块const hljs = require("./js/highlight.min");// // 导入marked解析模块const marked = require("./js/marked.min");(function (wi ...
JavaScript开发中的常用代码参考
前言 此文记录项目开发中的通用代码块及编码方法的总结。 一个最简单的服务器框架(NodeJS) 12345678910111213141516// 导入模块 (yarn add express 或 npm i express 安装)const express = require("express");// 实例化对象const app = express();// 定义端口号const port = 3000;// 设置路由/** * 当访问根路径时返回Hello World */app.get("/", (req, res) => res.send("Hello World!"));// 监听端口app.listen(port, () => console.log(`Server running at http://127.0.0.1:${port}`)); 当服务器创建完成后,通过node server.js进行启动服务器。 静态目录 所谓静态目录就是暴露出一个静态目录,常用于静 ...
通过JSONP实现跨域访问
跨域访问 说到跨域访问就要谈到浏览器的同源策略,所谓同源指的就是协议相同、域名相同、端口号相同,三个条件必须全部匹配,否则就会收到限制,例如: Cookie、LocalStorage 和 IndexDB 无法读取 DOM 无法获得 AJAX 请求不能发送 而互联网默认原则就是同源策略,也就是说不允许跨域访问。 常见的跨域可以通过标签元素实现,例如link、script、img、iframe等标签。 1234567891011121314151617<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src=" ...
原生JS实现一个Ajax跨域请求
什么Ajax 在现实Ajax之前,我们需要了解下什么Ajax? Asynchronous JavaScript + XML(异步 JavaScript 和 XML), 其本身不是一种新技术,而是一个在 2005 年被 Jesse James Garrett 提出的新术语,用来描述一种使用现有技术集合的‘新’方法。 当使用结合了这些技术的 AJAX 模型以后, 网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面。这使得程序能够更快地回应用户的操作。 异步交互 接下来便要弄清楚什么是异步交互。 所谓异步交互,就是指指发送一个请求,不需要等待返回,随时可以再发送下一个请求。同步交互与异步交互的区别在于同步交互需要等待结果,而异步交互不需要等待。 举个简单的例子就是当点击某个按钮后,程序会去请求一些数据,而这个过程整个页面是不会刷新的。如下图所示,异步获取一言并且显示在页面中 快速开始 一:核心对象 关于核心对象:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest 核心对象是实现Aja ...
三、基于promise封装属于自己的Ajax库
模拟axios利用promise封装一个自己的Ajax库。 一、基础框架 封装Ajax库之前,我们要将其框架结构写出来。 我们通过一个匿名函数,将我们的核心函数暴露给全局。 对这个核心函数进行方法(get、post等)的添加。 1234567891011121314151617181920212223242526272829303132(function anonymous(window) { //默认配置项 let _default = { // 请求方式 method: "GET", // URL url: "", // URL基 baseURL: "", // 请求头 headers: {}, // 设置返回格式 dataType: "JSON", // POST请求的数据 data ...
二、fetch中的基础语法
参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch fetch概念 fetch不是Ajax,它诞生的目的是为了代替Ajax,它是js中内置的API。 基于fetch可以实现客户端和服务端的信息通信 由于fetch是2018年提出,因此存在浏览器兼容问题。 12345fetch('https://v1.hitokoto.cn', { method: 'GET',}).then(result => { console.log(result);}) 12345678910fetch('https://v1.hitokoto.cn', { method: 'POST', body: 'c=b', headers: { ' ...