qq_48108860的博客

原创 axios

目录参数axios实现异步请求同步编写axios快捷方法axios实例（带有默认配置对象）axios全局配置默认值请求拦截器响应拦截器清除响应拦截器Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。参数1、请求路径：url，请求路径为必填参数2、请求方式：method，默认发送get请求3、携带参数，默认是JSON格式的数据①get参数携带在params上：要用qs转换js对象---Qs.stringify

原创 Ajax（原生的Ajax、JQuery封装的Ajax）

目录原生的AjaxJQuery封装的Ajax原生的Ajax1、创建Ajax实例对象---let xhr = new XMLHttpRequest();2、打开一个连接---xhr.open(请求方式，请求路径)，其中请求方式为必填参数①get请求：地址栏请求字符串，要用qs转换js对象---Qs.stringify()②post请求：参数携带在请求体send()中设置请求头为表单格式，发送请求时要用qs转换js对象---Qs.stringify()...

原创 Vue（状态机）

目录使用五个属性1、State2、getters3、mutations4、actions5、modules辅助函数1、mapState()2、mapGetters()3、mapMutations()4、mapActions()模块化namespaced: true表示设置命名空间。解决冲突的方法：给某个状态机中变量重命名，用辅助函数mapState()。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所

原创 Vue（路由机制）

目录安装使用重定向path和redirect实现重定向name（大名）和redirect实现重定向动态路由匹配想对路由参数的变化作出响应的话，可以使用监听器或路由守卫嵌套路由编程式导航编程式导航，可以使用path-query传参、name-params传参和name-query传参路由模式hash模式history模式hash路由和history路由的区别：导航守卫全局守卫（全局前置守卫、全局后置守卫）路由独享守卫组件内的守卫面试题

原创 Vue（插槽、混入、过滤器）

插槽普通插槽，具名插槽，作用域插槽插槽允许我们在调用子组件的时候为子组件传递模板。<slot> 元素作为承载分发内容的出口。父级模板里的所有内容都是在父级作用域中编译；子模板里的所有内容都是在子作用域中编译。在插槽默认模板中，可以直接访问子组件的数据，可以通过props间接访问父组件的数据。在插槽自定义模板中，可以直接访问父组件的数据，可以通过作用域插槽间接访问子组件的数据。默认插槽、匿名插槽如果子组件当中有内容,则显示子组件中的内容；如果子组件当中没有内容,则显

原创 Vue（组件机制）

代码模板组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。 let component = { data () { return { count: 0 } }, ...

原创 助农销售平台项目搭建

1、部署jar包filezilla：将jar包拖到服务器上cmd：ssh root@公网IP（39.104.24.238）cd /jarnohup java -jar briup-ej-0.0.1-SNAPSHOT.jar &2、新建数据库Navicat：新建数据库---数据库名：briup-ej--utf8 --- 字符集：UTF-8 Unicode运行SQL文件...

原创 前端面试题

从输入网址到页面显示的过程？DNS解析发起TCP连接（三次握手、四次挥手）发送HTTP请求服务器处理请求并返回HTTP报文浏览器解析渲染页面连接结束HTML页面渲染过程？解析HTML文件，创建DOM树解析CSS，形成CSS对象模型将CSS与DOM合并，构建渲染树布局和绘制link和@import的区别？link是HTML标签，@import是CSS提供页面被加载时，link会同时被加载，@import得等到页面被加载完再加载link无兼容问题，@i

原创 Vue（表单双向数据绑定、监听器、计算属性)

目录v-model实现表单双向数据绑定watch监听器、侦听器监听基本数据类型监听引用数据类型（深度监听）computed计算属性watch和computed的区别v-model实现表单双向数据绑定可以用 v-model 指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。 它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数

原创 Vue（事件机制）

