vue学习9
1.文章分类页面-element-plus表格
- 基本架子-PageContainer封装
按需引入的彩蛋,components里面的内容都会自动注册
用el-card组件,里面使用插槽或具名插槽

- 文章分类渲染 & loading处理
序号:
<el-table-column type="index" width="50" />

loading效果:
const getChannelList = async () => {loading.value = trueconst res = await artGetChannelsService()channelList.value = res.data.dataloading.value = false
}
空内容:
<template #empty><el-empty description="没有数据" />
</template>
- 文章分类添加编辑【element-plus弹层】

<el-form
:model="formModel"
:rules="rules"
label-width="100px"
style="padding-right: 30px"
><el-form-item label="分类名称" prop="cata_name"><el-input v-model="formModel.cata_name"placeholder="请输入分类名称"></el-form-item><el-form-item label="分类别名" prop="cata_alias"><el-input v-model="formModel.cata_alias"placeholder="请输入分类别名"></el-form-item>
</el-form>

4. 添加文章分类
接口文档:
export const artAddChannelService = (data) => request.post(`/my/cata/add`, data)
编辑文档:
export const artEditChannelService = (data) => request.put(`/my/cata/info`, data)

5. 文章分类删除
请求参数:query
删除文章分类
export const artDelChannelService = (id) => request.delete(`/my/cata/del`, {params: {id}
})

2.文章管理页面-element-plus 进阶
- 文章列表渲染(带搜索&带分页)
label是给用户看的,value是收集给后台的
在form里面配置inline属性,搜索框就能在一行显示了

利用prop配置
利用作用域插槽row,可以获取当前行的数据 => v-for遍历item


获取文章列表
export const artGetListService = (params) =>request.get('/my/artticle/list', {params})
必须是大写字母,且字母不能改,必须是YYYY年MM月DD日
export const formatTime = (time) => dayjs(time).format('YYYY年MM月DD日')
最后再导入使用:

分页渲染
//处理分页逻辑
const onSize = (size) => {//只要是每页条数变化了那么原本正在访问的当页意义不大了//重新从 第一页渲染params.value.pagenum = 1params.value.pagesize = sizegetArticleList()
}

