H5
文章平均质量分 87
易de
日积月累
展开
-
axios拦截器
请求拦截interceptors 拦截器this.$axios.interceptors.request.use(config=>{ // 发生请求前的处理 return config },err=>{ // 请求错误处理 return Promise.reject(err); })//或者用axios实例创建拦截器let instance = this.$axios.create();instance.interceptors.r.原创 2020-12-09 10:32:45 · 2499 阅读 · 1 评论 -
Vue实现用户登录导航守卫
在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下:1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token3、前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面4、前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面5、每次调后端接口,都要在请求头中加token6、后端判断请求头中有无token,原创 2020-11-30 22:32:18 · 2268 阅读 · 0 评论 -
编程式导航传参
如果路由跳转使用path,必须使用query方式传参,如果使用name跳转,query和params都可以传参,建议使用query方式传参,query方式传参,参数在地址栏,当刷新页面后,参数还可以通过地址栏获取。path跳转,query传参this.$router.push({ path : '/main', query : { userName : this.ruleForm.name } }) 跳转到的页面:{{this.$route.que原创 2020-11-28 17:55:26 · 1214 阅读 · 0 评论 -
H5面试
面试总结会话跟踪客户向服务器发送第一个请求的时候,会话就开始了,在关闭浏览器之前,会话的各页面之间是数据共享的,直到关闭浏览器,这就是会话跟踪。会话跟踪常用的方法:(1)session:当客户第一次访问服务器到的时候,服务器会为该客户创建一个session对象,并为其设置一个唯一的sessionID,然后将这个ID放入cookie发送到客户端,下一次访问的时候,sessionID会发送到服务器,根据这个ID在服务器识别不同的用户。要注意,session是依赖cookie的,如果cookie被禁用原创 2020-11-25 08:13:01 · 164 阅读 · 0 评论 -
react组件化实现简易留言板
react组件化实现简易留言板效果1.input组件2.button组件3.list组件4.App.jsx5.index.js效果可以拆分为三个组件,input组件,button组件,list组件1.input组件input组件实现昵称的输入框和留言内容的输入框,通过判断父组件上是否传了row属性来判断是展示位单行输入框还是文本域输入框。这两种输入框上面都有一个OnInput事件,用来获取当前输入框的值。import React,{Fragment} from 'react'export原创 2020-11-23 22:33:31 · 811 阅读 · 0 评论 -
echarts入门(通过axios请求数据)
echarts入门(axios请求数据)1. npm 安装 EChartsnpm install echarts --save2. 下面的是基本结构,里面的数据是静态的(写死的,不是通过接口请求到的)<template> <div> <div id="echart" style="width : 80%;height : 300px"></div> </div></template>原创 2020-11-22 19:18:10 · 6042 阅读 · 6 评论 -
webpack 搭建 React 开发环境
webpack 搭建 React 开发环境1. 安装模块1. 安装模块初始化npm init -y 自动配置 npm init 手动配置安装react模块# 安装reactcnpm install react --save# 安装react-domcnpm install react-dom --save安装webpack模块webpack-cli 用来执行webpack命令# 安装webpack和webpack-clicnpm install webp原创 2020-11-21 20:27:58 · 109 阅读 · 0 评论 -
node+express+axios实现单文件上传
node+express+axios实现单文件上传1.安装依赖2.后端代码3.前端代码1.安装依赖在node服务端安装依赖cnpm i multer --save2.后端代码var express = require('express');var router = express.Router();//上传商品图片var multer = require('multer');var fs = require('fs');var path = require('path'); //原创 2020-11-19 22:34:09 · 287 阅读 · 0 评论 -
Vue入门案例---ToDoList
ToDoList功能展示1.初始页面2.在输入框输入内容,按回车,添加到正在进行的列表3.点击文本,变为输入框,可以对内容进行修改4.文本框失焦,变为修改后的值5.点击“x”,删除内容6.点击正在进行的列表的内容前面的复选框,事件从正在进行的列表添加到已经完成的列表7.点击已经完成的列表的内容前面的复选框,事件从已经完成的列表添加到正在进行的列表仿ToDoList官方功能展示1.初始页面2.在输入框输入内容,按回车,添加到正在进行的列表3.点击文本,变为输入框,可以对内容进行修改4.文本框原创 2020-11-15 16:33:11 · 339 阅读 · 0 评论 -
Vue使用elementUI实现一个后台管理
Vue使用elementUI实现一个后台管理功能效果功能分析1.安装2.main.vue3.App.vue4.views(1) Home.vue功能效果初始界面添加商品分类修改分类删除分类功能分析1.安装(1)首先创建一个vue项目,创建过程我之前的博客有写过。该后台是基于element UI组件库。(2)安装element ui npm -i element-ui -S(3)全局引入,参考element-UI官网引入下面的代码到mian.jsimport Ele原创 2020-11-15 16:14:41 · 4175 阅读 · 2 评论 -
Vue必备面试题
1.vuex的作用?vuex是专门为vue.js应用程序开发的状态管理模式,状态就是结果,样式,数据等,实现了对应用中所有组件的状态的全局管理。vuex的几个核心概念store,全局状态管理,主要包括state,mutations,actions,modules,getters五大属性。state : 用于存储数据,数据是全局的,都可以通过$store.state.名字来使用。mutations:用于操作state中的数据,是同步操作,通过$store.commit来触发。actions:用于原创 2020-11-15 14:42:55 · 220 阅读 · 0 评论 -
Vue组件化(组件通信,自定义组件)
Vue组件化自定义组件1.创建.vue文件2.在父组件中引入自定义组件3.在父组件中注册子组件4.在父组件中使用子组件组件通信1.父组件向子组件传值2.子组件向父组件传值封装自定义组件1.封装输入框组件2.封装按钮组件3.使用自定义的样式组件自定义组件1.创建.vue文件<template> <div class="nav-body"> <div class="navs"> <div>首页</div>原创 2020-11-08 15:40:27 · 136 阅读 · 0 评论 -
Vue工程化项目
Vue工程化项目脚手架安装与项目创建脚手架安装与项目创建安装cnpm i -g @vue/cli创建项目vue create 项目名称创建项目过程的选项(1)自定义安装(2)选择安装的模块(按空格选中,按回车下一步)...原创 2020-11-08 15:06:02 · 325 阅读 · 0 评论 -
Vue基础选项
Vue基础选项1. el2.data3.methods4.computed5.watch6.filter1. el挂载点,用于挂载要管理的数据2.data定义数据3.methods定义vue对象中的一些方法上面的三项是最基本的选项,有了他们就能有如下结构,一定要注意各个选项之间要用逗号隔开。<div id='app> {{ msg }} </div><script>el:{ "#app",},data:{ msg : 'hello'原创 2020-11-06 21:26:55 · 448 阅读 · 0 评论 -
MVC vs MVVM
MVC vs MVVMMVCView和Controller的交互Model和Controller的交互MVVMMVCMVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写。 是一种使用 MVC设计创建 Web 应用程序的模式。M : 即model,模型,用于处理数据逻辑的部分。V:即view,视图,界面中处理显示数据的部分。C:即control,控制器,作用于model和view,处理model和view之间的交互。原创 2020-11-04 20:29:21 · 331 阅读 · 0 评论 -
v-model & v-bind
v-model 双向绑定修饰符 :.lazy 当在输入框输入内容的时候不立即响应,失焦的时候数据才双向绑定.number 输入框内只能输入数字,当输入其它.trim文本框应用单选应用复选应用下拉列表应用<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js"原创 2020-11-04 17:27:12 · 127 阅读 · 0 评论 -
v-on指令详解
获取点击事件元素本身< button type=“button” @click=“click1($event)”>按钮< /button>methods : { click1() { …} }console.log(e);//返回一个鼠标事件对象MouseEvent。console.log(e.target);//通过对象的target来获取触发事件的对象。console.log(e.clientX);//通过对象的target来获取鼠标的相对坐标值X。&l.原创 2020-11-04 11:44:07 · 1707 阅读 · 0 评论 -
Vue基础指令
自上而下原创 2020-11-02 21:39:32 · 146 阅读 · 0 评论 -
JS面试题之用js代码简单的介绍下自己
用js代码简单的介绍下自己<script> function Person(name,jingli,jineng) { this.name=name; this.jingli=jingli; this.jineng=jineng; } Person.prototype.show=function(){ console.log("我是"+this.name+";我有如下经历:"+this.jingli+";我会如下技能:"+原创 2020-11-01 16:55:41 · 625 阅读 · 0 评论 -
JS面试题之数组快速排序
请使用javascript写出数组快速排序代码<script>function quiktSort(arr){ var left =[],right=[]; if(arr.length<1){ return arr; } //求数组的长度的一半 var index = Math.floor(arr.length/2); //截取,取数组的最中间的一个元素 var point = arr.splice(index,1); for(原创 2020-11-01 16:19:16 · 403 阅读 · 0 评论 -
JS面试题之数组去重
1.如果数组的第i项,第一次出现的位置不是在下标i,那么这个元素就是重复出现了,是下标i,说明是第一次出现,则放入新数组。<script> function arrNoRepeat1(arr){ let new_arr = []; for(let i = 0,len = arr.length;i < len;i ++){ //如果数组的第i项,第一次出现的位置不是在下标i,那么这个元素就是重复原创 2020-11-01 15:35:42 · 965 阅读 · 1 评论 -
2020-1024---商品倒计时
效果三个商品不同的倒计时html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>stoptime</title> <link rel="styl原创 2020-10-24 11:44:03 · 68 阅读 · 0 评论 -
2020-09-26---错题小系统
错题小系统技术环境界面功能1.查2.增3.删4.改数据库文件结构代码CSSphpJS技术Bootstrap、JavaScript、Ajax、PHP环境VScode、谷歌浏览器、PHPstudy(Apache、MySQL)界面主界面:点击添加错题:点击修改错题:功能1.查显示所有错题,把数据库中的错题都显示到页面。2.增添加错题,点击添加错题按钮后,弹出模态框,可以输入对应的内容,通过ajax内容添加到数据库中,然后再通过重载功能把内容加载到页面中。3.删删原创 2020-09-26 17:46:46 · 649 阅读 · 0 评论 -
2020-09-24---Promise & jsonP
Promise & jsonPPromise一、什么是promise?二、语法:三、方法四、Promise有三种状态五、 Promise的静态方法 Promise.all()当有多个异步程序时1.计时器回调函数2.计时器Promise3.计时器 PromiseAjax的同源策略跨域方式有jsonP(前端可以实现的跨域方式)Promise一、什么是promise?是ES6提出的一种异步编程解决方案。它是一个构造函数Promise二、语法://resolve : 成功 reject :原创 2020-09-25 21:58:11 · 137 阅读 · 0 评论 -
2020-09-23---Ajax
Ajaxajaxajax原理ajax封装应用1.通过ajax请求 .txt 的内容ajax概念无需加载整个网页(刷新页面)的情况下,能够更新部分网页对的技术。优点(1)无刷新更新数据(2)异步与服务器通信,不打断用户的操作(3)前后端负载平衡(4)前后端分离缺点(1)对搜索引擎支持较弱(2)不能很好地支持移动端设备(3)没有了back和history功能,即对浏览器机制的破坏(4)对IT企业带来了新的安全威胁。ajax原理四步1.创建对象2.连接服务器3.发送请求原创 2020-09-24 10:34:00 · 90 阅读 · 0 评论 -
2020-09-23---Cookie实现购物车
购物车四大步骤第一步:用户注册,首先是前端正则检测,然后后端cookie检测,符合规则,注册成功,点击登录跳转到登录页面第二步:用户登录,首先是前端正则检测,然后后端cookie检测,符合规则,登录成功,跳转到商品详情页面第三步:商品详情页,点击购买商品会加入到购物车,点击查看购物车会跳转到购物车页面第四步:购物车页面效果登录成功跳转到商品详情页面点击‘查看购物车’跳转到购物车页面文件结构一个购物车文件夹,下面有四个HTML文件,一个js文件夹,里有一个js文件。代码1原创 2020-09-23 21:41:35 · 370 阅读 · 0 评论 -
2020-09-22---Cookie
创建cookie//创建cookie// function createCookie(key,value,json){// //初始化参数// //如果第三个参数没有传,就是undefined,然后下面用json.[]时候就是undefined.[],这样就会报错。所以必须要初始化第三个参数,有参数就为传过来的参数,没有就为空对象// json = json || {};// let cookis_str = encodeURIComponent(key) + '原创 2020-09-23 15:45:33 · 100 阅读 · 0 评论 -
2020-09-21---php&mysql实现登录注册
php&mysql实现登录注册环境数据库文件结构步骤代码login.htmlregistor.htmllogin.phpregistor.phpapidoc.md效果环境数据库文件结构必须要注意,文件夹必须放在服务器上,然后才能运行。步骤在服务器上新建一users个文件夹,然后新建login.html和registor.html文件,接着新建一个php文件夹,用来放php文件,在php文件夹里面,新建login.php和registor.php。最后在新建一个API文档apidoc原创 2020-09-22 09:58:28 · 288 阅读 · 0 评论 -
2020-09-16---js实现五星好评效果&放大镜效果&瀑布流
放大镜效果&瀑布流放大镜效果思想瀑布流固定列数思想放大镜效果思想面向对象的思维分析分析功能移入事件,移入的时候,滑块显示,大图显示移出事件,移出的时候,滑块消失,大图消失移动事件,移动的时候,滑块跟随,滑块有边界,不能出来图片,且鼠标在滑块中间放大镜的核心:求比例鼠标在小图上移动多少,对应的右边的大图移动相应对的比例。瀑布流固定列数思想瀑布流的核心:找最小高度的列的位置面向对象分析1.求最小高度:求所有列当中最小高度列所在的下标值固定列数,每一列为一个ul,把所原创 2020-09-17 09:49:35 · 317 阅读 · 0 评论 -
2020-09-15---js实现购物车&轮播图
购物车&轮播图购物车思想轮播图购物车思想/*一、 查看购物车-- 点击事件–跳转页面二、购买 ==== 点击事件1. 获取购物车页面所需要的商品信息(id/name/price/num)let good_id = …;let good_name = ‘…’2. localStorage = ‘key’ ‘value’‘key’ ‘product_’ + 商品id‘value’‘{“id” : 1,“name” : “水杯”,“price” : 29,“num” :原创 2020-09-16 21:29:57 · 670 阅读 · 0 评论 -
2020-09-14---js案例(轮播图&烟花效果)
轮播图思路/*轮播:核心: 当前下标方式:大图 display 小圆点 backgroundColor属性:1. 获取大盒子2. 获取大图(ul_li)3. 计算大图数量4. 创建并返回所有的小圆点 = 补全页面()5. 获取左按钮6. 获取右按钮7. 当前下标 = 08. 添加事件()9. 获取文字信息框10. 调用轮播//方法1. 补全页面1> 左按钮1… 创建span2… 添加内容 <3… 添加id4… 添加到大盒子中2&原创 2020-09-14 21:45:13 · 178 阅读 · 0 评论 -
2020-09-13---js中的运动
js文件let timer = null;//匀速运动//01从左向右走,走向目标function sport01(obj){ clearInterval(timer); timer = setInterval(function(){ if(obj.offsetLeft >= 500){ clearInterval(timer); }else{ obj.style.left = obj.offset原创 2020-09-13 18:46:00 · 182 阅读 · 0 评论 -
2020-09-13---js中的兼容
js中的兼容1.滚动条距离顶端的距离2.滚动条距左端的距离3.byClassName的兼容4. 获取非行内样式5. 获取事件对象的兼容6. 获取鼠标编码值的兼容7. 获取键盘编码值的兼容8. 阻止事件冒泡的兼容9. 阻止默认行为的兼容10.添加事件监听器的兼容11. 移除事件监听器的兼容12. 获取事件源的兼容1.滚动条距离顶端的距离//1滚动条距离顶端的距离var scroll_top = Math.floor(document.documentElement.scrollTop || docume原创 2020-09-13 18:34:19 · 86 阅读 · 0 评论 -
2020-09-12---周总结
js第三周总结day1 event(上)一、什么是事件对象?(黑匣子,行车记录仪,监控)二、如何获取事件对象?day1 event(上)一、什么是事件对象?(黑匣子,行车记录仪,监控)当绑定事件的对象在触发条件时,发生的信息保存在一个地方,这个地方叫做事件对象。二、如何获取事件对象?标准浏览器 : 事件处理程序...原创 2020-09-12 16:07:37 · 196 阅读 · 0 评论 -
2020-08-27---函数(上)
函数(上)一、什么是函数?二、好处三、函数的分类四、函数的类型五、函数的声明1.语句定义法:任意位置都可调用2.表达式定义法:只能先声明,后调用六、调用函数七、函数的参数1.实际参数(实参):2.形式参数(形参):八、函数的返回值九、事件相关概念绑定事件的语法:onload : 加载事件表单鼠标键盘一、什么是函数?对于需要反复使用的功能代码,将其封装成一个独立的模块,这种功能代码块叫函数。二、好处程序可控。一次封装,多次使用(复用)。随处可调三、函数的分类内置(库、系统)函数自定义函原创 2020-09-11 14:26:21 · 99 阅读 · 0 评论 -
2020-09-10---ES6
ES6一、严格模式“use strict”; 注:写在作用域开头二、修改上下文this指向函数的方法:1. bind(对象,参数1,参数2,……) 返回函数2. call(对象,参数1,参数2,……) 返回对象3. apply(对象,数组|arguments) 返回对象三、JSON方法1.JSON.parse() : 将严格的json格式的字符串解析为对象2.JSON.stringify() :将对象转为JSON字符串四、新增关键字 let & const1.let : 用户声明变量原创 2020-09-10 22:09:00 · 58 阅读 · 0 评论 -
2020-09-09---正则表达式
正则表达式一、什么是正则表达式二、如何声明正则表达式1.字面量 /正则表达式/标志位2.构造函数 new RegExp('正则表达式','标志位')三、正则的方法1.正则表达式.test(字符串)2.正则表达式.exec(字符串)字符串处理正则的方法1.字符串.match(正则表达式):返回数组2.字符串.search(正则表达式):查询正则匹配的字符串在父串中第一次出现的下标位置,没有匹配,返回-1;3.字符串.replace() : 替换exec 与match的区别四、正则的元字符(三二二三三个一)1原创 2020-09-09 22:09:03 · 180 阅读 · 0 评论 -
2020-09-08---event
event一、浏览器默认行为及阻止1.右键菜单2.超链接3.拖拽的默认行为二、事件监听器三、事件委托(事件代理)四、拖拽1.思想2.伪代码3.代码实现五、滚动事件一、浏览器默认行为及阻止1.右键菜单document.oncontextmenu = function(){ return false; //既阻止默认行为,也阻止事件冒泡}2.超链接标准浏览器 : event.preventDefault()IE: event.returnValue = false;var o_a = d原创 2020-09-08 22:47:09 · 93 阅读 · 0 评论 -
2020-09-07---event
event一、什么是事件对象?(黑匣子,行车记录仪,监控)二、如何获取事件对象?三、事件的对象的应用1.如何获取鼠标的编码值(1)event.button(2)which IE9以下不支持2. 如何获取鼠标的坐标值(1)鼠标的相对坐标值(相对鼠标所在对象的坐标值)(2)鼠标的绝对坐标值(相对于body(左上角)的坐标值)(3)鼠标的可视区坐标值(4)鼠标的屏幕坐标值3.如何获取键盘的编码值(1)onKeydown/onKeyup(2)onkeypress4.如何实现组合(快捷)键5.阻止事件冒泡的兼容案例模原创 2020-09-07 22:29:23 · 178 阅读 · 0 评论 -
2020-09-05---周总结
day1 数组一、什么是数组?存储一组或一系列相关数据的容器二、数组的好处?数据集中管理,提高性能三、数组元素存储在数组中的数据四、数组下标能够唯一标识一个容器的索引号(从0开始,到数组的长度-1)五、数组属性length:数组长度...原创 2020-09-06 21:31:27 · 197 阅读 · 0 评论