当前位置：首页 > news >正文

vue生命周期、工程化开发和脚手架

news 文章来源：https://blog.csdn.net/qq_37255976/article/details/134736940 2025/5/16 14:13:49

1、前言

持续学习记录总结中，vue生命周期、工程化开发和脚手架

2、Vue生命周期

Vue生命周期：就是一个Vue实例从 创建 到 销毁 的整个过程。

生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁

1.创建阶段：创建响应式数据

2.挂载阶段：渲染模板

3.更新阶段：修改数据，更新视图

4.销毁阶段：销毁Vue实例

3、Vue生命周期钩子

Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h3>{{ title }}</h3><div><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {count: 100,title: '计数器'},// 1. 创建阶段（准备数据） //beforeCreate () {console.log('beforeCreate 响应式数据准备好之前', this.count)},created () {console.log('created 响应式数据准备好之后', this.count)// this.数据名 = 请求回来的数据// 可以开始发送初始化渲染的请求了},// 2. 挂载阶段（渲染模板）beforeMount () {console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)},mounted () {console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)// 可以开始操作dom了},// 3. 更新阶段(修改数据 → 更新视图)beforeUpdate () {console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML)},updated () {console.log('updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML)},// 4. 卸载阶段beforeDestroy () {console.log('beforeDestroy, 卸载前')console.log('清除掉一些Vue以外的资源占用，定时器，延时器...')},destroyed () {console.log('destroyed，卸载后')}})</script>
</body>
</html>

运行结果：
请添加图片描述

4、生命周期钩子小案例

