vue3项目之大事件管理系统(三) 二级路由:文章分类页,文章管理页

article/2025/6/28 14:40:02

文章目录

      • 一.文章分类页
        • 1.封装pageContainer组件
        • 2.调用PageContainer组件
        • 3.渲染文章分类页ArticleChannel
          • 封装api接口
          • 页面调用
          • 动态渲染+父传子
          • 优化:添加loading效果
          • 优化:无数据返回时的页面渲染
        • 4.添加弹层并显示弹层组件
          • 封装`ChannelEdit.vue`组件
          • 在文章列表页`ArticleChannel`调用`ChannelEdit.vue`组件
        • 5.添加和编辑功能的实现
          • 回顾:为el-form表单添加校验规则的四个步骤
          • 为弹层(`ChannelEdit`子组件)的表单添加校验规则
          • 优化:实现编辑回显功能
          • 优化:动态绑定标题内容
        • 6.提交功能的实现
          • 封装api接口
          • 页面调用:在弹层ChannelEdit中调用
        • 7.删除功能的实现
          • 封装api接口
          • 页面调用
      • 二.文章管理页
        • 1.静态页面布局
          • 表单部分
          • 表格部分
          • 分页部分
          • 优化:下拉菜单默认语言设为中文
        • 2."文章分类"的下拉菜单:封装成组件并动态渲染
          • 2.1.封装并引入新建的`ChannelSelect`组件
          • 2.1.调用"获取文章列表"接口并动态渲染下拉菜单
          • 2.3.父子通信:动态绑定el-select
        • 3."发布状态"的下拉菜单:直接写死
        • 4.Vue3中对v-model的拆分有哪些优点?
        • 5.动态渲染文章列表
          • 封装api接口
          • 页面调用
          • 动态渲染(取代表格中的模拟数据)
          • 优化:下载插件+封装日期代码+对日期格式格式化
        • 6.分页功能的实现
          • Pagination组件的使用
          • 两个触发函数
        • 7.loading功能的实现
        • 8.搜索和重置功能的实现
      • 三.添加文章的实现
        • 1.引入和封装抽屉组件
          • 从element-plus中引入抽屉
          • 封装成子组件并导入
          • 填充抽屉子组件的页面布局
        • 2.上传文件功能的实现
          • 使用URL.createObjectURL(...))实现上传
          • 修改预览图片的尺寸
        • 3.文章内容功能的实现:富文本编辑器
          • 3.1.下载和引入富文本编辑器
          • 3.2.实现添加文章的功能
      • 四.编辑文章的实现
        • 1.实现编辑的回显
        • 2.借助AI实现功能:把cover_img的格式从网络地址转换成file对象
        • 3.实现编辑的提交
      • 五.删除文章的实现
      • 六.个人中心页

一.文章分类页

article/ArticleManage.vue

1.封装pageContainer组件

把页面中头部+主体的页面结构具有通用性,封装到components/PageContainer.vue组件中,
后续在文章分类,文章管理都能调用

  • 封装该组件使用到了element-plus的el-card组件
<template><el-card class="page-container"><template #header><div class="header"><span>文章分类</span><div class="extra"><el-button type="primary">添加分类</el-button></div></div></template></el-card>
</template><style lang="scss" scoped>
.page-container {min-height: 100%;box-sizing: border-box;.header {display: flex;align-items: center;justify-content: space-between;}
}
</style>
  • 子组件的数据从父组件传过来,用props去接
<script setup>
defineProps({title: {required: true,type: String}
})
</script>
  • 设置默认插槽 default 定制内容主体.并设置具名插槽 extra 定制头部右侧额外的按钮
  <el-card class="page-container"><template #header><div class="header"><!-- **1.定制标题:*父传子*** --><span>{{ title }}</span><div class="extra"><!-- **3.定制额外按钮:具名插槽** --><slot name="extra"></slot></div></div></template><!-- ** 2.定制内容:默认插槽** --><slot></slot></el-card>
2.调用PageContainer组件
  • 在文章分类页ArticleChannel调用
  <page-container title="文章分类"><template #extra><el-button type="primary"> 添加分类 </el-button></template>主体部分是表格</page-container>
</template>
  • 在文章管理页ArticleManage调用
<template><page-container title="文章管理"><template #extra><el-button type="primary">发布文章</el-button></template>主体部分是表格el-table</page-container>
</template>

在这里插入图片描述

3.渲染文章分类页ArticleChannel
封装api接口

在这里插入图片描述

