自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

马云

我没有一个月拿过工资,我从来没有碰过钱,我对钱不感兴趣!

  • 博客(94)
  • 资源 (1)
  • 收藏
  • 关注

原创 【vue项目】电商PC后台管理系统(Element-Ul)

电商PC后台管理文章目录电商PC后台管理1.项目概述1.1电商项目基本业务概述1.2电商后台管理系统的功能1.3电商后台管理系统的开发模式(前后端分离)1.4电商后台管理系统的技术选型1.前端项目技术栈2.后端项目技术栈2.项目初始化2.1前端项目初始化步骤2.2后台项目的环境安装配置3.登录/退出功能3.1登录概述1.登录业务流程2.登录业务的相关技术点3.2登录 —— token 原理分析3.3登录功能实现1.登录页面的布局2.Login.vue 文件解读3.路由导航守卫控制访问权限3.4退出退出功能

2020-11-12 11:25:44 170

原创 eslint格式化报错(解决不了送女盆友)

一、在根目录下创建.prettierrc文件{ "tabWidth": 4, "semi": false, "singleQuote": true, "trailingComma": "none",}如果还是不行请继续进行下边的步骤一般情况修改这几项就够了二、修改.eslintrc.js文件将'@vue/standard'给注释三、修改package.json将lint修改为:"lint": "eslint --fix --ext .js,.vue sr

2020-11-25 10:35:53 5

原创 【React详细笔记】react面向组件编程

React面向组件编程文章目录React面向组件编程一、基本理解与使用1、自定义组件的两种方式工厂函数组件(简单组件)ES5类组件(复杂组件)注意`render()`渲染组件标签的基本流程二、组件三大属性`state`初始化状态读取某个状态值更新状态案例三、组件三大属性`props`默认属性值对props中的属性值进行类型限制和必要性限制扩展属性: 将对象的所有属性通过props传递四、 组件的三大属性 `refs`使用案例第一种写法:第二种写法:失去焦点事件五、组件的组合使用(案例)ToDoS案例收集表

2020-11-16 08:31:21 74

原创 【React详细笔记】react入门

React入门文章目录React入门一、React的基本认识1、官网2、介绍3、 React的特点4、React高效的原因二、React的基本使用1、相关js库2、在页面中导入js库3、编码三、React JSX1、虚拟DOM2、JSX3、渲染虚拟DOM元素4、创建虚拟DOM的方式纯JS方式JSX方式代码示例5、React 之 Hello World一、React的基本认识1、官网英文官网中文官网2、介绍react是用于构建用户界面的JavaScript库(只关注view)由Facebook

2020-11-15 15:51:06 84

原创 简简单单学会Vuex

Vuex文章目录Vuex一、Vuex 的基本使用1.安装vuex依赖包2.导入vuex包3.创建store对象4. 将 store 对象挂载到 vue 实例中二、Vuex 的核心概念3.1 核心概念概述3.2 State3.3 Mutation3.4 Action3.5 Getter三、基于Vuex实现简单的计算器项目源码:一、Vuex 的基本使用1.安装vuex依赖包npm install vuex --save2.导入vuex包import Vuex from 'vuex'Vue.use

2020-11-15 08:12:39 74

原创 【vue报错问题】vue ui 创建项目解决eslint格式化问题

修改.eslintrc.js文件在eslintrc.js中的rules规则中添加:'space-before-function-paren': 0在项目根目录增加.prettierrc文件并添加:{ "semi":false, "singleQuote":true, "trailingComma": "none", "tabWidth": 4,}

2020-11-12 20:01:12 88

原创 【vue案例】vue实现后台管理路由

vue实现后台管理路由文章目录vue实现后台管理路由前言一、准备静态模板二、根据项目整体布局划分组件结构1、抽离并渲染App根组件2、将左侧导航改为路由链接3、创建左侧菜单对应的路由组件4、添加到右侧主体区域添加路由占位符:5、添加子路由规则6、通过路由重定向默认渲染指定用户组件7、渲染用户列表数据8、编程式导航跳转到用户详情页9、回退功能三、完整代码前言首先,看下我们基于Vue-Router实现的后台管理路由具体效果:一、准备静态模板<!DOCTYPE html><html

