自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

zhtbs的博客

技术类

  • 博客(74)
  • 资源 (16)
  • 收藏
  • 关注

原创 Vue3最佳实践 第八章 ESLint 与 测试 (TypeScript 中Jest与检测环境集成)

​Vite 已经发布很久了现在Vue3和Vite的生态正在蓬勃发展,现在很多项目中都用到了Vite +vue3+TypeScript技术栈,进行企业级的项目开发。本文将一步步帮助你创建一个标准的Vite + Vue3 + TypeScript+Jest企业级开发与测试环境。

2023-10-30 09:44:31 285 1

原创 Vue3最佳实践 第八章 ESLint 与 测试 ( Jest )

​在前端项目开发过程中,有很多时候也会要进行测试工作。本文将重点介绍如何利用 JavaScript 测试框架 Jest 进行高效的测试。Jest 是由 FaceBook 开发的顶级测试框架之一,广受开发者们的欢迎和信赖。在接下来的内容中,我们将通过简明扼要的解释和代码示例,向大家展示如何使用 Jest 这个强大的测试工具。无论你是初学者还是有经验的开发者,都能从下面的内容中获得深入的理解和实践的启发。

2023-10-30 09:28:03 604 2

原创 Vue3最佳实践 第八章 ESLint 与 测试 ( ESLint )

​在所有的JavaScript 项目开发中我们都会接触到 ESLint 这个词,ESLint 是个什么样的组件会给为项目做些什么吗?ESLint 是一种检查语法错误以及代码是否按照预定规则编写的工具。ESLint 可以帮助开发者发现代码中潜在的错误。在Vue项目中Eslint一般都会配合其他语法检测工具一起使用,最经典的组合是Eslint+ Prettier。​Eslint 和 Prettier 并不局限于 Vue.js,而是掌握 JavaScript 的必备知识,所以推荐给不懂 ESLint 的同学。

2023-10-18 12:01:22 1567 1

原创 Vue3最佳实践 第七章 TypeScript 创建Trello 任务管理器

​ 我们将探讨如何使用Vue.js从零开始创建一个类似于Trello的任务管理应用程序。如果你不熟悉Trello,它是一款非常流行的任务管理工具,允许你把任务写在卡片上,然后通过一个看板的方式来直观地管理这些任务。Trello不仅可以用于个人的任务管理,还可以作为团队协作工具,在许多公司和组织中得到了广泛的应用。我们的目标是创建一个具有Trello核心功能的应用程序,包括创建任务卡片,以及通过拖放操作来移动这些卡片,以此来改变任务的状态或优先级。

2023-10-07 10:01:20 292 1

原创 Vue3最佳实践 第七章 TypeScript 中

在Vue组件中,我们可以使用TypeScript进行各种类型的设置,包括props、Reactive和ref等。下面,让我们详细地探讨一下这些设置。

2023-10-07 09:40:11 216 1

原创 Vue3最佳实践 第七章 TypeScript 上

​ 在浏览网上的JavaScript相关文档时,大家可能已经注意到了一个趋势:越来越多的项目和教程都采用了TypeScript编写代码。对于那些没有TypeScript经验的人来说,阅读这些由TypeScript编写的代码可能会感到有些压力。​Vue3的出现无疑加剧了这种趋势。Vue3本身就是用TypeScript编写的,因此我们可以直接在Vue3中使用TypeScript,无需进行任何特殊设置。在实际的大型项目开发中使用TypeScript编写的情况会越来越普遍。

2023-10-07 09:39:19 438 1

原创 Vue3最佳实践 第六章 Pinia,Vuex与axios,VueUse 4(axios)

axios 是一个基于 Promise 的 HTTP 客户端,不仅可以与 vue.js 一起使用,还可以与其他前端框架以及后端 Node.js 一起使用。当你想从包括后端服务器在内的外部服务获取数据时,可以使用axios 中的方法很方便的获得数据内容。在本文档中,我们将介绍如何在 vue.js 版本 3 的环境中使用 axios。对于 Vue 3,它不仅解释了如何将它与 Options API 一起使用,还解释了如何将它与 Composition API 一起使用。