目录事件绑定事件参数（模态框案例）事件修饰符事件绑定v-on 可以监听DOM 事件，并在触发时运行一些 JavaScript 代码。v-on 还可以接收一个需要调用的方法名称。 <button v-on:click="handler">点击我</button> methods: { handler(event){ console.log('我是一个事件对象'); ...

原创 Vue（MVVM、生命周期、模板语法）

简介Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅容易上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。用来做单页面应用--index.html,页面跳转用的vue插件路由来实现跳转。特点1、前端三大主流框架之一 vue react Angular2、轻量级框架 体积更小3、生态圈广泛，适合初学者4、基于mvvm

原创 JS排序（冒泡、选择、插入）

冒泡排序整个过程需要n-1趟冒泡，每趟冒泡都找出未排序序列的最大元素第i趟排序是将第1个位置至第n-i+1个位置元素两两依次比较，最终将最大元素放在第n-i+1个位置第一趟冒泡之后最后一项是有序的了，第二趟冒泡之后最后两项是有序的了，以此类推，直到整个数组完全有序（第一个元素不需要一趟冒泡）。 未排序序列：5 2 3 4 1 第一轮排序：2 3 4 1 5 第二轮排序：2 3 1 4 5 第三轮排序：2 1 3 4 5 第四轮排序：1 2 3 4 ..

原创 ES7（指数运算、includes()）

// 指数运算console.log(3**3);// includes()方法，数组的原型方法Array.prototypevar arr=[1,2,3,4];console.log(arr.includes(4));

原创 ES6（Generator、async、Promise）

Generator是ES6提供的一种异步编程解决方案，语法不同于普通函数；简单的把Generator 理解为一个状态机，封装了多个内部状态，一个yield就是一个状态。执行Generator 函数会返回一个迭代器对象，可以通过调用迭代器next依次遍历Generator函数内部的每一个状态。Generator函数的两个特征1、function关键字与函数名之间有个星号 function* helloWorldGenerator(){ 几行代码 yield ...

原创 ES6（迭代器、Set、Map、数组去重）

迭代器Iterator迭代器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。Iterator 的作用一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。原生具备 Iterator 接口的数据结构Array、Map、Set

原创 ES6（类、继承、Symbol）

目录类继承1、子类对象指向父类对象2、子类原型对象继承父类原型对象Symbol1、为了解决冲突2、消除魔术字符串3、全局注册表Symbol.for(key) ：创建的的symbol会被放入一个全局symbol注册表中。Symbol.keyFor()：检测symbol值是否在全局注册过，返回key或者Undefined。类类是构造函数的另一种写法1、constructor方法是类的默认方法，通过new命令生成对象实例时自动调用该方法。一个类必须有cons..

原创 ES6（解构、箭头函数、length、拓展运算符、rest、模板字符串）

ES61、变量声明let：不能重复声明，块级作用域，在变量声明之前使用会报错，不影响作用域链效果var：可以重复声明，在变量声明之前使用不会报错案例：点击换色或2、常量声明const：一定要赋初始值，一般常量使用大写，常量的值不能修改，块级作用域，但是对象属性修改和数组元素变化不会出发 const 错误3、变量的解构赋值从数组和对象中提取值，对变量进行赋值数组的解构对象的解构4、模板字符串（反引号" ` "）内容中可以直接出现换

原创 ES6（ES6新特性、对象静态、数组静态和实例方法API扩展）

对象静态API扩展Object.is()：判断两个值是否相等 console.log(1===1); console.log(Object.is(1,1)); true true console.log(+0===-0); console.log(Object.is(+0,-0)); true false console.log(NaN===NaN); console.log(Object.is(NaN,N

原创 ES6（环境安装、转码命令、包管理机制、模块化机制）

环境安装1、安装转码工具babel：ES6代码转换为ES5代码（因为有浏览器不支持ES6）集成终端中打开，且确保当前执行环境为cmd（清屏命令为cls）cnpm install -g babel-cli2、安装转换规则cnpm install -g babel-preset-latest3、写转换规则文件.babelrc4、试着运行.js文件babel 文件名.js5、如果报错cnpm install --save-dev babel-cli b.

原创 Vue重构tyut新闻网项目复盘

原创 vscode使用习惯

1、！或 html:52、Ctrl+/：注释3、tr*3>th*3

原创 G2Plot图表库应用

在html中使用G2Plot1、引入G2Plot图表组件库<script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>2、创建图表容器<div id="container"></div>3、创建图表<script>3-1创建图表的构造函数 le...

原创 阿里云服务器

阿里云重置密码一定要记住cmdssh root@公网IP（39.104.24.238）apt-get updateapt-get install apache2apt-get install openjdk-8-jre-headlessapt-get install mysql-server-8.0mysql -uroot -proot（进入数据库）use mysql;update user set Host='%' where User.

原创 JS（BOM）

目录间歇调用和超时调用1、setTimeout(要执行的函数，毫秒数)：超时调用2、clearTimeout(ID)：取消超时调用3、setInterval(要执行的函数，毫秒数)：间歇调用4、clearInterval(ID)：取消间歇调用系统对话框1、alert()：警告框2、confirm()：确认框3、prompt()：用户提示框location对象1、属性2、方法页面跳转location.assign('url')页面替换 replace('

原创 JS（DOM-事件机制）

事件三要素1、事件源：触发事件的对象 ，如按钮对象2、事件类型：如何触发？触发什么事件？如鼠标点击，键盘按下等3、事件处理程序：函数执行事件的步骤1、获取事件源2、注册事件（绑定事件）3、采用函数赋值形式添加事件处理程序绑定事件1、向HTML元素中添加事件1）onclick='alert(1)'2）onclick='test()'function test(){ //不能写在window.onload=function(){}中，否则会找不到t...

原创 JS（DOM-Node、Document、Element）

目录定义Node类型Node类型的属性和方法获取body节点查看节点类型nodeType（Document9 Element1 Text3 Comment8）返回节点名称nodeName（返回纯大写节点名称）获取子节点childNodes，保存的是NodeList列表（返回一个类数组对象）ES5 将类数组对象转换成数组对象ES6 将类数组对象转换成数组对象获取兄弟节点的前一个节点previousSibling获取兄弟节点的后一个节点nextSibling获取n

原创 JS（面向对象）

基本数据类型变量和值保存在栈区，没有方法和属性可以调用基本包装类型（Boolean, Number, String）为了便于操作基本类型值，ECMAScript提供了3个特殊的引用类型Boolean, Number, String，每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型对象，从而可以调用一些方法操作这些数据。1、Stringvar str='hello';str.split("");后台js会自动执行：1.创建一个String类型的一个.

原创 JS（函数）

函数的概念函数允许封装一系列代码来完成特定任务，当想要完成某一任务时，只需要调用相应的代码即可。方法（method）一般为定义在对象中的函数。函数的作用功能的封装，直接调用，代码复用率提高函数的声明1）常规声明function 函数名(形参列表){ //函数体 //写在return后面的语句失效}2）函数表达式var 函数名 = function(形参列表){ //函数体}这种形式看起来像常...

原创 JS（对象）

目录对象的概念对象的创建对象的访问1）属性访问(点访问法、中括号访问)2）方法的访问遍历对象中的属性删除对象中的属性（只能删除对象的自有属性）检测属性（检测一个属性是否属于某个对象，返回true或false）1）'属性名' in obj2）obj.hasOwnProperty('属性名')3）obj.propertyIsEnumerable('属性名')面试题：什么是原型？静态方法和静态属性1）静态方法2）静态属性原型对象的属性和方法1）原

原创 JS（数组）

数组数组的特点1、存放值得集合，可以存放任意数据类型2、数组的长度可以动态调整，可读可写length属性增加数组长度：xx.length=比原来长度大的数字减少数组长度：xx.length=比原来长度小的数字（从末尾开始删除元素）3、访问数组元素，通过数组下标/索引（index 从0开始访问，最大下标length-1）数组的创建1、数组字面量(由一对包括元素的方括号"[ ]"表示，元素之间以逗号","隔开)2、构造函数1）var arr = new Array();

原创 JS（变量声明、数据类型、深浅拷贝）

目录组成特点注释标识符var声明变量（ES5）let 声明变量(ES6)const 声明变量（ES6,一般用于声明常量）数据类型1）类型判断（JS内置函数）2）相等全等比较3）不同数据类型的存放方式类型转换1、将其他数据类型转换为string类型2、将其他数据类型转换为Boolean类型3、将其他数据类型转换为number类型深拷贝和浅拷贝三目运算符组成ECMAScript BOM DOMECMAScript 描述了该语言的语.

原创 CSS的相关知识

选择器优先级important：最高style属性：1000id（#）选择器：100class（.）选择器：10标签/元素选择器：1盒子模型W3C盒子、内容盒子、标准盒子宽高设置给contentw3c盒子的宽=内容区的宽width+左右border+左右padding=100px+2px+20px=122pxw3c盒子的高=内容区的高height+上下border+上下padding=100px+2px+20px=122px所占页面空间盒子的宽=w3c盒子

原创 HTML5

表格1、学完css之后就不要使用一下这些属性了border--表格的边框属性 align--表格的对齐方式 left center right width--表格的宽度 height--表格的高度 cellpadding--表示单元格和内容的距离 cellspacing--表示单元格和单元格之间的距离 bgcolor--表示表格的背景色2、合并边框法一：table的属性cellspacing='0'法二：css的标签选择器3、th一般用于表头单元格，默...

原创 MySQL

启动数据库：net start mysql进入数据库:mysql -u root -p修改密码： alter user user() identified by "xx";退出数据库：quit停止数据库：net stop mysql

原创 Git的相关知识

安装1、打开git官网下载对应操作系统的版本，官网下载太慢的话可以使用淘宝镜像下载CNPM Binaries Mirrorhttps://registry.npmmirror.com/binary.html?path=git-for-windows/2、无脑安装，下一步即可卸载1、删除和git有关的环境变量2、用控制面板或360卸载...

原创 常用Linux命令

cd .. : 回到上一级目录cd xx : 进入下一级目录xxpwd : 显示当前所在的目录路径ls : 列出当前目录中的所有文件touch xx.js/html : 在当前目录下新建一个文件xx.js/htmlrm xx.js/html : 删除一个文件xx.js/htmlmkdir xx : 在当前目录下新建一个文件夹xxrm -r xx : 删除一个文件夹xxmv xx yy : 把xx文件(夹)移动到yy文件夹下clear : 清屏history : 查看历