2020-11-07 08:24:05 218

原创 【vue详细笔记】Vue CLI(vue脚手架创建项目、Element-UI基本使用)

Vue CLI(vue 脚手架)文章目录Vue CLI(vue 脚手架)前言一、vue脚手架基本用法安装升级交互式命令行创建一个项目使用图形化界面方式创建一个项目二、Vue 脚手架的自定义配置1.通过 `package.json` 配置项目2.通过单独的配置文件配置项目Element-UI 的基本使用1.基于命令行方式手动安装2.基于图形化界面自动安装前言vue脚手架用于快速生成vue项目基础架构一、vue脚手架基本用法安装Node 版本要求Vue CLI 4.x 需要 Node.js v8

2020-11-05 14:47:06 212

原创 【webpack详细笔记】webpack(webpack基本使用、webpack的加载器、webpack中的vue单文件组件使用)

webpack文章目录webpack一、webpack概述二、webpack基本使用1、在项目中安装和配置webpack2、配置打包的入口与出口3、配置自动打包webpack配置自动打包包版本依赖不兼容问题4、 配置html-webpack-plugin生成预览页面5、配置自动打包的相关参数三、webpack中的加载器1、通过loader打包非js模块2、打包处理css文件3、打包处理less文件4、打包处理scss文件5、配置postCSS自动添加css的兼容前缀6、打包图片7、打包处理js文件中的高级

2020-11-05 14:44:16 196

原创 【vue详细笔记】vue-Router路由

vue Router路由文章目录vue Router路由一、路由1、后端路由2、SPA3、前端路由4、实现简单的前端路由二、Vue Router1、包含的功能2、基本使用步骤3、路由重定向4、嵌套路由5、动态路由规则$route方式props的值为布尔值方式props的值为对象方式props的值为函数6、命名路由的配置规则7、编程式导航声明式导航编程式导航`this.$router.push('hasn地址')``this.$router.go(n)`一、路由是一个比较广义和抽象的概念,路由的本质就是

2020-11-05 08:13:24 244

原创 【vue详细笔记】vue之前后端交互(promise、fetch、axios)

vue前后端交互文章目录vue前后端交互一、前后端交互模式1、接口调用方式2、URL地址格式3、Restful形式的URL二、Promise1、异步调用异步效果分析2、Promise三、fetch1、基本特性2、语法3、fetch请求参数常用配置选项GET请求参数传递DELETE请求参数传递POST请求参数传递PUT请求参数传递4、fetch响应结果四、axios1、axios基本用法2、axios请求参数GET请求参数传递DELETE请求参数传递POST请求参数传递PUT请求参数传递3、axios的响应

2020-11-05 08:10:40 206

