ElementUIV12相关使用方法

今日内容

零、 复习昨日

零、 复习昨日

一、Element UI

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

官网： https://element.eleme.cn/#/zh-CN

Element Plus,基于 Vue 3，面向设计师和开发者的组件库

官网: https://element-plus.gitee.io/zh-CN/

二 安装&入门使用

2.1 创建vue项目

  • 命令行创建

  • 界面创建

过程略…

创建完项目,idea打开

2.2 安装ElementUI

npm install element-ui -S

image-20230702220755146

2.3 项目中引入

引入Element

// main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);// ...其他以前的东西...

2.4 测试

新建文件,Element官网复制代码,启动访问即可

三、常用组件

3.1 布局

3.2 容器

3.3 单选

3.4 复选框

3.5 输入框

3.6 下拉框

3.7 日期

3.8 上传

3.9 表单

3.10 表格

3.11 弹框

四、练习

4.1 登录页

image-20240713112805023

项目启动访问登录，修改路由

image-20240713111145190

编写登录页面

<template><div><el-row><el-col :span="8" :offset="8"><h1>登录页面</h1><el-form ref="form" :model="form" label-width="80px"><el-form-item label="用户名"><el-input v-model="form.username"></el-input></el-form-item><el-form-item label="密码"><el-input v-model="form.password" type="password"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">登录</el-button></el-form-item></el-form></el-col></el-row></div>
</template><script>
import axios from 'axios'
export default {name: 'Login',data() {return {form: {username: '',password: ''}}},methods: {onSubmit() {axios.get('/login',{params: {username: this.form.username,password: this.form.password,}}).then(res => {console.log('登录返回',res)if (res.code == 2000) {this.$message({message: '恭喜你，登录成功',type: 'success',duration:600});} else {this.$message({message: '用户名或密码错误,登录失败',type: 'error',duration:600});}})}}
}
</script><style scoped></style>

配置axios，在main。js中定义

// 基础路径
axios.defaults.baseURL = 'http://localhost:8080/day39';// 添加响应拦截器
axios.interceptors.response.use(function (response) {return response.data;// 取出R
}, function (error) {return Promise.reject(error);
});

image-20240713111254166

4.2 主页

image-20240713112747708

创建主页面，填充布局容器

<template><div><!--最外层容器--><el-container class="max-container"><!--头部--><el-header>用户管理系统后端</el-header><!--内部容器--><el-container><!--侧边--><el-aside width="200px"><!--:default-openeds="['1']" 默认打开--><el-menu ><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>用户管理</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i>角色管理</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i>系统设置</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-submenu></el-menu></el-aside><!--小容器--><el-container><!--主要界面--><el-main>Main</el-main><!--页脚--><el-footer>© 2024 Java2403ByTaotie Copyright</el-footer></el-container></el-container></el-container></div>
</template><script>
export default {name: 'Admin'
}
</script><style scoped>
.max-container {height: 710px;
}.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;
}.el-aside {background-color: #D3DCE6;color: #333;text-align: center;line-height: 200px;
}.el-main {background-color: #E9EEF3;color: #333;text-align: center;line-height: 160px;
}body > .el-container {margin-bottom: 40px;
}.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {line-height: 260px;
}.el-container:nth-child(7) .el-aside {line-height: 320px;
}
</style>

登录成功后，路由跳转到这个页面

image-20240713112729680

image-20240713112717273

4.3 退出按钮

头部添加按钮，以及事件，路由回到登录页

image-20240713113255145

4.4 存储、销毁登录状态

先在Vuex中设置好存储登录的user值,以及设置准备修改user数据的函数

image-20240713115405145

登录时存入

image-20240713115445160

退出时销毁

image-20240713115503073

设置路由守护拦截

image-20240713115541468

// 完整的router/index.js代码