2023-09-27 08:52:14 515 1

原创 Vue3最佳实践 第六章 Pinia,Vuex与axios,VueUse 3(VueUse )

使用VueUse,可以通过执行导入函数返回的变量和函数,在导入组件中使用导入函数的功能。这样就完成了可组合函数的创建。特别是对于组件,有些人一开始可能会感到困惑,因为它们使用的是 scoped slots,但是一旦你理解了如何传递和接收值,我认为创建它们的难度与函数并没有那么大的不同。使用可组合函数时,我们将反应性数据和函数从可组合函数传递给导入的组件。如果你看一下VueUse的功能,有一些你可以自己创建,但是注册的功能有100多个,所以如果你没有使用它的经验,请浏览一遍,看看有没有你的功能可以用。

2023-09-27 08:50:12 572 1

原创 Vue3最佳实践 第六章 Pinia,Vuex与axios,VueUse 2(Vuex)

Vuex 是一种集中管理所有组件中数据的机制。它和Pinia一样都是解决使用 props 和 $emit 事件在组件之间传递数据时,当组件之间频繁传递,层级增加时管理数据就变得困难。Vue 的官方状态管理库已更改为Pinia,Pinia 具有与 Vue 几乎完全相同它还增强的很多API的功能。Vuex 虽然仍在维护中,但是它不会在添加的新功能了,Vuex 应用程序迁移到 Pinia它可能会是一个更好的选择。在这里我们还会讲解一下Vuex 的使用方法,以方便大家在迁移Vuex的时候更加方便。

2023-09-27 08:44:42 601 1

原创 Vue3最佳实践 第六章 Pinia,Vuex与axios,VueUse 1(Pinia)

在 Vue3 中项目中组件之间传递数据时,可以使用 Props 和 Emit,还可以使用 Provide/Inject 来代替 Props 和 Emit。Props 和 Emit 只能在具有父子关系的组件之间传递数据,所以层级越深,过程就越复杂。为了解决此类问题需要一种在所有组件之间共享数据的机制(State Management)。在原来的Vue世界中Vuex 以全局状态管理库着称,但是现在出现了一个新的存储库 Pinia,现在所有Vue3创建的新项目都建议使用 Pinia。

2023-09-27 08:44:04 1320 1

原创 Vue3最佳实践 第五章 Vue 组件应用 5 (Vue 插件)

想了解Vue插件所以你看了官方文档却看不懂,或者你想知道Vue.use()方法和插件的关系。在本文档中,我们将参照文档讲解插件制作的基础知识,了解基础知识后,我们将制作与更实用的下拉菜单和脚本加载相关的插件。读完之后,您应该知道如何创建自己的插件以及如何添加插件。

2023-09-20 09:57:16 324 1

原创 Vue3最佳实践 第五章 Vue 组件应用 4 ( provide 和 inject )

前面的知识告诉我们vue中组件之间传递值需要使用props来完成,但是props也有一定局限性。这个时候在vue3中还有另外的解决方法。那就是使用 provide 和 inject 允许父组件将数据传递给所有后代组件,而不管组件层次结构有多深。你要做的很简单,就是Props 可用于将数据从父组件传递到子组件。但是,如果从父组件到子组件传递数据的层次很深,使用props就很麻烦了。

2023-09-20 09:55:47 244 1

原创 Vue3最佳实践 第五章 Vue 组件应用 3( Slots )

要查看更多使用 Scoped Slots 的方法,我们将了解如何使用简单代码自定义表格。创建一个可重用的子组件 Table.vue。从父组件接收包含 headers 和 items 信息的 props 数组,并将其显示为表格。

2023-09-20 09:54:53 680 1

原创 Vue3最佳实践 第五章 Vue 组件应用 2 ( Emit )

本章带领大家理解组件、props、emits、slots、providers/injects,Vue 插件 等Vue组件使用的基础知识。

2023-09-20 09:48:48 1247 1