原创 【四步搞定】nodejs通过babel体验ES6模块化

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/ nodenpm install --save @babel/polyfill项目跟目录创建文件babel. config.jsconst presets = [ [" @babel/env", { targets: { edge: "17", firefox: "60", ..

2020-11-04 15:52:53 227

原创 【vue详细笔记】vue组件化开发(组件注册、组件间数据交互、组件插槽)

vue组件化开发文章目录vue组件化开发一、组件注册1、全局组件注册示例案例2、组件注意事项data必须是一个函数template组件模块内容必须是单个根元素组件命名方式3、局部组件注册二、组件间数据交互1、父组件向子组件传值组件内部通过props接收传递过来的值父组件通过属性将值传递给子组件实例代码props属性名规则2、props属性值类型字符串String数值Number布尔值Boolean数组Array对象Object3、子组件向父组件传值子组件通过自定义事件向父组件传递信息父组件监听子组件的事件

2020-11-04 08:15:15 294

原创 【vue详细笔记】vue实现图书管理

vue实现图书管理文章目录vue实现图书管理一、效果展示二、具体实现1、图书列表部分**html:****css:****JavaScript:**将vue中的假数据渲染到html中2、添加图书部分实现表单静态效果添加图书表单域数据绑定添加按钮事件绑定实现添加业务逻辑3、修改图书修改信息填充到表单修改后重新提交表单4、删除图书根据数组中查找的ID索引来删除通过数组的filter方法删除5、生命周期的使用三、完整代码一、效果展示二、具体实现1、图书列表部分html:<!-- 图书容器 --&

2020-11-03 08:12:09 443

原创 【vue详细笔记】vue数组相关api(变异方法、替换数组、动态修改响应式数据)

vue数组相关API文章目录vue数组相关API一、变异方法二、替换数组(生成新的数组)三、示例代码四、动态修改响应式数据Vue.set(vm.items,indexOfltem,newValue)vm.$set(vm.items,indexOfltem,newValue)实例代码一、变异方法pushpopshiftunshiftsplicesortreverse这些方法都会影响到数组原始数据,都会被vue处理成响应式方式,都会影响到页面中模板变化二、替换数组(生成新的数组)

2020-11-03 08:09:33 454

原创 【vue详细笔记】常用特性(表单、自定义指令、计算属性、侦听器、过滤器、生命周期)

vue常用特性文章目录vue常用特性一、表单操作1、基于vue的表单操作input单行文本audio单选框checkbox多选框select下拉选项textaea多行文本代码示例:2、表单域修饰符number转化为数值trim去除两边的空格lazy将input事件切换为change事件二、自定义指令1、自定义全局`v-focus`指令2、带参数的自定义指令3、局部指令三、计算属性1、计算属性用法2、计算属性与方法的区别四、侦听器1、侦听器应用场景2、侦听器用法实现一个场景3、侦听器应用场景实例五、过滤器1

2020-11-02 16:38:05 453

原创 【vue案例】vue侦听器实现验证用户名是否可用

验证用户名是否可用该案例是基于 vue侦听器这一特性来实现文章目录验证用户名是否可用需求:实现思路实现过程1、数据绑定2、提供提示信息之前,我们需要使用侦听器来监听用户名的变化,在侦听器中调用后台验证用户名合法性的接口3、模拟后台接口(使用定时器)4、实现侦听器中的逻辑5、修改触发的事件(表单域修饰符)完整代码需求:输入框中输入姓名,失去焦点时验证是否存在,如果已经存在,提示从新输入,如果不存在,提示可用使用。实现思路通过v-model实现数据绑定需要提供提示信息需要侦听器监听输入信息

2020-11-01 17:03:30 868

原创 【vue案例】vue带参数的过滤器实现日期格式化(yyyy-MM-dd)

vue过滤器实现日期格式化文章目录vue过滤器实现日期格式化获取当前时间格式化当前时间完整代码利用带参数的过滤器实现当前日期格式化获取当前时间<div>{{date}}</div>data: { date:new Date()}格式化当前时间利用带参数的过滤器,format中的参数由过滤器中的arg得到<div>{{date | format('yyyy-MM-dd')}}</div>Vue.filter('format',f

2020-11-01 17:02:31 619

原创 【vue案例】vue实现tab选项卡

vue实现tab选项卡文章目录vue实现tab选项卡一、效果图展示二、静态页面结构csshtmljavascript三、vue实现1、将静态结构和样式重构为基于vue模板语法的形式vue实现ul标签渲染2、处理事件绑定和js控制逻辑vue实现点击切换四、完整代码一、效果图展示实现的效果图如下:二、静态页面结构css<style>*{ margin: 0; padding: 0; box-sizing: border-box;}.tab { wi

2020-11-01 08:08:54 762

原创 【vue详细笔记】模板语法指令

vue指令文章目录vue指令指令1、`v-cloak`2、数据绑定指令`v-text``v-html``v-pre`综合实例h1元素3、数据响应式指令`v-once`4、双向数据绑定指令`v-model`MVVM设计思想5、事件绑定指令`v-on:click`6、事件修饰符`v-on:click`7、按键修饰符`v-on:keyup.enter``v-on:keyup.delete`自定义按键修饰符8、属性绑定`v-bind``v-model`底层原理分析9、样式绑定对象语法数组语法语法细节10、styl

2020-10-31 11:31:20 1128 3

原创 【vue详细笔记】vue之hello world起步

vue之hello world起步vue 基本使用步骤1、提供标签用于填充数据<div id="app"> <div></div></div>2、引入vue.js库文件<script type="text/javascript" src="../script/vue.min.js"></script>3、使用vue的语法写功能<script type="text/javascript">

2020-10-31 11:26:39 736

原创 深入浅出WebPack 前端模块化(模块化、RequireJS、CommonJS、SeaJS)

ES6 前端模块化目录ES6 前端模块化前言1、前端开发领域发展到目前阶段零件化组件化模块化2、组件化与模块化的关系3、组件化与模块化的特点一、前端模块化是什么二、ES5的模块化1、函数的封装2、对象的封装3、自调函数的封装三、ES6的模块化export命令import命令四、前端模块化规范CommonJSRequireJSSeaJS五、RequireJSHTMLindex.jsmodule.js六、SeaJS前言1、前端开发领域发展到目前阶段零件化最终呈现给用户是一个完整的产品降低生成成

2020-10-30 12:35:59 819

原创 【深入理解ECMAScript 6】 迭代器与生成器(Symbol、迭代器、for···of、forEach、生成器)

ES6 迭代器与生成器文章目录ES6 迭代器与生成器一、Symbol1、Symbol是什么注意事项2、Symbol的方法3、Symbol与for···in二、迭代器1、迭代器是什么2、Iterator接口IteraotrjavaScript原生具有Iterator接口的数据结构 如下:··三、迭代协议1、可迭代协议2、迭代器协议四、`for···of`语句1、遍历数组2、遍历Set集合3、遍历Map集合4、遍历String5、不可遍历对象五、`forEach()`方法1、与for···of语句的区别:2、

2020-10-29 14:11:23 872

原创 【深入理解ECMAScript 6】 Promise对象(async、await方法的使用)

ES6 Promise对象、async、await深入学习文章目录ES6 Promise对象、async、await深入学习一、Promise对象1、Promise对象是什么2、创建Promise对象3、Promise对象的约定4、Promise对象的链式操作二、Promise对象原型的方法1、`then()`2、`catch()`3、`finally()`三、Promise对象的方法1、`Promise.all()`2、`Promise.race()`四、Promise执行流程图五、`async`函数1

2020-10-29 14:07:18 880

原创 【深入理解ECMAScript 6】 Class关键字的使用(类的声明、静态方法、类的继承)

ES6 Class关键字文章目录ES6 Class关键字一、类的声明1、类的声明方式:2、类的表达式方式:构造函数创建类二、静态方法1、getter与setterES5:ES6:2、`static`静态方法ES6:ES5实现同样的功能:3、静态方法的内部调用三、类的继承1、继承2、继承于内置对象3、super关键字当作为函数调用当作为对象时4、完整类实例代码ECMAScript 6提供了更接近传统开发语言的写法,引入了类( Class )的概念。类作为对象的模板,只是一个语法糖。class 关键字只

2020-10-29 08:22:24 866

原创 【深入理解ECMAScript 6】 键值对集合(Set集合、WeakSet集合、Map集合、WeakMap集合)

ES6 键值对集合文章目录ES6 键值对集合一、Set集合1、什么是Set集合2、Set集合的属性方法3、创建Set集合4、遍历Set集合方法`values()方法``keys()方法``entries()方法``forEach()方法`5、Set集合与Array对比二、WeakSet集合1、WeakSet集合是什么三、Map集合1、属性2、方法`set(key,value)``get(key)``delete(key)``has(key)``clear()`3、遍历四、Map与Object对比Objec

2020-10-29 08:19:16 843

原创 【深入理解ECMAScript 6】 对象的扩展(属性表示法、Object方法、super关键字、对象的扩展运算符)

ES6 对象的扩展文章目录ES6 对象的扩展一、属性表示法1、ES52、ES6二、Object的方法1、Object.is()ES5ES62、Object.assign()三、super关键字四、对象的扩展运算符一、属性表示法1、ES5let name = '张无忌'function sayMe() { console.log('this is 张无忌');}// ES5 定义对象属性方法 的方式var obj = { name: name, //第二个name表示变量名

2020-10-28 14:41:16 865

原创 【深入理解ECMAScript 6】 函数的扩展(函数参数、rest参数、箭头函数)

ES6 函数扩展文章目录ES6 函数扩展一、函数参数的默认值1、ES52、ES63、函数参数的作用域分析图二、rest参数三、箭头函数1、ES5声明函数方式2、ES6箭头函数3、箭头函数的this4、箭头函数语法结构基本语法结构高级语法结构注意事项5、函数的尾调用一、函数参数的默认值1、ES5/*ES5中不允许为函数的形参设置其默认值 定义形参,而不传递实参时,形参的默认值为undefined 人为解决形参:arg || 0*/function fn(arg) { c

2020-10-28 14:32:48 859

原创 【深入理解ECMAScript 6】 数组扩展(扩展运算符...、Array跟Array对象提供的方法)

ECMAScript6 数组的扩展标题ECMAScript6 数组的扩展一、扩展运算符1、扩展运算符2、替代apply方法3、复制数组深复制:浅复制:4、扩展运算符的应用复制数组合并数组与解构赋值结合将字符串转换为数组与对象的使用二、Array提供的方法1、from()2、of()三、Array对象的方法1、copyWithin()2、find()3、findIndex()4、fill()一、扩展运算符1、扩展运算符扩展运算符:(…) 允许一个表达式在原地展开当需要多个参数,比如函数调用,或者多

2020-10-28 08:07:52 860

原创 【深入理解ECMAScript 6】 字符串扩展(字符串是否包含、重复字符串、模板字符串)

ECMAScript6 字符串扩展目录ECMAScript6 字符串扩展一、字符串判断是否包含ES5ES6includes()startsWith()endsWith()二、重复字符串repeat()三、模板字符串1、什么是模板字符串2、原始字符串3、页面模板分析图一、字符串判断是否包含ES5/*ES5 提供的判断是否包含的方法string.indexOf(searchStr)方法 作用:返回指定字符串包含的指定子字符串的索引值 结果: 包含:返回第一个匹配的索引

2020-10-27 21:02:57 944

原创 【深入理解ECMAScript 6】 解耦赋值(变量跟对象的解构赋值)

ECMAScript6 解耦赋值目录ECMAScript6 解耦赋值一、变量的解耦赋值1、解耦赋值是什么2、解耦赋值失败解耦赋值失败不等于失败3、不完全解耦赋值4、默认值二、对象的解耦赋值1、对象的解耦赋值分类案例2、字符串的解耦赋值3、数值与布尔值的解耦赋值数字值:布尔值:4、函数参数的解耦赋值5、小括号的问题6、解耦赋值的用途交换变量的值从函数返回多个值函数参数的定义提取JSON数据一、变量的解耦赋值1、解耦赋值是什么ECMAScript 6允许按照一定模式从数组或对象中提取值,对变量进行赋值。

2020-10-27 08:09:02 936

原创 【深入理解ECMAScript 6】 块级作用域(详细~)

ECMAScript 6的概念与块级作用域一、ES6的概念以及运行环境1、与JavaScript的关系1996年11月,、JavaScript 的创造者Netscape公司,决定将、JavaScript提交给标准化组织ECMA,希望这种语言能够成为国际标准。次年,ECMIA发布262号标准文件( ECMA- 262 )的第一版,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript,这个版本就是1.0版。该标准之所以不叫、JavaScript有两个原因,一 是 JavaScript被

2020-10-26 17:10:43 996

原创 【Nodejs博客项目开发】之原生nodejs实现博客系统(五)

【Nodejs博客项目开发】之原生nodejs实现博客系统(五)一、session存入redis首先下载redis模块:npm i redis --savedb.js配置redisconst env = process.env.NODE_ENV //环境参数// 配置let MYSQL_CONFlet REDIS_CONF// 开发环境下的if (env === 'dev') { MYSQL_CONF = { host: 'localhost',

2020-10-26 08:10:39 1944 4

原创 【Nodejs博客项目开发】之原生nodejs实现博客系统(四)

【Nodejs博客项目开发】之原生nodejs实现博客系统(四)一、登录1、cookie存储在浏览器的一段字符串(最大5kb)跨域不共享格式:k1=v1;k2=v2可以存储结构化数据每次发送HTTP,会将请求域的cookie一起发给serverserver可以修改cookie并返回给浏览器浏览器中也可以通过JavaScript修改cookie(有限制)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4WXxHedE-1603591504696)(https

2020-10-25 10:07:08 1103

原创 【Nodejs博客项目开发】之原生nodejs实现博客系统(三)

【Nodejs博客项目开发】之原生nodejs实现博客系统(三)一、nodejs操作Mysql1、测试demonpm init -y初始化项目npm i mysql --save安装mysql用nodejs操作mysqlconst mysql = require('mysql')// 创建连接对象const con = mysql.createConnection({ host: 'localhost', user: 'root', password: 'qyb

2020-10-24 08:35:43 1095

原创 【Nodejs博客项目开发】之原生nodejs实现博客系统(二)

【Nodejs博客项目开发】之原生nodejs实现博客系统(二)一、实现blog接口1、获取博客详情先在controller/blog.js中定义返回数据的方法:const getDetail = (id) => { return [ { id: 1, title: '标题a', content: '内容a', createTime: 2324, au

2020-10-22 08:12:37 1156

原创 【Nodejs博客项目开发】之原生nodejs实现博客系统(一)

【Nodejs博客项目开发】之原生nodejs实现博客系统(一)>>目录【Nodejs博客项目开发】之原生nodejs实现博客系统(一)一、接口设计二、基本目录结构三、`www.js`四、`app.js`五、实现路由`blog.js``user.js`六、处理路由七、优化代码八、处理动态数据`controller/bolg.js`在`router/blog.js`中使用`controller/bolg.js``app.js``resModel.js`九、总结一、接口设计描述接口

2020-10-05 14:48:41 1669

原创 【Nodejs博客项目开发】准备工作

Nodejs博客项目开发准备工作一、开发之前的准备Nodejs的真正用途:是一个JavaScript运行环境;运行在服务器,作为web server;运行在本地,作为打包、构建工具Nodejs的学习困惑:Nodejs运行在服务端,而非浏览器环境,服务端开发的思路和套路,与前端不一样1、知识点介绍2、案例架构图3、下载nodejs方法一:nodejs官网方法二:使用nvmnvm , nodejs 版本管理工具,可切换多个nodejs版本mac os ,使用brew in

2020-09-29 16:24:38 1831

原创 windows使用 nvm 管理不同版本的 node(nvm中通过换源操作预防下载时的丢包情况)

windows使用 nvm 管理不同版本的 node在我们的日常开发中经常会遇到这种情况:手上有好几个项目,每个项目的需求不同,进而不同项目必须依赖不同版的 NodeJS 运行环境。如果没有一个合适的工具,这个问题将非常棘手。nvm 应运而生,nvm 是 Mac 下的 node 管理工具,有点类似管理 Ruby 的 rvm,如果需要管理 Windows 下的 node,官方推荐使用 nvmw 或 nvm-windows。不过,nvm-windows 并不是 nvm 的简单移植,他们也没有任何关系。但下

2020-09-28 14:06:20 1937

原创 Promise从入门到自定义之手写Promise(前端进阶必学)

promise前端进阶>> 目录promise前端进阶一、准备工作1、区别实例对象跟函数对象2、回调函数的分类同步回调异步回调3、error错误处理二、promise的理解与使用1、promise是什么理解promise的状态改变工作原理图使用流程实例2、为什么用promise指定回调函数的方式更加灵活支持链式调用,可以解决回调地狱3、如何使用promiseAPI4、promise的关键问题如何改变promise 的状态当一个promise指定多个成功、失败回调函数,都会调用吗promise.

2020-09-26 17:09:59 2104

HTML&CSS基础.xmind

关于HTML&CSS的xmind脑图;具体涵盖了所有关于HTML&CSS基础的知识点,帮你建立该两门基础课程的知识框架,有助于你的入门速度

2020-06-16

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除