wang_liuyong的博客

原创 前端优化方法

浏览器工作原理：1.边下载html边解析2.解析过程中发现script标签，暂停解析加载js 渲染引擎 =》 js引擎3.js执行完毕，继续解析渲染 js引擎 =》 渲染引擎浏览器优化阻塞效应的优化：script标签放在最底部（不指定协议一般为HTTP协议）使用DOMContentLoaded回调函数对脚本的执行进行优化– 使用defer（延迟...

原创 angular7.0使用参考手册

angular 各功能应用demo启动项目进入各demo项目下执行： cnpm i ng serve --open常用指令 *ngfor *ngIf 插值表达式 {{}} 属性绑定 [] 事件绑定 () //数据双向绑定 [(ngModel)]="hero.name"app.module各模块含义组件路由1.路由配置app.rou...

原创 常用输入框验证（使用正则匹配）

使用方法：使用string.match(reg)匹配到不符合规则的值会返回会NULL// 初始化表单数据 this.mainForm = this.fb.group({ id: [null, [Validators.required,this.contentValidators(/^[a-zA-Z0-9_]{1,}$/)]] });/** * 输入字符内...

原创 angular 表单常用验证

html监听验证<nz-form-control> <nz-form-label class="label" nzFor="integral">积分值</nz-form-label> <input name="integral" nz-input placeholder="" formControlName="p...

原创 css深入浅出

44544

原创 前端学习感悟-杂记

2018-7-18 1.div的contenteditable属性可以让块区内容拥有改写能力 2.css布局：目前只支持横向布局和纵向布局持续更新中………….

原创 2023面试题目总结

面试笔记

原创 next.js使用说明

nextjs

原创 Express API 总结

一些概念var app = express() // 主应用var admin = express() //子应用app.use('/admin', admin) // admin当作子应用 挂载点‘/admin’ 就是admin的挂载点

原创 linux创建用户增加权限

上篇文章记录了使用root账户登云服务器以及运行环境的初始化。我们有时候还需要创建一个普通用户。linux 常见命令1.创建用户// 添加用户adduser wly// 设置密码passwd wly 之后会被要求输入密码以及确认密码2.添加权限root账户下执行// 添加所有权限chmod 777 [name]777 对应 root用户 当前用户 其他用户不同组合之和，可以赋予不同的权限组合...

原创 ssh连接服务器

连接云服务器命令：ssh 账户@[ip]登陆root账户ssh [email protected]输入密码后就会进入到服务器的命令行面板（如果忘记密码可以重置）初始化服务器环境（CentOS）1.安装gityum install git2.安装nvmcurl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash如果下载过程中卡住，则需要映射一下githubvim /etc/

原创 [email protected]使用记录

文章目录vue-router模式以及实现原理hash模式history模式abstract模式跳转方式详解vue-router模式以及实现原理hash模式地址栏会带#，通过监听hashchange 实现局部刷新，可由浏览器前进后退控制history模式地址栏不带#，相对hash比较美观，通过监听popstate 实现局部刷新，主动跳转通过pushState实现。浏览器前进后退控制会失效。abstract模式需要ssr时，使用该模式跳转方式详解通过path或者name进行跳转 <r

原创 vue3插件-pinia

文章目录一、pinia是什么？二、使用步骤1.安装并注入2.核心概念与基本使用一、pinia是什么？Pinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案Pinia 支持 Vue2 和 Vue3二、使用步骤1.安装并注入安装# 使用 npmnpm install pinia@next# 使用 yarnyarn add pinia@next注入vueimport { createPinia } from 'pinia';app.use(cr

原创 node服务器-docker

docker 的安装以及配置mysqldocker ps 查看容器的运行状态docker kill [mysql1/id] 关掉容器docker container start [mysql1] 开启逛逛关掉的容器docker rm [mysql1] 删除容器docker run [mysql1]启动新容器进入容器的bashdocker exec -it mysql1 bash进入mysqlmysql -u root -p// 查看所有数据库show databases;//

原创 vue.config.js 完整配置

vue-cli 3.x 及以上const path = require("path");const resolve = dir => path.join(__dirname, dir);//用于生产环境去除多余的cssconst PurgecssPlugin = require("purgecss-webpack-plugin");//全局文件路径const glob = require("glob-all");//压缩代码并去掉consoleconst UglifyJsPlugin

原创 面试问题总结

1.css 浏览器兼容情况/选择器/浏览器差异情况2.scss3.框架vue watch 如何监测数据对象属性的变化vue/react/angular 三大框架的区别4.小程序中遇到的坑以及解决方法5.angular 开发中遇到的问题6.继承的方法...

原创 三大框架的对比

angular：1、在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。vue：1、轻量级框架 2、在性能上，Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。3、在状态管理方面,使用的是vuex 3、vue比angular和react的运行速度快。react：1、React采用特殊的JSX语法。2、React采用特殊的JSX语法，R...

原创 小程序开发遇到的坑

1、背景图片的问题微信要求打包的小程序不超过1M，也许是出于这个原因，微信不允许用本地图片，但可以使用image标签来展示图片，或者将背景图转为base64，也或者用图片网络地址也可以，将图片存到服务器上，但是每次图片有修改都要重新上传，如此也是很麻烦；base64图片编码如果图片大的话编码会很长，但是这种也算方面些；2、图片问题：一般页面背景图选择用png格式的图片，但是在小程序中，一般格式...

原创 typescript中使用type,class,interface定义数据结构的区别

