![](https://img-blog.csdnimg.cn/2019091813595558.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Web前端与Web全栈开发
文章平均质量分 85
分享Vue、Node、React等框架开知识
夏天又到了
这个作者很懒,什么都没留下…
展开
-
快速了解TypeScript基础
例如一些if内部的类型错误,JavaScript需要执行到对应代码才能发现,而TypeScript在写代码的过程中就能发现部分错误,因此TypeScript代码交付质量相对高一些,不过对于逻辑错误,TypeScript也是无法识别的。如果读者对Java、C#等高级编程语言有一定的了解,就会发现TypeScript借鉴了这些高级语言的语法特性,它将基于对象的JavaScript改造成了面向对象的语言,这样也就让我们使用JavaScript开发大型项目成为可能,因为它弥补了弱类型语言的缺点。原创 2024-08-20 10:40:32 · 896 阅读 · 0 评论 -
ES6之Promise对象
Promise出现的目的是解决Node.js异步编程中回调地狱的问题。要把一个函数a作为回调函数,但是该函数又把函数b作为参数,而函数b又把函数c作为参数,这样的层层嵌套称之为回调地狱。Promise是ES 6中新增的一种异步编程的解决方案,它可以将异步操作队列化,让操作按照期望的顺序执行,最终返回符合预期的结果。Promise是一个对象,它并未剥夺函数return的能力,因此无须层层传递callback进行回调来获取数据。Promise的基本结构:Promise((resolve, reject)。原创 2024-08-19 08:58:54 · 525 阅读 · 0 评论 -
Node之npm常用命令与package.json文件
在Node.js中,一个包是一个文件夹,文件夹中的package.json文件以JSON格式存储该包的相关描述。在安装包的时候,同样可以在命令后添加--save或者-S参数,这样安装包的信息将会记录在package.json文件的dependencies字段中,如图4.6所示。当package.json文件中有了依赖包的记录时,只需要运行npm install命令,系统就会自动安装所有项目需要的依赖包。通过输入npm -v命令或者npm --version命令,可以查看npm的安装版本,如图4.2所示。原创 2024-08-15 09:43:01 · 1074 阅读 · 0 评论 -
Node.js的控制台console
利用好Node.js提供的console控制台和debug,可以有效地辅助开发和定位bug。在Node.js中,console代表控制台,可以通过console对象的各种方法向控制台进行标准输出。原创 2024-08-14 09:46:22 · 1064 阅读 · 0 评论 -
Node.js中模块的加载机制
在Node.js中,凡是第三方模块都必须通过npm或yarn来下载,使用的时候可以通过require('包名')的方式来进行加载。(4)如果目录中没有index.js,就会去当前目录中的package.json文件中查找main选项中的入口文件。(5)如果指定的入口文件不存在或者没有指定入口文件,就会报错,最终模块没有被找到。(1)require方法根据模块路径查找模块,如果是完整路径,则直接引入模块。(2)如果模块后缀省略,先找同名JS文件,再找同名JS目录。模块查找规则:当模块没有路径且没有后缀时。原创 2024-08-12 16:27:38 · 1320 阅读 · 0 评论 -
Node.js中的异步API
如果异步API后面的代码执行需要依赖当前异步API的执行结果,但实际上后续代码在执行的时候异步API还没有返回结果,这个问题要怎么解决呢?例如,依次读取a.txt文件、b.txt文件。文件读取使用fs.readFile()方法,该方法的第一个参数是要读取的文件路径,第二个参数是一个回调函数。回调函数又接收两个参数:一个错误对象(如果读取失败)和文件内容。如果读取成功,错误对象会是null,而文件内容会作为第二个参数传递给回调函数。Node.js中常见的异步API有文件读取、HTTP操作。原创 2024-08-09 09:39:20 · 661 阅读 · 0 评论 -
Node.js异步编程
在Node.js中,在执行代码的时候,会将同步代码提取出来放置到同步代码执行区,将异步代码提取出来放置到异步代码执行区,然后按顺序优先执行同步代码执行区中的代码,待同步代码执行区中的代码执行完之后,再从异步代码区中把回调函数提取到回调函数队列中,最后根据先后顺序把回调函数有序放到同步代码执行区依序执行,如下图所示。同步API是只有当前API执行完成后,才能继续执行下一个API,也就是说代码会从上至下一行一行地执行。(1)获取返回值不同:同步API可以从返回值中拿到API执行的结果,但是异步API不可以。原创 2024-08-08 10:01:14 · 837 阅读 · 0 评论 -
前端基础之Grid布局
Grid布局又称为网格布局(Grid Layout),是一种现代且功能极为强大的二维网页布局系统。它将容器划分为行和列,产生单元格,然后指定元素所在的网格单元。相较于传统的布局方式如浮动布局、定位布局、Flex布局,Grid布局提供了一种更为精细和灵活的方式来实现复杂的网页布局结构。这种布局方式极大地增强了网页设计的灵活性和创造性,使得开发者能够高效构建复杂、模块化和适应性强的布局方案。Grid布局与Flex布局的相似之处在于都可以指定容器内部多个项目的位置,但两者又存在较大的区别。原创 2024-07-18 09:42:58 · 649 阅读 · 0 评论 -
前端基础之Flex布局
Flex布局全称为Flexible Box布局模式,是CSS3规范中一项革命性的强大布局技术。它以“弹性”为核心理念,旨在提供一种更为灵活且功能丰富的设计解决方案。运用Flex布局的容器具备卓越的适应性,能够根据设备屏幕宽度的多样性进行动态调整,无论是桌面显示器、平板电脑还是智能手机,都能完美适配并展现最佳视觉效果。在Flex布局的框架下,容器能够智能地伸缩其内部子元素的宽度和高度,并对子元素的排列方式进行灵活调控,从而使得整体布局能够在各种复杂场景中充分利用空间资源,实现高效的空间填充与布局优化。原创 2024-07-17 09:21:39 · 968 阅读 · 0 评论 -
【图书推荐】《HTML5+CSS3 Web前端开发与实例教程(微课视频版)》
本书秉承“思政引领,立德树人”的教育理念,自然融入多维度、深层次的思政元素,全面对标企业和行业需求;引入现代Web前端开发的核心技术,如Flex布局、Grid布局,以及人工智能编程插件,同时融入企业开发实践,确保学习内容与实际工作紧密相关。全书以一个完整案例为主线,结合综合项目实战操作,体现育人、应用和创新三项能力。原创 2024-07-04 11:52:52 · 1401 阅读 · 0 评论 -
【图书推荐】《Vue.js 3.x+Element Plus前端开发实战》
本书分为两篇,共14章。第一篇(第1~7章)介绍Vue.js 3和Element Plus相关的基础知识,其中包含Vue .js 3的基础知识、Vue.js 3生态Vue Router和Vuex的相关知识与应用、Element Plus常用组件的使用方法以及Vue.js 3和Element Plus配合使用的好处和方法,各章节通过简单的示例,使读者可以快速掌握相关知识;第二篇(第8~14章)讲解如何构建一个功能完整的单页面应用——权限管理系统,为读者掌握Element Plus打下坚实的基础。原创 2024-06-13 08:21:52 · 1481 阅读 · 0 评论 -
【图书推荐】《JSP+Servlet+Tomcat应用开发从零开始学(第3版)》
本书全面系统地介绍JSP+Servlet+Tomcat开发中涉及的相关技术要点和实战技巧。本书内容讲解循序渐进,结合丰富的示例使零基础的读者能够熟练掌握JSP+Servlet+Tomcat的应用开发和部署。配套示例代码、PPT课件、作者答疑服务。本书共分17章。第1~7章为Java Web基础开发,内容包括搭建Java Web开发环境、JSP基础语法、JSP内置对象、Servlet技术、请求与响应、会话管理、Servlet进阶API、过滤器、监听器等;原创 2024-05-10 11:04:47 · 1158 阅读 · 0 评论 -
【图书介绍】《Node.js+MongoDB+Vue.js全栈开发实战》
为了紧跟时代技术潮流,《Node.js+MongoDB+Vue.js全栈开发实战》前端部分所讲的是当前十分火热的Vue 3和TypeScript,而后端部分则是Node.js、MongoDB及其相关技术。虽然《Node.js+MongoDB+Vue.js全栈开发实战》介绍的是全栈开发,但实际上书中内容更侧重于后端。书中所涵盖的知识点是全栈开发求职面试中必须掌握的内容,而如果熟悉MongoDB,则必然是加分项。原创 2024-04-25 11:35:05 · 1583 阅读 · 4 评论 -
Vue.js3组件的方法
在Vue.js中,可以很方便地将数据使用插值表达式的方式渲染到页面元素中,但是插值表达式的设计初衷是用于简单运算,不应该对差值做过多的操作。在页面中首先使用插值渲染num的值,使用v-on指令绑定click事件,然后在事件中调用add()方法。在input中通过v-model指令双向绑定message,然后在methods选项中定义reversedMessage方法,让message的内容反转,然后使用插值语法渲染到页面中。在Vue.js 3.x中,组件的方法可以在实例的methods选项中定义。原创 2024-04-01 10:15:38 · 1290 阅读 · 1 评论 -
Vue3使用组件的计算属性设计购物车效果
商城网站中经常需要设计购物车效果。购物车页面中会显示商品名称、商品单价、商品数量、单项商品的合计价格,最后会有一个购物车中所有商品的总价。在Chrome浏览器中运行程序,选择不同的商品,并设置商品的数量后,结果如图3-20 所示。3.x+Element Plus从入门到精通(视频教学版)》,获出版社和作者授权发布。【例3.17】 使用计算属性设计购物车效果(源代码\ch03\3.17.html)。原创 2024-04-03 09:02:17 · 486 阅读 · 0 评论