pick豆子-CSDN博客

原创 React基础入门学习

1. 核心文件react.js 核心文件react-dom.js 渲染页面DOM 当前文件必须1依赖react文件babel.js 把ES6转化为ES5 把JSX语法转化为Javascriptnative app文件2.什么是JXS什么是JXS定义：一个对象，很像html，但是不是。这个东西的属性不能增加和修改。（约等于object.freeze）JXS代码会被运行或者打包阶段被编译、生成浏览器可以识别的代码。为什么使用JXS简化了语法、提高了开发效率。一

2020-10-11 16:23:12 262

原创单点登录和思考（俩种方案）

1.前言以前自己做项目的时候，登录设计比较简单，并且没考虑太多东西。而公司内部登录都是采用单点登录的。我自己的项目登录方法1.cookie和session客户端输入账号密码后向服务端发起请求。服务端验证通过后，由于http无状态，所以服务端要记录此次请求。创建一个sessionID存到cookie中（通过set-cookie），发送给客户端。客户端再次发送请求时携带cookie，并通过cookie中的sessionID在服务端验证。缺点：存在cookie中，可能被别人盗取，冒充

2020-08-11 14:01:18 354

原创 Vue和前端工程化、webpack的基本使用（模块化、脚手架使用）

###今日目标1.能够了解模块化的相关规范2.了解webpack3.了解使用Vue单文件组件4.能够搭建Vue脚手架5.掌握Element-UI的使用###1.模块化的分类####A.浏览器端的模块化1).AMD(Asynchronous Module Definition,异步模块定义)代表产品为：Require.js2).CMD(Common Module Definition,通用模块定义)代表产品为：Sea.js####B.服务器端的模块化服务器端的模块化规范是使用Comm

2020-07-31 19:23:09 319

原创电商管理项目优化和上线

###今日目标1.完成项目优化2.完成项目上线###1.项目优化实现步骤：A.生成打包报告，根据报告优化项目B.第三方库启用CDNC.Element-UI组件按需加载D.路由懒加载E.首页内容定制2.添加进度条给项目添加进度条效果，先打开项目控制台，打开依赖，安装nprogress打开main.js，编写如下代码//导入进度条插件import NProgress from 'nprogress'//导入进度条样式import 'nprogress/nprogress.css'

2020-07-30 19:04:02 275

原创 Vuex复习

