JavaWeb 学习笔记 10:Element

JavaWeb 学习笔记 10:Element

Element 是一个基于 Vue 的前端组件框架,使用它可以快速构建美观的前端页面。

1.快速开始

创建一个简单的 JavaWeb 应用。

添加一个 Html 页面,并在<head>标签中加入 Element 和 Vue 的相关 js 引用:

<head><meta charset="UTF-8"><title>Title</title><script src="js/vue@2.7.14_dist_vue.min.js"></script><script src="js/element-ui/lib/index.js"></script><link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css">
</head>

需要注意的是,Element 使用的是 2.X 版本的 Vue。

在 Vue 的初始化代码中定义相关数据模型和生效的标签:

<script>new Vue({el: '#app',data: function() {return { visible: false }}})
</script>

这里初始化 Vue 的方式是 2.X 版本的方式,与 3.X 的写法有所不同。

在 Html 中添加 Element UI 的相关组件:

<body>
<div id="app"><el-button @click="visible = true">Button</el-button><el-dialog :visible.sync="visible" title="Hello world"><p>Try Element</p></el-dialog>
</div>
</body>

最终的效果是有一个 button 按钮,点击后会出现一个弹出框。

之所以会这样,是因为 Element UI 的按钮标签el-button上绑定了一个点击事件,该事件由 Vue 的内联事件处理代码visible = true执行,具体效果是点击后visible这个数据模型会变成true。而代表弹框的 Element 标签el-dialog是否显示由属性visible.sync决定,该属性绑定了 Vue 的数据模型visible,所以在visible变成true后会显示。相应的,关闭弹窗后visible会变成false

2.布局

Element 的布局分为 Layout 和 Container 两种。

2.1.Layout