typescript中声明一个类型，我们通常会有3种做法,他们都可以去继承：1.interfaceinterface User { name: string age: number}interface SetUser { (name: string, age: number): void;}interface SetUser extends User { age:...

原创 Proxy

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。var proxy = new Proxy(target, handler);Prox...

原创 angular创建本地库

标题Angular7 Library库的使用创建 Angular 工作区使用 –createApplication这个 --createApplication 选项与 ng new 结合一起使用，设置它为 false 时，它会告诉 ng new 命令不要在工作区内创建初始化的 Angular 应用。为了创建一个不包含初始化应用的 Angular 工作区，我们使用下面方法：ng new m...

原创 TS中的class与interface,extends与implement

参考：class：https://segmentfault.com/a/1190000008606016类与接口： https://segmentfault.com/a/1190000015068063#articleHeader4https://juejin.im/post/5dd1098e51882529f21587db?utm_source=gold_browser_extension...

原创 angular router常用配置

Angular’s Routeconst routes: Routes = [ { // 来源管理 一览 path: 'sourceList', component: SourceListComponent }, { // 推广二维码 一览 path: 'qrcodeList', component: QrcodeListCompo...

原创 IOS微信浏览器键盘挤压页面不回弹解决方法

import { Directive, ElementRef } from '@angular/core';@Directive({ selector: '[appResetPage]'})export class ResetPageDirective { constructor(el: ElementRef) { // 解决键盘挤压页面后不复原的问题，input失去...

原创 实现一键查看网页布局的方法

新建一个书签，将下面代码复制粘贴到书签地址即可。之后在想看布局的网页点击该书签就可以看到效果了。javascript: (function() { var elements = document.body.getElementsByTagName('*'); var items = []; for (var i = 0; i < elements.length; i++) { i...

原创 js深入系列-函数

子程序一个或者多个语句组成的完成特定任务的相对独立的的一段代码块；包括：函数： 有返回值方法： 在对象中过程： 没有返回值数学中函数定义域中每一项元素总会对应一个或者多个值域中的值。-函数式编程编程风格符合数学函数；闭包与letfor(let i =0;i<6;i++){setTimeout(() => { console.log(i)})// ...

转载 Eventloop详解，非科班前端必看！

下面大佬的文章看一下就懂了！参考链接：https://juejin.im/post/5d5b4c2df265da03dd3d73e5?utm_source=gold_browser_extension

原创 npm install error

报错：Unhandled rejection Error: EACCES: permission denied #11921.需要给npm 权限sudo chown -R $USER:$GROUP ~/.npmsudo chown -R $USER:$GROUP ~/.config

原创 angular学习笔记

1.相关指令*ngFor=""*ngIf=""插值表达式 {{}}属性绑定 []事件绑定 ()ngOnInit() { this.route.paramMap.subscribe(params => { this.product = products[+params.get('productId')]; });`@NgModule({ imports: [ ...

原创 axios的request配置

AXIOS request 配置选项 export interface Axios RequestConfig { url?: string method?: string baseURL?: string transformRequest?: Axios Transformer I Axios Transformer[ transformRes...

原创 vue思维导图

原创 js思维导图

原创 web优化措施

1.对于来自同一个域名的资源，比如脚本文件、样式表文件、图片文件等，浏览器一般有限制，同时最多下载6～20个资源，即最多同时打开的 TCP 连接有限制，这是为了防止对服务器造成太大压力。如果是来自不同域名的资源，就没有这个限制。所以，通常把静态文件放在不同的域名之下，以加快下载速度。2.为了解决脚本文件下载阻塞网页渲染的问题，一个方法是对3.解决“阻塞效应”的另一个方法是对读取 DOM ...

原创 python中的pickle模块常用方法

pickle模块# 将列表元组等序列格式转换成二进制格式import pickle # 写入my_list = [1,2,3,4]pick_file = open('pickle_test.plk','wb')pickle.dump(my_list,pick_file)pick_file.close()# 读取pick_file = open('pickle_test...

原创 window CMD常用命令

1.切换盘符D:2.目录相关//进入某个目录cd .\dir\wang//创建mkdir .\demo//删除rd /s /q [盘符:\][路径\]3.文件相关//创建空文件type nul>*.*//创建非空文件echo [fileContent]>*.*//删除文件del *.*4.查看//查看当前文件下面的所有文件dir ...

转载 云服务器 ECS Linux SSH 客户端断开后保持进程继续运行配置方法

https://help.aliyun.com/knowledge_detail/42523.html

原创 parcel+vue项目笔记

准备npm init安装vuenpm i vue安装parcelnpm install -g parcel-bundler 开发者使用的包 -D安装后运行parcel,parcel会自动安装所有依赖vue pacel 配置Parcel在你项目的 package.json 中添加：{// …“alias”: {“vue” : “./node_modules/vue/di...

原创 测试接口的整个流程

1.注册url -d "username=hunger1&amp;password=123456" -X POST "http://localhost:3000/auth/register"2.登录curl -d "username=hunger1&amp;password=123456" "http://localhost:3000/auth/login" -i-i 可以展示响应头，...

原创 curl test

约定接口一般包括以下数据当前接口的路径是什么？ 如 /auth/register当前接口提交数据的类型是什么? 如GET 获取数据POST 提交或者创建PATCH 修改数据，部分修改DELETE 删除数据PUT 修改数据，整体替换原有数据参数类型/格式，比如是 json 格式，还是 application/x-www-form-urlencoded的数据参数字段，及限制条件返回...

原创 node-sass安装注意事项

安装 node-sass 的正确姿势参考添加链https://github.com/lmk123/blog/issues/28安装 node-sass 的时候总是会各种不成功，今天我琢磨了一会儿总算知道要怎么解决了。首先要知道的是，安装 node-sass 时在 node scripts/install 阶段会从 github.com 上下载一个 .node 文件，大部分安装不成功的原因都源...