自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(44)
  • 收藏
  • 关注

原创 美食杰项目 -- 编辑个人资料(六)

本文给大家讲解,美食杰项目中 实现编辑个人资料页的效果,和具体代码。具体实现思路:1. 在个人主页中点击编辑个人资料进入当前页2. 引入element-ui进行图片的上传3. 修改完所有信息后4. 点击保存会对个人资料进行更改5. 并跳转至个人主页

2022-11-25 16:49:53 310

原创 美食杰项目 -- 菜品信息(五)

本文给大家讲解,美食杰项目中 实现菜品信息的效果,和具体代码。具体实现思路:1. 跳转时传递菜品 id2. 根据菜品 id 进行(获取菜品详细信息,获取评论信息,发布评论,收藏/取消收藏)3. 点击收藏,判断是否收藏如果收藏则取消收藏,未收藏则收藏4. 给 input 框输入信息,点击提交发布评论信息5. 提交后的评论信息添加到开头6. 根据效果图进行渲染

2022-11-24 20:10:19 312

原创 美食杰项目 -- 个人主页(四)

本文给大家讲解,美食杰项目中 实现个人主页的效果,和具体代码。具体实现思路:1. 判断是否是本人,获取用户详情信息2. 关注,取消关注3. 点击跳转,显示(发布,收藏,粉丝,关注)4. 判断是否是跳转页,是则显示内容5. 根据示例图进行渲染

2022-11-23 19:09:24 776

原创 美食杰项目 -- 登录注册(三)

本文给大家讲解,美食杰项目中 登录注册实现的效果,和具体代码。具体实现思路:1. 引入element-ui中的登录和分页功能实现方法2. 账号密码进行双向绑定3. 登录和注册把账号密码传递过去4. 成功把token报错至本地,失败则返回失败的结果5. 点击清空input框6. 引入当前的vuex,并写出所有路由跳转7. 使用全局导航守卫和meta字段进行登录验证判断8. 判断跳转的路由是否需要登录,已登录则判断是否获取到用户信息9. 未获取则删除存储至本地的 token,

2022-11-22 08:52:05 302

原创 美食杰项目 -- 菜谱大全(二)

本文给大家讲解,美食杰项目中菜谱大全实现的效果,和具体代码。具体实现思路:1. 点击头部分类(一级路由),点击哪一个选中哪一个(二级路由)的第一个2. 点击左侧属性,如果(二级路由),选中则刷新时(一级路由)默认打开3. 根据前2两步的条件进行过滤,在右侧显示过滤后的内容4. 添加分页器效果5. 以上效果都可以使用 element-ui 实现

2022-11-18 15:57:06 293

原创 美食杰项目 -- 首页(一)

美食杰项目:首页功能的实现,具体功能有 头部,轮播图,内容:每次显示 5 个,滑动到底部则添加 5 个,直到最后。

2022-11-17 11:09:45 180

原创 React 中 Redux 详解

在一个应用中,所有的 state 都是以一个对象树的形式存在一个单一的 store 中,唯一改变 state 的办法就是触发 action,而 reducer 就是用来编写专门的函数决定每个 action 如何改变应用的 state 。reducer的作用是接受旧的 state 和 action,返回新的 state (previousState, action) => newState

2022-11-14 08:53:04 147

原创 React 路由详解

现代前端应用大部分都是SPA(单页应用程序),也就是只有一个HTML页面的应用程序。因为它的用户体验更好,对服务器的压力更小,所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能,前端路由应运而生。前端路由的功能:用户从一个视图(页面)导航到另一个视图(页面)前端路由是一套映射规则,在React中,是URL路径与组件的对应关系使用React路由简单来说,就是配置路径和组件(配对)

2022-11-11 08:56:57 329

原创 React 脚手架,生命周期