原创 Vue3最佳实践 第五章 Vue 组件应用 1( Props )

本章带领大家理解组件、props、emits、slots、providers/injects,Vue 插件 等Vue组件使用的基础知识。

2023-09-20 09:48:07 315 1

原创 Vue3最佳实践 第四章 VUE常用 UI 库 2 ( ailwind 后台框架)

上面介绍的都是国内比较优秀的UI框架,现在我们在介绍一款国外比较流行的CSS UI框架ailwind 。官方网站https://tailwindcss.com/docs/guides/vite#vue CSShttps://flowbite.com/docs/getting-started/introduction/ 。这个ailwind 架构需要自己去写一些基础组件功能,它只提供了UI样式,所以扩展新和二次开发能力比较强,适合更高水平的开发者使用。

2023-09-07 16:07:05 964 1

原创 Vue3最佳实践 第四章 VUE常用 UI 库 1 ( element-plus,Ant ,naiveui,ArcoDesign)

现在常用的前台UI 分别是以下几种,我们将从中间选择介绍几个主流的UI的用于后台的系统搭建与开发。

2023-09-07 15:37:43 1314 1

原创 Vue3最佳实践 第三章 Vue Router路由器的使用

Vue Router 是 Vue.js 的官方路由器。通过使用 Vue Router,你可以构建一个包含多个页面的应用程序。它可以样多个页面之间流畅地跳转,而无需每次移动到另一个页面时都要重新加载整个页面。Vue Router 路由是使用 Vue.js 构建单页应用项目的必备库。官网地址https://router.vuejs.org/zh/introduction.html由一个 HTML 页面组成的应用程序称为单页应用程序 (SPA)。

2023-09-07 14:01:35 741 1

原创 Vue3最佳实践 第二章 Vue3 基础语法指令

本章主要介绍vue3中的基础指令使用方式和一些开发技巧。分为基础指令,逻辑指令,列表指令,事件,MVVM数据绑定与监听。本章中所有代码例子都是在使用Vite 创建的 vue项目中来完成的。

2023-09-07 13:18:18 520 1

原创 Vue3最佳实践 第一章 Vue3项目创建 3 (Vite 创建 vue项目 )

目前,Vue.js 官网建议在创建新项目的时候要使用 Vite 而不是 Vue CLI,尽量在开发环境中以 Vite 它作为 Vue.js 的编译基础来使用。Vite 是 Vue.js 作者Evan You 制作的 webpack 的无捆绑替代品,Vite + vue 方式很可能会成为未来的vue项目主流方式。Vite官网 https://cn.vitejs.dev/地址。Vite 是一种新型前端构建工具,能够显著提升前端项目开发效率。它主要由两部分组成。

2023-09-07 13:16:20 728 1

原创 Vue3最佳实践 第一章 带你深入了解Vue3项目创建 1 (Vue CLI 创建vue项目)

Vue.js是一款广受欢迎的JavaScript框架,专为创建网站、web应用程序和管理系统等前端用户界面(UI)设计。其流行不仅因为它拥有庞大的开发者社区和丰富的学习资源,还因为它具有低学习成本和易于上手的特点。当你在使用中遇到疑问或困难时,可以轻松地找到各种解决方案和指南,这是Vue.js成为当前最主流开发框架的重要原因之一。现在,我们主要使用三种方法来创建Vue3项目,分别是Vue CLI,Webpack和Vite。接下来,我将为你详细介绍每种方法创建Vue项目环境的步骤。

2023-09-07 13:13:40 382 1

原创 Vue3最佳实践 第一章 带你深入了解Vue3项目创建 2 (使用 Webpack 5 搭建 vue项目)

在之前的文章中,我们已经了解了如何使用Vue CLI来创建Vue项目的开发环境。现在,大家已经可以轻松地运用Vue CLI来构建自己的Vue项目了。然而,你可能仍然对背后的工作原理感到困惑。接下来,我将引导你们在不使用Vue CLI的情况下,如何创建一个Vue项目环境。我们将使用Webpack工具和它的一系列打包组件来编译和打包Vue模板文件及其相关的代码。我会详细介绍如何安装Webpack,以及它是如何打包Vue模块的,并且每个步骤都会进行详尽的解释。