import Vue from 'vue'
import VueRouter from 'vue-router'
import LoginView from "@/views/LoginView.vue";
import AdminView from "@/views/AdminView.vue";
import store from '@/store'Vue.use(VueRouter)const routes = [{path: '/',name:'Login',component: LoginView},{path: '/admin',name:'Admin',component: AdminView},
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})
router.beforeEach((to, from, next) => {if (to.name !== 'Login') {console.log("这是路由守卫取出Vuex中数据User",store.state.user.username)if(store.state.user.username){next()} else {next({ name: 'Login' })}}else {next()}
})
export default router

// Vuex要持久化

  • 安装插件

    	npm install vuex-persistedstate

    image-20230702181913147

  • 配置

    在/src/store/index.js中实现配置

    import Vue from 'vue'
import Vuex from 'vuex'
// 1引入持久化插件
import vuexPersistedstate from "vuex-persistedstate";Vue.use(Vuex)
export default new Vuex.Store({// ...,plugins:[vuexPersistedstate()] // 2加入插件
})

4.5 用户界面路由展示

image-20240713151733046

设置路由入口,

image-20240713142104461

设置路由规则,用户界面是设置AdminView中的,属于嵌套路由,所以要设置路由子路径

image-20240713142157872

设置路由展示,在主界面的Main中

image-20240713142234183

4.6 用户页面布局

image-20240713151644290

<template>
<div><el-card class="box-card" :body-style="{ padding: '15px',height:'30px' }"><el-form :inline="true" :model="formInline" class="demo-form-inline"><el-form-item label="用户名"><el-input v-model="formInline.username" placeholder="用户名"></el-input></el-form-item><el-form-item label="手机号"><el-input v-model="formInline.phone" placeholder="手机号"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form></el-card><el-card class="box-card"><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></el-card><el-card class="box-card" :body-style="{ padding: '15px',height:'30px'}"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage4":page-sizes="[100, 200, 300, 400]":page-size="100"layout="total, sizes, prev, pager, next, jumper":total="400"></el-pagination></el-card>
</div>
</template><script>
export default {name:"User",data(){return {formInline: {username: '',phone: ''},tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'},]}}
}
</script><style scoped>
.box-card {width: 100%;margin-top: 10px;
}
</style>

注意: 此时只是布局,真正完整效果后续改动…

4.7 查询全部用户

image-20240713151619320

UserView页面加载时查询全部,设置钩子函数,查询全部,设置表格数据

image-20240713150320287

image-20240713150339560

<template>
<div><!--搜索卡片--><el-card class="box-card" :body-style="{ padding: '15px',height:'30px' }"><el-form :inline="true" :model="formInline" class="demo-form-inline"><el-form-item label="用户名"><el-input v-model="formInline.username" placeholder="用户名"></el-input></el-form-item><el-form-item label="手机号"><el-input v-model="formInline.phone" placeholder="手机号"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form></el-card><!--表格数据卡片--><el-card class="box-card"><el-table :data="userList" style="width: 100%"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="id" label="编号" width="75"></el-table-column><el-table-column prop="username" label="用户名" width="100"></el-table-column><el-table-column prop="password" label="密码" width="100"></el-table-column><el-table-column prop="phone" label="手机号" width="140"></el-table-column><el-table-column prop="createTime" label="注册时间" width="180"></el-table-column><el-table-column prop="money" label="余额" width="140"></el-table-column><el-table-column prop="sex" label="性别" width="100"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table></el-card><!--分页卡片--><el-card class="box-card" :body-style="{ padding: '15px',height:'30px'}"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage4":page-sizes="[100, 200, 300, 400]":page-size="100"layout="total, sizes, prev, pager, next, jumper":total="400"></el-pagination></el-card>
</div>
</template><script>
import axios from 'axios'
export default {name:"User",data(){return {formInline: {username: '',phone: ''},userList: [{id: '',username: '',password: '',phone: '',createTime: '',money: null,sex: '',}]}},methods: {findAll(){axios.get('/findAll').then(res => {if (res.code == 2000) {this.userList = res.data}})}},mounted() {this.findAll()}
}
</script><style scoped>
.box-card {width: 100%;margin-top: 10px;
}
</style>

ps: 日期演示问题,后端可以将日期注解换成@JsonFormat(pattern = “yyyy-MM-dd”)即可

image-20240713151549927

4.8 分页展现

修改UserView页面的js代码

<script>
import axios from 'axios'
export default {name:"User",data(){return {formInline: {username: '',phone: ''},userList: [{id: '',username: '',password: '',phone: '',createTime: '',money: null,sex: '',}],currentPage:1,// 当前页面total:0, // 总条数pageNum:1,// 当前页面pageSize:5// 每页大小}},methods: {findAll(pageNum,pageSize){axios.get('/findAll',{params:{pageNum:pageNum,pageSize:pageSize}}).then(res => {if (res.code == 2000) {console.log(res.data)// 返回的是后端返回的PageInfothis.userList = res.data.listthis.total = res.data.totalthis.pageNum = res.data.pageNum}}).catch(error => {console.log('请求查询全部报错: ',error)})},onSubmit(){},handleSizeChange(val) { // 处理页面大小改变时触发this.pageSize = val;this.findAll(this.pageNum,val)},handleCurrentChange(val) {// 当前页码改变时触发this.pageNum = val;this.findAll(val,this.pageSize)}},mounted() {this.findAll(1,5) // 初始时查询,第1页,每页5条}
}
</script>

4.9 模糊查询

页面上面设置搜索和重置按钮

image-20240713160843208

js中设置事件,搜索

image-20240713161024309

后端SpringBoot要设置动态sql

image-20240713161059331
.data.total
this.pageNum = res.data.pageNum
}
}).catch(error => {
console.log('请求查询全部报错: ',error)
})
},
onSubmit(){},
handleSizeChange(val) { // 处理页面大小改变时触发
this.pageSize = val;
this.findAll(this.pageNum,val)
},
handleCurrentChange(val) {// 当前页码改变时触发
this.pageNum = val;
this.findAll(val,this.pageSize)
}
},
mounted() {
this.findAll(1,5) // 初始时查询,第1页,每页5条
}
}


