- 博客(40)
- 收藏
- 关注
RSS订阅原创 Tomcat 部署 vue项目 mode模式改为history 刷新404
Tomcat 部署 vue项目 mode模式改为history 刷新404
2023-01-06 15:17:50
602
原创 elementui生产环境图标加载时偶而乱码
elementui 打包后图标加载偶尔会乱码疑问：百度了，说是dart-sass的问题，解决方案：去掉dart-sass 改回node-sass最近在 使用element UI 写项目， 项目在生产环境运行了一段时间后，页面刷新偶尔会出现 （搜索，箭头。。。）各种图标乱码情况发生一下情况：相同问题关注中，刚试了下直接下载最新框架然后编译，也是存在编译后图标的content乱码问题。自己项目有试过卸载dart-sass然后安装node-sass，这样编译后不会乱码，但是dart-sass才
2021-06-24 18:00:52
1497
2
原创 剖析vue核心
说到vue核心可以用官网的一句话来概括：Vue.js 是一套构建用户界面的渐进式框架。可以先理解一下前端发展的历程：DOM流 应运而生在最初前端开发中，为了完成某个任务，我们首先利用JS从HTML文件中获取DOM元素，随后添加事件，最后进行一系列的JS编程操作。DOM流的开发方式看起来似乎很简单实用，但是随着业务需求不断变动，你的麻烦就来了，整个代码会变得越来越混乱，无法维护。假设现在有一个这样的需求，有一张图片，在被点击时，可以记录下被点击的次数。 这看起来很简单吧， 按照上面提到到开发方
2021-05-21 02:32:47
390
原创 Vue初级
Vue 初级大纲知识点：Vue指令Vue 基本属性Vue组件通信##SPA和MPA区别及优缺点SPA（单页面应用）SPA（ Single-page Application ）只有一个html页面，所有跳转方式都是通过组件切换完成的。优点：1.用户体验好，流畅。2.因为是单页面，所以对服务器的压力较小。3.可以在页面切换的时候增加一些炫酷的动画效果。4.代码的可复用，且由于是组件化开发，有利于后期的维护。缺点：1.页面复杂度变大，开发难度较大。2.不利于SEO3.首次加载的
2021-03-22 14:24:19
137
原创 React基础大纲
React大纲课程教学目标React基本语法React组件通信StateReduxReact-ReduxReact基础脚手架安装npm isntall -g create-react-app查看版本create-react-app --version创建项目create-react-app my-app进入项目目录cd my-app安装必要依赖npm install运行npm start开发者工具React-developer-tools使用和安装
2021-03-22 14:23:03
221
原创 命名规范
前端命名规范文件命名规则文件名称命名规则统一使用小写英文字母、数字、下划线组合命名，不能包含汉字、空格。命名遵循原则：清晰准确，见名知意便于查找例如首页index.htmindex.html子页面统一用翻译的英文命名如果文件名过长，要提前约定一份缩写的规范，如pro—product例如：首页—index产品列表—prolist产品详细页面—prodetail新闻列表—newslist新闻详细页面—newsdetail发展历史—history关于我们—a
2021-03-22 14:22:18
191
原创 Ajax和axios
Ajax 和 Axiosajax什么是ajaxAsync javascript and XMLAJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。ajax优势改善的用户体验- AJAX提供的更丰富的用户体验是其主要优点。AJAX允许网页持续更新
2021-03-22 14:20:50
154
原创 ES5复习
ES 5 复习复习进度JavaScript组成部分JavaScript 数据类型JavaScript 数组JavaScript字符串JavaScript的组成部分ECMAScript ：规范，定义了JS语言一系列语言规范DOM：HTML文档结构，DOM操作BOM：浏览器对象，提供与浏览器相关的一系列API，便于我们操作与浏览器相关的功能BOM的组成：window、Location、Screen、History，Navigator、DocumentHistory：window下的
2021-03-22 14:19:24
139
原创 Vue轻量级富文本编辑器Vue-Quill-Editor
今天介绍一个简单，快捷，体积小的一款富文本编辑器Vue-Quill-EditorVue-Quill-Editor API安装步骤下载Vue-Quill-Editornpm install vue-quill-editor --save下载quill（Vue-Quill-Editor需要依赖）npm install quill --save具体实现代码<template> <div class="edit_container">
2021-03-20 09:49:56
279
原创 get和post的区别
POST和GET是HTTP协议中最常用的两种传参方式，这里小小总结一下两者的区别GET请求，请求的数据会附加在URL之后，以?分割URL和传输数据，多个参数用&连接。URL的编码格式采用的是ASCII编码，而不是uniclde，即是说所有的非ASCII字符都要编码之后再传输POST请求：POST请求会把请求的数据放置在HTTP请求包的包体中。上面的item=band就是实际的传输数据。因此，GET请求的数据会暴露在地址栏中，而POST请求则不会传输数据的大小在HTTP规范中，没有对
2021-03-19 15:28:26
78
原创 Git小乌龟的安装及使用
先下载git，按照相应的系统，https://git-scm.com/downloads，然后，一直next即可完成安装安装git小乌龟，https://tortoisegit.org/download/，同样的，一直next即可完成安装，但是，需要注意的是必须先安装git，在安装git小乌龟安装语言包，同样是https://tortoisegit.org/download/，然后一直next即可，要先装完小乌龟在安装语言包。右键→tortogit→setting，把language..
2021-03-19 13:53:33
263
原创 移动端项目配置
世上最全移动端项目配置vue多环境变量配置rem 适配方案Vuex 状态管理Axios 封装及接口管理VantUI组件按需加载vue多环境变量配置package.json 里的 scripts 配置 不同环境选下的不同命令，"scripts": { "serve": "vue-cli-service serve --open", "stage": "vue-cli-service build --mode staging", "build": "vue-cli-service build"
2021-03-19 11:02:25
219
原创 移动端Vant-ui引入 方式
先下载vant 插件npm i vant -S全局的引入在 main.js 中引入//引入import Vant from 'vant';import 'vant/lib/index.css';Vue.use(Vant);按需引入一定要安装按需加载的配置~~安装babel-plugin-importnpm i babel-plugin-import -D在.babelrc中配置plugins（插件）"plugins": [ "transform-vue-jsx",
2021-03-19 11:01:20
482
原创 http常见的状态码
http状态码分类：100-199 提示信息 – 表示请求正在处理200-299 成功 – 表示请求正常处理完毕300-399 重定向 – 要完成请求必须进行更进一步的处理400-499 客户端错误 – 请求有语法错误或请求无法实现500-599 服务器端错误 – 服务器处理请求出错例如：200：请求成功，浏览器会把响应体内容（通常是html）显示在浏览器中；404：(客户端问题)请求的资源没有找到 400: 语义有误，当前请求无法被服务器理解。401: 当前请求需要用户验证 403: 服务
2021-03-11 10:07:25
35
原创 闭包
1. 如何产生闭包2. 闭包的使用场景封装对象的私有属性和方法例如：jQuery就使用了这么一个特性// 闭包隐藏数据，只提供 APIfunction createCache() { const num=100 const data = {} // 闭包中的数据，被隐藏，不被外界访问 return { num:num, set: function (key, val) { data[key] = val
2021-03-11 08:26:33
53
原创 小程序 支付流程
流程图实现基本思路要知道每个人openID都是不同的，它是用户身份识别的id，也就是说，为了知道谁在支付，我们需要先获取当前用户的openid，通过openID来区分不同的用户，所以首先使用小程序调用登陆接口通过wx.login()获取临时的登录权限code，在使用wx.request并把它传到开发者服务器( 【url：商户服务器登陆url ，code: code，method: ‘ 方法 ’ ，建议使用post安全，以及获取成功的函数和获取失败的函数 】)用来获取用户唯一标识的openid 和 会话
2021-03-10 19:07:33
162
原创 小程序 授权登录流程
对于小程序未授权的用户，官方取消wx.getUserInfo方法的直接调用，首次授权必须主动触发自定义按钮，给按钮设置open-type=“getUserInfo”，通过bindgetuserinfo触发自定义事件，获取到用户本身的信息，如果获取到，那么在进入小程序时我们要进行注册，注册时我们要传递三个参数（wx.login来获取code，wx.getuserinfo来获取iv和encryptedData ， iv 加密后的值， code 微信登录接口返回的 code 参数 ，encryptedData .
2021-03-10 18:58:55
397
原创 简述：link与@import区别
区别：link属于html标签。@import在css中使用表示导入外部样式表；页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;import只在IE5以上才能识别，而link是HTML标签，无兼容问题;link方式的样式的权重 高于@import的权重；link 支持使用javascript改变样式 （document.styleSheets），后者不可使用场景：<head> <!-- link是标签，引入外部样式表 -
2021-03-07 19:57:26
2668
2
原创 简述 ：src与href的区别
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，一般用于超链接。src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。...
2021-03-07 19:47:44
48
1
原创 详解：HTML5和css3新特性
css3新特性选择器常规选择器：:last-child /* 选择元素最后一个孩子 */:first-child /* 选择元素第一个孩子 */:nth-child(1) /* 按照第几个孩子给它设置样式 */:nth-child(even) /* 按照偶数 */:nth-child(odd) /* 按照奇数 */:disabled /* 选择每个禁用的dom元素 */:checked /* 选择每个被选中的dom元素 */:not(selector) /* 选择非 selecto
2021-03-07 19:32:49
119
原创 vue3.0实现axios封装
vue3.0 axios封装和2.0的大致相似在src目录下创建文件config.jsexport const METHOD = { GET: "get", POST: "post", PUT: "put", DELETE:"delete"};export const PATH = { getJson: "/mock/index.json", detail: "/mock/detail.json",};core.jsimport axios from "a
2021-03-03 10:14:13
2803
2
原创 vue3.0转场动画实现
废话不多说，直接上代码！！！！直接复制就能用<template><div id="app"> <router-view v-slot="{Component}"> <keep-alive> <transition :name="animation"> <component :is="Component"/> </t
2021-03-03 07:48:53
972
2
原创 浅谈深拷贝和浅拷贝
深拷贝浅拷贝深拷贝和浅拷贝的区别浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”为什么要使用深拷贝？我们希望在改变新的数组（对象）的时候，不改变原数组（对象）内存模型JS内存空间分为栈(stack)、堆(heap)、池(一般也会归类为栈中)。 其中栈存放变量，堆存放复杂对象，池存放常量。基本数据类型与栈内存JS中的基础数据类型，这些值都有
2021-03-02 16:43:57
976
原创 了解正则表达式
什么是正则表达式正则表达式(regular expression)是一个描述字符模式的对象。为什么要使用正则表达式正则表达式能够进行强大的“模式匹配”和“文本检索与替换”功能。前端往往有大量的表单数据校验的工作，采用正则表达式会使得数据校验的工作量大大减轻创建正则表达式RegExp构造函数声明第一个参数就是我们的模式“字符串”var reg= new RegExp('katsuki')//使用特殊字符，\转义var reg= new RegExp('\\d\\w+'); \d\w+第二
2021-01-21 16:55:22
75
1
原创 js面试题（查询字符串中出现次数最多的字母和次数）
1. 统计一个字符串中某个字符出现的次数？ function sum(str, a) { let b = str.indexOf(a); var num = 0; while (b !== -1) { console.log(b); num++; b = str.indexOf(a, b + 1) } return num; }2. 统计一个字符串中，出现次数最多的字符，出现了多少次？方法一： str = 'asda
2021-01-21 16:28:27
3287
原创 js异步之宏任务（marcroTask）和微任务（microTask）
js异步之宏任务（marcroTask）和微任务（microTask）宏任务包括：setTimeout setInterval Ajax DOM事件微任务：Promise async/await微任务比宏任务的执行时间要早JavaScript是单线程的。所以有了同步异步的概念，想必不用说了，异步如常见的setTimeout、Promise。这两个东西却有本质上的区别。setTimeout是宏任务，Promise是微任务。同为宏任务的有setInterval等，同为微任务的有Node的proc
2021-01-20 19:09:33
87
原创 css布局中的BFC问题
1. 面试题—双边距（边距重叠）什么是边距重叠？什么情况下会发生边距重叠？如何解决边距重叠？边距重叠： 两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。有两种边距重叠的情况：父子关系的边距重叠父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距给父元素添加 overflow：hidden这样父元素就变为 BFC，不会随子元素产生外边距同级兄弟关系的重叠：同级元素在垂直
2021-01-19 14:59:07
100
原创 前端常见浏览器兼容性问题解决方案
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、css兼容？1. 不同浏览器的标签默认的margin和padding不同2. css3新属性，加浏览器前缀兼容早期浏览器3. 块属性标签float后，又有横行的margin情况下，IE 浏览器margin加倍的问题4. 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度5. 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug6. I
2021-01-18 18:43:56
93
原创 vue-router实现单页面路由原理
我们都知道，单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面;vue-rouetr在实现单页面前端路由时，提供了两种方式：Hash模式和History模式；根据mode参数来决定采用哪一种方式。那为什么这两种方式能够实现试图更新不跳转，其原因在于：1、Hash模式：hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 #是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中也不会不包括#；同时每一次改变#后的
2021-01-15 19:31:10
561
原创 Vuex 总结
文章目录什么是vuexvuex的组成结构示意图vuex 的核心概念五大核心什么是vuexvuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。vuex的组成结构示意图vuex 的核心概念storevuex 中最关键的是store对象，这是vuex的核心。可以说，vuex这个插件其实就是一个store对象，每个vue应用仅且仅有一个store对象创建storeconst store = new Vuex
2021-01-15 19:09:44
57
2
原创 vue项目最强优化 webpack
文章目录打包优化的目的一、性能优化的主要方向二、打包优化1.去除.map文件2.开启CDN加速3.代码压缩4.图片压缩5.公共代码抽离，写在configureWebpack模块中总结打包优化的目的1、项目启动速度，和性能2、必要的清理数据3、减少打包后的体积第一点是核心，第二点呢其实主要是清理console提示：以下是本篇文章正文内容，下面案例可供参考一、性能优化的主要方向1、去重.map文件2、开启CDN加速3、代码压缩4、图片压缩5、公共代码抽离，写在configureWe
2021-01-15 19:04:32
342
原创 节流与防抖函数 在Vue中的应用
<template> <div> <!-- 防抖案例 --> <input type="text" @input="search" v-model="val" /> </div></template><script>import { debounce } from "../../untils/untilss.js";export default { data() { return
2021-01-14 17:22:01
115
原创 js初级基础
Js初级基础typeof能判断哪些类型typeof的语法typeof是一个运算符，有2种使用方式：typeof(表达式)和typeof 变量名，第一种是对表达式做运算，第二种是对变量做运算。typeof的返回值typeof运算符的返回类型为字符串，值包括如下几种： \1. ‘undefined’ --未定义的变量或值 \2. ‘boolean’ --布尔类型的变量或值 \3.
2020-12-27 20:23:17
128
原创 promise 详解
proimse（首字母小写）对象指的是“Promise实例对象”Promise首字母大写且单数形式，表示“Promise构造函数”Promises首字母大写且复数形式，用于指代“Promises规范”什么是Promise？Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，promise 是一个对象，从它可以获取异步操作的的最终状态（成功或失败）。Promise是一个构造函数，对外提供统一的 API，自己身上有all、reject、r.
2020-12-17 21:57:59
149
原创 关于解构赋值和es6继承
1.ES6中class的介绍通过class关键字，可以定义类。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。ES6中Class的继承实例：注意项：1.在类中声明方法的时候，千万不要给该方法加上function关键字2.方法之间不要用逗号分隔，否则会报错由上面代码可以看出类实质上就是一个函数。类自身指向的就是构造函数 所以可以认为ES6中的类其实就是构造函数的另外一种写法！c
2020-12-17 07:37:29
84
原创 创建vue项目流程
创建vue项目流程1.使用构建工具vue-cli创建项目脚手架（1）安装确认已安装了node.js，可在cmd中输入( node -v和npm -v），如显示出版号，说明安装成功。安装地址：https://nodejs.org/en/download/配置镜像：npm install -g cnpm --registry=http://registry.npm.taobao.org2.创建Vue项目（1）安装vue-cli脚手架构建工具，输入命令 npm install -g vue-cli，
2020-12-15 17:03:06
64
原创 git相关
什么是git? 就是一个版本管理工具，记录文件变化，可以版本回滚，，它可以在任何时间点，将文档的状态作为更新记录保存起来，也可以在任何时间点，将更新记录恢复回来。可以用来多人团队开发项目1.提交步骤git init 初始化git仓库git status 查看文件状态git add . 添加到缓存区git commit -m 提交信息git log 查看提交的记录2. 撤销用暂存区的文件覆盖工作区的文件 : git checkout 文件名删除暂存区文件 git rm
2020-12-14 22:34:21
62
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人