//新建api/article.js
import request from "@/utils/request";// 获取文章分类
export const articleGetChannelService = () => {return request.get('/my/cate/list')
}
页面调用
import { ref } from 'vue'
import { articleGetChannelService } from '@/api/article'
const channelList = ref([])// 存放文章分类列表的数据
//获取文章分类列表数据
const getChannelList = async () => {const res = await articleGetChannelService()channelList.value = res.data.data
}
//直接调用
getChannelList()

在这里插入图片描述

动态渲染+父传子

使用到了Element Plus的el-table组件,它是用于数据展示的核心表格组件，支持复杂数据表格的创建和交互
如何实现数据绑定:通过:data属性绑定数组数据源,并自动根据数据量生成对应行数

// 要按需引入icon图标
import { Edit, Delete } from '@element-plus/icons-vue'
// 点击编辑按钮时触发的事件
const onEditChannel = (row, $index) => {console.log(row, $index)
}
// 点击删除按钮时触发的事件
const onDelChannel = (row) => {console.log(row)
}<!-- 主体部分是表格 --><el-table :data="channelList" style="width: 100%"><!-- 序号来自--type="index" --><el-table-column label="序号" width="100" type="index"> </el-table-column><!-- prop:去data对象中找对应的属性名 --><el-table-column label="分类名称" prop="cate_name"></el-table-column><el-table-column label="分类别名" prop="cate_alias"></el-table-column><el-table-column label="操作" width="100"><!-- 自定义列:写成作用域插槽 --><!-- row就是ChannelList的每一项(相当于遍历数组时的item),$index是下标 --><template #default="{ row, $index }"><!-- 编辑按钮的图标 --><el-button :icon="Edit" circle plain type="primary" @click="onEditChannel(row, $index)"></el-button><!-- 删除按钮的图标 --><el-button :icon="Delete" circle plain type="danger" @click="onDelChannel(row)"></el-button></template></el-table-column><!-- 优化:没有数据返回时的页面渲染 --><template #empty><el-empty description="没有数据" /></template></el-table>

此处为了有数据可以渲染,应该去在线演示链接中给自己的账户添加数据,

优化:添加loading效果
// 声明变量,控制loading状态
const loading = ref(false)
//获取文章分类列表数据
const getChannelList = async () => {// 一进入页面时,先显示loading状态loading.value = true// 调用接口获取数据,并赋值给channelListconst res = await articleGetChannelService()// 数据获取成功后,隐藏loading状态loading.value = falsechannelList.value = res.data.data
}<!-- 主体部分是表格 --><el-table v-loading="loading" :data="channelList" style="width: 100%">.....</el-table>
优化:无数据返回时的页面渲染

使用到了element-plus的空状态Emtpy组件和#emtpy插槽

      <!-- 优化:没有数据返回时的页面渲染 --><template #empty><el-empty description="没有数据" /></template>

效果:
在这里插入图片描述

4.添加弹层并显示弹层组件

使用到了el-dialog组件作为用户点击"编辑"或"添加"时,跳出来的弹层
由于具有复用性,应考虑封装成一个组件,然后分别在两个点击事件中控制其显隐

封装ChannelEdit.vue组件
//article/components/ChannelEdit.vue==>注意不是全局的components文件夹<script setup>
import { ref } from 'vue'
const dialogVisible = ref(false)
//组件对外暴露一个方法open:并基于传来的参数来区分是编辑还是添加
const open = async (row) => {dialogVisible.value = true//open需要有打开弹层的功能console.log("编辑还是添加:", row)
}
//将来调用open的时候,如果没有传参,说明是添加,传参说明是编辑
//open({})==>添加:无需渲染
//open({id,cate_name,...})==>编辑,需要渲染defineExpose({//对外暴露方法open
})
</script>
<template><el-dialog v-model="dialogVisible" title="添加弹层" width="30%"><div>渲染表单</div><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary"> 确认 </el-button></span></template></el-dialog>
</template>
在文章列表页ArticleChannel调用ChannelEdit.vue组件
  • 绑定"添加分类按钮"
 <template #extra><el-button type="primary" @click='onAddChannel'> 添加分类 </el-button></template>
  • 引入和调用ChannelEdit.vue组件
// 引入弹层子组件
import ChannelEdit from '@/views/article/components/ChannelEdit.vue'
......<!-- 优化:没有数据返回时的页面渲染 --><template #empty><el-empty description="没有数据" /></template><!-- 弹层组件 --><ChannelEdit ref="dialog" />
  • 模板引用:使用ref标识获得组件实例对象