示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/vue@2.7.14_dist_vue.min.js"></script><script src="js/element-ui/lib/index.js"></script><link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css"><style>.el-row {margin-bottom: 20px;}.el-col {border-radius: 4px;}.bg-purple-dark {background: #99a9bf;}.bg-purple {background: #d3dce6;}.bg-purple-light {background: #e5e9f2;}.grid-content {border-radius: 4px;min-height: 36px;}.row-bg {padding: 10px 0;background-color: #f9fafc;}</style>
</head>
<body>
<div id="app"><el-row><el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col></el-row><el-row><el-col :span="12"><div class="grid-content bg-purple"></div></el-col><el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col></el-row><el-row><el-col :span="8"><div class="grid-content bg-purple"></div></el-col><el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="8"><div class="grid-content bg-purple"></div></el-col></el-row><el-row><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col></el-row><el-row><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col></el-row>
</div>
</body>
<script>new Vue({el: '#app',data: function() {return { visible: false }}})
</script>
</html>

这种模式下将一行分为24列,每一行可以根据需要让每一列由1到多个列组合而成(span属性)。

更多关于 Layout 布局的说明可以阅读官方文档。

2.2.Container

Container 布局可以将页面划分成不同的区域,通常由头、尾、侧边栏和内容几个部分组成。

示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/vue@2.7.14_dist_vue.min.js"></script><script src="js/element-ui/lib/index.js"></script><link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css"><style>.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;}.el-aside {color: #333;}</style>
</head>
<body>
<div id="app"><el-container style="height: 500px; border: 1px solid #eee"><el-aside width="200px" style="background-color: rgb(238, 241, 246)"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>导航一</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i>导航二</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="2-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i>导航三</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="3-1">选项1</el-menu-item><el-menu-item index="3-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="3-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="3-4"><template slot="title">选项4</template><el-menu-item index="3-4-1">选项4-1</el-menu-item></el-submenu></el-submenu></el-menu></el-aside><el-container><el-header style="text-align: right; font-size: 12px"><el-dropdown><i class="el-icon-setting" style="margin-right: 15px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>查看</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>删除</el-dropdown-item></el-dropdown-menu></el-dropdown><span>王小虎</span></el-header><el-main><el-table :data="tableData"><el-table-column prop="date" label="日期" width="140"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></el-main></el-container></el-container>
</div>
</body>
<script>new Vue({el: '#app',data() {const item = {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'};return {tableData: Array(20).fill(item)}}})
</script>
</html>

这个示例页面由头部、侧边栏和内容三部分组成。

3.组件

下面的演示将基于之前的示例项目 login-demo,将使用 Element 相关组件改造项目中的 Html 页面。

3.1.表格

品牌列表页的表格替换为 Element 的表格组件 el-table。

<template><el-table:data="brands"style="width: 100%":row-class-name="tableRowClassName"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnalign="center"type="index"label="序号"></el-table-column><el-table-columnalign="center"prop="brandName"label="品牌名称"></el-table-column><el-table-columnalign="center"prop="companyName"label="企业名称"></el-table-column><el-table-columnalign="center"prop="ordered"label="排序"></el-table-column><el-table-columnalign="center"prop="description"label="品牌介绍"></el-table-column><el-table-columnalign="center"prop="statusText"label="状态"></el-table-column><el-table-columnalign="center"label="操作"><el-button type="primary">修改</el-button><el-button type="danger">删除</el-button></el-table-column></el-table>
</template>

el-table标签是 Element 的表格,这里使用到的属性有:

  • data,绑定 Vue 数据模型(数组)后可以用该模型中的数据遍历填充表格的每一行。
  • selection-change,对应表格复选框的change事件,需要绑定 Vue 的事件处理器(方法)。

el-table-column标签定义了表格的每一列,这里使用的属性有:

  • type,定义某些特殊的列,比如:
    • index,从1开始自增的序号
    • selection,带复选框(checkbox)的列
  • align,cell 中内容的对齐方式
  • label,表头的标题
  • prop,遍历绑定的数据模型填充每一行时,对应的属性名

Vue 初始化代码:

new Vue({el: "#app",methods: {tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';},handleSelectionChange(val) {this.multipleSelection = val;console.log(this.multipleSelection);}},data() {return {username: "",brands: [],multipleSelection: []}},mounted() {loadBrands(this);}
})
function loadBrands(_vue){axios({method: "POST",url: "/login-demo/brand/query",data: {}}).then((resp) => {_vue.brands = resp.data;_vue.brands.forEach((brand) => {brand.editUrl = "/login-demo/brand/edit?id=" + brand.id;brand.deleteUrl = "/login-demo/brand/delete?id=" + brand.id;brand.statusText = brand.status === 0 ? "启用" : "禁用";});});
}

定义了两个自定义方法:

  • tableRowClassName,决定每一行是否使用某种颜色作为背景色
  • handleSelectionChange,绑定到表格复选框的事件处理器,复选框改变后会将选中的数据模型更新到multipleSelection这个数据模型。

Vue 的 data 属性定义了所需的数据模型。mounted 事件中通过异步调用获取品牌数据并填充到数据模型 brands。

3.2.表单

通常需要在表格上便加上搜索条件进行搜索,在 Element 中这属于”行内表单“。

<el-form :inline="true" :model="query" class="demo-form-inline"><el-form-item label="状态"><el-select v-model="query.status" placeholder="状态"><el-option label="启用" value="0"></el-option><el-option label="禁用" value="1"></el-option></el-select></el-form-item><el-form-item label="品牌名称"><el-input v-model="query.brandName" placeholder="品牌名称"></el-input></el-form-item><el-form-item label="企业名称"><el-input v-model="query.companyName" placeholder="企业名称"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item>
</el-form>

el-formmodel属性绑定作为表单查询条件的数据模型。在表单中的输入控件上,依次使用v-model属性绑定具体的数据模型属性。

使用一个 el-button 作为表单查询按钮,并绑定click事件到一个事件处理器onSubmit

在 js 中定义数据模型和事件处理器:

new Vue({el: "#app",methods: {// ...onSubmit() {console.log('submit!');loadBrands(this);}},data() {return {// ...query: {status: null,brandName: '',companyName: ''}}},// ...
})

在具体加载品牌数据的方法中使用表单的查询条件:

function loadBrands(_vue){axios({method: "POST",url: "/login-demo/brand/query",data: _vue.query}).then((resp) => {// ...});
}

3.3.对话框

添加两个按钮,分别用于批量删除和新增:

<el-row><el-button type="danger" plain>批量删除</el-button><el-button type="primary" plain>新增</el-button>
</el-row>

添加一个对话框(Dialog),并用新增按钮可以打开:

<el-row><el-button type="danger" plain>批量删除</el-button><el-button type="primary" @click="dialogVisible=true" plain>新增</el-button>
</el-row>
<el-dialogtitle="提示":visible.sync="dialogVisible"width="30%"><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span>
</el-dialog>

需要添加一个用于控制对话框打开关闭的数据模型:

new Vue({el: "#app",// ...data() {return {// ...dialogVisible: false}},// ...
})

在对话框中嵌套一个表单用于填写新增数据:

<el-dialogtitle="新增品牌":visible.sync="dialogVisible"width="30%"><el-form ref="form" :model="form" label-width="80px"><el-form-item label="品牌名称"><el-input v-model="form.brandName"></el-input></el-form-item><el-form-item label="企业名称"><el-input v-model="form.companyName"></el-input></el-form-item><el-form-item label="排序"><el-input v-model="form.ordered"></el-input></el-form-item><el-form-item label="品牌介绍"><el-input type="textarea" v-model="form.description"></el-input></el-form-item><el-form-item label="状态"><el-switch v-model="form.status"active-value="0"inactive-value="1"></el-switch></el-form-item><el-form-item><el-button type="primary" @click="onFormSubmit">确认</el-button><el-button @click="dialogVisible = false">取消</el-button></el-form-item></el-form>
</el-dialog>

js 的部分这里不再赘述,可以查看完整示例。

3.4.消息提示

通常我们希望成功修改数据后有一个弹出消息提醒用户,并在若干秒后自动消失。对应的 Element 组件是消息提示。

实现也很简单:

new Vue({el: "#app",methods: {// ...onFormSubmit() {// 新增品牌 dialog 提交let _vue = this;axios({// ...}).then((resp) => {// ..._vue.$message({message: '添加品牌成功',type: 'success'});});},// ...},// ...
})

3.5.弹框

批量删除很简单:

<el-button type="danger" @click="batchDeleteBrands" plain>批量删除</el-button>

对应的 js:

batchDeleteBrands(){let ids = [];this.multipleSelection.forEach((brand)=>{ids.push(brand.id);});let _vue = this;axios({method: "POST",url: "/login-demo/brand/batchDelete",data: ids}).then((resp)=>{loadBrands(_vue);_vue.$message({message: '批量删除成功',type: 'success'});});
}

不过一般为了避免误操作,需要给删除功能增加一个用于确认的弹框:

openBatchDeleteConfirm() {this.$confirm('此操作将永久删除品牌, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.batchDeleteBrands();}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});
}

让批量删除按钮点击事件绑定到这个方法:

<el-button type="danger" @click="openBatchDeleteConfirm" plain>批量删除</el-button>

3.6.分页

添加分页相关组件:

<div class="block"><span class="demonstration">分页</span><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="page.currentPage":page-sizes="[5, 10, 15, 20]":page-size="page.pageSize"layout="total, sizes, prev, pager, next, jumper":total="page.total"></el-pagination>
</div>

size-change事件会在每页数据条数发生改变时调用。

current-change事件会在当前页码改变时调用。

current-page属性表示的是当前页码。

page-size属性表示的是当前每页展示的条数。

total属性表示的是总的数据条数。

为分页相关的信息添加数据模型:

data() {return {// ...page: {currentPage: 1,pageSize: 5,total: 5}}
},

修改数据加载方法,传入参数中添加分页相关参数:

function loadBrands(_vue) {axios({method: "POST",url: "/login-demo/brand/query",data: {query: _vue.query,page: {size: _vue.page.pageSize,currentPage: _vue.page.currentPage}}}).then((resp) => {_vue.brands = resp.data.list;_vue.brands.forEach((brand) => {brand.editUrl = "/login-demo/brand/edit?id=" + brand.id;brand.deleteUrl = "/login-demo/brand/delete?id=" + brand.id;brand.statusText = brand.status === 0 ? "启用" : "禁用";});_vue.page.total = resp.data.resultPage.total;});
}

返回的结果除了填充表格数据,也要设置分页数据中的总数据条数。

The End,谢谢阅读。

本文的完整示例可以从这里获取。

4.参考资料

  • 黑马程序员JavaWeb基础教程
  • JavaScript 教程 (w3school.com.cn)
  • JavaScript 对象入门 - 学习 Web 开发 | MDN (mozilla.org)
  • mybatis – MyBatis 3 | XML 映射器
  • Element - 网站快速成型工具

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

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

相关文章

C++学习笔记一: 变量和基本类型

本章讲解C内置的数据类型&#xff08;如&#xff1a;字符、整型、浮点数等&#xff09;和自定义数据类型的机制。下一章讲解C标准库里面定义的更加复杂的数据类型&#xff0c;比如可变长字符串和向量等。 1.基本内置类型 C内置的基本类型包括&#xff1a;算术类型和空类型。算…

进阶指针(四)—— 加强对指针,数组名,sizeof,strlen的理解

✨博客主页&#xff1a;小钱编程成长记 &#x1f388;博客专栏&#xff1a;进阶C语言 &#x1f388;推荐相关博文&#xff1a;进阶C语言&#xff08;一&#xff09;、进阶C语言&#xff08;二&#xff09;、进阶C语言&#xff08;三&#xff09; 进阶指针&#xff08;四&#x…

QT:绘图

widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPaintEvent> //绘图事件class Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent 0);~Widget();void paintEvent(QPaintEvent *event); //重写绘图事件void timerEve…

GD32F10X ----RTC

1. RTC的简介 STM32 的实时时钟&#xff08;RTC&#xff09;是一个独立的定时器。STM32 的 RTC 模块拥有一组连续计数的计数器&#xff0c;在相应软件配置下&#xff0c;可提供时钟日历的功能。修改计数器的值可以重新设置系统当前的时间和日期。 RTC 模块和时钟配置…

格拉姆角场GAF将时序数据转换为图像并应用于东南大学轴承故障诊断(Python代码,CNN模型)

1.运行效果&#xff1a;格拉姆角场GAF将时序数据转换为图像并应用于东南大学轴承故障诊断&#xff08;Python代码&#xff0c;CNN模型&#xff09;_哔哩哔哩_bilibili 环境库 只要tensorflow版本大于等于2.4.0即可运行 2.GAF的内容 GAF是一种用于时间序列数据可视化和特征提…

LLM-TAP随笔——大语言模型基础【深度学习】【PyTorch】【LLM】

文章目录 2.大语言模型基础2.1、编码器和解码器架构2.2、注意力机制2.2.1、注意力机制&#xff08;Attention&#xff09;2.2.2、自注意力机制&#xff08;Self-attention&#xff09;2.2.3、多头自注意力&#xff08;Multi-headed Self-attention&#xff09; 2.3、transforme…

Leetcode 2871. Split Array Into Maximum Number of Subarrays

Leetcode 2871. Split Array Into Maximum Number of Subarrays 1. 解题思路2. 代码实现 题目链接&#xff1a;2871. Split Array Into Maximum Number of Subarrays 1. 解题思路 这一题实现上其实还是比较简单的&#xff0c;就是一个贪婪算法&#xff0c;主要就是思路上需要…

【未解决问题】opencv 交叉编译 ffmpeg选项始终为NO

opencv 打不开视频的原因 在交叉编译时候&#xff0c;发现在 pc 端能用 opencv 打开的视频&#xff0c;但是在 rv1126 上打不开。在网上查了很久&#xff0c;原因可能是 ffmpeg 造成的。 解决opencv源代码编译找不到ffmpeg-CSDN博客 交叉编译 ffmpeg 尝试了一天还是第二个博客…

Linux编程——经典链表list_head

1. 关于list_head struct list_head是Linux内核定义的双向链表&#xff0c;包含一个指向前驱节点和后继节点的指针的结构体。其定义如下&#xff1a; struct list_head {struct list_head *next, *prev; //双向链表&#xff0c;指向节点的指针 };1.1 链表的定义和初始化 有两…

XML-Based Configuration Beans for Ioc Container

XML-Based Configuration XML-based configuration is the traditional way of configuring beans in Spring. <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans"xmlns:xsi"h…

【C++】笔试训练(三)

目录 一、选择题二、编程题1、字符串中找出连续最长的数字串2、数组中出现次数超过一半的数字 一、选择题 1、以下程序的输出结果是&#xff08;&#xff09; #include <stdio.h> int main() {char a[10] { 1, 2, 3, 4, 5, 6, 7, 8, 9, 0 }, * p;int i;i 8;p a i;p…

【Java】方法重写

概述 子类中出现了和父类一模一样的方法 当子类需要父类的功能&#xff0c;而功能主体中&#xff0c;子类有自己独特的内容&#xff0c;就可以通过重写父类中的方法&#xff0c;这样即延续了父类的功能&#xff0c;又定义了自己的特有内容 Override 是一个注解&#xff0c;可以…

【JVM】双亲委派模型

双亲委派模型 1. 什么是双亲委派模型2. 双亲委派模型的优点 1. 什么是双亲委派模型 提到 类加载 机制&#xff0c;不得不提的一个概念就是“双亲委派模型”。 双亲委派模型指的就是 JVM 中的类加载器如何根据类的全限定名找到 .class 文件的过程 类加载器: JVM 里面专门提供…

【ESP32 + Edge Impulse平台】运行AI算法模拟多传感器数据融合实现异常检测

本篇博文主要以ESP32+MQ Sensor 气体传感器为例,通过连接 Edge Impulse 平台,实现数据的实时采集和训练,进而实现在嵌入式设备上部署 ML 机器学习。本教程介绍如何使用 Edge Impulse 和机器学习来实现ESP32 异常检测系统,系统使用一个机器学习模型,检测气体何时出现异常。…

OpenCV查找和绘制轮廓:findContours和drawContours

1 任务描述&#xff1a; 绘制图中粗线矩形的2个边界&#xff0c;并找到其边界的中心线 图1 原始图像 2.函数原型 findContours( InputOutputArray image, OutputArrayOfArrays contours, OutputArray hierarchy, int mode, …

移动端 [Android iOS] 压缩 ECDSA PublicKey

移动端 [Android & iOS] 压缩 ECDSA PublicKey AndroidiOS 使用 Android KeyStore 和 iOS 的 Secure Enclave 提供的安全能力使用 P-256 来对 API 请求进行签名&#xff0c;服务器端再进行验证。 但是发现不论是 iOS 还是安卓都没有提供一个便捷的方式从 iOS 的SecKeyCopyE…

0/1背包问题

例题HDU-2602 Problem Description Many years ago , in Teddy’s hometown there was a man who was called “Bone Collector”. This man like to collect varies of bones , such as dog’s , cow’s , also he went to the grave … The bone collector had a big bag wi…

2021-06-11 51蛋骗鸡用小数点作秒指示,分钟计时.(怎么用二个数码管做分的倒计时,DP亮灭来计秒)

缘由怎么用二个数码管做分的倒计时&#xff0c;DP亮灭来计秒,求思路 - 24小时必答区 #include "REG52.h" sbit K1 P1^5; sbit K2 P1^6; sbit K3 P1^7; sbit BUZ1P1^0; bit k0; unsigned char code SmZiFu[]{63,6,91,79,102,109,125,7,127,111,128};//0-9. unsign…

RPC协议

问题一&#xff1a;如何规定远程调用的语法&#xff1f;客户端如何告诉服务端&#xff0c;我是一个加法&#xff0c;而另一个是乘法。我是用字符串“add”传给你&#xff0c;还是传给你一个整数&#xff0c;比如 1 表示加法&#xff0c;2 表示乘法&#xff1f;服务端该如何告诉…

mysql json字段使用以及常用json函数,配合springBoot和mybatis-plus简化开发

Mysql JSON 类型分享 Mysql json字段了解&#xff1a; MySQL 中的 JSON 类型是一种用于存储和处理 JSON&#xff08;JavaScript Object Notation&#xff09;数据的数据类型。JSON 是一种轻量级的数据交换格式&#xff0c;常用于表示结构化的数据。MySQL 的 JSON 类型提供了以…