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.pswp.cn/web/46245.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/46245.shtml
英文地址，請注明出處：http://en.pswp.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