1.Vuex概述Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。比如孙子给父亲传值。要经过很多儿子(层），用vuex可以大范围传值，维护一个大的共享变量store。可以直接用全局变量store，其他组件直接使用store就行。适合频繁的大范围的父子之间通信、传递消息使用Vuex管理数据的好处：能够在vuex中集中管理共享的数据，便于开发和后期进行维护能够高效的实现组件之间的数据共享，提高开发效率存储在vuex中的数据是响应式的，当数据发生改变时，页

2020-06-12 14:22:27 206

原创 flex布局应用

1.最大缩放倍数和最小缩放倍数 <meta name="viewport" content="width=device-width, initial-scale=1.0">flex:1 假如5个小li，则5个li各站五分之一flex：1Flex: 1 和 flex:0 flex为0的占0份，flex为1的自适应，占剩下的全部。flex：1flex：0设置上下对齐思路：(图片和景点颜色)将主轴换为y轴把侧轴设为居中对齐。fle.

2020-06-09 20:46:48 222

原创 CORS和JSONP

JSONP和CORS跨域的基本概念浏览器为了一定的安全因素，增加了同源策略。有违同源策略的操作都是被禁止的，这个时候就会发生我们所说的跨域。但其实浏览器加载的资源很多都是跨域的，只是有些资源的加载浏览器是允许的。图片（img）、CSS、Script等资源是不受同源策略限制的。-我们所说的跨域主要说的是ajax请求无法完成。跨域解决方案JSONPJSONP的优点就是因为他够老，能兼容各种浏览器，无兼容问题。他发送的不是ajax请求，而是利用了script标签加载机制。JSON

2020-06-07 20:19:07 408

原创 http和websocket

http（应用层协议）http1.0最大的问题，传送一次资源建立一次http连接。三次握手和四次挥手带来的性能消耗。HTTP1.1：长连接，一次http请求，发送多次http资源。HTTP2.0：解决了连接的1对1，一个连接可以有多个请求。局限性：只能由客户端联系服务端，客户端不联系服务端，服务端就不会主动给客户端发送。webscocket（html5）完成一次握手，建立持久连接。进行双向传输。解决问题：服务端有消息可以主动发送给客户端。websocket和http都是应用层协议。和

2020-06-06 20:40:46 1284

原创浏览器绘制过程

1.回流和重绘？回流：渲染树中元素的外观尺寸，外观，隐藏变化时，重绘。重绘：渲染树中颜色发生变化，不影响布局，产生重绘。回流一定会重绘，重绘不一定会回流。如果最小化重绘和回流：对DOM操作进行复杂的操作时，可以先隐藏（display：none），操作完成后在显示。不用table布局，一个变化，全会回流。避免使用css表达式，每一次使用都会重新布局。利用className可以批量修改样式。boder一次性写完。浏览器解析过程解析HTML构建DOM树，并行请求CSS/图.

2020-06-06 16:15:13 507

原创浏览器缓存

浏览器的缓存浏览器缓存机制浏览器缓存机制指的是能够在一定时间内保存web资源的副本。在有效事件内，如果再次发起相同请求，会直接从缓存中获取数据。有效缓解了服务端压力以及加快了性能。优点：缓解服务器的压力。缓存机制种类强缓存定义：直接从缓存中获取资源，不用向服务端发起请求。方法：设置http头为expries（http1.0）和cache-control（http1.1）来设置。expries（服务端）：它通过相对时间计算。表示缓存到几点。（1）相对最后访问时间（2）相对修改

2020-06-06 15:35:29 272

原创 JS代码

防抖：一段时间内只执行一次，如果有再次触发，重新计算时间（技能读条） <script> var timer = t; document.getElementById('lkq').onclick = function(){ clearTimeout(timer); timer = setTimeout(function(){ console.log('防抖'); },300)

2020-06-03 19:26:20 283

原创浏览器与进程和线程

浏览器是多线程的（多进程）每创建了一个Tab页。就相当于一个独立的浏览器进程。(浏览器的优化，一些进程被合并了）浏览器能运行：是因为系统给它的进程分配了资源（cpu和内存）浏览器有哪些进程浏览器主控进程（负责协调）第三方插件进程（使用插件时使用）GPU进程浏览器(3D绘制)渲染进程（负责协调、脚本执行、事件处理）为什么不是进程?一个崩溃影响整个进程。4.最主要的是渲染进程：它是多线程的。GUI渲染线程：负责渲染解析html树，css树，构建dom树和渲染树。布

2020-06-03 13:56:39 405

原创主页内容

主页内容除了登录接口，必须有服务端授权才能请求数据。使用授权的API，必须在请求头中使用Autorization字段提供token令牌。通过axios请求拦截器添加token，保证拥有获取数据的权限。请求函数，到达服务器之前调用函数，给请求头添加token//请求函数，到达服务器之前调用函数，给请求头添加tokenaxios.interceptors.request.use(config => { // console.log(config) NProgress.sta

2020-05-25 16:11:24 249

原创登录功能

登录不跨域：cookie和session记录状态跨域：使用token使用跨域状态。token客户端发送用户名和密码进行登录服务器验证通过之后，生成该用户token并返回客户端存储该token。后续都携带该token发送请求服务器验证token是否通过。存在证明已存在，客户端请求时可以发送数据。数据验证用ui来验证。<el-form-item prop="username">//================== // 这是表单的验证规则对

2020-05-25 13:50:25 313

原创 JavaScript复习

typeof和instanceoftypeof判断是否为function、number、boolean、string、undefined、objectinstanceof：判断是否为构造函数实例。即运算符用于判断构造函数的原型对象是否在对象原型链上的某个位置。继承方式ES6使用extends继承，并用super调用父亲函数ES6之前：构造函数加原型对象模拟实现继承，称为组合继承father.call(this,name,age)//改变指向var baba=new father.

2020-05-24 15:34:45 167

原创 CSS学习总结

方法一：定位走一半，再回来一半 <style> .parent { width: 200px; height: 200px; position: relative; background-color: pink; } .child { width: 50px; height: 50px; position: absolute;

2020-05-24 15:34:06 118

原创闭包和函数

1.函数的定义和调用函数的定义方式函数声明方式 function 关键字 (命名函数) function fn(){}函数表达式(匿名函数) var fn = function(){}new Function()var f = new Function('a', 'b', 'console.log(a + b)');f(1, 2);var fn = new Function('参数1','参数2'..., '函数体')注意/*Function 里面参数都必

2020-05-23 23:05:44 273

原创构造函数和原型

对象的三种创建方式字面量方式var obj = {};new关键字var obj = new Object();构造函数方式(ES6之前大量生成对象)function Person(name,age){ this.name = name; this.age = age;}var obj = new Person('zs',12);1. 静态成员和实例成员实例成员实例成员就是构造函数内部通过this添加的成员如下列代码中uname age sin.

2020-05-23 22:35:47 169

原创类和对象

创建对象//以下代码是对对象的复习//字面量创建对象var ldh = { name: '刘德华', age: 18}console.log(ldh);//构造函数创建对象 function Star(name, age) { this.name = name; this.age = age; }var ldh = new Star('刘德华', 18)//实例化对象console.log(ldh); 创建类//步骤1 使用class关键.

2020-05-23 21:57:49 111

原创 Vue实现Tab切换

Tab切换 - 点击之后更改索引：v-on:click='change(index)颜色变化 v-bind:class='currentIndex==index?"active":""'，active是css里的类。图片显示：v-bind:class=‘currentIndex==index?“current”:""’，和当前索引相等的设置为block属性。<!DOCTYPE html><html lang="en"><head> <meta.

2020-05-22 14:57:56 692

原创项目优化和发布

项目优化实现步骤：生成打包报告，根据报告优化项目第三方库启用CDN（通过externals加载外部CDN）通过CDN加载Element-UI，在main-prod.js中注释掉按需加载，同时在index.html头部通过CDN加载element.ui的js和css样式首页内容定制：不同环境下产生不同内容。通过插件进行定制路由懒加载：打包时，JS包非常大，我们把不同路由对应的组件分割成不同代码块，然后当路由被访问到的时候才加载对应组件，这样就更高效了。路由懒加载步骤：安装@babel

2020-05-22 02:24:22 163

原创使用vue脚手架和element-ui使用

Vue脚手架Vue脚手架可以快速生成Vue项目基础的架构。安装3.x版本的Vue脚手架： npm install -g @vue/cli基于3.x版本的脚手架创建Vue项目：使用命令创建Vue项目：vue create my-project选择Manually select features(选择特性以创建项目)勾选特性可以用空格进行勾选。是否选用历史模式的路由：nESLint选择：ESLint + Standard config何时进行ESLint语法校验：Lint o

2020-05-22 01:41:20 592

原创 webpack打包学习和Vue脚手架和ElementUI基本使用

webpack的概念-webpack是一个流行的前端项目构建工具，可以解决目前web开发的困境。webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性webpack的基本使用创建项目目录并初始化，创建项目，并打开项目所在目录的终端，输入命令：npm init -y创建首页及js文件。在项目目录中创建index.html页面，并初始化页面结构：在页面中摆放一个ul，ul里面放置几个li。在项目目录中创建js文件夹，并在文件夹中创建inde

2020-05-22 01:39:36 595 1

原创 ES6模块化

传统的开发模式主要问题命名冲突文件依赖通过模块化解决上面问题模块化是就是单独把一个功能封装到一个模块（文件中），模块之间相互隔离，但是可以通过特定接口公开内部成员，也可以依赖别的模块。模块化的好处：方便代码重用，从而提升开发效率，并且方便后期维护。模块化的分类浏览器端的模块化1).AMD(Asynchronous Module Definition,异步模块定义) 代表产品为：Require.js2).CMD(Common Module Definition,通用模块定义

2020-05-21 23:00:27 127

原创后台管理系统总结

vue项目制作vue init webpack vcustomers customers是文件名。到customers文件夹cnpm install项目启动定位到vue文件夹，首先vue开启8080端口，npm run dev定位到JSONSEVER文件夹，开启json-server3000端口。npm run json:serverCustomers.vue从hello复制内容，更改div的class为customer和default的name为customer设置路由过程

2020-05-21 19:56:30 985

原创前段优化学习

网络优化CDN的缓存与回源机制解析CDN指的是将源网站的资源缓存到分别在不同地理位置的服务器上，这些服务器存储着数据的副本，因此服务器可以根据哪些服务器与用户距离最近来满足数据的获取。CDN提供快速服务，较少受高流量影响。CDN往往被用来存放静态资源。静态资源本身具有访问频率高，承接流量大的特点，因此静态资源加载速度始终是前端性能的一个非常关键的指标。首先CDN服务器域名和业务服务器域名不一致。因为同一域名下的所有请求都会携带Cookies，但若我们只想请求一张图片或一个CSS文

2020-05-20 23:37:20 159

原创 Vue博客制作

动态双向绑定 <select v-model="blog.author"> <option v-for="author in authors"> {{author}} </option> </select> //==================================== data () {

2020-05-20 00:58:35 357

原创 Vue项目实战(博客)

安装脚手架安装node.js安装淘宝镜像npm config set registry https://registry.npm.taobao.org安装脚手架npm install -g @vue/cli使用vue create 项目名上下加空格和回车按n选择hash模式路由选Standard config都选第一个最后选n不保存模板项目结构C.分析Vue脚手架生成的项目结构 node_modules:依赖包目录 public：静态资源目录 src：

2020-05-19 19:17:30 295

原创 Vue的生命周期

生命周期事物从出生到死亡的过程我们用生命周期寻找错误主要阶段挂载：beforeCreate、crated、beforeMount、mounted更新：beforeUpdate、update销毁：beforeDestory、destoryVue实例从创建到销毁的过程，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数常用的钩子函数beforeCreate在实例初始化之后，数据观测和事件配置之前被调用此时data 和 methods

2020-05-19 16:24:38 130

原创 Vue5——事件修饰符（style）和template

事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符修饰符是由点开头的指令后缀来表示的<a v-on:click.stop="doThis"></a><form v-o

2020-05-19 13:07:33 845

原创 Vue学习3(model/computer/watch)

Vue常用特性表单基本操作获取单选框中的值通过v-model  <input type="radio" id="m

2020-05-18 23:46:54 547

原创 git学习

什么是版本管理版本管理是一种记录文件变化的方式，以便将来查阅特定版本的文件内容。Git 是什么Git是一个版本管理控制系统（缩写VCS），它可以在任何时间点，将文档的状态作为更新记录保存起来，也可以在任何时间点，将更新记录恢复回来。Git 基本工作流程git仓库暂存区工作目录用于存放提交记录临时存放被修改文件被Git管理的项目目录Git 的使用Git 使用前配置在使用 git 前，需要告诉 git 你是谁，在向 git 仓库中提交时需要用到。.

2020-05-17 17:03:42 92

原创 Ajax和同源解决方法

模板引擎模板引擎：使用模板引擎的模板语法，可以用将数据和HTML拼接在一起FormData对象的作用将表单对象直接传送到服务端。用FormData对象。用send发送，所以不能用get方法。 var form = document.getElementById('form'); var formData = new FormData(form); formData.get('username'); //不存在就创造属性并赋值,存在就覆盖。

2020-05-14 18:48:09 233

原创 Ajax-基础学习

Ajax传统网站问题网速慢的时候，页面加载时间长，用户只能等待。表单提交后，如果内容不合适，需要重新填写表单所有内容。页面跳转，重新加载页面，造成资源浪费，增加用户等待时间。Ajax是什么可以页面无刷新更新数据，提高用户浏览网站体验。不刷新情况下像服务器请求数据。Ajax应用场景1.页面上加载更多数据2.列表数据无刷新分页。3.表单离开焦点数据验证，如验证邮箱是否已经注册。4.搜索框提示下来列表。Ajax运行环境Ajax技术需要进行在网站环境中才能生效。把代码放

2020-05-14 16:21:01 180

原创 flex学习

移动web开发流式布局1.0 移动端基础1.1浏览器现状PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。总结：兼容移动端主流浏览器，处理Web

2020-05-13 14:50:11 183

原创 JS执行机制、同步异步、location对象

JS是单线程JS一大特点就是单线程的，也就是说，同一个时间只能做一个事。单线程：所有任务只有排队执行。可能造成页面渲染不连续（可能有任务定时器）。同步和异步同步：前一个任务执行完成之后，再去做后面的任务做一件事同时，可以去做其他事情。例题：答案：输出1 2 3 console.log(1); document.onclick = function() { console.log('click'); } setTimeout(function() { conso

2020-05-12 22:14:19 597

原创 JS-BOM基础学习和定时器应用

能够知道浏览器的顶级对象window能够使用window.onload事件能够使用window.onresize事件能够说出两种定时器的区别BOM什么是BOMBOM（Browser Object Model）即浏览器对象模型（就是整个浏览器），它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。window包含doucument。BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。BOM 缺乏标准，JavaScript 语法的标准化组织是 .

2020-05-12 20:47:41 200

原创 JS——键盘事件和输入框案列

能够说出常用的3-5个键盘事件能够知道如何获取当前键盘按下的是哪个键能够知道浏览器的顶级对象window能够使用window.onload事件能够使用window.onresize事件能够说出两种定时器的区别能够使用location对象的href属性完成页面之间的跳转能够使用location对象获取url中的参数部分能够使用history提供的方法实现页面刷新键盘事件 <script> // 常用的键盘事件 //1. keyup 按键.

2020-05-12 19:26:48 791

原创 JS-事件

注册事件注册事件俩种方式传统方式如onclik，具有唯一性，无兼容性问题，一个元素只能注册一个注册事件。方法监听：一个元素可以注册多个元素注册事件。eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（btn）上，当该对象触发指定的事件时，就会执行事件处理函数。 //IE9 btn.addEventListener('click',function(){}) //IE678 btn.attacheEvent

2020-05-12 15:36:33 187

原创 JS——DOM的结点操作

H5自定义属性自定义属性目的目的：是为了保存并且使用数据。有些数据可以把保存到页面中而不用保存到数据库。可以通过getAttribute获取。自定义属性：data-开头。这是一种规范。dataset：存储着以data开头的自定义属性。获取自定义属性：如data-index的dataset[‘index’]、dataset.index。如果有多个短横线：以驼峰命名法获取。如data-set-name和dataset[listname]节点操作为什么节点操作获取元素俩种方式：利用

2020-05-12 13:38:34 222

空空如也

空空如也