(vue3)大事记管理系统 文章管理页

[element-plus进阶]

文章列表渲染(带搜索&到分页)

表单架设:当前el-form标签配置一个inline属性,里面的元素就会在一行显示了

中英国际化处理:App.vue中el-config-provider标签包裹组件,意味着整个组件都会被其控制。该标签中添加属性:local=“zhCn”,添加之前引入

表格    先用假数据代替将来后台给我们返回的数据,基于它做渲染

准备编辑逻辑 图标绑定点击事件,传参row能拿到当前行的数据

发表时间  新建 `utils/format.js` 封装格式化日期函数

import { dayjs } from 'element-plus'
export const formatTime = (time) => dayjs(time).format('YYYY年MM月DD日')

分页Pagenation组件 提供分页修改逻辑重新渲染

添加文章(抽屉&文件上传&富文本)

文章封面 文件上传Upload组件

1一选择图片就上传2本地预览,点发布才上传到服务器,服务器压力会小一点

我们选2,需要关闭element-plus的自动上传,不需要配置action等参数

文章内容 富文本编辑器(vue-quill官网)

然后进行数据绑定,设置内容格式

设置宽高。完善所有信息,设置校验,点击调用封装的请求发布

编辑文章(共用抽屉)

删除文章

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/106580.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【LeetCode高频SQL50题-基础版】打卡第6天:第31~35题

文章目录 【LeetCode高频SQL50题-基础版】打卡第6天:第31~35题⛅前言员工的直属部门🔒题目🔑题解 判断三角形🔒题目🔑题解 连续出现的数字🔒题目🔑题解 指定日期的产品价格🔒题目&am…

集合元素处理(传统方式和Stream方式)

1、集合元素处理(传统方式) 现在有两个ArrayList集合存储队伍当中的多个成员姓名,要求使用传统的for循环(或增强for循环)依次进行一下若干操作步骤: 第一个队伍只要 名字为 3 个字 的成员姓名;存…

如何学习vue的工作原理及为何要创建vue框架

什么是Vue.js? Vue.js是一种流行的JavaScript框架,用于构建用户界面。它的目标是帮助开发者构建交互式的单页面应用(SPA)和动态Web应用。Vue提供了一种响应式的数据绑定、组件化的开发模式以及一组强大的工具,使前端…

Java实现hack汇编器

Hack汇编语言是一种特定于计算机体系结构的汇编语言,使用Hack架构的机器码指令来编写程序。Hack是一种基于Von Neumann结构的计算机体系结构,由Harvard大学的Nand to Tetris项目开发出来,用于实现计算机硬件和软件。 Hack汇编语言主要用于在…

linux 内核中的pid和前缀树

前言: 写这个文章的初衷是因为今天手写了一个字典树,然后写字典树以后忽然想到了之前看的技术文章,linux kernel 之前的pid 申请方式已经从 bitmap 变成了 基数树,所以打算写文章再回顾一下这种数据结构算法 一、内核中pid的申请…

c 有名管道FIFO

我理解&#xff0c;fifo 就是一文件。其实&#xff0c;一般文件也可以在进程间传递信息&#xff0c;只要控制好进程间的读写互斥就行了 进程一&#xff1a;特别要注意mkfifo第二个参数&#xff0c;它是生成文件的权限参数。用0666 就行。 #include <stdio.h> #include …

Android fragment隐藏和显示重叠问题解决(叠加显示)

项目场景&#xff1a; 项目首页使用RadioGroupRadioButtonFragment实现页面切换&#xff0c;出现了一个问题fragment会出现重叠问题&#xff0c;就是一个fragment显示了两层&#xff0c; 并不是必现问题。 经过排查发现是项目主页面Activity被销毁重建了&#xff0c;但是之前…

【环境搭建】linux docker-compose安装mysql5.7

建议改一下配置&#xff0c;安装mysql8.0 新建目录 mkdir -p /data/docker/mysql/data mkdir -p /data/docker/mysql/logs mkdir -p /data/docker/mysql/conf 给权限 chmod -R 777 /data/docker/mysql 到目录 cd /data/docker/mysql 新建docker-compose.yml文件 vi doc…

【学习笔记】minIO分布式文件服务系统

MinIO 一、概述 1.1 minIO是什么&#xff1f; MinIO是专门为海量数据存储、人工智能、大数据分析而设计的对象存储系统。&#xff08;早前流行的还有FastDFS&#xff09; 据官方介绍&#xff0c;单个对象最大可存储5T&#xff0c;非常适合存储海量图片、视频、日志文件、备…

