- 博客(127)
- 收藏
- 关注
RSS订阅
原创 ES6 -- 目录
[ES6] 细化ES6之 – ECMA6是什么 [ES6] 细化ES6之 – 块级作用域 [ES6] 细化ES6之 – 变量的解构赋值 [ES6] 细化ES6之 – 字符串的扩展 [ES6] 细化ES6之 – 数组的扩展 [ES6] 细化ES6之 – 函数的扩展 [ES6] 细化ES6之 – 对象的扩展 [ES6] 细化ES6之 – 键值对集合 [ES6] 细化ES6之 – Promise对象 [ES6] 细化ES6之 – async函数 [ES6] 细化ES6之 – 迭代器与生成器 ...
2020-10-28 19:11:16
273
原创 Vue -- 目录
[Vue.js] 基础 [Vue.js] 基础 – 安装Vue [Vue.js] 基础 – Vue简介 [Vue.js] 基础 – Vue实例 [Vue.js] 基础 – 模板语法
2020-09-25 17:01:06
263
原创 jQuery -- 目录
[jQuery基础] 目录 [jQuery基础] 初识jQuery [jQuery基础] jQuery核心函数和工具方法 [jQuery基础] jQuery对象 – 选择器 [jQuery基础] jQuery对象 – 属性操作 [jQuery基础] jQuery对象 – CSS相关 [jQuery基础] jQuery事件相关 [jQuery基础] jQuery事件相关案例 – 电影排行榜、Tab选项卡 [jQuery基础] jQuery动效 [jQuery基础] jQuery动效案例(一) – 弹
2020-06-21 13:09:28
528
1
原创 scrollspy 滚动监听插件
<style> /*第一步*/ body { position: relative; } #navbar{ background:#aab; position:fixed; left:100px; top:50px; } </style> <!-- 第二步 --> <body data-spy="scroll" data-target="#nav
2021-01-03 16:03:19
358
原创 Koa 2 基础(仿知乎)
Koa 2 基础 接口文档 Postman仿知乎在线测试 REST 简介 REST是什么 REST是Resource Representational State Transfer的缩写,是一种Web服务架构，其目标是为了创建具有良好扩展性的分布式系统 资源在网络中以某种表现形式进行状态转移 Resource：资源，即数据（网络的核心）。 Representational：某种表现形式，比如用JSON，XML，JPEG等； State：当前状态或者数据。通过HTTP动词实现。 Trans
2020-12-22 19:10:47
1180
原创 [React] 尚硅谷 -- 学习笔记(七)
第七章 react-ui 最流行的开源React UI组件库 material-ui(国外) 官网 GitHub ant-design(国内蚂蚁金服) PC官网 GitHub 移动官网 GitHub 实现按需打包(组件js/css) 下载依赖包 cnpm install react-app-rewired customize-cra babel-plugin-import --save-dev 修改默认配置 找到package.json "scripts": { "sta
2020-11-16 16:15:31
436
原创 [React] 尚硅谷 -- 学习笔记(六)
第六章 react-router4 理解 react-router react的一个插件库 专门用来实现一个SPA应用 基于react的项目基本都会用到此库 SPA 单页Web应用（single page web application，SPA） 整个应用只有一个完整的页面 点击页面中的链接不会刷新页面, 本身也不会向服务器发请求 当点击路由链接时, 只会做页面的局部更新 数据都需要通过ajax请求获取, 并在前端异步展现 路由 什么是路由
2020-11-16 16:13:56
268
原创 [React] 尚硅谷 -- 学习笔记(五)
第五章 总结 组件间通信 通过props传递 共同的数据放在父组件上, 特有的数据放在自己组件内部(state) 通过props可以传递一般数据和函数数据, 只能一层一层传递 一般数据–>父组件传递数据给子组件–>子组件读取数据 函数数据–>子组件传递数据给父组件–>子组件调用函数 使用消息订阅(subscribe)-发布(publish)机制 工具库: PubSubJS 下载: npm install pubsub-js --save 使用 import PubSub fr
2020-11-16 16:12:32
231
原创 [React] 尚硅谷 -- 学习笔记(四)
第四章 react ajax 理解 React本身只关注于界面, 并不包含发送ajax请求的代码 前端应用需要通过ajax请求与后台进行交互(json数据) react应用中需要集成第三方ajax库(或自己封装) 常用的ajax请求库 jQuery: 比较重, 如果需要另外引入不建议使用 axios: 轻量级, 建议使用 封装XmlHttpRequest对象的ajax promise风格 可以用在浏览器端和node服务器端 fetch: 原生函数,
2020-11-16 16:11:20
206
原创 [React] 尚硅谷 -- 学习笔记(三)
第三章 react应用(基于react脚手架) 使用create-react-app创建react应用 react脚手架 xxx 脚手架：用来帮助程序员快速创建一个基于 xxx 库的模板项目 包含了所有需要的配置 指定好了所有的依赖 可以直接安装/编译/运行一个简单效果 react 提供了一个用于创建 react 项目的脚手架库：create-react-app 项目的整体技术架构为：react + webpack + es6 + eslint 使用脚手架开发的项目的特点：模
2020-11-16 16:07:35
335
原创 [React] 尚硅谷 -- 学习笔记(二)
第二章 React面向组件编程 基本理解和使用 自定义组件 定义组件 工厂函数组件(简单组件) function MyComponent () { return <h2>工厂函数组件(简单组件)</h2> } 没有状态的组件 ES6类组件(复杂组件) class MyComponent2 extends React.Component { render () { console.log(this) // MyComponent2的实例
2020-11-16 16:03:03
261
原创 [React] 尚硅谷 -- 学习笔记(一)
第一章 React入门 React基本认识 用于构建用户界面的 JavaScript 库(View) 官网 英文官网: https://reactjs.org/ 中文官网: https://doc.react-china.org/ 特点 Declarative（声明式编码） Component-Based（组件化编码） Learn Once，Write Anywhere（支持客户端与服务器渲染，React-Native） 高效 单向数据流 高效的原因 虚拟（virtual）DOM，不总是操作 DO
2020-11-16 15:58:06
518
转载 eslint解决方案整理
eslint 解决方案整理 最近在处理react项目中报的warning，进行了以下整理 参考文档 Rules 项目中遇到warning的解决 $ xxx is defined but never used no-unused-vars 禁止出现未使用过的变量删除 $ Expected '===' and instead saw '==' eqeqeq 要求使用 === 和 !====变=== $ img elements must have an alt p
2020-11-15 16:38:07
1225
原创 [Vue.js] Vuex的使用
效果展示 目标 Vuex概述 Vuex基本使用 使用Vuex完成todo案例 1.Vuex概述 Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享 使用Vuex管理数据的好处： 能够在vuex中集中管理共享的数据，便于开发和后期进行维护 能够高效的实现组件之间的数据共享，提高开发效率 存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新 2.Vuex的基本使用 创建带有vuex的v
2020-11-12 18:15:23
428
原创 [Vue.js]实战 -- 电商项目(八)
数据统计 数据统计概述 用于统计电商平台运营过程的中的各种统计数据 通过直观的可视化方式展示出来，方便相关运营和管理人员查看 用户来源数据统计报表 Echarts 第三方可视化库的基本使用 安装echarts库 // 安装echarts库 npm install echarts -S 导入echarts接口 // 导入echarts接口 import echarts from 'echarts' 实现用户来源数据统计报表 调用接口获取后台接口数据 通过ec
2020-11-11 18:33:44
335
原创 [Vue.js]实战 -- 电商项目(七)
订单管理 订单管理概述 用于维护商品的订单信息 可以查看订单的商品信息、物流信息，并且可以根据实际的运营情况对订单做适当的调整。 订单列表 订单列表展示 订单数据加载 订单列表布局 const { data: res } = await this.$http.get('orders', { params: this.queryInfo }) if (res.meta.status !== 200) { return this.$message.error('获取订单列表失败！')
2020-11-11 17:59:00
614
原创 [Vue.js]实战 -- 电商项目(六)
商品管理 商品管理概述 用于维护电商平台的商品信息 包括商品的类型、参数、图片、详情等信息。通过商品管理模块可以实现商品的添加、修改、展示和删除等功能 商品列表 实现商品列表布局效果 调用后台接口获取商品列表数据 const { data: res } = await this.$http.get('goods', { params: this.queryInfo }) if (res.meta.status !== 200) { return this.$message.e
2020-11-11 14:35:33
440
原创 [Vue.js]实战 -- 电商项目(五)
参数管理 参数管理概述 商品参数用于显示商品的固定的特征信息，可以通过电商平台商品详情页面直观的看到 商品分类选择 选择商品分类 页面布局 <div> <!-- 面包屑导航区域 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-bread
2020-11-10 16:40:28
320
原创 [Vue.js]实战 -- 电商项目(四)
分类管理 商品分类概述 商品分类用于在购物时，快速找到所要购买的商品，可以通过电商平台主页直观的看到 商品分类列表 基本布局与数据获取 基本布局 面包屑导航区域 <!-- 面包屑导航区域 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item&
2020-11-10 09:20:32
403
2
原创 [Vue.js]实战 -- 电商项目(三)
权限管理 权限管理业务分析 通过权限管理模块控制不同的用户可以进行哪些操作，具体可以通过角色的方式进行控制，即每个用户分配一个特定的角色，角色包括不同的功能权限 权限列表展示 创建对应规格 在components文件夹下创建power文件夹,在此文件夹下创建Rights.vue(此vue用于开发权限管理的权限列表内容) 在index.js文件下导入 import Rights from "../components/power/Rights"; { path: '/r
2020-11-09 10:09:35
515
1
原创 [Vue.js]实战 -- 电商项目(二)
主页布局 整体布局 主页布局开始 引入官网的框架时,首先要在element.js中添加 import { Container, Header, Aside, Main } from 'element-ui' Vue.use(Container) Vue.use(Header) Vue.use(Aside) Vue.use(Main) <template> <el-container class="home-container">
2020-11-08 15:12:41
341
原创 [Vue.js]实战 -- 电商项目(一)
项目目录 项目概述 项目初始化 登录/退出功能 主页布局 用户管理模块 权限管理模块 分类管理模块 参数管理模块 商品管理模块 订单管理模块 数据统计模块 项目概述 电商项目基本业务概述 电商后台管理系统的功能 用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。 电商后台管理系统的开发模式(前后端分离) 前端项目是基于Vue技术栈的SPA项目 电商后天管理系统的技术选型 前端项目技术栈 Vue Vue-router E
2020-11-08 15:07:34
1205
1
原创 [Vue.js] 模块化 -- 前端模块化
模块化相关规范 模块化概述 传统开发模式的主要问题 命名冲突 文件依赖 通过模块化解决传统开发模式的问题 模块化就是把单独的一个功能封装到一个模块(文件)中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块 好处 方便代码的重用 提升开发效率 方便后期维护 浏览器端模块化规范 AMD Require.js CMD Sea.js 服务器端模块化规范 CommonJS 模块分为单文件模块 和 包
2020-11-05 15:43:53
800
1
原创 ERROR in ./src/css/1.scss 1:2
又到了日常吐血环节 显示我css文件报错,我怀疑我找了所有网上资料都没找到,试着自己去改一下css文件的名字 果然如此 改了之后,瞬间好了 运行npm run dev
2020-11-05 10:58:56
780
3
原创 Error: Cannot find module ‘webpack-cli/bin/config-yargs‘
在配置webpack自动打包时,运行npm run dev,发现报错:Error: Cannot find module 'webpack-cli/bin/config-yargs’ 解决了半天,一顿头大 版本不兼容,这是我最后得到的结果,哎哎哎!!! package.json文件查看版本 不要紧,我已经解决了错误,哈哈哈哈哈哈!!! 方法: 卸载,卸载,卸载 npm uninstall webpack-cli -D npm uninstall webpack-dev-
2020-11-05 09:11:59
608
1
原创 [Vue.js] 路由 -- 基于vue-router的案例--后台管理
基于vue-router的案例 感觉好多,啊啊啊!!! 实现效果 实现步骤 抽离并渲染App根组件 将左侧菜单改造为路由链接 创建左侧菜单对应的路由组件 在右侧主体区域添加路由占位符 添加子路由规则 通过路由重定向默认渲染用户组件 渲染用户列表数据 编程式导航跳转到用户详情页 实现后退功能 抽离并渲染App根组件 首先要引入vue.js和vue-router.js <script src="https://cdn.jsdelivr.net/npm/vue/di
2020-11-04 16:11:29
838
1
原创 [Vue.js] 路由 -- 前端路由
路由的基本概念与原理 路由 本质是对应关系 后端路由 概念 : 根据不同的用户URL请求,返回不同的内容 本质 : URL请求地址与服务器资源之间的对应关系 SPA 后端渲染（存在性能问题) Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作) SPA (Single Page Application）单页面应用程序:整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作 SPA实现原理之一:基于URL地址的hash (hash的变化
2020-11-04 11:51:45
235
原创 vue.js:634 [Vue warn]: Error in render: “TypeError: Cannot read property ‘matched‘ of undefined“
//创建路由实例对象 const router = new VueRouter ({ //routes 是路由规则数组 routes : [ //每个路由规则都是一个配置对象，其中至少包含 path和component两个属性 //path 表示当前路由规则匹配的hash地址 //component表示当前路由规则对应要展示的组件 {path: '/user', comp.
2020-11-04 09:50:38
4117
3
原创 [Vue.js] 深入 -- 案例 - 购物车
案例 - 购物车 按照组件化方式实现业务需求 根据业务功能进行组件化划分 标题组件(展示文本) 列表组件(列表展示、商品数量变更、商品删除) 结算组件(计算商品总额) 功能实现步骤 实现整体布局和样式效果 划分独立的功能组件 组合所有的子组件形成整体结构 逐个实现各个组件功能 标题组件 列表组件 结算组件 效果图展示 实现组件化布局 先创建一个局部组件my-cart,在里面引入属性components,定义三个组件cart-title,cart-list,cart-to
2020-11-03 15:56:21
457
原创 [Vue.js] 深入 -- 组件化开发
组件化开发思想 现实中的组件化思想体现 标准 分治 重用 组合 组件注册 全局组件注册语法 Vue.component(组件名称,{ data:组件数据, template:组件模板内容 }) 组件用法 <div id='app'> <button-counter></button-counter> </div> <button-counter></button-counter>可以重复
2020-11-03 14:40:10
188
原创 [Vue.js] 基础 -- 综合案例 -- 图书管理
综合案例 – 图书管理 补充知识(数组相关API) 变异方法(修改原有数据) push() pop() shift() unshift() splice() sort() reverse() 替换数组(生成新的数组) filter() concat() slice() 修改响应式数据 Vue.set(vm.items, indexOfltem, newValue) vm.$set(vm.items, indexOfltem, newValue) 参数一表示要处理的数组名称 参数二表示要处理
2020-11-02 15:48:41
811
1
原创 [Vue.js] 基础 -- 过滤器(格式化时间)
对日期进行格式化 date 要格式化的日期 format 进行格式化的模式字符串 支持的模式字母 y : 年 M : 年中的月份(1-12) d : 月份中的天(1-31) h : 小时(0-23) m : 分(0-59) s : 秒(0-59) S : 毫秒(0-999) q : 季度(1-4) function dateFormat(date, format) { if (typeof date === "string") { var mts = date.matc
2020-11-02 15:19:31
346
1
原创 [Vue.js] 基础 -- Vue常用特性
Vue常用特性 常用特性概览 表单操作 自定义指令 计算属性 过滤器 侦听器 生命周期 表单操作 基于Vue的表单操作 Input 单行文本 textarea 多行文本 select 下拉多选 radio 单选框 checkbox 多选框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D
2020-11-02 11:05:52
286
2
原创 [Vue.js] 基础 -- 案例之Tab选项卡
实现效果 实现步骤 实现静态UI效果 用传统的方式实现标签结构和样式 基于数据重构UI效果 将静态的结构和样式重构为基于Vue模板语法的形式 处理事件绑定和js控制逻辑 声明式编程 模板的结构和最终显示的效果基本一致 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
2020-11-01 18:43:53
1001
原创 Vue 自定义按键修饰符对应表
Vue 自定义按键修饰符对应表 按键 键码 8 BackSpace 9 Tab 12 Clear 13 Enter 16 Shift 17 Ctrl 18 Alt 19 Pause 20 Caps_Lock 27 Escape 32 space 33 page up 34 page down 35 End 36 Home 37 Left 38 Up 39 Right 40 Down 41 Select 42 Pr
2020-11-01 10:18:06
353
原创 Git常用命令
Git常用命令 下载 Git下载地址 git使用教程 参考大佬git使用教程 工作区、暂存区和版本库 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5BFFCCWG-1604126141372)(https://s1.ax1x.com/2020/10/31/BNzvVI.jpg)] 工作区: 当前电脑里能看到的目录。 暂存区: 英文叫做stage或index。一般存放在“git目录下”下的index文件(.git/index)中，所以我们
2020-10-31 14:37:18
237
原创 [ES6] 细化ES6之 -- 前端模块化
前端模块化 前言 前端开发领域发展到目前阶段: 零件化 - 最终呈现给用户是一个完整的产品(由各个零件组成的) 降低生产成本 – 多人协作(每个人各司其职) 降低使用成本 - 各个零件之间是低耦合的 组件化 - 将一个完整的产品划分成各个组件 前端开发中更多是指HTML页面和CSs样式 模块化 - 将一个完整的产品划分成各个模块 前端开发中更多是指JavaScript逻辑 组件化与模块化的关系 将一个完整的产品,划分成若干的组件 将每一个组件划分成若干的模块 组件化与模
2020-10-29 14:51:32
304
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人