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 …...
Python|GIF 解析与构建(5):手搓截屏和帧率控制
目录 Python|GIF 解析与构建(5):手搓截屏和帧率控制 一、引言 二、技术实现:手搓截屏模块 2.1 核心原理 2.2 代码解析:ScreenshotData类 2.2.1 截图函数:capture_screen 三、技术实现&…...
(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目:3442. 奇偶频次间的最大差值 I 思路 :哈希,时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况,哈希表这里用数组即可实现。 C版本: class Solution { public:int maxDifference(string s) {int a[26]…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外,K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案,全安装在K8S群集中。 具体可参…...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...
基于Flask实现的医疗保险欺诈识别监测模型
基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施,由雇主和个人按一定比例缴纳保险费,建立社会医疗保险基金,支付雇员医疗费用的一种医疗保险制度, 它是促进社会文明和进步的…...
高频面试之3Zookeeper
高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个?3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制(过半机制࿰…...
连锁超市冷库节能解决方案:如何实现超市降本增效
在连锁超市冷库运营中,高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术,实现年省电费15%-60%,且不改动原有装备、安装快捷、…...
基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹,并新增内容 3.创建package文件夹...
【论文笔记】若干矿井粉尘检测算法概述
总的来说,传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度,通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...
2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口(适配服务端返回 Token) export const login async (code, avatar) > {const res await http…...