java.sql.SQLFeatureNotSupportedException解决方法

使用MyBatis访问数据库查询数据时报错&#xff1a; Caused by: java.sql.SQLFeatureNotSupportedExceptionat com.alibaba.druid.pool.DruidPooledResultSet.getObject(DruidPooledResultSet.java:1771)at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)at sun…

DB2分区表详解

一、分区表基本概念 当表中的数据量不断增大,查询数据的速度就会变慢,应用程序的性能就会下降,这时就应该考虑对表进行分区。分区后的表称为分区表。 表进行分区后,逻辑上表仍然是一张完整的表,只是将表中的数据在物理上存放到多个“表空间”(物理文件上),这样查询数据时…

03在命令行环境中创建Maven版的Java工程,了解pom.xml文件的结构,了解Java工程的目录结构并编写代码,执行Maven相关的构建命令

创建Maven版的Java工程 Maven工程的坐标 数学中使用x、y、z三个向量可以在空间中唯一的定位一个点, Maven中也可以使用groupId,artifactId,version三个向量在Maven的仓库中唯一的定位到一个jar包 groupId: 公司或组织域名的倒序, 通常也会加上项目名称代表公司或组织开发的一…

Linux命令(93)之su

linux命令之su 1.su介绍 linux命令su用于变更为其它使用者的身份&#xff0c;如root用户外&#xff0c;需要输入使用者的密码 2.su用法 su [参数] user su参数 参数说明-c <command>执行指定的命令&#xff0c;然后切换回原用户-切换到目标用户的环境变量 3.实例 3…

C++ 什么时候用`.template` 和 `::template`

C 什么时候用.template 和 ::template 简单来说&#xff0c;就是你有一个未知类型T**&#xff08;这个T本身就是模板&#xff09;** 假设这个T是一个类&#xff0c;这个类里包含了一些模板函数或者模板结构体 你需要使用T. 或者 T:: 去调用他们&#xff0c;并且要显示指定模板…

JDBC操作BLOB类型字段

JDBC中Statement接口本身不能直接操作BLOB数据类型 操作BLOB数据类型需要使用PreparedStatement或者CallableStatement(存储过程) 这里演示通过PreparedStatement操作数据库BLOB字段 设置最大传入字节 一般是4M 可以通过以下命令修改 set global max_allowed_packet1024*1…

网页在线打开PDF_网站中在线查看PDF之pdf.js

一、pdf.js简介 PDF.js 是一个使用 HTML5 构建的便携式文档格式查看器。 pdf.js 是社区驱动的&#xff0c;并由 Mozilla 支持。我们的目标是为解析和呈现 PDF 创建一个通用的、基于 Web 标准的平台。 pdf.js 将 PDF 文档转换为 HTML5 Canvas 元素&#xff0c;并使用 JavaScr…

Puppeteer结合测试工具jest使用(四)

Puppeteer结合测试工具jest使用&#xff08;四&#xff09; Puppeteer结合测试工具jest使用&#xff08;四&#xff09;一、简介二、与jest结合使用&#xff0c;集成到常规测试三、支持其他的几种四、总结 一、简介 Puppeteer是一个提供自动化控制Chrome或Chromium浏览器的Node…

MyBatis(中)

目录 1、动态sql&#xff1a; 1、if标签&#xff1a; 2、where标签&#xff1a; 3、 trim标签&#xff1a; 4、set标签&#xff1a; 5、choose when otherwise&#xff1a; 6、模糊查询的写法&#xff1a; 7、foreach标签&#xff1a; &#xff08;1&#xff09;批量删除…

施耐德Unity通过Modbus控制变频器

硬件设备 PLC: Unity Premium (CPU:TSX P57154) 通讯卡: TSX SCP 114 连接电缆: TSX SCP CM 4030 VSD: ATV 58 硬件连接 Unity Premium (CPU: TSX P57154)本身不带Modbus接口&#xff0c;因此&#xff0c;采用TSX SCP 114扩展一个Modbus接口。TSX SCP 114是一个RS-485接…

NumPy 基础知识

数据类型 数组类型之间的转换 NumPy支持比Python更多种类的数字类型。本节显示了哪些可用,以及如何修改数组的数据类型。 支持的原始类型与 C 中的原始类型紧密相关: Numpy 的类型C 的类型描述np.boolbool存储为字节的布尔值(True或False)np.bytesigned char平台定义np.…