2023-09-07 13:03:33 552 1

原创 【Springboot 入门培训 】#19 Spring Boot 组件扫描与bean生命周期

为了进行依赖注入,Spring 创建了一个所谓的应用程序上下文。在启动期间,Spring 实例化对象并将它们添加到应用程序上下文中。应用程序上下文中的对象称为“Spring beans”或“组件”。Spring 解决了 Spring bean 之间的依赖关系,并将 Spring bean 注入到其他 Spring bean 的字段或构造函数中。那么,什么是组件扫描呢?组件扫描就是Spring框架用来发现并自动注册你的应用程序中的bean的方式。

2023-05-29 15:28:48 1006 1

原创 【教程】用 HTML JavaScript 制作 2.5D 迷宫游戏地图

  我写了一个能够随机生成迷宫的算法,得到了用户很好的反响,对大家有所帮助。我现在想将这个迷宫以2.5D游戏地图的方式呈现出来。最初我考虑使用CSS来实现这个目标,但效果并不太理想,因为我无法只将它渲染成背景,而不对整个网站进行重新排版。因此,虽然我不打算继续使用CSS来达到这个目标,但我想与大家分享如何使用CSS来按比例渲染迷宫的方法。后来,我决定使用HTML5画布功能和地图块的坐标变换来生成2.5D游戏地图。为此,我在JavaScript脚本中添加了坐标变换的脚本,分享出来希望能对大家能有所帮助。在文章

2023-05-11 10:47:09 2108 2

原创 JavaScript 特性 this与“bind“和“call“,“apply“的理解

本文的目的是帮助JavaScript初学者更好地理解"bind"方法,并帮助那些对"this"的理解不太清楚的人更好地理解"bind"方法和"this"之间的关系。特别是对于那些对"this"的理解不太清楚的人是有所帮助的。在深入学习"bind"方法之前,先查看一下MDN Web Docs中的说明。"bind"方法可以生成一个新的函数,当新函数被调用时,"this"关键字将被设置为指定的值。如果您不理解"bind"方法,即使阅读了上述说明,也可能不知所云。

2023-05-08 16:40:50 726 1

原创 JavaScript中的Object.assign与Getter,Setters 和 definePropert使用

本文介绍关于JavaScript中操作元素对象的Object.assign与Getter,Setters ,definePropert方法。通过对这些概念的理解,能帮助大家更好的理解在JavaScript中项目开发中我们是如何使用这些概念。这些基础概念也是现代JavaScript开发中必知必会的知识点,掌握它们对提供项目代码质量有很大的帮助。

2023-04-04 08:47:38 731 2

原创 JavaScript 中Proxy(代理)和Reflect(反射)基础知识

最近在Vue3项目开发中,我们经常使用与Proxy和Reflect相关的函数。这些函数以各种形式出现在Vue3 Reactivity函数、各种库和框架中。然而,对于JavaScript Proxy的概念和使用方法,许多人可能不太熟悉。因此,下面我将通过一个例子来更好地解释Proxy和Reflect的使用方法。Reflect和Proxy是EC6引入的两个新功能,可以帮助开发人员更轻松地操作和控制对象。

2023-03-31 13:04:33 1159 3

原创 大家如何理解JavaScript 中的Destructuring 使用

JavaScript 中已经推出了解构赋值(Destructuring Assignment)语法,它允许我们通过 const {name, dept } = user 这样的语句,将 user 对象中的 name 和 dept 属性提取出来并分别赋值给变量 name 和 dept。如果您习惯于使用 user.name 和 user.dept,那么一开始可能会感到非常迷惑,但是你可以使用 { } 将用户对象中的 name 和 dept 属性分别分配给 name 和 email 变量。

2023-03-31 09:53:05 318 1

原创 让大家都能理解 XMLHttpRequest