//模板引用子组件,并通过ref属性获取到子组件实例赋给dialog
const dialog = ref(null)
// 点击"添加分类"按钮时触发的事件
const onAddChannel = () => {dialog.value.open({})//点击添加按钮,调用open但不传参
}
// 点击编辑按钮时触发的事件
const onEditChannel = (row, $index) => {console.log(row, $index)dialog.value.open(row)//点击编辑按钮,调用open并传参
}
// 点击删除按钮时触发的事件
const onDelChannel = (row) => {console.log(row)
}
5.添加和编辑功能的实现
回顾:为el-form表单添加校验规则的四个步骤
先准备一个rulerForm对象,代表整个的用于提交的form数据对象
const formModel=ref({})
再准备校验规则rules
const rules={username:[//写成数组,添加几条规则都可以{required:true,message:'请输入用户名',trigger:'blur'}//失焦时校验,也可以尝试改成change]
}
绑定el-form中的:model和:rules<el-form:model='formModel':rules='rules'ref="form" size="large" autocomplete="off" v-if="isRegister"></el-form>
在与username相关的el-input中v-model,并配置prop以示生效的是哪条规则<el-form-item prop="username">表单元素input--配置图标prefix-icon<el-input v-model="formModel.username" :prefix-icon="User" placeholder="请输入用户名"></el-input></el-form-item>
为弹层(ChannelEdit子组件)的表单添加校验规则
//article/components/ChannelEdit.vue==>注意不是全局的components文件夹<script setup>
import { ref } from 'vue'
const dialogVisible = ref(false)
//组件对外暴露一个方法open:并基于传来的参数来区分是编辑还是添加
const open = async (row) => {dialogVisible.value = true//open需要有打开弹层的功能console.log("编辑还是添加:", row)
}
//将来调用open的时候,如果没有传参,说明是添加,传参说明是编辑
//open({})==>添加:无需渲染
//open({id,cate_name,...})==>编辑,需要渲染const formModel = ref({cate_name: '',cate_alias: ''
})
const rules = {//表单校验规则:非空+正则校验cate_name: [//分类名称{ required: true, message: '请输入分类名称', trigger: 'blur' },{pattern: /^\S{1,10}$/,message: '分类名必须是1-10位的非空字符',trigger: 'blur'}],cate_alias: [//分类别名{ required: true, message: '请输入分类别名', trigger: 'blur' },{pattern: /^[a-zA-Z0-9]{1,15}$/,message: '分类别名必须是1-15位的字母数字',trigger: 'blur'}]
}defineExpose({//对外暴露方法open
})
</script><template><el-dialog v-model="dialogVisible" title="添加弹层" width="30%"><div>渲染表单</div><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary"> 确认 </el-button></span></template></el-dialog><el-form :model="formModel" :rules="rules" label-width="100px" style="padding-right: 30px"><el-form-item label="分类名称" prop="cate_name"><el-input v-model="formModel.cate_name" minlength="1" maxlength="10"></el-input></el-form-item><el-form-item label="分类别名" prop="cate_alias"><el-input v-model="formModel.cate_alias" minlength="1" maxlength="15"></el-input></el-form-item></el-form>
</template>
优化:实现编辑回显功能

编辑回显是指将已存在的数据展示在编辑界面中，让用户可以查看和修改原有数据的操作流程。
其核心流程为：获取数据 → 填充表单 → 修改提交

//ChannelEdit.vue
//组件对外暴露一个方法open:并基于传来的参数来区分是编辑还是添加
const open = async (row) => {dialogVisible.value = true//open需要有打开弹层的功能console.log("编辑还是添加:", row)// 编辑回显formModel.value = {...row//是"添加"就重置,是"编辑"就存回显数据}
}
优化:动态绑定标题内容
//ChannelEdit.vue<el-dialog v-model="dialogVisible" title="添加弹层" width="30%">
改为:<el-dialog v-model="dialogVisible" :title="formModel.id?'编辑分类':'添加分类'" width="30%">
6.提交功能的实现

不论是添加还是编辑,最后都要提交,主要是弹层中的确认按钮的功能实现

封装api接口
  • 增加文章
    在这里插入图片描述
  • 更新文章
    在这里插入图片描述
//api/article.js
// 添加文章分类
export const articleAddChannelService = (data) => {return request.post('/my/cate/add', data)
}
// 编辑文章分类
export const articleEditChannelService = (data) => {return request.put('/my/cate/info', data)
}
页面调用:在弹层ChannelEdit中调用
  • 表单绑定ref标识获取DOM属性,并在添加按钮中绑定点击事件
