mock
Mock当前端工程师需要独立于后端并行开发时,后端接口还没有完成那么前端怎么获取数据?这时可以考虑前端搭建web server自己模拟假数据,这里我们选第三方库mockjs用来生成随机数据拦截Ajax请求。
官方文档
基本使用
安装mockjs:cnpm install mockjs --save-dev
创建mock文件夹以及mock配置的js文件
方式一:直接创建随机数据
123456789101112131415const Mock = require('mockjs')//随机生成idlet id = Mock.mock('@id')console.log(id)//随机生成对象let obj = Mock.mock({ id: '@id()',//随机id username: '@cname()',//随机生成中文名字 date: '@date()',//随机生成日期 avatar: "@image('200x200 ...
H5本地存储
浏览器本地存储(webStorage)LoaclStorage一种存在浏览器的域对象;并且关闭浏览器之后依然有效,只有手动清除或者清空缓存才会消失。
123456789101112131415161718192021222324252627282930313233343536373839<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>localStorage</title></head><body&g ...
Axios
axiosaxios是一个基于promise的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。
使用方式
使用npm安装:$ npm install axios
使用 cdn:<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
基本使用1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768<script> //获取按钮 const btns = document.querySelectorAll(' ...
Promise
PromisePromise是一门新的技术(ES6规范),Promis是JS中进行异步编程的新解决方案(旧方案是单纯使用回调函数)
优点:
指定回调函数的方式更加灵活
支持链式调用,可以解决回调地狱问题
Promise的状态改变promise的状态为实例对象中的一个属性[PromiseState]
1.pending(初始状态)变为resolved2.pending(初始状态)变为rejected
说明:只有这2种,且一个promise对象只能改变一次无论变为成功还是失败都会有一个结果数据成功的结果数据一般称为value,失败的结果数据一般称为reason
Promise的工作流程
相关ApiPromise(excutor){}
executor:(resolve,reject)=>{}
resolve函数:内部定义成功时调用的函数value=>{}
reject函数:内部定义失败时我们调用的函数reason=>{}
Promise.prototype.then 方法:(onResolved,onRejected)=>{}
onResolved函数:成 ...
Ajax
Ajax解决跨域1.设置跨域属性的响应头
response.setHeader(‘Access-Controll-Allow-Origin’.’*’);
2.jsonp(利用一些h5标签可以跨域的特性发送请求)
发送jsonp请求
发送异步请求Get请求123456789101112131415const xhr = new XMLHttpRequest();xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=100');//设置响应体数据的类型xhr.responseType = 'json';//设置请求头xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.send();xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ ...
JavaScript
JavaScript数据类型
Number:默认值0
具体细节:
0开头8进制
0b二进制
默认是10进制
0x表示16进制
Number.MAX_VALUE数字型最大值
Number.MIN_VALUE最小值
Infinity无穷大
-Infinity无穷小
NaN非数字
相关函数:
isNaN:判断是否是非数字
Boolean:默认值false
String:默认值””
length属性:返回长度
Undefined:默认值undefined
Null:默认值null
类型函数
typeof():判断类型
toString():转换字符串
String():转成字符串
parseInt():转换为数字型
parseFloat():转换为浮点型
Number():转换为数字型
Boolean():转换为布尔值
数组创建方式:
new出来:new Array()
利用字面量:let arr = [1,2,”1231”,true];
获取方式
利用索引(索引号从0开始):数组名[索引号]
获取长度
arr.length:获取数组长度
判断是否为数组 ...
jQuery
jQueryDom和jQuery对象的转换
DOM-jQuery:$(DOM对象)
jQuery-DOM:$(“div”)[index]/$(“div”).get(index)
常用选择器
#id:获取指定id的元素
*:所有元素
.class:获取同一个class的元素
div:同标签元素
div,p,li:多个元素
li.current:交集元素
ul>li:子代选择
ul li:后代选择
:first:第一个元素
:last:最后一个
:eq(index):第几个元素从0开始
:odd:索引为奇数的元素
:even:索引号为偶数的元素
parent():获取父级
children(selector):最近的儿子
find(selector):后代选择
siblings(selector):兄弟节点
nextAll([expr]):该元素之后的同辈元素
prevtAll([expr]):该元素之前的同辈元素
hasClass(class):指定类的元素
eq(index):index位的元素
常用属性
$(“div”).css(“ ...
MyBatisPlus
MyBatisPlus简介MyBatis-Plus简称 MP,是一个 MyBatis 的增强工具,在 MyBatis 的基础上只做增强不做改变,为简化开发、提高效率而生。
框架结构
入门案例相关starter依赖123456789101112131415161718192021222324<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> < ...
差分
差分差分和前缀和是密不可分的,如有一个数组a,就会对应有一个差分数组b。差分数组b的特性是:
a[i]=b1+b2+b3+…+bi,即为将数组a看做b的前缀和数组,a与b互为逆运算.
一维差分简单分析一维差分就是由一维数组组成的差分,主要运用差分数组的特性将求原数组a(b的前缀和数组)的某子区间进行加减操作从O(n)转化为O(1).
如:输入一个长度为 n 的整数序列。接下来输入 m 个操作,每个操作包含三个整数 l,r,c,表示将序列中 [l,r]之间的每个数加上 c。请你输出进行完所有操作后的序列。
代码12345678910111213141516171819202122232425262728#include<iostream>#include<stdio.h>using namespace std;#define N 100010int a[N],b[N];void insert(int l,int r,int num){ b[l] += num; //将第l个加上num因为a为b的前缀和所以l之后所有a[i]都会加上num b[ ...
前缀和
前缀和一维前缀和简单分析一维前缀和:该位之前所有数之和,需要拿一个数组来存,前缀和的目的就是为了方便之后需要求数组中某一段的和不再需要重新遍历,只需要利用前缀和进行操作。
如:输入一个长度为 n 的整数序列。接下来再输入 m 个询问,每个询问输入一对 l,r。对于每个询问,输出原序列中从第 l个数到第 r个数的和。
代码123456789101112131415161718#include <iostream>#include <stdio.h>using namespace std;#define N 100010int a[N],s[N]; //将比较大的数组定义为全局变量int main() { int n,m,l,r; scanf("%d%d",&n,&m); for (int i = 1; i <= n; ++i) scanf("%d",&a[i]); //录入数组 for (int i = 1; i <= n; ++i) s[i] = s[ ...