XMLHttpRequest 是一个 JavaScript 对象,它能够在浏览器和 Web 服务器之间发送和接收数据。即使在从 Web 服务器读取了所有数据之后,XMLHttpRequest 仍然可以发送和接收数据,从而实现不重新加载页面就能够重写页面内容的功能。在当今的 Web 服务中,使用 XMLHttpRequest 发送和接收数据是非常必要的。

2023-03-30 09:44:50 2704 4

原创 [ES6] 理解JavaScript中 map、forEach、filter 和 find 与箭头函数的使用

如果你是一个刚开始学习 JavaScript 的人,你可能会觉得编写箭头函数很容易。但如果在箭头函数出现之前你已经习惯了 JavaScript 的写法,那么在你适应之前,每次遇到箭头函数时,你可能需要上网搜索箭头函数的语法或整理笔记。我相信很多人都有这样的经历。然而,一旦你适应了箭头函数的写法,你就可以写出更简洁的代码,以至于在以后你可能会忘记传统的写法。在本文中,我们将讲解如何使用箭头函数和 map、forEach、find、filter 函数,帮助你掌握箭头函数的编写方法和各个函数的使用方法。

2023-03-24 15:29:28 1713 1

原创 JavaScript 中的Promise 函数

在现在的前端开发中我们常常会使用到 JavaScript Promise 函数,但是很多人都不能正确理解Promise 的是什么,只是听说过Promise 这个词。我们将通过下面的简单例子与一些实例代码来解释一下Promise,样大家能更好的理解。在学习Promise的时候,往往会和同步、异步等词一起出现。很多初学JavaScript的人,因为他们不理解异步和同步,导致了它们同时也不能正确理解Promise原理。

2023-03-21 10:34:47 967 1

原创 HMTL中使用js代码RequireJS 模板化与分层

现在的Node 开发中我们都会用到require 函数,将Node js打包生成为前端js后,前端js依然会有require 函数的存在。它会帮助我们把前端生成的javasricpt 代码进行模块化处理。如果需要在打包后的代码中修改,就需要理解require 函数的运行模式与原理。在服务器端(Node)和前端(JavaScript)开发编码中require 函数会有很大的差异,但是它们的开发思想是基本相同的,这样导致很多时候开发者在使用的时候很容易混淆它们。

2023-03-01 11:06:00 1000

原创 Q Learnin 关于机器人在巡检与点检中的最佳路线获得

本文简单介绍了在工厂生产环境中,使用巡检与点检机器人的时候,机器人的路线选择问题。通过使用Q Learnin 算法中的,随机,奖励,行为等状态训练,来完成每次任务的路线选择。

2022-10-24 11:49:09 1022 7

原创 【Springboot 入门培训 】#18 SpringBoot Cache 缓存实现

介绍几个 Spring Boot项目中使用到的主流缓存技术。

2022-10-18 10:07:29 1123 3

原创 【Springboot 入门培训】# 17 WebJars + BootStrap5 常用JS组件应用

在传统的前后一体项目开发中,大部分人会使用到BootStrap加其它JS组件的配合方式来完成页面UI功能的实现。下面介绍几种后台开发中常用到的几个JS库的使用方法。

2022-10-18 10:04:39 1897 1

原创 WPF 项目开发入门(十一)DevExpress 插件 Grid表格应用

WPF中的DevExpress 插件 Grid表格应用

2022-09-13 12:12:41 2707 1

原创 WPF 项目开发入门(十)DevExpress 插件+NHibernate 登录实现

WPF开发中最常使用的是DevExpress 插件。下面实现一个DevExpress 插件+NHibernate 操作数据库开发一个简单的用户登录与菜单框架页面功能。

2022-09-07 10:22:57 1968 1

原创 WPF 项目开发入门(九)数据库连接 NHibernate使用

C#中使用的ORM数据插件NHibernate 操作方法

2022-09-01 10:46:33 925

原创 WPF 项目开发入门(八)数据库驱动配置与数据库操作