React 脚手架,生命周期:什么是脚手架编程中提到的脚手架(Scaffold),其实是一种工具,帮我们可以快速生成项目的工程化结构;每个项目作出完成的效果不同,但是它们的基本工程化结构是相似的;既然相似,就没有必要每次都从零开始搭建,完全可以使用一些工具,帮助我们生产基本的工程化模板;不同的项目,在这个模板的基础之上进行项目开发或者进行一些配置的简单修改即可;这样也可以间接保证项目的基本结构一致性,方便后期的维护;它的作用都是帮助我们生成一个通用的目录结构,并且已经将我们所需的工程环境配置

2022-11-10 09:15:36 466

原创 React 类组件,组件间的区别,有无状态组件

React 类组件,组件间的区别,有无状态组件类组件:当组件是一个类定义的时候,执行ReactDOM.render函数的原理:setState是react类组件中最常用的一个react API,使用它可以改变state从而改变页面。多次调用state,同时执行组件之间的区别:函数式组件和类组件的区别组件的状态(state)和属性(props)之间有何不同什么是有状态组件?什么是无状态组件?有状态组件无状态组件函数式无状态组件特点函数式组件的性能优化

2022-11-09 09:05:22 241

原创 React 组件内点击事件this的4种指向方法

React 组件内点击事件this的4种指向方法:通过bind改变点击事件内的this指向外部组件内this。通过箭头函数在事件内改变this指向。通过在构造函数constructor内使用bind对函数内的this重定向。通过使用箭头函数来指向外部组件内this (使用较多)

2022-11-08 10:12:27 109

原创 React 基础和 JSX 的使用

React是构建用户界面的JavaScript库:推荐使用脚手架方式。React 的特点:声明式、组件、学习一次,随处使用。React 创建引入指令:npm i react react-dom。

2022-11-07 20:16:52 99

原创 vue 中实现下拉至底部自动加载数据

vue 中经常会出现下拉至底部自动加载数据功能,给页面添加滚动事件,根据底部图标的位置进行判断优点:尽量减少请求的数据,使数据加载的更快,方便用户的使用缺点:浪费宽带,因数据过大使加载过程太慢

2022-11-04 10:19:37 240

原创 vue 过渡和动画

vue 过渡和动画为什么要学习过渡和动画:提高用户体验 与 页面的交互性。过渡:从一个状态向另一个状态插入值,新的状态替换了旧的状态从而 影响用户的行为,引导用户,帮助用户看到动作行为的反馈。

2022-11-02 11:09:40 27

原创 超详细讲解 H5 移动端适配方案

在使用单位控制页面元素大小时,可以使用固定单位px,也可以使用相对单位rem。2rem 等于html标签font-size的2倍。基于这个原理,对于需要适配屏幕等比缩放的元素可以选用rem作为单位,对于不需要等比缩放的元素依旧使用px作为单位。只要调整html标签的font-size,就能让所有使用rem单位的元素跟随着发生变化,而使用px单位的元素不受影响。问题的关键在于如何根据屏幕尺寸跳转html标签的font-size。

2022-11-01 10:55:07 46

原创 HTML5 实现自动轮播

1. 自动播放轮播图2. 点击左右移动轮播图3. 鼠标移入到标签上显示对应图片4. 移入停止轮播,左右按钮显示5. 移出左右按钮隐藏

2022-10-31 11:35:32 304

原创 Vue - Todos 案例

vue 实现 todos 具体代码思路和代码给 input 框绑定回车事件,回车后把数据请求到 vuex 中把数据保存至本地存储中给下拉箭头绑定点击事件,点击则给所有多选框进行反选判断是否选中,如果选中则禁用给数组进行过滤,然后渲染至页面中双击 input 框 则允许改变样式,平时则禁止改变

2022-10-27 17:23:49 158

原创 node.js 学习入门(08 - MySQL 数据库)

数据库(database)是用来组织、存储和管理数据的仓库。当今世界是一个充满着数据的互联网世界,充斥着大量的数据。数据的来源有很多,比如出行记录、消费记录、 浏览的网页、发送的消息等等。除了文本类型的数据,图像、音乐、声音都是数据。为了方便管理互联网世界中的数据,就有了数据库管理系统的概念(简称:数据库)。用户可以对数据库中的数据进行新增、查询、更新、删除等操作。

