w19981225的博客

原创 js代码同步执行

【代码】js代码同步执行。

原创 点击tab栏切换滚动到相应位置

tab切换；锚点跳转

原创 监听echarts图表变化

echarts，js，vue

原创 css去除滚动条（谷歌火狐IE）

css去除滚动条

原创 2021-11-03

css固定两行超出显示省略号（需要有高度）text-overflow: ellipsis;overflow: hidden;white-space: break-spaces;word-break: break-all;-webkit-line-clamp: 2;-webkit-box-orient: vertical;display: -webkit-box;

原创 rem转px

原创 vscode清除多余空行 正则表达式

^\s*(?=\r?$)\n

原创 jQuery对伪类元素进行操作

$(’’).appendTo(‘body’);

原创 iconfont图标应用到content伪类中

原创 rem代替px实现页面自适应

;(function(){ /* 以750px的宽度的设计图为标准 动态的设置html 的fontSize 达到缩放的效果 */ var doc = document.documentElement, // 获取到html元素 resize = function(){ var WIDTH = doc.clientWidth, fontSize = WIDTH * 100

原创 常见状态码详细讲解

一些常见的状态码为：200 – 服务器成功返回网页404 – 请求的网页不存在503 – 服务器超时1xx（临时响应）表示临时响应并需要请求者继续执行操作的状态码。100（继续） 请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。101（切换协议） 请求者已要求服务器切换协议，服务器已确认并准备切换。2xx （成功）表示成功处理了请求的状态码。200（成功） 服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。如果是对您的 robots.txt

原创 MUI开发注意事项Uncaught ReferenceError: plus is not defined

常见错误Uncaught ReferenceError: plus is not defined在app开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，否则可能会报“plus is not defined”的错误；mui为简化开发，将plusReady事件封装成了mui.plusReady()方法，凡涉及到HTML5+的api，建议都写在mui.plusReady方法中；...

原创 HTML5 新特性和新增标签

HTML5新增的结构标签：1、header元素表示bai页面中一个内容区du块或真个zhi页面的标题。dao2、hgroup元素表示对真个页面或页面中的一个内容区块的标题进行组合。3、article元素表示页面中一块与上下文不相关的独立内容。比如一篇文章。4、aside元素表示article元素内容之外的、与article元素内容相关的辅助信息。5、footer元素表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。HTML5新规则：

原创 常见的行内元素，块元素和空元素

原创 React路由

React路由安装如果想要使用react路由，则需要安装react-router-dom在该模块中，我们会经常使用BrowserRouter，HashRouter，Route，Switch，Redirect，Link，NavLink使用import React, { Component } from 'react'import { HashRoter as Router, Route } from 'react-router-dom'class Router extends Componen

原创 React基础

React基础React脚手架 - create-react-app如果我们想要快速生成一个React项目，可以全局安装create-react-appnpm i -g create-react-app使用脚手架创建项目我们可以使用create-react-app创建项目create-react-app 项目名项目结构create-react-app创建出来的结构只有基本结构，我们可以自己根据需求定义对应的结构- src - index.js 入口文件 - App.js 最大

原创 前后端分离项目跨域问题解决

前后端分离项目跨域问题解决开发环境生产环境后台主导CORSCORS前端主导proxy代理nginx代理vue.config.jsmodule.exports = { devServer: { proxy: "后台接口地址" }}配置完proxy之后，我们请求接口的地址需要是当前前端服务的地址http://localhost:3000 -> http://localhost:8080既然要请求自己的地址，那么就没有必要写localh

原创 vuex modules

modules如果不拆分对应模块，那么未来store中的相关内容会变得臃肿。所以我们可以把不同的组件的数据拆分成不同的模块。命名空间建议给所有的模块都添加命名空间namespaced: trueconst store = new Vuex.Store({ state: {}, modules: { moduleName: { namespaced: true } }})添加命名空间后，我们的mutation和action都会变成 模块名/对应名字se

原创 Vuex初级

Vuexvuex在使用时需要通过new Vuex.Store获取到对应的对象，然后进行相关的配置state用来保存组件中的数据，如果想要修改这里的数据，需要通过mutation进行修改const store = new Vuex.Store({ state: { msg: "Hello Vuex" }})获取到对应state中的数据在想要使用的组件中，我们可以直接通过this.$store.state.msg获取到对应的msg数据<template> &lt

原创 vue项目部署

项目部署使用vue开发的项目，最终还是HTML CSS JavaScript构建项目npm run build使用该命令可以构建我们的项目，会生成一个dist文件夹，文件夹中就是构建完成的项目部署项目nginx进入到nginx的conf/nginx.conf，修改该文件的配置，添加新的虚拟主机。server { listen 8000; # 监听端口 server_name localhost; # host地址 location / { root

原创 导航守卫

导航守卫全局前置守卫路由跳转前被拦截，通过next可以跳转到其他的位置路由拦截router.beforeEach((to, from, next) => { // 判断to的路由信息 if (to.matched.some(route => route.meta.auth)) { // 表示路由需要被验证 if (验证条件) { next() } else { // 跳转到验证页面 next("/login?url="

原创 vue 路由配置技巧

路由配置技巧常见的切换方式url改变页面样式不变这个path一定使用的是同一个组件，渲染了不同的数据。一般会使用query参数或者动态路由（params）去传递数据。这里的路由只需要设置一个url改变页面样式改变每个页面都需要单独配置路由url改变，页面中某一部分改变可以使用嵌套路由，在父组件中留下公共组件少数派路由分析/matrix Matrix社区 没有公共部分，是独立的路由/special/nomo 相机陈列下面路由都包含导航部分/series 付费订阅/topics 专题精

原创 VueRouter基础

VueRouter路由组件在创建过程中，路由组件和普通组件是一模一样的，使用方法不一样。普通组件是放置在其他组件中的路由组件放在路由配置中路由配置所有的路由配置放在一起应该是个数组，单个的路由配置应该是个对象，对象中有很多固定的属性path表示路由路径，配置后可以去访问对应的路由，并且将对应的组件显示在 router-view 中component表示路由组件的配置，和path一一对应，当匹配到对应的path时，component会被渲染到router-view中name我们可以

原创 vue面试题

1.vue优点？答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；双向数据绑定：保留了angular的特点，在数据操作方面更为简单；组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；虚拟DOM：dom操作是非常耗费性能的， 不再使用原生的dom操作节点，极大解放d

原创 VueRouter的使用

VueRouter的使用路由的使用时一个模式化的过程script中引入的js1 引入js<script src="vue-router.js">2 创建routes配置数组const routes = [ { path: '/', name: 'index', component: 组件 }]3 把routes放在new VueRouter中const router = new VueRouter({ routes})4 将rout

原创 nextTick，ref

nextTick如果我们想要在Vue中使用DOM对象，可以使用该方法this.$nextTick(() => { // 这个函数会等待DOM执行完成后执行})this.$nextTick().then(() => { // 这个函数会等待DOM执行完成后执行})ref如果我们想要获取到DOM对象或者组件对象，可以给对应的标签添加ref属性并且起一个自定义名字<child ref="child"></child><!-- this.$r

原创 生命周期

生命周期组件声明周期的几个过程创建挂载更新销毁创建beforeCreate (创建前)初始化事件和生命周期后created (创建后)相关数据注入时，这个时候可以获取到data中的值，但是无法获取DOM挂载beforeMount (挂在前)当data数据已经和vue模板渲染出HTML时，页面上还没有内容mounted (挂在后)将编译好的HTML替换到页面上后，这个时候可以获取到真实的DOM更新beforeUpdate (更新前)当data中的值发生变化前，

原创 插槽

插槽基本的插槽解决了在组件标签中写内容无法被渲染的问题（如果我们想要像普通标签一样在标签中写内容会渲染出来）基本插槽的写法child.vue<template> <div> <slot></slot> </div></template>我们要给组件的使用者一个权限，可以自定义内容的权限，可以使用slot，slot放在哪，未来组件标签中的内容就会被渲染到哪parent.vue<template&gt

原创 组件通信

组件通信组件之间的关系父子关系非父子关系组件通信-父子通信父子通信，利用在父组件模板中，给子组件添加属性的方法进行通信，一旦添加了属性，那么在子组件中可以通过props进行接收<template> <div> {{msg}} <Child :msg="msg"></Child> </div></template><script> export default { da

原创 ajax，axios和fetch

1.jQuery ajax$.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {}});传统 Ajax 指的是 XMLHttpRequest（XHR）， 最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。JQue

原创 vue基础及指令

Vue基础引入vue.js<script src="vue.js路径"></script><script> // 这里写相关JS的代码</script>实例化vue对象const app = new Vue({ // 这里写相关的配置})配置el挂载点，讲对应符合选择器要求的挂载点，作为vue的模板（只有变成模板才能去使用模板语法）new Vue({ el: "#app"})data如果我们把数据放在data中，

原创 git 基础 命令

git 命令git init 作用是初始化一个能让git进行管理的仓库 使用 attrib -h .git可以释放出隐藏文件.git创建出自己的项目文件 打开项目文件夹 然后在文件夹中打开git命令窗git add ‘文件名称’ 提交单个文件 git add . 提交所有修改的文件git status 可以查看当前git所处的装太 比如放在git add 后执行git status命令可以查看当前都添加了那些修改的内容git commit -m “本次更改的描述内容” 因为描述内容

原创 防抖和节流

防抖(debounce)函数防抖（debounce）:就是让某个函数在上一次执行之后，满足等待某个时间内不再触发此函数后再执行，而在这个等待时间内再次触发函数，等待时间可以重新计算，直到该函数在一定间隔内没有被调用时，才开始执行被调用方法（所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。）应用场景window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次节流(throttle)函

原创 富文本编辑器

https://blog.csdn.net/yaoguaia什么是富文本编辑器？富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。它是一种解决可一般的用户不同html等网页标记但是需要在网页上设置字体的颜色、大小、样式等信息问题一个文本编辑器概念对比: 文本文档 =======》world常用的富文本编辑器：https://blog.csdn.net/davidhzq/article/details/100842866wnagE

原创 javascript的箭头函数

javascript的箭头函数箭头函数的定义箭头函数（Arrow Function）：ES6标准中新增的函数，叫箭头函数的原因是因为它使用了 ’ => ’ 来进行标识箭头函数的基础语法通常定义函数的方法有两种使用function关键字声明函数使用函数表达式声明函数箭头函数的定义方法具名的箭头函数var 函数名 = (params1,params2,...) => { //函数体}匿名的箭头函数(params1,params2,...) =

原创 闭包的作用和优缺点

闭包的作用和优缺点例子 function fun() { var num = 0; return function() { num++ // console.log(num) return num } } var result = fun() var num1 = result() // 1 var num2 = result() // 2

原创 webscoket的使用

webscoket的使用可以使用ws完成实时通讯前端要写的内容 // WebScoket参数是要连接的服务的地址 使用ws协议 例如 ws://localhost:3000 var connect = new WebScoket('ws://localhost:3000') connect.onopen = function() { console.log('开启ws连接 - 连接成功') } connect.onmessage = func

原创 jQuery实现ajax请求

ajax请求总结// 首先要在文件中引入jquery文件 $.ajax( { url: "", // 接口地址 是根据自己实际的接口地址写 type: "",// 请求方式 默认值是get 值还可以是post data: {}, // 请求时传递给后台的参数 success: function(res) { // 请求成功的回调函数 },

原创 jQuery基础知识

jQuery对JS的DOM操作进行封装，降低了DOM操作的难度如何使用在页面中引入jquery即可<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>$(doucment).ready()表示在DOM加载完成时执行相关代码，使用的事件是DOMContentLoaded$(doucment).ready(function () {})上面的写法可以直接

原创 cookie web存储

总结cookie的使用（node）第一步 安装cookie-parser yarn add cookie-parser --save / npm install cookie-parser --save使用 // 引入cookie-parser var express = require('express'); var app = express(); var cookieParser = require('cookie-parser'); app.u