const formRef = ref(null)//表单ref,用于校验
import { ref } from 'vue'
const dialogVisible = ref(false)
......<el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click='onSubmit'> 确认 </el-button>
.....<el-form ref='formRef' :model="formModel" :rules="rules" label-width="100px" style="padding-right: 30px">...</el-form>
  • 提交前校验
import { articleEditChannelService, articleAddChannelService } from '@/api/article'//表单提交事件
const onSubmit = async () => {//直接校验,通过才继续往下await formRef.value.validate()//区分是编辑还是添加formModel.value.id ? await articleEditChannelService(formModel.value) : await articleAddChannelService(formModel.value)ElMessage({type: 'success',message: formModel.value.id ? '编辑成功' : '添加成功',duration: 1000})dialogVisible.value = false//关闭弹层emit('success')//通知父组件刷新列表
}
  • 子传父:通知父组件刷新列表
//子:ChannelEdit
import { defineEmits } from 'vue'
const emit = defineEmits(['success'])
...emit('success')//通知父组件刷新列表//父:ArticleChannel
// 编辑成功后刷新列表数据
const onSuccess = () => {getChannelList()//重新调用:获取文章分类
}
<!-- 弹层组件 -->
<ChannelEdit @click='onSuccess' ref="dialog" />
7.删除功能的实现
封装api接口

在这里插入图片描述

// 删除文章分类
export const articleDeleteChannelService = (id) => {return request.delete('/my/cate/del', {params: {id}})
}
页面调用
import { articleGetChannelService, articleDeleteChannelService } from '@/api/article'const onDelChannel = async (row) => {// 弹窗确认提示框await ElMessageBox.confirm('你确认删除该分类信息吗？', '温馨提示', {type: 'warning',confirmButtonText: '确认',cancelButtonText: '取消'})// 调用删除接口,传入要删除的分类idawait articleDeleteChannelService(row.id)ElMessage({ type: 'success', message: '删除成功' })getChannelList()//重新调用:获取文章分类
}<!-- 删除按钮的图标 -->
<el-button :icon="Delete" circle plain type="danger" @click="onDelChannel(row)"></el-button>

二.文章管理页

在这里插入图片描述

文章管理页ArticleManage.vue

1.静态页面布局
表单部分
    <!-- 表单区域,其中label是展示给用户看的,value是提供给后台的,值通常是id --><el-form inline><!-- 分成三个el-form-item,分别是文章分类的下拉菜单,发布状态的下拉菜单和按钮区 --><el-form-item label="文章分类："><el-select><el-option label="新闻" value="111"></el-option><el-option label="体育" value="222"></el-option></el-select></el-form-item><el-form-item label="发布状态："><el-select><el-option label="已发布" value="已发布"></el-option><el-option label="草稿" value="草稿"></el-option></el-select></el-form-item><el-form-item><el-button type="primary">搜索</el-button><el-button>重置</el-button></el-form-item></el-form>
表格部分
  • 准备模拟数据
//按需引入编辑和删除的图标组件
import { Delete, Edit } from '@element-plus/icons-vue'
import { ref } from 'vue'
// 准备表格的模拟数据
const articleList = ref([{id: 5961,title: '新的文章啊',pub_date: '2022-07-10 14:53:52.604',state: '已发布',cate_name: '体育'},{id: 5962,title: '新的文章啊',pub_date: '2022-07-10 14:54:30.904',state: null,cate_name: '体育'}
])
  • 表格静态结构+用模拟数据渲染表格
    <!-- 表格区域:文章列表管理 --><!-- 使用到了el-table的data属性绑定表格数据,el-table-column是列的定义,prop是绑定的字段名 --> --><el-table :data="articleList" style="width: 100%"><!-- 1.文章标题 --><el-table-column label="文章标题" width="400"><!-- 作用域插槽--解构出row(一行的数据) --><template #default="{ row }"><!-- el-link小组件:相当于a标签 --><el-link type="primary" :underline="false">{{ row.title }}</el-link></template></el-table-column><!-- 2.分类,3.发表时间.4.状态 --><el-table-column label="分类" prop="cate_name"></el-table-column><el-table-column label="发表时间" prop="pub_date"> </el-table-column><el-table-column label="状态" prop="state"></el-table-column><!-- 5.操作:两个按钮添加点击事件 --><el-table-column label="操作" width="100"><!-- 作用域插槽--解构出row --><template #default="{ row }"><!-- 绑定事件:编辑和删除文章 --><el-button :icon="Edit" circle plain type="primary" @click="onEditArticle(row)"></el-button><el-button :icon="Delete" circle plain type="danger" @click="onDeleteArticle(row)"></el-button></template></el-table-column><template #empty><el-empty description="没有数据" /></template></el-table>
  • 绑定"编辑"和"删除"图标的点击事件