1.在created中发送数据

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新闻列表</title><style>* {margin: 0;padding: 0;list-style: none;}.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;}.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;}.news .left .title {font-size: 20px;}.news .left .info {color: #999999;}.news .left .info span {margin-right: 20px;}.news .right {width: 160px;height: 120px;}.news .right img {width: 100%;height: 100%;object-fit: cover;}</style>
</head>
<body><div id="app"><ul><li v-for="(item, index) in list" :key="item.id" class="news"><div class="left"><div class="title">{{ item.title }}</div><div class="info"><span>{{ item.source }}</span><span>{{ item.time }}</span></div></div><div class="right"><img :src="item.img" alt=""></div></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 接口地址：http://hmajax.itheima.net/api/news// 请求方式：getconst app = new Vue({el: '#app',data: {list: []},async created () {// 1. 发送请求获取数据const res = await axios.get('http://hmajax.itheima.net/api/news')// 2. 更新到 list 中，用于页面渲染 v-forthis.list = res.data.data}})</script>
</body>
</html>

运行结果：
请添加图片描述

2.在mounted中获取焦点


<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>示例-获取焦点</title><!-- 初始化样式 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css"><!-- 核心样式 --><style>html,body {height: 100%;}.search-container {position: absolute;top: 30%;left: 50%;transform: translate(-50%, -50%);text-align: center;}.search-container .search-box {display: flex;}.search-container img {width:200px;margin-bottom: 30px;}.search-container .search-box input {width: 512px;height: 16px;padding: 12px 16px;font-size: 16px;margin: 0;vertical-align: top;outline: 0;box-shadow: none;border-radius: 10px 0 0 10px;border: 2px solid #c4c7ce;background: #fff;color: #222;overflow: hidden;box-sizing: content-box;-webkit-tap-highlight-color: transparent;}.search-container .search-box button {cursor: pointer;width: 112px;height: 44px;line-height: 41px;line-height: 42px;background-color: #4fc08d;border-radius: 0 10px 10px 0;font-size: 17px;box-shadow: none;font-weight: 400;border: 0;outline: 0;letter-spacing: normal;color: white;}body {background: no-repeat center /cover;background-color: #edf0f5;}</style>
</head><body>
<div class="container" id="app"><div class="search-container"><img src="https://v2.cn.vuejs.org/images/logo.svg" alt=""><div class="search-box"><input type="text" v-model="words" id="inp"><button>搜索一下</button></div></div>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {words: ''},// 核心思路：// 1. 等input框渲染出来 mounted 钩子// 2. 让input框获取焦点 inp.focus()mounted () {document.querySelector('#inp').focus()}})
</script></body></html>

运行结果：
请添加图片描述

5、案例-星辰记账清单

1.思路分析

1.基本渲染

立刻发送请求获取数据 created
拿到数据，存到data的响应式数据中
结合数据，进行渲染 v-for
消费统计 —> 计算属性

2.添加功能

收集表单数据 v-model，使用指令修饰符处理数据
给添加按钮注册点击事件，对输入的内容做非空判断，发送请求
请求成功后，对文本框内容进行清空
重新渲染列表

3.删除功能

注册点击事件，获取当前行的id
根据id发送删除请求
需要重新渲染

4.饼图渲染

初始化一个饼图 echarts.init(dom) mounted钩子中渲染
根据数据试试更新饼图 echarts.setOptions({…})

4.代码准备

 <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- CSS only --><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/><style>.red {color: red!important;}.search {width: 300px;margin: 20px 0;}.my-form {display: flex;margin: 20px 0;}.my-form input {flex: 1;margin-right: 20px;}.table > :not(:first-child) {border-top: none;}.contain {display: flex;padding: 10px;}.list-box {flex: 1;padding: 0 30px;}.list-box  a {text-decoration: none;}.echarts-box {width: 600px;height: 400px;padding: 30px;margin: 0 auto;border: 1px solid #ccc;}tfoot {font-weight: bold;}@media screen and (max-width: 1000px) {.contain {flex-wrap: wrap;}.list-box {width: 100%;}.echarts-box {margin-top: 30px;}}</style></head><body><div id="app"><div class="contain"><!-- 左侧列表 --><div class="list-box"><!-- 添加资产 --><form class="my-form"><input v-model.trim="name" type="text" class="form-control" placeholder="消费名称" /><input v-model.number="price" type="text" class="form-control" placeholder="消费价格" /><button @click="add" type="button" class="btn btn-primary">添加账单</button></form><table class="table table-hover"><thead><tr><th>编号</th><th>消费名称</th><th>消费价格</th><th>操作</th></tr></thead><tbody><tr v-for="(item, index) in list" :key="item.id"><td>{{ index + 1 }}</td><td>{{ item.name }}</td><td :class="{ red: item.price > 500 }">{{ item.price.toFixed(2) }}</td><td><a @click="del(item.id)" href="javascript:;">删除</a></td></tr></tbody><tfoot><tr><td colspan="4">消费总计： {{ totalPrice.toFixed(2) }}</td></tr></tfoot></table></div><!-- 右侧图表 --><div class="echarts-box" id="main"></div></div></div><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*** 接口文档地址：* https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058* * 功能需求：* 1. 基本渲染*    (1) 立刻发送请求获取数据 created*    (2) 拿到数据，存到data的响应式数据中*    (3) 结合数据，进行渲染 v-for*    (4) 消费统计 => 计算属性* 2. 添加功能*    (1) 收集表单数据 v-model*    (2) 给添加按钮注册点击事件，发送添加请求*    (3) 需要重新渲染* 3. 删除功能*    (1) 注册点击事件，传参传 id*    (2) 根据 id 发送删除请求*    (3) 需要重新渲染* 4. 饼图渲染*    (1) 初始化一个饼图 echarts.init(dom)  mounted钩子实现*    (2) 根据数据实时更新饼图 echarts.setOption({ ... })*/const app = new Vue({el: '#app',data: {list: [],name: '',price: ''},computed: {totalPrice () {return this.list.reduce((sum, item) => sum + item.price, 0)}},created () {// const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {//   params: {//     creator: '星辰'//   }// })// this.list = res.data.datathis.getList()},mounted () {this.myChart = echarts.init(document.querySelector('#main'))this.myChart.setOption({// 大标题title: {text: '消费账单列表',left: 'center'},// 提示框tooltip: {trigger: 'item'},// 图例legend: {orient: 'vertical',left: 'left'},// 数据项series: [{name: '消费账单',type: 'pie',radius: '50%', // 半径data: [// { value: 1048, name: '球鞋' },// { value: 735, name: '防晒霜' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]})},methods: {async getList () {const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {params: {creator: '星辰'}})this.list = res.data.data// 更新图表this.myChart.setOption({// 数据项series: [{// data: [//   { value: 1048, name: '球鞋' },//   { value: 735, name: '防晒霜' }// ]data: this.list.map(item => ({ value: item.price, name: item.name}))}]})},async add () {if (!this.name) {alert('请输入消费名称')return}if (typeof this.price !== 'number') {alert('请输入正确的消费价格')return}// 发送添加请求const res = await axios.post('https://applet-base-api-t.itheima.net/bill', {creator: '星辰',name: this.name,price: this.price})// 重新渲染一次this.getList()this.name = ''this.price = ''},async del (id) {// 根据 id 发送删除请求const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)// 重新渲染this.getList()}}})</script></body>
</html>

运行结果：
请添加图片描述

6、工程化开发和脚手架

1.开发Vue的两种方式

核心包传统开发模式：基于html / css / js 文件，直接引入核心包，开发 Vue。
工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue。

工程化开发模式优点：

提高编码效率，比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等

工程化开发模式问题：

webpack配置不简单
雷同的基础配置
缺乏统一的标准

为了解决以上问题，所以我们需要一个工具，生成标准化的配置

2.脚手架Vue CLI

基本介绍：

Vue CLI 是Vue官方提供的一个全局命令工具

可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】

好处：

开箱即用，零配置
内置babel等工具
标准化的webpack配置

使用步骤：

全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g
查看vue/cli版本： vue --version
创建项目架子：vue create project-name(项目名不能使用中文)
启动项目：yarn serve 或者 npm run serve(命令不固定，找package.json)

7、项目目录介绍和运行流程

1.项目目录介绍

请添加图片描述

虽然脚手架中的文件有很多，目前咱们只需人事三个文件即可

main.js 入口文件
App.vue App根组件
index.html 模板文件

2.运行流程

在这里插入图片描述

8、组件化开发

组件化： 一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。

好处： 便于维护，利于复用 → 提升开发效率。

组件分类： 普通组件、根组件。

比如：下面这个页面，可以把所有的代码都写在一个页面中，但是这样显得代码比较混乱，难易维护。咱们可以按模块进行组件划分

1.根组件 App.vue

整个应用最上层的组件，包裹所有普通小组件

2.组件是由三部分构成

语法高亮插件
三部分构成
- template：结构（有且只能一个根元素）
- script: js逻辑
- style：样式 (可支持less，需要装包)
让组件支持less

（1） style标签，lang=“less” 开启less功能

（2）装包: yarn add less less-loader -D 或者npm i less less-loader -D

3.普通组件的注册使用-局部注册

1.特点：

只能在注册的组件内使用

2.步骤：

创建.vue文件（三个组成部分）
在使用的组件内先导入再注册，最后使用

3.使用方式：

当成html标签使用即可 <组件名></组件名>

4.注意：

组件名规范 —> 大驼峰命名法，如 XcHeader

5.语法：

// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import XcHeader from './components/XcHeader'export default {  // 局部注册components: {'组件名': 组件对象,XcHeader:XcHeaer,XcHeader}
}

4.普通组件的注册使用-全局注册

1.特点：

全局注册的组件，在项目的任何组件中都能使用

2.步骤

创建.vue组件（三个组成部分）
main.js中进行全局注册

3.使用方式

当成HTML标签直接使用

<组件名></组件名>

4.注意

组件名规范 —> 大驼峰命名法，如 XcHeader

5.语法

Vue.component(‘组件名’, 组件对象)

例：

// 导入需要全局注册的组件
import XcButton from './components/XcButton'
Vue.component('XcButton', XcButton)

vue生命周期、工程化开发和脚手架

1、前言持续学习记录总结中，vue生命周期、工程化开发和脚手架 2、Vue生命周期 Vue生命周期：就是一个Vue实例从创建到销毁的整个过程。生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁 1.创建阶段：创建响应式数据 2.挂…...

编程日记 2023/12/1 22:11:03

文件搜索工具HoudahSpot mac中文版特点

HoudahSpot mac是一款文件搜索工具，它可以帮助用户快速准确地找到文件和文件夹，支持高级搜索和过滤，同时提供了多种视图和操作选项，方便用户进行文件管理和整理。 HoudahSpot mac软件特点高级搜索和过滤功能：软件支持…...

编程日记 2023/12/1 22:10:02

maven中scope和optional区别

文章目录 1. Scope（作用范围）：2. Optional（可选项）： 1. Scope（作用范围）： Maven的<scope>元素用于指定依赖项的作用范围，即依赖项在构建和运行时的可见…...

编程日记 2023/12/1 22:08:00

《ChatGPT实操应用大全》探索无限可能

🗣️探索ChatGPT，开启无限可能🚀 文末有免费送书福利！！！ ChatGPT是人类有史以来最伟大的发明。他能写作、绘画、翻译、看病、做菜、编程、数据分析、制作视频、解高等数学题…，他会的技能…...

编程日记 2023/12/1 22:06:57

基于helm的方式在k8s集群中部署gitlab - 部署（一）

文章目录 1. 背景说明2. 你可以学到什么？3. 前置条件4. 安装docker服务（所有节点）5. 部署k8s集群5.1 系统配置（所有节点）5.2 安装kubelet组件(所有节点)5.2.1 编写kubelet源5.2.2 安装kubelet5.2.3 启动kubelet 5.3 集…...

编程日记 2023/12/1 22:05:56

flask web开发学习之初识flask（二）

文章目录一、创建程序实例并注册路由1. 为视图绑定绑定多个URL2. 动态URL 二、启动开发服务器1. 自动发现程序实例2. 管理环境变量3. 使用pycharm运行服务器4. 更多的启动选项5. 设置运行环境6. 调试器7. 重载器一、创建程序实例并注册路由 app.py # 从flask包中导入flask类…...

编程日记 2023/12/1 22:04:55

利用异或、取反、自增bypass_webshell_waf

目录引言利用异或介绍 eval与assert 蚁剑连接进阶题目利用取反利用自增引言有这样一个waf用于防御我们上传的文件： function fun($var): bool{$blacklist ["\$_", "eval","copy" ,"assert","usort…...

编程日记 2023/12/1 22:03:54

K8s Docker实践三

单主机创建多个node 在Mac桌面上部署多个Kubernetes节点可以使用Minikube工具。Minikube是一个轻量级的Kubernetes工具，它可以在单个主机上创建一个虚拟集群。以下是在Mac桌面上使用Minikube部署多个Kubernetes节点的步骤： 安装Minikube，运…...

编程日记 2023/12/1 22:02:52

以下方法不仅适用于linux，也适用于mac 临时加速配置： pip install -i https://pypi.douban.com/simple --trusted-host pypi.douban.com matplotlib3.4.0其中可选源有： https://pypi.douban.com/simple http://mirrors.aliyun.com/pypi/sim…...

编程日记 2023/12/1 22:01:51

HarmonyOS开发—Arkts循环渲染(ForEach)深入运用详解【鸿蒙专栏-16】

文章目录 ArkTS ForEach接口详解与应用示例ForEach接口概述介绍接口描述参数说明键值生成规则默认规则组件创建规则首次渲染非首次渲染使用场景高级用法条件渲染逻辑LazyForEach的性能优化渲染结果预期ForEach的错误使用案例与性能降低渲染结果非预期渲染性能降低结语ArkTS For…...

编程日记 2023/12/1 22:00:50

uniapp挽留提示2.0

项目需求：有时候挽留的ui是全屏的，用page-container也可以。后来产品提了个问题，手机侧滑的时候没那么顺畅（就是一用侧滑，就显示出来，产品要的方案是如下图，emmm大概是这个意思） 后面…...

编程日记 2023/12/1 21:59:49

电源控制系统架构（PCSA）之系统分区电压域

目录 4.1 电压域 4.1.1 系统逻辑 4.1.2 Always-On逻辑 4.1.3 处理器Clusters 4.1.4 图形处理器 4.1.5 其他功能 4.1.6 SoC分区示例本章描述基于Arm组件的SoC划分为电压域和电源域。所描述的选择并不详尽，只是可能性的一个子集。目的是描述基于Arm组件的SoC…...

编程日记 2023/12/1 21:58:48

[Linux] 正则表达式及grep和awk

一、正则表达式 1.1 什么是正则表达式正则表达式是一种用于匹配和操作文本的强大工具，它是由一系列字符和特殊字符组成的模式，用于描述要匹配的文本模式。正则表达式可以在文本中查找、替换、提取和验证特定的模式。正则表达式和通配符的区别正则…...

编程日记 2023/12/1 21:56:45

ssm+java车辆售后维护系统 springboot汽车保养养护管理系统+jsp

以前汽车维修人员只是在汽车运输行业中从事后勤保障工作,随着我国经济的发展,汽车维修行业已经从原来的从属部门发展成了如今的功能齐备的独立企业。这种结构的转变,给私营汽修企业和个体汽修企业的发展带来了契机,私营企业和个体维修企业的加入也带动了整个汽修行业的整体水平…...

编程日记 2023/12/1 21:55:44

HNU练习七字符串编程题7. 机器人游戏

【问题描述】有人建造了一些机器人，并且将他们放置在包含n个单元的一维网格上，一个长度为n的字符串s代表了他们的编排方式，字符串中的字符既可以是.，也可以是0~9之间的一个数字字符，字符.表示开始时在相应的单元上无机…...

编程日记 2023/12/1 21:54:43

【Linux】bash 终端指令

bash # 查看当前使用的shell $ echo $SHELL /bin/bash# 查看当前发行版可以使用的shell $ cat /etc/shells 或 chsh -l /bin/sh /bin/bash /sbin/nologin /bin/zsh /bin/tcsh /bin/csh# 切换bash $ chsh -s /bin/bash# 切换zsh $ chsh -s /bin/zsh进程 $ ps aux | grep pwd w…...

编程日记 2023/12/1 21:52:41

基于SpringBoot高校心理教育辅导设计与实现

摘要随着Internet技术的发展，心理教育辅导系统应运而生，心理教育辅导系统为用户提供了一个更为便利的心理测试咨询平台。所以，为了充分满足高校学生心理教育辅导的需求，特开发了本高校心理教育辅导系统。本高校心理教育辅导系统…...

编程日记 2023/12/1 21:51:40

关于电脑提示vcruntime140_1.dll无法继续执行代码的解决办法

vcruntime140_1.dll是Visual C运行时库的一个组成部分，它包含了大量用于支持C应用程序运行时的功能。这个文件通常在开发和使用C程序时被调用，特别是在使用Microsoft Visual Studio进行开发时。vcruntime140_1.dll文件丢失或损坏会导致C程序无法正常运行…...

编程日记 2023/12/1 21:50:39

5. 链表

内存空间是所有程序的公共资源，在一个复杂的系统运行环境下，空闲的内存空间可能散落在内存各处。我们知道，存储数组的内存空间必须是连续的，而当数组非常大时，内存可能无法提供如此大的连续空间。此时链表的灵活性优势…...

编程日记 2023/12/1 21:47:34

OSI七层模型与TCP/IP四层模型的区别(计算机网络)

一、OSI七层网络模型 OSI 网络模型共有 7 层，分别是应用层、表示层、会话层、传输层、网络层、数据链路层和物理层。应用层，负责给应用程序提供统一的接口；表示层，负责把数据转换成兼容另一个系统能识别的格式；会话…...

编程日记 2023/12/1 21:46:33

Other--什么是 CGI，FastCGI、asp、jsp

文章目录 1. 了解什么是动态网页2. 什么是 CGI2.1 CGI 概念2.2 CGI 功能2.3 CGI 作用2.4 CGI 分类2.5 CGI 程序的工作原理2.6 CGI 程序的特点2.7 CGI 程序的应用领域4. 什么是 FastCGI4.1 FastCGI 概念4.2 FastCGI 程序工作原理4.3 FastCGI 对进程的管理方式4.4 FastCGI 的特点…...

编程日记 2023/12/1 21:45:32

sql关联另一个表，update表的值

sql示例： update student_score ss set ss.names.name from student s where ss.codes.code 最常见的学生成绩表 student_score通过学生student_code关联学生信息表student 学生信息表（student）： code name age gender 1001 …...

编程日记 2023/12/1 21:44:30

Python基础：JSON保存结构化数据（详解）

1. JSON概念 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，也易于机器解析和生产。虽然JSON使用JavaScript语法来描述数据对象，但是JSON仍然独立于语言和平台，JSON解…...

编程日记 2023/12/1 21:39:26

抑郁症日常如何调节？

抑郁症是一种常见的心理障碍，影响患者的情绪、思维和身体健康。以下是一些建议，帮助抑郁症患者进行日常调节： 保持积极心态：积极的心态是应对抑郁症的关键。尝试保持乐观、积极的态度，看待生活中的困难和挑战。尽管抑…...

编程日记 2023/12/1 21:35:21

hive两张表实现like模糊匹配关联

testa表(字段a)aaabbacccddddddaaatestb表(字段b)ab1. 使用likeconcat模糊配对 selecta.a from testa a ,testb b where a like concat(%,b.b,%) group by a.a2. 使用locate函数 selecta.a from testa a ,testb b where locate(b.b,a.a)>0 group by a.a3. 使用instr函数 sel…...

编程日记 2023/12/1 21:34:20

【高效开发工具系列】Hutool DateUtil工具类

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kwan 的首页,持续学…...

编程日记 2023/12/1 21:33:19

基于springcloud openfein 使用示例，包含代码和 maven 依赖配置

使用 Spring Cloud 和 OpenFeign 可以轻松实现微服务之间的通信。以下是一个简单的示例，演示如何在Spring Boot应用中使用Spring Cloud OpenFeign。首先，确保您的项目中添加了 Spring Cloud 和 OpenFeign 的依赖。这里提供 Maven 依赖配置：…...

编程日记 2023/12/1 21:32:18