## 4.9 模糊查询页面上面设置搜索和重置按钮[外链图片转存中...(img-2XjszJ6V-1721010967411)]js中设置事件,搜索[外链图片转存中...(img-gBYMYmQv-1721010967411)]后端SpringBoot要设置动态sql[外链图片转存中...(img-YlU7dO6p-1721010967412)]

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

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

相关文章

C语言--递归

C语言--递归

曾经有一个段子&#xff1a;上大学时&#xff0c;我们的c语言老师说&#xff1a;学c时&#xff0c;如果有50%的同学死在了循环上面&#xff0c;那么就有90%的同学死在了递归上面。接下来&#xff0c;就来看看递归是怎么个事&#xff1f; 一.递归的介绍 递归是指一个函数直接或…
阅读更多...
Spring中的@Transactional什么时候会失效？

Spring中的@Transactional什么时候会失效？

在Spring中&#xff0c;Transactional注解用于声明式事务管理&#xff0c;它可以使方法在事务上下文中执行。然而&#xff0c;Transactional注解有时会失效&#xff0c;这通常是由于以下几种情况&#xff1a; 1. 非public方法&#xff1a; - Transactional注解默认只能应用…
阅读更多...
跨平台WPF音乐商店应用程序

跨平台WPF音乐商店应用程序

目录 一 简介 二 设计思路 三 源码 一 简介 支持在线检索音乐&#xff0c;支持实时浏览当前收藏的音乐及音乐数据的持久化。 二 设计思路 采用MVVM架构&#xff0c;前后端分离&#xff0c;子界面弹出始终位于主界面的中心。 三 源码 视窗引导启动源码&#xff1a; namesp…
阅读更多...
MySQL(8)事务

MySQL(8)事务