2022-10-26 20:07:30 557

原创 node.js 学习入门(07 - express 模块创建基本 web 服务器)

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站。Express 框架核心特性:- 可以设置中间件来响应 HTTP 请求。- 定义了路由表用于执行不同的 HTTP 请求动作。- 可以通过向模板传递参数来动态渲染 HTML 页面。

2022-10-26 11:45:28 462

原创 node.js 学习入门(06 - 发布自己的 npm 包)

注册 npm 账号在终端里执行 npm login依次输入,用户名,密码,邮箱号密码在终端中不显示,正常写就行把终端切换到要发布包的根目录上要发布包的名字不能相同运行 npm pubish发布成功

2022-10-25 08:00:00 48

原创 node.js 学习入门(05 - 模块化)

在nodejs中,应用由模块组成,nodejs中采用commonJS模块规范。1. 一个js文件就是一个模块2. 每个模块都是一个独立的作用域,在这个而文件中定义的变量、函数、对象都是私有的,对其他文件不可见。

2022-10-24 10:03:27 164

原创 node.js 学习入门(04 - http 模块创建基本的web服务器)

当应用程序(客户端)需要某一个资源时,可以向一个台服务器,通过Http请求获取到这个资源;提供资源的这个服务器,就是一个Web服务器;目前有很多开源的Web服务器:Nginx、Apache(静态)、Apache Tomcat(静态、动态)、Node.js

2022-10-23 20:44:40 605

原创 node.js 学习入门(03 - path路径处理问题)

Node.js path 模块是一个内置模块,可帮助您以独立于操作系统的方式使用文件系统路径。如果要构建支持 OSX、Linux 和 Windows 的 CLI 工具,则 Path 模块是必不可少的。

2022-10-23 20:44:18 111

原创 购物车添加抛物线效果

具体思路 1. 给添加按钮绑定点击事件 2. 获取点击事件到顶部和左部的距离 3. 并获取需要添加地方标签的位置 4. 新建一个 div 标签 5. 给 div 标签设置样式,并添加动画效果 6. 把 div 标签追加至 body 中 7. 添加动画结束时属性 8. 动画结束时删除

2022-10-21 10:40:28 84

原创 node.js 学习入门(02 - fs系统模块)

Node.js 内置的fs模块就是文件系统模块,负责读写文件。Node.js 文件系统(fs 模块)模块中的方法均有异步和同步版本,例如读取文件内容的函数有异步的 fs.readFile() 和同步的 fs.readFileSync()。异步的方法函数最后一个参数为回调函数,回调函数的第一个参数包含了错误信息(error)。建议大家使用异步方法,比起同步,异步方法性能更高,速度更快,而且没有阻塞。

2022-10-20 16:03:10 82

原创 node.js 学习入门(01 - node.js基础)

JavaScript 诞生于 1995 年,几乎是和互联网同时出现;Node.js 诞生于 2009 年,比 JavaScript 晚了 15 年左右。在 Node.js 之前,JavaScript 只能运行在浏览器中,作为网页脚本使用,为网页添加一些特效,或者和服务器进行通信。有了 Node.js 以后,JavaScript 就可以脱离浏览器,像其它编程语言一样直接在计算机上使用,想干什么就干什么,再也不受浏览器的限制了。Node.js 不是一门新的编程语言,也不是一个 JavaScript 框架

2022-10-20 15:59:32 64

原创 vue 实现页面反转到背面

点击从中间反转到背面,点击在反转回来,来回重复.具体思路: 1. 在 data 中设置一个方法,值为 false 2. 给 整个页面的 div 绑定点击事件,执行 data 里的值等于它的相反 3. 设置 css 样式(所有子元素在3D空间中呈现,背向屏幕时不可见,但占据空间,反转度数)

