- 博客(73)
- 收藏
- 关注
RSS订阅原创 Vue移动端项目--瑞幸咖啡重构优化
瑞幸咖啡是之前做过的一个vue移动端项目，项目也是比较粗浅，结构比较混乱。之所以重构代码，一方面是对自己的一个总结，另一方面也是为了众多前端初学者行一个方便之举，能够更好地实战vue框架。
2023-07-22 14:38:15
1471
3
原创 wangEditor介绍（入门级）
一、什么是富文本编辑器？相信很多小伙伴都用过富文本编辑器。富文本编辑器（Rich Text Editor，RTE）是一种可内嵌于浏览器，所见即所得的文本编辑器。可以实现很多功能，如改变字体颜色，插入图片视频等，应用十分广泛。市场上主流的编辑器也有不少，如TinyMCE，CKEditor，wangEditor等。每一款都有独特的地方，只有使用过才体会深刻。今天，我们主要介绍wangEditor。因为最近项目中集成了wangEditor，所以作为新手，将使用体会记录如下。二、wangEditor介绍wan
2022-04-02 18:38:01
8633
3
原创 React项目-点餐后台管理系统-react框架实现后台管理系统(包含权限处理)--新手入坑必看！（一）
点餐后台管理系统（react）一、前言二、项目介绍三、相关技术四、项目实现的功能一、前言之前也写过一个vue项目的博客，说实话确实写的一般，不过我也是尽我所能去写了。今天，我们用react写一个后台管理系统。依然是新手入门版，大佬可以划走了。首先，我们要明确一个概念，什么是后台管理系统？简单概括，后台管理系统是相对于前台系统（也就是我们常见的应用等）而言的，如美团APP，就有相应的后台管理系统，负责商家管理等等。vue和react作为现如今前端最火的两大框架，无疑是前端开发人员必学的内容之一。温
2021-09-28 18:39:47
5728
8
原创 React入门（十三）之权限
权限1、理解权限2、后台管理系统里的权限3、React项目实现功能级权限3.1、实现思路（react）3.2、实现步骤4、Vue项目实现功能级权限4.1、实现思路（vue）1、理解权限最近在用react做一个后台管理系统的项目，后台管理系统那肯定少不了权限。相信权限这个词大家都清楚，就是不同用户所拥有的功能和级别不同。比如说：在一个图书管理系统里，你只是普通用户，那么你可能拥有查看和搜索图书的权限；如果你是一般的管理员，那么可能拥有上架图书，修改图书的权限；如果你是老板，那么你可能拥有任命管
2021-09-19 10:52:37
4206
原创 React入门（十二）之typescript
typescript1、typescript介绍2、特点3、说起typescript你是不想到了javascript呢，没错，它们确实是有关系的，具体是什么，往下看！1、typescript介绍学了这么久的javascript，相信你已经知道了javascript是一门弱类型语言。强类型语言就是声明变量的同时限制数据类型，而弱类型语言则相反，对于数据类型的限制并不那么严格。比如你定义了一个变量，但是赋值的时候可以赋任何类型的数据，而强类型就比较严格了，是什么类型就必须严格匹配。typescrip
2021-09-16 17:16:25
2003
原创 react-scripts不是内部或外部命令,也不是可运行的程序解决
react-scripts不是内部或外部命令,也不是可运行的程序解决错误描述：这个bug是在每次npm 安装新的包重新npm start时报的错；错误分析：1、首先这是在react脚手架里，react-scripts肯定是安装好了的，2、其次，在node_modules中也能够看到，说明react-scripts并没有问题啊，那为什么会报这个错？？？？没办法，百度吧！错误原因：百度搜到的解决方案都是说react脚手架里使用npm i 安装包时可能会有丢包的可能，虽然我也不知道为啥会这样。
2021-09-14 17:49:46
5258
1
原创 react二级路由配置正确不显示页面的问题解决
react二级路由配置正确不显示页面的问题解决最近在写react项目，配置二级路由时出了一个小小的bug,虽然是一个小小的bug,但是也苦思大半天不得其解。直到第二天豁然开朗，才发觉就这？？问题描述：在写react二级路由时，配置没有任何问题，（地址栏地址已经变了）但是页面就是不显示。错误展示：一级路由：二级路由：然后就，地址栏正常变，二级页面死活不出来，把二级路由配置注掉又能出来。。。。在百度了n条解决方案后，终于发现问题所在。解决：其实解决方案特别简单，因为我在二级路由配置中加
2021-09-14 17:26:51
4182
原创 React入门（十一）之immutable
immutable一、immutabl1.1、Immutable.js介绍1.2、Immutable优缺点1.3、Immutable 中常用类型(Map，List)1.3.1、Map1.3.2、List1.4、Immutable 中常用方法1.5、Immutable + Redux 的开发方式二、mobx2.1、介绍2.2、装饰器Decorator2.3、mobx成员2.4、mobx-react成员2.5、Mobx 的使用一、immutabl1.1、Immutable.js介绍更多详情请参考 immu
2021-09-14 16:34:44
993
原创 React入门（十）之redux
redux1、redux介绍2、redux成员3、流程总结5、提取并定义 **Action Creators****action里处理异步**6、combineReducers提取reducer7、react-redux**react-redux的API**最佳实现1、redux介绍状态管理，类似于vue中的vueX。Redux是为javascript应用程序提供一个可预测（根据一个固定的输入，必然会得到一个固定的结果）的状态容器。可以运行于服务端，客户端，原生应用，从Flux演变而来；集中
2021-09-12 10:01:15
451
原创 React入门（九）之hooks
react hooks1、Hooks 介绍2、使用规则3、useState （使用状态）4、useEffect 处理副作用 （生命周期）1、Hooks 介绍想看官方文档戳这里==》首先我们要知道函数组件是无状态组件，是无法操作state的。react hooks是v16.8新增的特性，简单概括，使用hooks可以在函数组件里操作state 和react的其他特性（如：生命周期的钩子函数）。其本质就是个函数。2、使用规则Hook可以在不编写类（组件）的情况下使用状态（state）和其他Re
2021-09-09 22:58:54
889
1
原创 React入门（八）之路由
路由一、路由1.1、路由传参1.2、路由上下文1.3、非路由跳转的组件获取路由上下文1.4、exact属性1.5、4041.6、Switch1.7、Redirect二、选择器冲突解决方案2.1、命名空间 BEM2.2、模块化2.3、scss三、async和await一、路由路由的基本使用我们已经讲过了，现在讲讲路由传参。1.1、路由传参路由传参完成的是组件之间的数据传递（组件传值）1）、params 路由配置<Route path='/Inbox/:id' component=
2021-09-08 22:53:19
657
2
原创 React入门（七）之路由(react-router)
路由一、路由1.1、作用1.2、路由模块1.3、路由模式1.4、和vue路由的对比1.5、路由配置1.6、路由的跳转1.7、基本使用步骤1.8、二级路由一、路由路由的作用（实现组件间的跳转）相信大家都清楚了，在react里同样有路由，今天简单介绍一下路由的基本使用。1.1、作用在SPA（单页面应用）里，实现组件（页面）跳转。1.2、路由模块react-router提供了两种路由模块，我们常用第二种。1)．React-Router：提供了一些router的核心API，包括Router, Rou
2021-09-07 20:30:02
1006
1
原创 React入门（六）之axios封装
axios封装1、axios的封装1、axios的封装之前在vue里我们使用过axios发请求，但是在实际开发中，都会对axios进行封装。步骤较简单：在src目录下创建utils/service.js路径；import axios from "axios"// 创建axios 赋值给常量service const service = axios.create({ baseURL: 共同的路径(url), timeout: （超时时间，纯数字，单位毫秒） head
2021-09-06 19:03:35
1094
原创 React入门（五）之状态树传参
状态树传参1、context 状态树传参1.1、解释1.2、从父朝子传值（外朝内）1.3、在子组件改变状态树的数据2、高阶组件（HOC）的构建与应用1、context 状态树传参1.1、解释 Context 旨在共享一个组件树，可被视为 “全局” 的数据，达到越级传递，场景：当前经过身份验证的用户，主题或首选语言，包括管理当前的 locale，theme，或者一些缓存数据。createContext()：用于创建context对象（上下文），需要一个defaultValue的
2021-09-03 16:06:20
602
1
原创 React入门（四）之组件传值
组件传值一、官方脚手架使用1.1、使用流程1.2、目录解析1.3、打包1.4、解构出配置文件1.5、调试工具，安装react-dev-tools1.6、环境配置1.7、资源限制1.8、在脚手架里做项目的步骤二、性能优化三、组件传值3.1、父子组件通信方式3.2、非父子组件通信方式一、官方脚手架使用之前我们已经说过脚手架的安装，今天再详细介绍一下脚手架的安装及使用。1.1、使用流程1）、安装 create-react-appnpm install create-react-app -g | yarn
2021-09-02 16:29:27
718
原创 React入门（三）之双向绑定
双向绑定一、受控元素（组件）1.1、双向绑定1.2、双向绑定的封装二、非受控元素(组件)三、生命周期及其钩子函数3.1、初始化阶段 (挂载)3.2、运行中阶段（更新）（相当于vue中更新阶段）3.3、销毁阶段（卸载）一、受控元素（组件）简单概括，受控元素就是一个标签（组件）里用了react 里的东西。比如，表单的value受控，受数据控制。实例代码：<script src="../js/react.js"></script><script src="../js/re
2021-09-01 18:03:13
6677
原创 React入门（二）之有（无）状态组件
事件处理一、无状态组件二、有状态组件三、事件处理3.1、特点3.2、事件语法3.2.1、格式3.2.2、事件处理函数里的this问题3.3、事件对象3.4、阻止浏览器的默认行为四、组件的内容五、refs一、无状态组件无状态组件就是组件内部没有（或不需要）state，无状态组件也可以理解为展示组件，仅做展示用。函数组件其实就是无状态组件。<script src="../js/react.js"></script><script src="../js/react-dom.
2021-08-31 16:14:44
462
原创 React入门（一）之基本语法（内容较多）
React入门（一）一、介绍React1.1、简介1.2、特点1.3、与其他框架对比二、搭建环境2.1、通过引入文件的方式2.2、通过官方脚手架的方式2.3、第三方脚手架三、JSX3.1、ReactDOM.render()函数3.2、JSX介绍3.3、JSX特点3.4、JSX的语法3.4.1、XML基本语法3.4.2、元素类型3.4.3、元素属性3.4.4、javascript表达式四、条件渲染五、列表渲染5.1、渲染数组5.2、map()或者普通for循环六、组件6.1、函数组件6.2、类组件6.3、ES
2021-08-30 20:52:13
1976
原创 Vue项目-手机app瑞幸咖啡详解（全网最细） 从脚手架搭建到前后端数据交互（二）
后续来啦！2.10、潮品页2.10.1、获取所有商品的分类2.10.2、展示某类型的所有商品（瀑布流）2.11、我的页面2.11.1、展示某一类型的商品2.11.2、获取个人信息2.12、待付款页2.13、购物车页2.13.1、显示购物车三、项目中遇到的一些问题四、项目中一些技术的实现4.1、拦截器4.2、vueX4.3、路由4.4、路由守卫4.5、反向代理4.6、mock数据五、项目开发体会2.10、潮品页潮品页面也就是从首页跳转到的二级页面，通过点击首页商品分类的更多实现跳转，静态页面效果如下：
2021-08-30 16:17:45
3724
8
原创 Vue项目-手机app瑞幸咖啡详解（全网最细） 从脚手架搭建到前后端数据交互（一）
SPA项目-瑞幸咖啡一、项目介绍1.1、基本情况1.2、实现的功能1.2.1、静态页面实现1.2.2、动态效果实现（接口）1.3、项目使用到的相关技术二、项目的业务流程（实现）2.1、登录2.1.1、登录的流程2.2、首页2.2.1、首页轮播图源码2.2.2、点击商品分类获取商品2.3、详情页（商品详情）2.4、详情页（获取评论）2.5、详情页（加入购物车）2.6、菜单页2.6.1、商品的显示（经典菜单）2.6.2、商品的显示（瑞纳冰季）2.6.3、显示商品详情2.7、地址页2.7.1、显示地址2.7.2、
2021-08-28 17:33:52
9609
32
原创 nodeJS入门（五）之socket介绍
Socket1.1、socket介绍1.2、socket的通讯流程1.3、webSocket1.4、webSocket对象介绍1.4.1、属性1.4.2、事件1.4.3、方法1.5、使用步骤1.6、socket.io今天将会是nodeJS系列最后一篇博客，毕竟前端才是No.1~hiahia1.1、socket介绍socket：插座；网络上的两个程序通过一个双向（全双工）的通信连接实现数据的交换，这个连接的一端称为一个socket。就像用座机打电话，给两个座机都插上电话线，就可以打电话，即语音信息的交
2021-08-27 19:20:15
4804
2
原创 nodeJS入门（四）之身份验证
身份验证一、bcrypt模块1.1、简单介绍一下1.2、安装1.3、加密二、身份验证2.1、session（会话）2.1.1、session实现身份验证的思路2.1.2、session的业务流程2.1.3、express-session2.2、token2.2.1、实现思路2.2.2、实现步骤2.3、session vs token2.4、保存信息给浏览器（cookie）三、文件上传3.1、基本思路3.2、multer中间件四、BSR&&SSR&&SEO4.1、BSR4.2、
2021-08-26 21:15:01
1014
2
原创 nodeJS入门（三）之MVC项目架构
MVC一、MVC1.1、mvc介绍1.2、web开发中的架构1.2.1、耦合架构1.2.2、半分离架构1.2.3、分离架构二、restful规范2.1、概念2.2、优点2.3、规范一、MVC一种项目架构模式。项目分层，不同的层职责也不同。其实，之前学习vue的时候也提到过，看过我的博客vue入门系列的应该知道！1.1、mvc介绍C：controller，控制器。（控制的就是某个功能的业务流程）routers文件夹下的文件。根据业务流程，调用不同的模块完成对应的功能。V：view：视图（显示）
2021-08-25 19:01:15
1926
2
原创 nodeJS入门（二）之mongoDB
mongoDB一、后端渲染1.1、模板引擎1.2、ejs1.2.1、ejs介绍1.2.2、ejs特点1.2.3、原理1.2.4、使用1.2.5、ejs模板文件语法1.3、前后端交互流程二、数据库2.1、node + mysql客户端2.2、mongoDB（重点）2.2.1、介绍mongodb2.2.2、安装及配置2.2.3、mysql 对比 mongodb2.2.4、mongodb基本命令2.2.5、node+mongodb一、后端渲染前端根据后端返回的json数据，然后来生成html被称为前端渲染，而
2021-08-24 19:52:04
1317
2
原创 nodeJS入门（一）之web服务器开发
web服务器开发一、nodeJS1.1、服务器1.2、web服务端保存的资源1.3、web服务器的作用1.4、nodeJS（铺垫完毕）1.4.1、正式介绍nodeJS1.4.2、nodeJS优劣势1.4.3、特点1.4.4、安装二、web服务器开发2.1、搭建服务器 （http模块）2.2、静态资源托管（fs模块）2.3、path模块2.3、动态资源（接口实现）一、nodeJS1.1、服务器服务器就是提供服务的，有web服务器等1.2、web服务端保存的资源有静态资源（.html,.css,.js
2021-08-23 23:37:33
1338
原创 Vue入门（十一）之移动端事件
vueX补充及移动端事件1、vueX补充2、postman3、移动端事件3.1、click事件（单击事件）3.2、touch类事件（触摸事件）3.3、touch的优先级高于click3.4、阻止click事件的触发3.5、点透3.6、第三方的移动端事件库4、下拉刷新上拉加载（Better-scroll）1、vueX补充mapState, mapGetters, mapActions, mapMutations昨天我们讲到vueX的基本使用，当一个组件需要获取多个状态的时候，代码会有些重复和冗余。这时
2021-08-18 22:23:10
3761
原创 Vue入门（十）之vueX
VueX1、认识vueX2、vueX的使用场景3、vueX的核心概念（创建vueX.store对象里的配置项）4、vueX的数据流转5、vueX的基本使用步骤5.1、安装5.2、创建vueX.store对象5.3、把vueX.store对象植入到vue的根属性5.4、在组件里获取数据：5.5、组件里保存数据6、vueX的核心概念详解6.1、state6.2、Getter6.3、 Mutation6.4、Action6.5、Module7、模块（Module）里的命名空间转场效果transition请参考官
2021-08-17 23:19:29
647
原创 Vue入门（九）之动态路由
动态路由一、动态路由匹配1.1、路由传参1.2、捕获所有路由或 404 路由二、命名路由三、重定向四、路由传参（query）五、路由传参和props六、嵌套路由七、路由模式八、路由守卫8.1、全局守卫8.2、路由独享守卫(只有前置)8.3、组件内部守卫九、路由元信息十、路由懒加载一、动态路由匹配1.1、路由传参配置路由在router/index.js下const router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头，相当于在path里
2021-08-14 11:01:33
226
原创 Vue入门（八）之路由
路由一、路由1.1、路由是什么1.2、使用路由1.2.1、引入js文件的方式1.2.2、模块化的方式二、第三方组件一、路由1.1、路由是什么vue的路由使用在SPA应用中的组件跳转，相当于多页面的 a标签。详情参考官网vue路由1.2、使用路由1.2.1、引入js文件的方式引入vue-router.js文件<script src="js/vue.js"></script><script src="https://unpkg.com/vue-router/d
2021-08-12 19:43:50
265
原创 Vue入门（七）之数据交互
这里写目录标题一、项目环境（脚手架）1.1、单文件组件1.2、脚手架（vue-cli）环境搭建1.3、单页面应用（SPA）1.3.1、 单页面应用优缺点二、mock数据2.1、安装json-server三、数据交互3.1、fetch（用的较少）3.2、axios（用的较多）3.2.1、get方式3.2.2、post方式3.3、处理并发3.4、全局配置3.5、拦截器3.5.1、请求拦截器3.5.2、响应拦截器四、$nextTick();五、反向代理5.1、了解跨域时机5.2、常用的跨域解决方案：5.3、反向代
2021-08-10 20:46:30
2025
原创 Vue入门（六）之虚拟DOM
Vue入门（六）一、虚拟DOM和diff算法（原理）1.1、虚拟DOM1.1.1、什么是虚拟DOM1.1.2、为什么使用虚拟DOM1.1.3、js对象模拟真实DOM1.1.4、真实DOM和虚拟DOM的区别1.2、diff算法1.2.1、diff算法是什么1.2.2、diff算法原理二、vue对象2.1、Vue类属性和类方法2.2、Vue实例（对象）属性和方法三、生命周期和钩子函数3.1、生命周期3.1.1、认识生命周期3.1.2、生命周期的核心阶段3.2、钩子函数3.3、keep-alive一、虚拟DOM
2021-08-09 21:09:18
252
原创 Vue入门（五）之组件
组件1、组件的概念2、组件的使用（定义，注册，和使用）2.1、定义组件2.2、注册组件2.3、使用组件2.4、组件编写方式与 Vue 实例的区别：3、组件嵌套4、组件的属性4.1、使用 Prop 传递静态数据4.2、使用 Prop 传递动态数据4.3、Prop 验证4.4、单向数据流5、组件的事件6、组件的内容(插槽)6.1、单个插槽6.2、具名插槽6.3、编译作用域7、组件（间）的通信7.1、父子组件间的通信7.2、兄弟组件/无关组件间的通信8、动态组件vue的基本语法已经差不多了，我们开始学习组件。
2021-08-07 11:39:13
681
原创 Vue入门（四）之model层语法
Vue入门（四）1、计算属性2、属性检测（侦听属性）2.1、倾听属性2.2、计算属性 VS 函数 VS 属性检测3、自定义指令3.1、全局定义3.2、局部定义4、过滤器4.1、全局定义4.2、局部定义5、混入5.1、局部定义5.2、全局混入（极力不推荐）之前所讲的都是view层语法，今天所讲为model层语法！1、计算属性计算属性是什么？计算属性是一个函数，是经过元数据（data里）进一步运算后的数据，计算属性只能在模板（HTML）上使用。优点是什么？当元数据（data项的数据）不发生变
2021-08-05 22:25:53
819
原创 Vue入门（三）之响应式
Vue入门（三）1、样式操作2、非响应式情况2.1、什么是响应式2.2、非响应式的情况2.3、vue提供的非响应式解决方案(尽量不要使用)3、Vue 实现数据绑定，响应式的原理1、样式操作操作样式，就是属性绑定，只不过绑定的属性是class和style，vue中，给样式属性赋的值还可以是对象，数组。绑定格式<div v-bind:class="数据|属性|变量|表达式"></div><div v-bind:style="数据|属性|变量|表达式"></
2021-08-05 18:12:37
940
原创 Vue入门（二）之常用指令
Vue入门（二）1、列表渲染(循环指令)2、事件绑定(指令)2.1、事件绑定2.2、事件修饰符2.3、按键修饰符3、双向绑定(指令)-表单控件绑定3.1、双向绑定(指令)3.2、表单修饰符4、指令补充1、列表渲染(循环指令)v-for的各类使用情况<li v-for="(值,索引) in 数组">{{值}}/{{索引}}</li><li v-for="(对象,索引) in 数组">{{对象.key}}/{{索引}}</li><li v-fo
2021-08-04 20:36:05
179
原创 Vue入门（一）之view层语法
Vue入门（一）1、vue介绍2、vue框架的两大核心3、正式进入Vue的学习了，话不多说，直切主题！1、vue介绍是一套用于构建用户界面的渐进式框架。更多详细信息可前往官网查看。2、vue框架的两大核心数据驱动和组件化。数据驱动通过控制数据的变化来改变（驱动）DOM。3、...
2021-08-02 17:32:33
6669
原创 认识GULP
认识GULP1、什么是gulp2、安装gulp3、项目 gulp配置4、打包CSS,JS文件5、自动添加前缀6、编译 ES6 语法1、什么是gulpgulp是一个项目开发的 自动化打包构建工具。那么,什么是自动化打包构建工具?帮助我们把文件中多余的空格/换行删掉，尽可能的减小文件的体积。常见的自动化打包构建工具gulpwebpack2、安装gulp先安装一个 全局 gulp 依赖npm install -g gulp@3.9.1在项目里面安装一个项目开发依赖
2021-07-22 21:13:57
104
空空如也
div容器添加纵向滚动条后无法显示定位的二级子菜单
2023-06-29
TA创建的收藏夹 TA关注的收藏夹
TA关注的人