目录 1.事务; 1.事务: 1.1 如果CURD不加限制会这么样子? 可能造成数据同时被修改, 数据修改的结果是未知的.(可以想一下之前的抢票线程问题) 1.2 事务概念: 事务就是一组DML语句组成&#xff0c;这些语句在逻辑上存在相关性&#xff0c;这一组DML语句要么全部成功&#xff0…
阅读更多...
基于python旅游景点满意度分析设计与实现

基于python旅游景点满意度分析设计与实现

1.1研究背景与意义 1.1.1研究背景 随着旅游业的快速发展&#xff0c;满意度分析成为评估旅游景点质量和提升游客体验的重要手段。海口市作为中国的旅游城市之一&#xff0c;其旅游景点吸引了大量游客。然而&#xff0c;如何科学评估和提升海口市旅游景点的满意度&#xff0c;…
阅读更多...
中电金信-杭州工商银行｜面试真题｜2024年

中电金信-杭州工商银行｜面试真题｜2024年

中电金信-杭州工商银行 JAva集合用过哪些? ArrayList、LinkedList、HashSet、TreeSet、HashMap、LinkedHashMap、ConcurrentHashMap Arraylist和linkbist区别 ArrayList底层是数据&#xff0c;查询快&#xff0c;增删慢&#xff0c;线程不安全&#xff0c;效率高LikedList 底…
阅读更多...
【概率论三】参数估计：点估计（矩估计、极大似然法）、区间估计

【概率论三】参数估计：点估计（矩估计、极大似然法）、区间估计

文章目录 一. 点估计1. 矩估计法2. 极大似然法2.1. 似然函数2.2. 极大似然估计法 3. 评价估计量的标准3.1. 无偏性3.2. 有效性3.3. 一致性 二. 区间估计1. 区间估计的概念2. 正态总体参数的区间估计 参数估计讲什么 由样本来确定未知参数参数估计分为点估计与区间估计 一. 点估…
阅读更多...
算法：二叉树相关

算法：二叉树相关

目录 题目一&#xff1a;单值二叉树 题目二&#xff1a;二叉树的最大深度 题目三&#xff1a;相同的树 题目四&#xff1a;对称二叉树 题目五&#xff1a;另一棵树的子树 题目六&#xff1a;二叉树的前序遍历 题目七&#xff1a;二叉树遍历 题目八&#xff1a;根据二叉…
阅读更多...
linux搭建mysql主从复制（一主一从）

linux搭建mysql主从复制（一主一从）

目录 0、环境部署 1、主服务器配置 1.1 修改mysql配置文件 1.2 重启mysql 1.3 为从服务器授权 1.4 查看二进制日志坐标 2、从服务器配置 2.1 修改mysql配置文件 2.2 重启mysql 2.3 配置主从同步 2.4 开启主从复制 3、验证主从复制 3.1 主服务器上创建test…
阅读更多...
微服务拆分流程 （黑马商城拆分商品服务）

微服务拆分流程 （黑马商城拆分商品服务）

1. 创建新module - maven模块&#xff0c;并引入依赖&#xff08;可以复制 把不需要的依赖删掉 &#xff09; 2. 新建包com.hmall.xx&#xff08;业务名&#xff09;&#xff0c;添加和修改启动类&#xff0c;新建mapper包、domain包 - service包 - controller包 3. 拷贝并修…
阅读更多...
4款良心软件，免费又实用，内存满了都舍不得卸载

4款良心软件，免费又实用，内存满了都舍不得卸载

以下几款高质量软件&#xff0c;若是不曾体验&#xff0c;实在是遗憾可惜。 PDF Guru 这是一款开源免费的PDF编辑软件&#xff0c;打开之后功能一目了然。 可以拆分、合并PDF&#xff0c;也可以给PDF添加水印和密码&#xff0c;同时也可以去除别人PDF里的水印或密码&#xff0…
阅读更多...
HouseCrafter：平面草稿至3D室内场景的革新之旅

HouseCrafter：平面草稿至3D室内场景的革新之旅

