- 博客(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
237
原创 Vue -- 目录
[Vue.js] 基础[Vue.js] 基础 – 安装Vue[Vue.js] 基础 – Vue简介[Vue.js] 基础 – Vue实例[Vue.js] 基础 – 模板语法
2020-09-25 17:01:06
231
原创 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
494
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
319
原创 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
1112
原创 [React] 尚硅谷 -- 学习笔记(七)
第七章 react-ui最流行的开源React UI组件库material-ui(国外)官网GitHubant-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
395
原创 [React] 尚硅谷 -- 学习笔记(六)
第六章 react-router4理解react-routerreact的一个插件库专门用来实现一个SPA应用基于react的项目基本都会用到此库 SPA单页Web应用（single page web application，SPA）整个应用只有一个完整的页面点击页面中的链接不会刷新页面, 本身也不会向服务器发请求当点击路由链接时, 只会做页面的局部更新数据都需要通过ajax请求获取, 并在前端异步展现 路由什么是路由
2020-11-16 16:13:56
232
原创 [React] 尚硅谷 -- 学习笔记(五)
第五章 总结组件间通信通过props传递共同的数据放在父组件上, 特有的数据放在自己组件内部(state)通过props可以传递一般数据和函数数据, 只能一层一层传递一般数据–>父组件传递数据给子组件–>子组件读取数据函数数据–>子组件传递数据给父组件–>子组件调用函数使用消息订阅(subscribe)-发布(publish)机制工具库: PubSubJS下载: npm install pubsub-js --save使用import PubSub fr
2020-11-16 16:12:32
196
原创 [React] 尚硅谷 -- 学习笔记(四)
第四章 react ajax理解React本身只关注于界面, 并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互(json数据)react应用中需要集成第三方ajax库(或自己封装) 常用的ajax请求库jQuery: 比较重, 如果需要另外引入不建议使用axios: 轻量级, 建议使用封装XmlHttpRequest对象的ajaxpromise风格可以用在浏览器端和node服务器端fetch: 原生函数,
2020-11-16 16:11:20
175
原创 [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
307
原创 [React] 尚硅谷 -- 学习笔记(二)
第二章 React面向组件编程基本理解和使用自定义组件定义组件工厂函数组件(简单组件)function MyComponent () { return <h2>工厂函数组件(简单组件)</h2>}没有状态的组件ES6类组件(复杂组件)class MyComponent2 extends React.Component { render () { console.log(this) // MyComponent2的实例
2020-11-16 16:03:03
236
原创 [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
470
转载 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
1096
原创 [Vue.js] Vuex的使用
效果展示 目标Vuex概述Vuex基本使用使用Vuex完成todo案例 1.Vuex概述Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享使用Vuex管理数据的好处：能够在vuex中集中管理共享的数据，便于开发和后期进行维护能够高效的实现组件之间的数据共享，提高开发效率存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新 2.Vuex的基本使用创建带有vuex的v
2020-11-12 18:15:23
397
原创 [Vue.js]实战 -- 电商项目(八)
数据统计数据统计概述用于统计电商平台运营过程的中的各种统计数据通过直观的可视化方式展示出来，方便相关运营和管理人员查看 用户来源数据统计报表Echarts 第三方可视化库的基本使用安装echarts库// 安装echarts库 npm install echarts -S导入echarts接口// 导入echarts接口 import echarts from 'echarts' 实现用户来源数据统计报表调用接口获取后台接口数据通过ec
2020-11-11 18:33:44
315
原创 [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
551
原创 [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
411
原创 [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
285
原创 [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
373
2
原创 [Vue.js]实战 -- 电商项目(三)
权限管理权限管理业务分析通过权限管理模块控制不同的用户可以进行哪些操作，具体可以通过角色的方式进行控制，即每个用户分配一个特定的角色，角色包括不同的功能权限 权限列表展示创建对应规格在components文件夹下创建power文件夹,在此文件夹下创建Rights.vue(此vue用于开发权限管理的权限列表内容)在index.js文件下导入import Rights from "../components/power/Rights";{ path: '/r
2020-11-09 10:09:35
472
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
296
原创 [Vue.js]实战 -- 电商项目(一)
项目目录项目概述项目初始化登录/退出功能主页布局用户管理模块权限管理模块分类管理模块参数管理模块商品管理模块订单管理模块数据统计模块 项目概述电商项目基本业务概述 电商后台管理系统的功能用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。 电商后台管理系统的开发模式(前后端分离)前端项目是基于Vue技术栈的SPA项目 电商后天管理系统的技术选型前端项目技术栈VueVue-routerE
2020-11-08 15:07:34
1124
1
原创 [Vue.js] 模块化 -- 前端模块化
模块化相关规范模块化概述传统开发模式的主要问题命名冲突文件依赖通过模块化解决传统开发模式的问题模块化就是把单独的一个功能封装到一个模块(文件)中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块好处方便代码的重用提升开发效率方便后期维护 浏览器端模块化规范AMDRequire.jsCMDSea.js 服务器端模块化规范CommonJS模块分为单文件模块 和 包
2020-11-05 15:43:53
740
1
原创 ERROR in ./src/css/1.scss 1:2
又到了日常吐血环节显示我css文件报错,我怀疑我找了所有网上资料都没找到,试着自己去改一下css文件的名字果然如此改了之后,瞬间好了运行npm run dev
2020-11-05 10:58:56
741
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
581
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
741
1
原创 [Vue.js] 路由 -- 前端路由
路由的基本概念与原理路由本质是对应关系后端路由概念 : 根据不同的用户URL请求,返回不同的内容本质 : URL请求地址与服务器资源之间的对应关系SPA后端渲染（存在性能问题)Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作)SPA (Single Page Application）单页面应用程序:整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作SPA实现原理之一:基于URL地址的hash (hash的变化
2020-11-04 11:51:45
210
原创 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
4078
3
原创 [Vue.js] 深入 -- 案例 - 购物车
案例 - 购物车按照组件化方式实现业务需求根据业务功能进行组件化划分标题组件(展示文本)列表组件(列表展示、商品数量变更、商品删除)结算组件(计算商品总额)功能实现步骤实现整体布局和样式效果划分独立的功能组件组合所有的子组件形成整体结构逐个实现各个组件功能标题组件列表组件结算组件效果图展示 实现组件化布局先创建一个局部组件my-cart,在里面引入属性components,定义三个组件cart-title,cart-list,cart-to
2020-11-03 15:56:21
398
原创 [Vue.js] 深入 -- 组件化开发
组件化开发思想现实中的组件化思想体现标准分治重用组合 组件注册全局组件注册语法Vue.component(组件名称,{ data:组件数据, template:组件模板内容}) 组件用法<div id='app'> <button-counter></button-counter></div><button-counter></button-counter>可以重复
2020-11-03 14:40:10
163
原创 [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
766
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
315
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
266
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
955
原创 Vue 自定义按键修饰符对应表
Vue 自定义按键修饰符对应表按键键码8BackSpace9Tab12Clear13Enter16Shift17Ctrl18Alt19Pause20Caps_Lock27Escape32space33page up34page down35End36Home37Left38Up39Right40Down41Select42Pr
2020-11-01 10:18:06
316
原创 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
204
原创 [ES6] 细化ES6之 -- 前端模块化
前端模块化前言前端开发领域发展到目前阶段:零件化 - 最终呈现给用户是一个完整的产品(由各个零件组成的)降低生产成本 – 多人协作(每个人各司其职)降低使用成本 - 各个零件之间是低耦合的组件化 - 将一个完整的产品划分成各个组件前端开发中更多是指HTML页面和CSs样式模块化 - 将一个完整的产品划分成各个模块前端开发中更多是指JavaScript逻辑组件化与模块化的关系将一个完整的产品,划分成若干的组件将每一个组件划分成若干的模块组件化与模
2020-10-29 14:51:32
268
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人