loading效果
:v-loading="loading"
- 添加文章(抽屉&文件上传&富文本)
抽屉:
<el-drawer
v-model="visibleDrawer"
title="大标题"
direction="rt1"
size="50%"
>
</el-drawer>
(1)open{{}},添加操作,添加表单初始化无数据
(2)open{{ id:xx,…}},编辑操作,编辑表单初始化需回显
准备数据,方法,form表单结构,重置添加,下拉菜单
on-change 钩子 :添加文件,上传成功和失败都会调用
富文本编辑器
<quill-editor theme="anow" v-model:content="formModel.content"></quill-editor>
添加和编辑是不一样的
父组件监听事件,重新渲染
//添加修改成功
const onSuccess = (type) => {if(type ==='add') {//如果是添加,需要跳转渲染最后一页,编辑直接渲染当前页const lastPage = Math.ceil((total.value + 1)/params.value.pagesize)params.value.pagenum = lastPage}
}
添加完成后的内容重置
3. 编辑文章(共用抽屉)
编辑文章的回显
imgUrl.value = baseURL + formModel.value.cover_img
//提交到后台,需要的是filez格式,将网络图片,转成format格式
//网络图片转成File对象,要转换
formModel.value.cover_img = await imageUrlToFile(imgUrl.value,formModel.value)else{console.log(''添加功能")
}
封装接口,用id获取数据详情->页面中调用渲染
4. 删除文章
相关文章:
vue学习9
1.文章分类页面-element-plus表格 基本架子-PageContainer封装 按需引入的彩蛋,components里面的内容都会自动注册 用el-card组件,里面使用插槽或具名插槽 文章分类渲染 & loading处理 序号: <el-table-column type"index"…...
TDengine 性能测试工具 taosBenchmark
简介工具获取运行 无参数模式命令行模式配置文件模式 命令行参数配置文件参数 通用配置参数写入配置参数 数据库相关超级表相关标签列与数据列写入行为相关 查询配置参数 执行指定查询语句查询超级表 订阅配置参数数据类型对照表 配置文件示例 写入 JSON 示例查询 JSON 示例订阅…...
【xdoj离散数学上机】T283
递归函数易错: 防止出现递归死循环! 题目 题目:求诱导出的等价关系的关系矩阵 问题描述 给定有限集合上二元关系的关系矩阵,求由其诱导出的等价关系的关系矩阵。 输入格式 第一行输入n,表示矩阵为n阶方阵,…...
Javaweb中,使用Servlet编写简单的接口
案例:网页提交用户名和密码信息,后端校验密码长度需在6-12位之间 后端部分 WebServlet("/valid") public class SimpleServlet extends HttpServlet{public void service(HttpServletRequest req, HttpServletResponse resp) throws IOExcepti…...
GESP5级语法知识(十):初级数论(三)
埃氏筛法: #include <iostream> using namespace std; const int N1e61; int pri[N]; void prime(int n){for(int i2;i*i<n;i){if(pri[i]0){ // 如果i为素数for(int jii;j<n;ji){pri[j]1; // 将i的倍数标记为合数}}} } int main(){int n;cin>>n;…...
“PEP 8: W292 no newline at end of file“报错 IntelliJ IDEA自动添加空行问题
"PEP 8: W292 no newline at end of file"报错 IntelliJ IDEA自动添加空行问题 在使用IntelliJ IDEA的过程中,经常会发现不管是对于代码文件或者纯文本文件,在保存时中会在文件末尾加上一个空行,提交GIT对比检查时,总是…...
ComfyUI工作流 FluxRedux基础换装
文章目录 FluxRedux基础换装SD模型Node节点工作流程效果展示开发与应用FluxRedux基础换装 该工作流的目标是实现服装换装功能,利用多种深度学习模型和图像处理技术,通过用户输入的服装图像和模特图像,生成逼真的换装效果图。整个工作流涵盖了从图像加载、模型编码、条件生成…...
【机器学习】常见采样方法详解
在机器学习领域,数据采样(Sampling)是一项至关重要的技术。它不仅影响模型的训练效率,还直接关系到模型的性能与泛化能力。本文将从基础概念出发,逐步深入介绍机器学习中常见的采样方法,帮助读者全面理解并…...
使用瑞芯微RK3588的NPU进行模型转换和推理
使用边缘设备进行算法落地时,通常要考虑模型推理速度,NVIDA系列平台可以使用TensorRT和CUDA加速,瑞芯微RK3588的板子上都是Arm的手机GPU,虽然没有类似CUDA的加速计算方式,但是提供了NPU进行加速推理,本文说…...
Flutter项目试水
1基本介绍 本文章在构建您的第一个 Flutter 应用指导下进行实践 可作为项目实践的辅助参考资料 Flutter 是 Google 的界面工具包,用于通过单一代码库针对移动设备、Web 和桌面设备构建应用。在此 Codelab 中,您将构建以下 Flutter 应用。 该应用可以…...
【算法学习】DFS与BFS
目录 一,深度优先搜索 1,DFS 2,图的DFS遍历 (1),递归实现(隐士栈) (2),显示栈实现(非递归) 二,广度优先搜索 1,BFS 2,图的BF…...
100.16 AI量化面试题:监督学习技术在量化金融中的应用方案
目录 0. 承前1. 解题思路1.1 应用场景维度1.2 技术实现维度1.3 实践应用维度 2. 市场预测模型2.1 趋势预测2.2 模型训练与评估 3. 风险评估模型3.1 信用风险评估 4. 投资组合优化4.1 资产配置模型 5. 回答话术 0. 承前 本文通过通俗易懂的方式介绍监督学习在量化金融中的应用&a…...
基于deepseek api和openweather 天气API实现Function Calling技术讲解
以下是一个结合DeepSeek API和OpenWeather API的完整Function Calling示例,包含意图识别、API调用和结果整合: import requests import json import os# 配置API密钥(从环境变量获取) DEEPSEEK_API_KEY os.getenv("DEEPSEE…...
线性数据结构解密:数组的定义、操作与实际应用
系列文章目录 01-从零开始掌握Python数据结构:提升代码效率的必备技能! 02-算法复杂度全解析:时间与空间复杂度优化秘籍 03-线性数据结构解密:数组的定义、操作与实际应用 文章目录 系列文章目录前言一、数组的定义与特点1.1 数组…...
CentOS搭建PPPOE服务器
一、安装软件包 yum -y install rp-pppoe 二、配置服务器 1.修改配置文件 打开/etc/ppp/pppoe-server-options文件 nano /etc/ppp/pppoe-server-options 编辑为以下内容: # PPP options for the PPPoE server # LIC: GPL require-pap require-chap login …...
【报错】解决 RuntimeError: CUDA error: CUBLAS_STATUS_INVALID_VALUE 报错问题
解决 RuntimeError: CUDA error: CUBLAS_STATUS_INVALID_VALUE 报错问题 写在最前面问题描述可能的原因分析解决方案该命令的作用 结论 写在最前面 在多用户使用的服务器上,导致的环境变量的冲突和不匹配问题, 代码没有问题,但程序运行异常。…...
【C语言】C语言 文具店商品库存管理系统(源码+数据文件)【独一无二】
👉博__主👈:米码收割机 👉技__能👈:C/Python语言 👉专__注👈:专注主流机器人、人工智能等相关领域的开发、测试技术。 系列文章目录 目录 系列文章目录一、设计要求1. 项…...
LangChain系列: 使用工具和工具包构建代理实战教程
让我们在LangChain中构建简单代理示例,以帮助我们理解代理的基本概念和构建块。通过保持简单,我们可以更好地掌握这些代理背后的基本思想,使我们能够在未来构建更复杂的代理。 什么是代理 LangChain官方文档有非常好的章节来介绍其代理的高级…...
布隆过滤器(简单介绍)
布隆过滤器(Bloom Filter) 是一种高效的概率型数据结构,用于快速判断一个元素是否可能存在于某个集合中。它的核心特点是空间效率极高,但存在一定的误判率(可能误报存在,但不会漏报)。 核心原理…...
C++ 利器:inline 与 nullptr
探秘 C 利器:inline 与 nullptr 引言 在 C 的浩瀚海洋中,有着许多实用且强大的特性,它们如同夜空中闪烁的繁星,照亮了开发者前行的道路。今天,我们要深入探索其中两颗耀眼的星星:inline 关键字和 nullptr …...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API,用于在函数组件中使用 state 和其他 React 特性(例如生命周期方法、context 等)。Hooks 通过简洁的函数接口,解决了状态与 UI 的高度解耦,通过函数式编程范式实现更灵活 Rea…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,百货中心供应链管理系统被用户普遍使用,为方…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统,可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析:自动解析Markdown文档结构PPT模板分析:分析PPT模板的布局和风格智能布局决策:匹配内容与合适的PPT布局自动…...
相机从app启动流程
一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...
【单片机期末】单片机系统设计
主要内容:系统状态机,系统时基,系统需求分析,系统构建,系统状态流图 一、题目要求 二、绘制系统状态流图 题目:根据上述描述绘制系统状态流图,注明状态转移条件及方向。 三、利用定时器产生时…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目(父项目)主要用于依赖管理 一些需要注意的点: 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件,否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...
【VLNs篇】07:NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战,克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...