在室内设计、房地产展示和影视布景设计等领域，将平面草稿图快速转换为立体的3D场景一直是一个迫切的需求。HouseCrafter，一个创新的AI室内设计方案，正致力于解决这一挑战。本文将探索HouseCrafter如何将这一过程自动化并提升至新的高度。 一、定位：AI室内设计的革新者 Ho…
阅读更多...
Scala之OOP讲解

Scala之OOP讲解

Scala OOP 前序 Scala 为纯粹OOP1、不支持基本类型&#xff1a;一切皆为对象 Byte,Int,...2、不支持静态关键字&#xff1a;static 3、支持类型推断【通过判断泛型的父子关系来确定泛型类的父子关系>协变&#xff0c;逆变&#xff0c;不变】和类型预定&#xff0c; 动静…
阅读更多...
【iOS】类对象的结构分析

【iOS】类对象的结构分析

目录 对象的分类object_getClass和class方法isa流程和继承链分析isa流程实例验证类的继承链实例验证 类的结构cache_t结构bits分析实例验证属性properties方法methods协议protocolsro类方法 类结构流程图解 对象的分类 OC中的对象主要可以分为3种&#xff1a;实例对象&#xf…
阅读更多...
【React】JSX基础

【React】JSX基础

一、简介 JSX是JavaScript XML的缩写&#xff0c;它是一种在JavaScript代码中编写类似HTML模板的结构的方法。JSX是React框架中构建用户界面&#xff08;UI&#xff09;的核心方式之一。 1.什么是JSX JSX允许开发者使用类似HTML的声明式模板来构建组件。它结合了HTML的直观性…
阅读更多...
TDesign组件库日常应用的一些注意事项

TDesign组件库日常应用的一些注意事项

【前言】Element&#xff08;饿了么开源组件库&#xff09;在国内使用的普及率和覆盖率高于TDesign-vue&#xff08;腾讯开源组件库&#xff09;&#xff0c;这也导致日常开发遇到组件使用上的疑惑时&#xff0c;网上几乎搜索不到其文章解决方案&#xff0c;只能深挖官方文档或…
阅读更多...
2024.7.17 ABAP面试题目总结

2024.7.17 ABAP面试题目总结

2024.7.17 用的SAP什么平台&#xff0c;S4/HANA吗&#xff0c;有用过ECC吗 S4/HANA&#xff0c;没用过ECC 会不会CDS VIEW 不会 会不会FIORI 不会 银企直连里面的逻辑了解不 不了解&#xff0c;做过&#xff0c;但是只能算很简单的修改 SAP做增强&#xff0c;如何创建…
阅读更多...
网络安全-网络安全及其防护措施7

网络安全-网络安全及其防护措施7

31.防病毒和恶意软件保护 防病毒和恶意软件防护的定义和作用 防病毒和恶意软件防护是一种保护计算机和网络免受病毒、木马、间谍软件等恶意软件侵害的安全措施。通过防护措施&#xff0c;可以检测、阻止和清除恶意软件&#xff0c;确保系统和数据的安全。其主要作用包括&…
阅读更多...
C++右值引用和移动语义

C++右值引用和移动语义

目录 概念&#xff1a; 左值引用和右值引用 概念&#xff1a; 注意&#xff1a; 左值引用的意义 作函数参数 函数引用返回 右值引用的意义 诞生背景 移动构造 移动赋值 其他应用 万能引用和完美转发 默认的移动构造和移动赋值 概念&#xff1a; 左值&#xff1a;顾…
阅读更多...
List数据的几种数据输出方式

List数据的几种数据输出方式

一、问题引入 在Java中&#xff0c;查询List集合是一项常见的任务&#xff0c;它可以通过多种方式实现&#xff0c;以满足不同的需求。下面&#xff0c;List数据的几种数据输出方式。 二、实例 /*** 查询所有用户信息* return*/ List<User> getAllUser(); <select…
阅读更多...
最新文章

Copyright @ 2022~2023