绘制Vue主页的列表结构(包括增、删、改、查功能)

2023-05-16

源码地址:https://gitee.com/cheng-xuyuan/blogWeb.git(请忽略这句)
一、面包屑导航区域设计(下面划红线的部分)
在这里插入图片描述
在这里插入图片描述
说明:el-breadcrumb-item属性的to属性表示点击该标签跳转的路径,与使用a标签效果相同。
效果如下:
在这里插入图片描述
点击“个人主页”,返回主页面:
在这里插入图片描述

二、卡片视图区域设计并获取用户列表数据
在这里插入图片描述
注意:上述代码中的created()函数在该组件被加载时被调用,此时向后端发送请求:

在这里插入图片描述
效果如下:
在这里插入图片描述
三、渲染用户列表数据
(1)先将后端返回的数据保存在客户端
在这里插入图片描述
(2)使用element标签设计表格
在这里插入图片描述
说明:el-table标签表示整个列表,通过table属性绑定数据;el-table-colum表示列表的每一列,label属性值为该列的名称,prop值为绑定的数据(这里是tableData)的数据项,例如若prop值为title,即表示该列数据为tableData.title的值。
效果如下:
在这里插入图片描述
四、为用户列表添加索引列
即在列表的第一列前添加:
在这里插入图片描述
效果如下:
在这里插入图片描述
五、插槽形式自定义列的渲染
添加一列:
在这里插入图片描述
之所以使用template标签的slot-scope属性,是因为之后的修改、删除都是根据每篇文章的id进行的,所有先获取该行展示的文章信息的所有内容。
效果如下:
在这里插入图片描述
给按钮加提示信息:
将el-button标签放到el-tooltip标签中,其中effect属性表示提示文字的背景色,content属性表示提示的文字,placement属性表示提示的文字置于按钮的位置,enterable值为false表示当鼠标离开该按钮时提示文字消失。
在这里插入图片描述
效果如下:
在这里插入图片描述
在这里插入图片描述
六、实现添加文章的功能
(1)在卡片内添加一个按钮
在这里插入图片描述
在这里插入图片描述
(2)增加一个弹出对话框,之后在弹出对话框内输入添加的文章信息。
在这里插入图片描述
说明:el-dialog标签的属性绑定为下图中的addDialogVisible值。两个el-button的click触发的事件均为将该对话框隐藏。
在这里插入图片描述
点击添加按钮将该对话框显示出来:
在这里插入图片描述
效果如下:
在这里插入图片描述
点击对话框右上角的x和两个按钮都可关闭(隐藏)该对话框。
(3)在el-dialog标签内内容主体区(span标签内)添加表单(这里和用户登录类似,参考博文《Vue项目实现登录/退出功能》
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
效果如下:
在这里插入图片描述
点击“确定”按钮后:
在这里插入图片描述
注:这里输入限制没有实现(用户未输入没有提示信息)没发现问题出在哪儿,发现的伙伴可以评论区留言。
七、实现修改文章的功能
回顾,后端返回一篇文章的数据如下
在这里插入图片描述
给修改按钮绑定触发事件,注意这里的函数带有参数,即改行对应文章的id
在这里插入图片描述
添加一个修改文章的对话框:
在这里插入图片描述
注意:上面的el-form-item的label属性值只能是字符串,所以passageId+''将其转化为字符串。
添加需要用到的数据:
在这里插入图片描述
在这里插入图片描述
修改文章的对话框的确定按钮绑定的触发事件:
在这里插入图片描述
效果如下:在这里插入图片描述
八、删除文章的实现类似,这里不赘述。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

绘制Vue主页的列表结构(包括增、删、改、查功能) 的相关文章

随机推荐

  • JS基础:for...in、for...of、forEach(详解)

    for in循环 for in 语句以任意顺序遍历一个对象的除 Symbol 以外的可枚举属性 for in 循环只遍历可枚举属性 像 Array和 Object 使用内置构造函数所创建的对象都会继承自Object prototype和St
  • 正则表达式语法

    量词 通过量词可以设置一个内容出现的次数量词只对前一个内容起作用 n 表示整好出现n次 m n 表示出现m到n次 m xff0c 表示出现m次以上 43 表示至少一个 xff0c 相当于 1 xff0c 例如 a 43 表示0个或多个 xf
  • 51单片机之——串口通信(含实现部分)

    目录 一 串口通信简介 二 前置知识 二 前置准备 三 实现单片机通过串口向电脑发送数据 四 实现单片机通过串口接收电脑发送数据 一 串口通信简介 本篇文章将实现两个部分 xff0c 第一部分为单片机通过串口向电脑发送数据 xff1b 第二
  • Java web速成之jsp

    一 JSP简介 1 1 jsp运行和环境搭建 1 知识目标 xff08 1 xff09 能够叙述Java web的发展历程 xff1b xff08 2 xff09 能够描述JSP引擎在JSP中的作用 xff1b xff08 3 xff09
  • 单片机学习总结

    51单片机的学习总结 经过一个学期的51单片机的学习 xff0c 对于51单片机有了很大的理解 由于我学的是汇编语言 xff0c 实验也是用的汇编语言 首先对于51单片机要了解他的内部结构 一个8位的CPU xff0c 一个片内振荡器及时钟
  • 【计算机三级网络技术】 快速求出IP地址块经聚合后的IP地址

    计算机三级 网络技术之快速求出IP地址块经聚合后的IP地址 相信大家在备考计算机三级网络技术都会遇到求多个IP地址聚合后的地址是什么的题目 xff0c 以下是一个小技巧 xff08 具体原理自己把十进制的IP地址和子网掩码换算成二进制理解一
  • Ubuntu虚拟机使用NAT连接 然后无法上网的情况

    问题描述 xff1a 以下为我的虚拟机的网络适配器配置 xff0c 使用的是NAT模式 正常连接上网络的时候虚拟机右上角会如下图所示 当网络down了以后 xff0c 就不会显示第一个 xff0c 那么这个时候就可以使用以下方法来解决 仅作
  • 【计算机网路】(3)网络层:IP地址组成、分类,子网划分

    目录 IP地址 xff08 32位 xff09 1 1 组成 1 2 分类 1 2 1 A B C三类IP地址的组成 1 2 2 私有地址 记 1 3 子网掩码 1 3 1 示例 求IP地址为192 168 1 0的网络号 1 4 DHCP
  • 【知识图谱】知识图谱入门详细介绍

    知识图谱 入门与介绍 文章目录 知识图谱 入门与介绍1 引言2 概念3 分类4 发展历程5 作用5 1 搜索5 2 问答5 3 辅助大数据分析 6 知识图谱的构建6 1 数据获取6 2 信息 xff08 知识 xff09 抽取6 3 知识融
  • vnc服务器配置—linux

    VNC服务器配置 vnc服务器是个远程控制服务器 需求 xff1a 在linux中装服务器端 xff0c 在windows中装客户端 xff0c 使得可以远程控制linux 首先下载vnc服务器 yum install tigervnc s
  • 18715 出栈序列

    18715 出栈序列 时间限制 1000MS 代码长度限制 10KB 提交次数 0 通过次数 0 题型 编程题 语言 不限定 Description 一种简洁的栈定义方法如下 int st 1000 top 61 0 以top作为栈顶指针
  • Ubuntu 打不开终端

    因为我在做python时做了应该是删除了软连接 xff0c 然后终端就打不开了 在网上寻找多个方法 xff0c 终于找到适合自己的 请注意 xff0c 这里可能会出现其他问题 xff0c 使用时请注意 因为进不去终端 xff0c 所以按ct
  • unity实现切割图片

    我们在找资源时有时候会遇到把一堆图片放进一张图片的情况 xff0c 往往需要将一块块小图片切割出来使用 xff1a 步骤 xff1a xff08 1 xff09 将Sprite Mode设置为Multiple 2 xff09 点击Sprit
  • 使用mybatis实现数据库插入数据

    xff08 1 xff09 在Dao层的实体类接口中添加相应函数 xff08 2 xff09 在相应的 xml文件中加入一个mapper标记 xff08 3 xff09 修改main 函数中的语句 xff0c 关键是修改了sqlId 修改指
  • 计算机图形学(三维观察投影线、视图变换、投影变换)

    一 三维观察流水线 概念 xff1a 将建立的三维场景显示在二维视口的过程称为三维观察流水线 在三维观察流水线中 xff0c 也就是在将三维场景显示在二维视口的过程中 xff0c 需要在不同坐标系下进行不同的操作 xff0c 这些坐标系包括
  • javascript:html嵌入javascript代码的三种方式

    一 概念 javascript是运行在浏览器中的脚本语言 xff0c 运行在浏览器的内存当中 xff0c 不需要程序员手动编译 xff0c 编写玩源代码之后 xff0c 浏览器直接打开解释执行 xff0c 简称JS 二 html嵌入java
  • idea中新建和写一个简单的vue项目

    一 使用ida创建一个vue项目 xff08 默认node js环境已配好 xff0c idea已加vue js插件 xff09 xff08 1 xff09 新建项目 xff08 2 xff09 观察项目目录结构 node modules文
  • css的相对定位和绝对定位

    css标签的相对定位和绝对定位是通过position属性来控制的 xff0c 相对定位和绝对定位不改变元素的大小形状 xff0c 只改变元素的位置 一 position属性的值有以下几种 xff1a static 默认值 xff0c 没有定
  • 个人博客系统(Vue实现)的主页布局设计

    源码地址 xff1a https gitee com cheng xuyuan blogWeb git xff08 请忽略这句 xff09 一 整体布局 上下划分 xff0c 再左右划分 主体代码 xff1a lt el container
  • 绘制Vue主页的列表结构(包括增、删、改、查功能)

    源码地址 xff1a https gitee com cheng xuyuan blogWeb git xff08 请忽略这句 xff09 一 面包屑导航区域设计 xff08 下面划红线的部分 xff09 说明 xff1a el bread