- 博客(60)
- 收藏
- 关注
RSS订阅
原创 vue项目中，使用prettier格式化代码配置
在vue项目根目录下新建一个文件.prettierrc在文件中输入如下代码，并保存{ "semi": false, "singleQuote": true, "htmlWhitespaceSensitivity": "ignore"}在.eslintrs.js中的rules对象下，新增如下代码'space-before-function-paren': 0...
2020-05-19 12:55:13
1859
原创 Vue3新特性
Ref语法ref是一个函数，接受一个参数(一般传入原始类型)，返回一个响应式对象<template> <div id="nav"> <p>{{count}}</p> <button @click="increase">click</button> </div> <router-view /></template><script lang="ts">
2020-11-30 22:36:45
298
原创 Vue项目，从url中获取参数
加入url为https://www.aaa.com/aaa?code=xxx安装qs模块npm i qshash模式import Qs from 'qs'const query = Qs.parse(location.hash.substring(3))hostory模式import Qs from 'qs'const query = Qs.parse(location.search.substring(1))
2020-08-22 17:13:42
1380
原创 vue中修改数组或者对象后，无法触发双向绑定
修改data中的数组，数组发生改变，页面未发生改变可通过$set方法来设置数组的值，该方法有三个参数，第一个是要被设置值的目标对象，第二个是设置值在数组中的索引，第三个是要设置的值<template> <div class="home"> <ul> <li v-for="(item, index) in demoArr" :key="index"> {{item}} </li
2020-08-22 08:59:25
2059
1
原创 通用测试工具jest
该demo再react环境下运行// 测试运算test('test common matcher', () => { expect(2 + 2).toBe(4) expect(2 + 2).not.toBe(5)})// true or falsetest('test to be true or false', () => { expect(1).toBeTruthy() expect(0).toBeFalsy()})// numbertest('test n.
2020-08-11 21:31:59
166
原创 Centos7中使用yum安装最新版node.js
获取最新版的bashcurl --silent --location https://rpm.nodesource.com/setup_14.x | bash -执行安装yum install nodejs
2020-08-07 15:17:25
744
原创 chrome扩展中，content-script与background.js之间的通信
通信的几种方式popup和background通信- background----> popup- popup--->backgroundbackground给popup发消息// background.js中function toPopup () { alert('to popup')}// popup.js中const bg = chrome.extension.getBackgroundPage()document.getElementById('btn').o
2020-07-08 13:27:03
10251
原创 TS初体验
安装与运行npm install -g typescripttsc hello.tsTS基本的几种数据类型/** * 数据类型 */let idDone: boolean = falselet age: number = 20let binaryNumber: number = 0b1111let firstName: string = 'valzt'let message: string = `Hello, ${firstName}, age is ${age}`le
2020-06-30 23:02:07
13546
原创 Express中第三方模块
密码加密使用bcryptjs对用户密码进行加密加密之后的密码，无法被逆向破解同一铭文密码多次加密，得到的加密结果各不相同，保证了安全性安装npm install bcryptjs使用const bcrypt = require('bcryptjs')// 再注册用户的处理函数中，确认用户名可用后，调用bcrypt.hashSync(明文密码，随机盐长度)方法，对用户的密码进行加密处理// 对用户的密码，进行bcryptjs加密，返回值是加密之后的字符串userinfo.passw
2020-06-08 20:52:52
1505
2
原创 Express中的身份认证
不同开发模式下的身份认证服务端渲染和前后端分离这两种开发模式，有着不同的身份认证方案：服务端渲染推荐使用Session认证机制前后端分离推荐使用JWT认证机制HTTP协议的无状态性了解HTTP协议的无状态性是进一步学习Session认证机制的必要前提HTTP协议的无状态性，指的是客户端每次的HTTP请求都是独立的，连续多个请求之间没有直接的关系，服务器不会主动保留每次HTTP请求的状态如何突破HTTP无状态的限制通过cookie来认证身份什么是Cookiecookie是存储
2020-06-02 23:38:43
817
原创 Web开发模式
Web开发模式基于服务端渲染的传统Web开发模式基于前后端分离的新型Web开发模式服务端渲染的Web开发模式服务端渲染的概念：服务器发送给客户端的HTML页面，是在服务器通过字符串的拼接，动态生成的。因此，客户端不需要使用Ajax这样的技术额外请求页面的数据app.get('/index', (req, res)=>{ // 要渲染的数据 const user = { username: 'lzt', age:18 } const html = `<h1>姓名：${us
2020-06-02 14:44:52
311
原创 Express知识总结
创建服务器// 引入expressconst express = require('express')// 创建服务器const app = express()// 监听80端口app.listen(80, ()=>{ console.log('服务器启动成功')})GET请求// 引入expressconst express = require('express')// 创建服务器const app = express()app.get('/get', (req,
2020-06-02 11:04:33
551
原创 Vue中父子组件生命周期顺序
加载渲染过程父beforeCreate()->created()->beforeMounted()->子beforeCreate()->created()->beforeMounted()->mounted()->父mounted()更新过程父beforeUpdate()->子beforeUpdate()->updated()->父updated()销毁过程父beforeDestroy()->子beforeDestro
2020-05-29 10:34:06
153
原创 vscode中，vue代码格式化配置
安装 eslint 和 vetur 插件在setting.json中输入如下代码// 添加进你的vscode的 setting.json"eslint.autoFixOnSave": true,"eslint.validate": [ "javascript",{ "language": "vue", "autoFix": true },"html", "vue"],...
2020-05-27 23:14:05
266
原创 Vue中配置跨域
在vue.config.js中写入如下代码module.exports = { devServer: { proxy: { '/api': { target: 'http://v.juhe.cn/toutiao/', ws: true, changeOrigin: true, pathRewrite: { '^/api': '' } } } }}tar
2020-05-26 21:16:59
195
原创 微信小程序基础
小程序目录结构├── pages ······································ 【目录】存放所有的小程序页面│ │── index ···································· 【目录】index 页面│ │ ├── index.wxml ······························· 【文件】 index 页面的结构│ │ ├── index.js ···························
2020-05-24 07:19:52
931
原创 Vuex
Vuex概述Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享使用Vuex管理数据的好处：能够在vuex中集中管理共享的数据，便于开发和后期进行维护能够高效的实现组件之间的数据共享，提高开发效率存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新Vuex中的核心特性StateState提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储例如，打开项目中的store.js文件，在State对象中可以添加
2020-05-18 09:58:20
129
原创 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 on savebab.
2020-05-18 09:46:14
1063
原创 Webpack
ES6模块化ES6模块化规范中定义：每一个js文件都是独立的模块导入模块成员使用import关键字暴露模块成员使用export关键字推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。ES6模块化是浏览器端和服务器端通用的规范.nodejs中安装babel安装babelnpm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/nodenpm insta
2020-05-18 09:40:57
129
原创 VueRouter
路由路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。路由分为前端路由和后端路由1).后端路由是由服务器端进行实现，并完成资源的分发2).前端路由是依靠hash值(锚链接)的变化进行实现前端路由实现tab栏切换前端路由是基于hash值的变化进行实现的（比如点击页面中的菜单或者按钮改变URL的hash值，根据hash值的变化来控制组件的切换）核心实现依靠一
2020-05-18 08:31:45
147
原创 Vue_promise
Promise主要用于解决深层嵌套的问题promise 提供了简洁的API 使得异步操作更加容易<script type="text/javascript"> /* 1. Promise基本使用 我们使用new来构建一个Promise Promise的构造函数接收一个参数，是函数，并且传入两个参数： resolve，reject， 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数 */ var p = new Pro
2020-05-18 08:05:40
133
原创 Vue组件
全局注册Vue.component(‘组件名称’, { }) 第1个参数是标签名称，第2个参数是一个选项对象全局组件注册后，任何vue实例都可以用<div id="example"> <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用 --> <my-component></my-component></div><script> // 注册组件 // 1、 my-co
2020-05-18 07:46:32
95
原创 Vue基础
指令v-cloak作用：防止页面加载出现闪烁的问题<style type="text/css"> /* 1、通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏 */ [v-cloak]{ /* 元素隐藏 */ display: none; } </style><body> <div id="app"> <!-- 2、 让带有插值 语法的 添加 v-cloak 属
2020-05-10 21:13:12
186
原创 Vue中兄弟组件的传值
关于兄弟组件之间的传值，我这里是通过vue-bus实现的安装vue-busnpm install vue-bus在入口文件（main.js）进行全局注册import VueBus from 'vue-bus'Vue.use(VueBus)传递数据定义一个触发事件（allLink），传递参数“/link”allLink () { this.$bus.emit('link'...
2020-05-06 11:14:39
260
原创 Ajax
Ajax实现原理// 创建Ajax对象var xhr = new XMLHttpRequest()// 告诉Ajax请求地址以及请求方式xhr.open('get', 'http://www.example.com')// 发送请求xhr.send()// 获取服务端给与客户端的响应数据xhr.onload = function(){ console.log(xhr.respon...
2020-05-05 17:09:24
179
原创 MongoDB+Express
数据库概念一个数据库软件中可以包含多个数据仓库，在每个数据仓库中，可以包含多个数据集合，每个数据集合中可以包含多条文档（具体的数据）术语解释说明database数据库，mongoDB数据库软件中可以建立多个数据库collection集合，一组数据的集合，可以理解为JavaScript中的数组document文档，一条数据的数据，可以理解为JavaSc...
2020-04-28 16:35:32
475
原创 Node+Gulp
模块化node.js规定一个JavaScript文件就是一个模块，模块内部定义的变量和函数默认i情况下在外部无法得到模块内部可以使用exports对象进行成员导出，使用require方法导入其他模块模块成员的导入模块成员的导出模块导出两种方式的联系与区别系统模块node运行环境提供的API，就是系统模块，因为这些API都是以模块化的方式进行开发的，所以我们又称Node运行环境提...
2020-04-28 10:54:40
184
原创 Centos 7指定阿里的镜像源
备份系统自带的yum源配置文件mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup下载阿里云的yum源配置wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo更新现有...
2020-04-27 13:00:32
318
原创 window中通过nvm实现多个node版本共存
因为一些插件的冲突，了解到了nvm这个东东，于是研究了下介绍nvm是node的一个第三方包，主要用于在同一台机器上安装不同版本的node下载在下载之前，如果电脑中存在node，建议卸载后，再进行相关的操作下载链接：https://github.com/coreybutler/nvm-windows/releases然后在下载页面选择下图中的版本（下载后，可直接安装，无需配置）...
2020-04-22 22:57:18
579
原创 JavaScript高级
面向过程与面向对象面向过程：面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。面向对象：面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。对比面向过程面向对象优点性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。易维护、易复用、易扩展，由于面向对象有封装、继...
2020-04-22 10:18:35
200
原创 jQuery
jQuery入口函数// 第一种 简单易用$(function () { // 此处为页面DOM加载完成的入口})// 第二种 繁琐，但是也可以实现$(document).ready(function(){ // 此处为页面DOM加载完成后的入口})总结：等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。相当于原...
2020-04-12 16:12:12
104
原创 WebAPI---BOM
BOMBOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。- BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。- BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。BO...
2020-04-11 15:51:15
309
原创 WebAPI---DOM
获取元素的方法根据ID获取语法：document.getElementById(id)作用：根据ID获取元素对象参数：id值，区分大小写的字符串返回值：元素对象 或 null<body> <div id="time">2019-9-9</div> <script> // 因为我们文档页面从上往下加载，所...
2020-04-07 16:15:58
168
原创 JavaScript基础总结
JavaScript中的数据类型数据类型说明默认值Number数值型0String字符串型“”Boolean布尔型falsenull空值nullundefined声明了变量，但未赋值undefinednull的类型为object数值型简介Number数值型的范围（最大值: Number.MAX_VALUE；最小...
2020-04-06 22:24:39
200
原创 bootstrap响应式
响应式原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的设备的划分小于768的为超小屏幕（手机）768~992之间的为小屏设备（平板）992~1200的中等屏幕（桌面显示器）大于1200的宽屏设备（大桌面显示器）bootstrap容器container容器固定宽度大屏 ( >=1200px)1170px中屏...
2020-03-28 23:39:36
150
原创 Less
less介绍less（learnerStyle Sheets的缩写）是一门css扩展语言，也称为css预处理器在css的语法基础上，引入了变量、运算以及函数的功能，大大简化了css的编写，并且降低了css的维护成本。less是一门css预处理语言，扩展了css的动态特性less安装# 安装npm i -g less# 检查是否安装成功lessc -veasy less插件...
2020-03-27 21:40:29
137
原创 rem布局与媒体查询
rem单位rem （root em）为一个相对单位，类似于em，em是父元素字体大小rem的基准是相对于html元素的字体大小如果html设置font-size=12px， 非根元素设置width: 2rem; 则换成px就是24px/* 根html 为 12px */html { font-size: 12px;}/* 此时 div 的字体大小就是 24px */ ...
2020-03-27 15:48:09
412
原创 Flex布局（弹性布局）
flex与传统布局传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局flex布局操作方便，布局极其简单，移动端使用比较广泛pc端浏览器支持情况比较差IE11或更低版本不支持flex或仅支持部分建议如果是pc端页面布局，还是采用传统方式如果是移动端或者是不考虑兼容的pc则采用flexflex布局原理flex用于任何容器父级设置为flex之后，子元素的fl...
2020-03-27 10:35:33
147
原创 Web流式布局(百分比布局)
视口（viewpoint）视口就是历览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口布局视口（layout viewpoint）一般移动设备浏览器都默认设置了一个布局视口，用于解决PC端页面在手机上显示的问题即 pc端网页大多都能在手机上呈现，只是元素看上去很小，一般默认可以通过手动缩放网页视觉视口（visual viewpoint）用户所看到的网站的区域网...
2020-03-27 09:19:08
1020
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人