2022-10-19 10:37:21 77

原创 如何引入svg并使用

如何引入svg并使用

2022-10-17 15:55:36 114

原创 滚动条案例(点击跳转到指定地点,上下滑动跟随显示标题)

1. 给按钮绑定点击事件并传递下标 2. 给需要跳转的位置进行 some 循环 3. 判断点击按钮传递过来的下标是否等于 some 循环的下标 4. 等于则根据距离顶部的距离进行跳转(把需要滑动元素的 scrollTop 赋值为条件成立的标签距离顶部的距离) 5. 滑动时点击事件跟随显示 6. 给需要滑动的标签绑定 scroll 事件 7. 给点击按钮进行 some 循环 8. 判断滑动标签距离顶部的距离是否大于需要跳转的位置距离顶部的距离 9. 判断成功则给当前标签选中,其他全部取消选中

2022-10-17 15:32:36 83

原创 前端面试题

它还有一个名字叫事件代理,事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。为什么这样做呢?通过事件委托可以减少事件处理程序数量,这样就能大大的减少与dom的交互次数,提高性能;所有对象都有自己的原型对象(prototype)。一方面,任何一个对象,都可以充当其他对象的原型;另一方面,由于原型对象也是对象,所以它也有自己的原型。因此,就会形成一个“原型链”(prototype chain)

2022-10-12 17:02:09 54

原创 列表添加至购物车(Typescript React Shopping cart)

列表页面显示数据,实现按尺码进行过滤,实现价格高低排序。点击添加至购物车,实现购物车所需内容。

2022-10-11 09:28:18 270 1

原创 原生js数组去重和排序

借助新数组,判断新数组中是否存在该元素如果不存在则将此元素添加到新数组中(原数组长度不变但被按字符串顺序排序)

2022-10-10 09:10:08 50

原创 AlloyTeam(腾讯全端博客)

AlloyTeam(腾讯全端博客)大致效果:列表页面显示数据,点击跳转到对应的详情页,实现分页效果,点击回到顶部

2022-10-09 11:15:46 112

原创 vue中devTools插件安装教程

为了更方便的在开发过程中对 Vue 程序进行调试,除了传统的浏览器自带的 debug 工具以外,我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试

2022-10-01 08:00:00 573

原创 vue的导航守卫详细介绍和应用场景

在VUE官方文档中有写到 ‘导航”表示路由正在发生改变’,正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。

2022-09-30 11:25:49 170

原创 vue的滚动行为和路由元信息

使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。路由的滚动行为,它让你可以自定义路由切换时页面如何滚动。

2022-09-29 10:39:30 198

原创 vue 实现列表跳转至详情且能添加至购物车

列表页面显示数据,点击跳转到对应的详情页,详情页可以添加并跳转到购物车,购物车具有常见功能。

2022-09-28 19:58:57 542 3

原创 vue-router的基本使用方法

vue-router 是 Vue.js 官方的路由管理器,它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。当应用变得复杂以后,我们就需要通过一种便捷、高效的方式来管理应用,最常见的就是通过路由。路由:把 url 与 应用中的对应的组件进行关联,通过不同的 url 访问不同的组件

2022-09-26 20:25:14 190

原创 什么是vue-cli,vue-cli如何使用

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,习惯称之为“脚手架”。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。

2022-09-25 08:00:00 79

原创 如何创建 vue-cli 项目

官网直接下载并安装node,安装过程很简单一路下一步就行,安装完成后打开命令行(window+r,输入cmd),输入node-v 如下图出现版本号则成功。打开命令行输入:npm install vue-cli -g,安装完成后输入 vue-V(这里的‘V’是大写),如下图如果出现对应的版本号则安装成功。通过上面两步,我们需要的环境和工具都准备好了,接下来就使用vue-cli来创建项目。以上就是安装vue-cli的全过程,后续会持续发布新文章,敬请关注。

2022-09-24 08:00:00 236

空空如也

空空如也

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

TA关注的人

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