使用原生OracleClient驱动在工具中自带驱动加载数据库

2022-08-23 15:04:02 1920 1

原创 WPF 项目开发入门(七) From表单组件

From表单组件和HTML编辑元素一样,用于编辑页面录入数据使用的组件。主要分为以下几个组件TextBlock 和 TextBox文本编辑,CheckBox复选框,RadioButton单选框,ComboBox下拉组件等组成。

2022-08-16 13:41:37 1600

Zhtbs WebJars + BootStrap5 后台常用JS组件应用

1 树形组件 1.1 TreeJS静态例子 1.2 动态生产组件 2 简单 TABEL 生成 3 分页功能 4 日期范围控件 5 FROM 属性内容 51 bootstrap5中FROM使用 52 just-validate 验证表单 53 OctaValidate 验证表单 6 提示框 7 弹出框

2022-10-14

sringbootWebjars+bootstrap5 实例代码

sringbootWebjars+bootstrap5 实例代码使用 webjar 搭建 bootstrap5 前端架构页面。非常适合大家入门bootstrap5 。

2022-06-27

12 spring boot Security Jwt 前后端分离跨域登录

12 spring boot Security Jwt 前后端分离跨域登录 代码

2022-06-02

spring Security Json 数据库登录验证

spring boot 使用 Security Json 数据库登录验证 前后端分离权限

2022-01-21

10-SpringSecurity 数据库DB验证.zip

spring boot Security 数据库连接验证代码 示例

2021-09-10

Springboot入门培训 9 登录过滤器 Security 初始化例子.zip

Springboot 登录过滤器 Security 初始化方法。zhtbs spring培训入门系列例子

2021-09-06

Framework7 Component模板与AJAX.zip

Framework7 Component模板使用示例

2021-08-30

(Framework7 移动webapp) Springboot 入门培训 7 页面路由跳转.zip

(Framework7 移动webapp) Springboot 入门培训 7 页面路由跳转.

2021-08-16

(Framework7 移动) Springboot 项目搭建 1.zip

Framework7 web app 代码

2021-08-11

普通项目springboot+ThymeleafMVC项.zip

普通项目springboot+ThymeleafMVC项

2021-08-09

maven创建springboot+ThymeleafMVC项目.zip

maven创建springboot+ThymeleafMVC项目

2021-08-09

spring boot WEB jsp普通项目例子.zip

spring boot WEB jsp普通项目例子

2021-08-08

springboot+webJSP maven项目例子.zip

springboot+webJSP maven 项目

2021-08-08

spring boot mybatis 多数据源与缓存.zip

介绍MyBatis项目中如何配置多个数据源连接数据库,以及设置sql文的二级缓存功能,配置多数据源与数据连接池等功能。

2021-07-28

springmybatis.zip

对应zhtbs 文章中的Springboot + MyBatis入门培训 1 项目运行环境配置

2021-07-21

mysql51.zip

win下的数据内容

2021-07-21

kendoDome.zip

让我们悄悄学会kendo mvvm惊艳所有人。 kendo mvvm 是最早的前端mvvm技术结构,一直在欧美流行但是在 国内关于kendo mvvm的开发资料与相关文档非常的缺乏。 导致国内开发者不太熟悉这个技术架构。 后来流行的vue与react很多mvvm架构和设计理念都是来源和借鉴了kendo 的mvvm思想。 作者提供的kendo mvvm项目开发与练习代码示例对学习前端的mvvm模式有很好的参考和实用价值。 项目中的每个示例都事mvvm使用场景中的经典案例,也可以将示例直接修改成项目,在实际中使用。 是开发者参考学习mvvm前端架构不可多得的宝贵资料,下载就是赚到,遇到这种高质量的项目代码机会不是很多。 千万不要错过。

2021-07-05

初级SQL开发指南(sql入门神作)

希望大家能通过学习对文章的学习提高一下SQL理论水平.发现大家SQL理论知识普遍很弱,都停留在初级阶段.我为大家作点贡献吧

2012-12-20

空空如也

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

TA关注的人

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