//5.操作
const onEditArticle = (row) => {console.log(row)
}
const onDeleteArticle = (row) => {console.log(row)
}
分页部分

使用到了element-plus的el-pagination组件

<el-pagination />
优化:下拉菜单默认语言设为中文

在这里插入图片描述

当前的下拉菜单默认显示信息是英文的,若改成中文,应该如何处理?
处理方法-----官网位置:配置组件>Config Provider全局配置>i18n配置--配置多语言

//在App.vue 中全局设置
<script setup>
import zh from 'element-plus/es/locale/lang/zh-cn.mjs'
</script><template><!-- 国际化处理 --><el-config-provider :locale="zh"><router-view /></el-config-provider>
</template><style scoped></style>
2."文章分类"的下拉菜单:封装成组件并动态渲染

该下拉菜单在后续的抽屉中也用到,故封装成一个通用组件,其数据都来自"获取文章列表"接口,
直接调用该接口即可,不需要在不同的父组件中调用时父传子

2.1.封装并引入新建的ChannelSelect组件
//新建components/ChannelSelect.vue组件
<template><el-select style="width: 240px"><el-option label="新闻" value="111"></el-option><el-option label="体育" value="222"></el-option></el-select>
</template>// ChannelManage.vue中引入
import ChannelSelect from '@/components/ChannelSelect.vue'<el-form-item label="文章分类："><!-- <el-select style="width: 240px"><el-option label="新闻" value="111"></el-option><el-option label="体育" value="222"></el-option></el-select> --><channel-select></channel-select></el-form-item>
2.1.调用"获取文章列表"接口并动态渲染下拉菜单
<script setup>
import { articleGetChannelService } from '@/api/article';
import { ref } from 'vue';
const channelList = ref([]);
const getChannelList = async () => {const res = await articleGetChannelService();channelList.value = res.data.data;console.log("res:", res.data.data);//用channellist渲染下拉框数据
};
getChannelList();
</script>
<template><el-select style="width: 240px"><!-- <el-option label="新闻" value="111"></el-option><el-option label="体育" value="222"></el-option> --><el-option v-for="channel in channelList" :key="channel.id" :label="channel.cate_name":value="channel.id"></el-option></el-select>
</template>
2.3.父子通信:动态绑定el-select

功能需求:用户选择了下拉菜单中的某一项后,el-select选中并显示
在这里插入图片描述
在这里插入图片描述

  • 父组件
// 定义请求参数对象
//const cateId = ref('45007');//效果:默认选中体育作为下拉菜单的默认选中项
<!-- <channel-select v-model="cateId"></channel-select> -->
/*后续会有其他类型的数据,因此做法是把这些数据放到一个对象中进行维护(根据接口"获取-文章列表"中的参数有:pagenum,pagesize,cate_id,state)
优化如下:
*/
//定义请求参数对象
const params=ref({pagenum:1,pagesize:5,cate_id:'',state:''//状态为空,表示未选中
})
<channel-select v-model="params.cate_id"></channel-select>
  • 子组件
<script setup>
import { articleGetChannelService } from '@/api/article';
import { ref } from 'vue';
const channelList = ref([]);
// 获取文章列表
const getChannelList = async () => {const res = await articleGetChannelService();channelList.value = res.data.data;console.log("res:", res.data.data);//用channellist渲染下拉框数据
};
getChannelList();
// 父传子
defineProps({modelValue: {type: [Number, String]//id可以是数字也可以是字符串}
})
// 子传父:把触发事件得到的值更新给父组件的modelValue
const emit = defineEmits(['update:modelValue'])
</script>
<template><!-- 双向绑定el-select,把v-model拆解成:modelValue属性和@update:modelValue事件 --><el-select :modelValue="modelValue" @update:modelValue="emit('update:modelValue', $event)" style="width: 240px"><!-- 使用channelList渲染下拉框数据 --><el-option v-for="channel in channelList" :key="channel.id" :label="channel.cate_name":value="channel.id"></el-option></el-select>
</template>
3."发布状态"的下拉菜单:直接写死

发布状态下拉菜单并不需要动态绑定

<el-select v-model="params.state"><el-option label="已发布" value="已发布"></el-option><el-option label="草稿" value="草稿"></el-option>
</el-select>
4.Vue3中对v-model的拆分有哪些优点?

为什么说Vue3中对v-model的拆分成modelValue和@update.modelValue,是让其更方便使用了?
上述代码中,

<el-select v-model="params.state"><el-option label="已发布" value="已发布"></el-option><el-option label="草稿" value="草稿"></el-option>
</el-select>

等价于

<el-select v-model.modelValue="params.state"><el-option label="已发布" value="已发布"></el-option><el-option label="草稿" value="草稿"></el-option>
</el-select>

实际上把.modelValue给省略了
这说明:
Vue3中,把.sync语法和:value做了合并
上例中,可以不写成.modelValue,而写成其他属性名,也可以

若写成v-model:cid,此时它就是:cid和update.cid的简写当然子组件也需要做相应地改写:
父传子:接收父组件传过来的id
defineProps({cid:{type:[Number,String]//id可以是数字或字符串}
})
//子传父:将触发事件得到的值更新给父组件
const emit=defineEmits(['undate:modelValue'],$event)<el-select//二次封装:modelValue="cid"//拆解成:modelValue@update:modelValue="emit('update:cid', $event)"//和@update.modelValue
><el-optionv-for="channel in channelList":key="channel.id":label="channel.cate_name":value="channel.id"></el-option>
</el-select>可以看到除了 :modelValue=和@update:modelValue,都改成了cid

显然,cid是父传子时,父组件的自定义属性名,随便改
至于为什么非要写成modelValue,因为在父组件中,此时可以省略:

<el-select v-model.modelValue="params.state">
<! --后面的.modelValue可以不写 -->
<el-select v-model"params.state">
5.动态渲染文章列表
封装api接口

在这里插入图片描述

/******文章管理接口***** */
// 获取文章列表
export const articleGetListService = (params) => {return request.get('/my/article/list', { params })
}
页面调用
//把之前articleList的模拟数据删掉
const articleList = ref([])
动态渲染(取代表格中的模拟数据)
优化:下载插件+封装日期代码+对日期格式格式化
6.分页功能的实现
Pagination组件的使用
两个触发函数
7.loading功能的实现
8.搜索和重置功能的实现

三.添加文章的实现

1.引入和封装抽屉组件
从element-plus中引入抽屉
封装成子组件并导入
填充抽屉子组件的页面布局
2.上传文件功能的实现
使用URL.createObjectURL(…))实现上传
修改预览图片的尺寸
3.文章内容功能的实现:富文本编辑器
3.1.下载和引入富文本编辑器
3.2.实现添加文章的功能

四.编辑文章的实现

#### 1.编辑提交:提交时发送编辑请求
#### 2.open方法中,编辑的回显
1.实现编辑的回显
2.借助AI实现功能:把cover_img的格式从网络地址转换成file对象
3.实现编辑的提交

五.删除文章的实现

六.个人中心页


http://www.hkcw.cn/article/IstxqrBveS.shtml

相关文章

成都银行14年估值大逆转 政务类业务助力逆袭

成都银行14年估值大逆转 政务类业务助力逆袭

2022年以来，中国银行业普遍面临信贷需求不足的难题，资产扩张明显放缓，但成都银行似乎并不存在这个烦恼。2021年至2024年间，上市银行（含港股）总资产合计增长了33%。其中，成都银行异军突起，成为扩张最快的商业银行——期间其总资产增长了63%，居上市银行首位。财报数据显…
阅读更多...
端午快乐还是端午安康 祝福语之争引发热议

端午快乐还是端午安康 祝福语之争引发热议

端午节这天，许多网友在互道祝福时犯了难，到底是祝“端午快乐”还是“端午安康”。其实不必太纠结。说“快乐”没问题，说“安康”也可以。设立端午节的初衷是欢乐喜庆、祛毒平安的。古诗词中也有描绘端午节快乐祥和的诗句，如《端午三殿宴群臣并序》中的“叹节气之循环，美君…
阅读更多...
百年陈韵，三代匠心——陈汇堂新会陈皮的传承与新生

百年陈韵，三代匠心——陈汇堂新会陈皮的传承与新生

百年陈韵&#xff0c;三代匠心——陈汇堂新会陈皮的传承与新生 在五邑大地氤氲的柑橘香里&#xff0c;藏着一段跨越世纪的陈皮传奇。自清末民初的货郎担起第一篓新会柑皮&#xff0c;到如今现代化仓储中静默陈化的岁月瑰宝&#xff0c;陈汇堂三代人用双手编织出一张贯通历史与…
阅读更多...
只剩几面烂墙的别墅拍出2683万 瑕疵房产高价成交

只剩几面烂墙的别墅拍出2683万 瑕疵房产高价成交

近日，在京东资产交易平台上，一栋存在瑕疵的别墅（国有建设用地使用权部分）进行了司法拍卖。起拍价为2073万元，最终以2683万元成交。照片显示，这栋别墅周围搭起了钢架，地面部分只剩几面墙，且部分墙体的钢筋裸露在外，地面散落着碎石，房屋结构已不完整。评估报告显示，此…
阅读更多...
吴宣仪《浪姐》助阵嘉宾引粉丝不满 友谊助攻惹争议

吴宣仪《浪姐》助阵嘉宾引粉丝不满 友谊助攻惹争议

近日，吴宣仪选择刘宇作为《乘风2025》总决赛的助演嘉宾，引发部分粉丝不满。吴宣仪在超话中回应称，不应将个人意愿强加于她，她的朋友来助阵应该受到热烈欢迎。她还表示未来还有很多机会，并喜欢听话不乱闹的可爱粉丝。吴宣仪1995年出生于海南海口，2016年正式出道。2018年参…
阅读更多...
SkyWalking如何实现跨线程Trace传递

SkyWalking如何实现跨线程Trace传递

一、概述 SkyWalking 的中构建 Trace 信息时会借助 ThreadLocal来存储一些上下文信息&#xff0c;当遇到跨线程的时候&#xff0c;如果 Trace 的上下文信息没有传递到新线程的ThreadLocal 中&#xff0c;那么链路就断开了。那么SkyWalking是如何解决这个问题的呢&#xff1f; …
阅读更多...
日本版安踏在中国“杀”疯了 复古潮流引领销量逆袭

日本版安踏在中国“杀”疯了 复古潮流引领销量逆袭

亚瑟士这个品牌虽然名气不如耐克和阿迪达斯，但在地铁通勤、公园晨跑和马拉松比赛中却经常看到人们穿着。亚瑟士被称为“日本版安踏”，近两年在国内越来越受欢迎。亚瑟士的国际化战略与安踏有相似之处。自2006年进入中国市场以来，亚瑟士在中国的表现一直不佳，大部分时间都在…
阅读更多...
大明湖一龙舟刚开赛就翻船 网友调侃 北方人不擅水战

大明湖一龙舟刚开赛就翻船 网友调侃 北方人不擅水战

北方人不擅长水战这一点再次得到了体现。5月31日，正值端午佳节，山东济南大明湖景区举办了一场龙舟赛，吸引了大量游客前来观赛。比赛于上午9时39分左右开始，两只龙舟敲鼓出发展开角逐。然而，刚一开始，围观的人群中就传来呼声，有游客发现一艘龙舟翻船了，比赛似乎在瞬间结…
阅读更多...
杨丞琳发文为42岁陈妍希庆生 愿好友事事顺心

杨丞琳发文为42岁陈妍希庆生 愿好友事事顺心

5月31日凌晨，杨丞琳发文为陈妍希庆生，祝福她事事顺心，每天都幸福快乐，并表示永远爱她。2月18日，陈晓和陈妍希在社交平台上宣布离婚。杨丞琳在接受采访时说，作为好友，她尊重陈妍希处理个人事务的方式。得知消息时，她和其他人一样感到意外，但作为姐妹，无论遇到什么转折…
阅读更多...
保卫处招硕士研究生 扬州大学回应 非保安岗位需专业背景

保卫处招硕士研究生 扬州大学回应 非保安岗位需专业背景

近日，有教育机构发布了一则信息，扬州大学计划在2025年招聘人事代理工作人员。其中，学校保卫处需要招聘一名从事校园消防安全与应急管理工作的人员，该岗位要求硕士研究生学历。在扬州大学信息公开网上可以找到这则招聘信息，由学校人力资源处于5月28日发布。该岗位的主要职责…
阅读更多...
专家：美断供航发漏算中国国产实力 自主创新迎突破

专家：美断供航发漏算中国国产实力 自主创新迎突破

在当今全球化时代，科技竞争成为国际竞争的核心领域。美国作为科技强国，常利用技术优势对其他国家进行技术封锁以维护自身领先地位。近期，美国突然宣布停止向中国商飞公司提供航空发动机关键技术，目标直指中国自主研发的C919大飞机。这一举措是对中国航空产业的挑战，也是国…
阅读更多...
六一儿童节前50份心愿在病房里点亮 为血液病儿童送上温暖

六一儿童节前50份心愿在病房里点亮 为血液病儿童送上温暖

六一儿童节前夕，5月30日，成都市妇女儿童中心医院血液科的护士站忙碌起来。护士和志愿者们将病房里孩子们的心愿礼物包装整齐，准备开启一场特殊的旅程——这是成都市点亮微心愿血液病儿童关爱中心与成都市妇女儿童中心医院连续第七年发起的“心愿计划”，旨在儿童节期间为住院…
阅读更多...
一文详谈Linux中的时间管理和定时器编程

一文详谈Linux中的时间管理和定时器编程

&#xff08;目录&#xff09; 先说一些在计算机中需要用到时间的地方&#xff1a;系统日志log、OS调度(时间片、定时器)等等~~ 时间的计量 计时的方式发展&#xff1a;日晷、沙漏 -> 机械钟 -> 石英振荡器、晶振 -> 铯原子钟 -> 氢原子钟 计算机中的计时方式&…
阅读更多...
88岁谢贤现身公园游玩 风采依旧

88岁谢贤现身公园游玩 风采依旧

5月27日，媒体拍摄到88岁的演艺圈“常青树”谢贤外出逛公园。他坐着轮椅出行，由两位菲佣保姆细心照料。镜头下的谢贤状态不佳，身体状况明显不如从前，即使拄着拐杖也只能缓慢行走一小段路，且需要搀扶。尽管如此，四哥的帅气依旧不减当年。他戴着一顶黑色棒球帽，这个习惯多年…
阅读更多...
泰一幼儿园发生食物中毒事件 数百学生受影响

泰一幼儿园发生食物中毒事件 数百学生受影响

当地时间5月29日，泰国乌隆他尼府一所幼儿园发生集体食物中毒事件，数百名学生出现呕吐、腹部绞痛、腹泻等症状。截至目前，已有超过200名学生出现食物中毒症状，其中88人住院治疗，3人病情严重。责任编辑：zx0001
阅读更多...
吴宣仪回应刘宇粉丝 舞台合作我做主

吴宣仪回应刘宇粉丝 舞台合作我做主

《浪姐6》的舞台从来不缺话题，这次吴宣仪邀请刘宇作为助阵嘉宾，却意外引发粉丝争议。部分粉丝在社交平台表达不满，认为两人的风格不搭，甚至担心会影响吴宣仪的表现。面对质疑，吴宣仪直接回应：“朋友来助阵应该热烈欢迎，别把个人情绪强加到我身上。”这句话瞬间点燃讨论，…
阅读更多...
被保姆拐走33年的男婴结婚了 命运的重逢

被保姆拐走33年的男婴结婚了 命运的重逢

2018年初，重庆的朱晓娟接到一个电话，询问她26年前是否丢过一个儿子。朱晓娟肯定地回答“是”，并告诉对方丢失的儿子已经被公安机关找回，现在早已长大成人。随后，记者给她发了一张照片，照片上的小孩与朱晓娟的小儿子特别像。这勾起了朱晓娟对1992年的回忆。当时，她和丈夫…
阅读更多...
xQueueSendFromISR使用

xQueueSendFromISR使用

建议&#xff1a; 在99%的应用中&#xff0c;应该始终使用标准模式&#xff1a; BaseType_t xHigherPriorityTaskWoken pdFALSE; xQueueSendFromISR(..., &xHigherPriorityTaskWoken); portYIELD_FROM_ISR(xHigherPriorityTaskWoken);
阅读更多...
46岁卡车司机在高原缺氧去世 高原司机的宿命

46岁卡车司机在高原缺氧去世 高原司机的宿命

常志荣，一个来自河南安阳的46岁卡车司机，在青藏线上不幸离世，成为热议话题。大家在微信群里转发新闻，感慨万千，仿佛在说：这就是高原司机的宿命。他成了人们口中的新故事，尽管结局悲惨。青藏线高海拔、缺氧，稍有不慎就可能送命。常志荣知道这一点，但为了养活六个孩子，…
阅读更多...
六一演出观众席C位老师独自打伞 个人行为引争议

六一演出观众席C位老师独自打伞 个人行为引争议

5月30日，贵州黔西一段“某学校六一文艺演出”的视频在网络上引发关注。视频中，坐在观众席第一排中央位置的一位女士独自打伞，而周围的人群均未撑伞，这一行为显得格外显眼。拍摄者指责该老师素质差，称多次请她放低伞但没有得到回应，打伞不仅影响了后排观众的视线，还干扰了…
阅读更多...
推荐文章

Copyright @ 2022~2023