ElementUIV12相关使用方法

news2024/12/23 8:24:02

今日内容

零、 复习昨日

零、 复习昨日

一、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-column
          prop="date"
          label="日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="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-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
              size="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)// 返回的是后端返回的PageInfo
          this.userList = res.data.list
          this.total = res.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条
  }
}
</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.coloradmin.cn/o/1928175.html

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

相关文章

MySQL-高可用

MySQL-高可用

目录 高可用 Mysql的主从复制的过程是怎样的&#xff1f; MySQL提供了几种复制模式? 默认的复制模式是什么? 主从同步延迟的原因 MySQL主从复制的数据延迟怎么解决? MySQL主从架构中&#xff0c;读写分离怎么实现? MySQL主库挂了怎么办? 什么是分库分表? 什么时候…
阅读更多...
CentOS 7 Web面板的文件管理器说明

CentOS 7 Web面板的文件管理器说明

在使用CentOS 7 Web Panel&#xff08;CWP7&#xff09;时&#xff0c;偶尔要求在服务器曲面上修改&#xff0c;创建&#xff0c;编辑或删除文件。 最简单&#xff0c;最直接的方式是通过利用CWP7的内置文件管理器。 本文将详细介绍如何启动它&#xff0c;使用它&#xff0c;以…
阅读更多...
CentOS安装双版本MySQL

CentOS安装双版本MySQL

CentOS安装双版本MySQL 一、下载mysql二、检查服务器是否安装过mysql三、卸载CentOS7自带的mariadb四、创建mysql用户和用户组五、安装mysql57 (第一个)六、安装mysql8 (第二个) 一、下载mysql 本文以5.7.31和8.0.38为例 去官网下载 压缩包 https://dev.mysql.com/downloads/my…
阅读更多...
uniapp 微信小程序根据后端返回的文件链接打开并保存到手机文件夹中【支持doc、docx、txt、xlsx等类型的文件】

uniapp 微信小程序根据后端返回的文件链接打开并保存到手机文件夹中【支持doc、docx、txt、xlsx等类型的文件】

项目场景&#xff1a; 我们在使用uniapp官方提供的uni.downloadFile以及uni.saveFile时&#xff0c;会发现这个文件下载的默认保存位置和我们预想的不太一样&#xff0c;容易找不到&#xff0c;而且没有提示&#xff0c;那么我们就需要把文件打开自己保存并且有提示保存到哪个…
阅读更多...
如何构建全生命周期的安全体系架构来确保容器的安全？

如何构建全生命周期的安全体系架构来确保容器的安全？

容器技术在云原生应用和微服务架构中得到了广泛应用&#xff0c;其轻量、灵活和高效的特点使其成为现代IT环境中的重要工具。然而&#xff0c;尽管容器带来了许多优势&#xff0c;但其安全性问题也不容忽视。接下来跟随博主一起探索如何构建全生命周期的安全体系架构以确保容器…
阅读更多...
＜数据集＞钢索缺陷检测数据集＜目标检测＞

＜数据集＞钢索缺陷检测数据集＜目标检测＞

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;1318张 标注数量(xml文件个数)&#xff1a;1318 标注数量(txt文件个数)&#xff1a;1318 标注类别数&#xff1a;3 标注类别名称&#xff1a;[break, thunderbolt] 序号类别名称图片数框数1break7678222thunderbo…
阅读更多...
【HarmonyOS】HarmonyOS NEXT学习日记：一、创建和运行一个页面

【HarmonyOS】HarmonyOS NEXT学习日记：一、创建和运行一个页面

【HarmonyOS】HarmonyOS NEXT学习日记&#xff1a;一 DevEco Studio下载与安装 直接到官网的下载地址下载即可 正常下载、解压、安装完成后 正常来说不会有项目&#xff0c;并且是英文界面。 需要汉化的话可以按照下面的步骤设置插件 选择customize里的 all setting 进入…
阅读更多...
在 electron+vite+vue3+express 项目中使用better-sqlite3

在 electron+vite+vue3+express 项目中使用better-sqlite3

文章目录 一、安装 electron-rebuild 和 better-sqlite3二、使用 electron-rebuild 重建 Node.js 模块三、better-sqlite3 的基本使用四、打包五、参考资料 一、安装 electron-rebuild 和 better-sqlite3 yarn add -D electron-rebuild yarn add better-sqlite3Electron 内置的…
阅读更多...
【Android安全】Ubuntu 下载、编译 、刷入Android-8.1.0_r1

【Android安全】Ubuntu 下载、编译 、刷入Android-8.1.0_r1

0. 环境准备 Ubuntu 16.04 LTS&#xff08;预留至少95GB磁盘空间&#xff0c;实测占94.2GB&#xff09; Pixel 2 XL 要买欧版的&#xff0c;不要美版的。 欧版能解锁BootLoader、能刷机。 美版IMEI里一般带“v”或者"version"&#xff0c;这样不能解锁BootLoader、…
阅读更多...
Pycharm与Gitlab交互

Pycharm与Gitlab交互

环境准备 1、下载配置好本地Git 2、配置Pycharm上的Git 3、gitlab账号 Gitlab配置 Gitlab配置中文 账号》设置》偏好设置》简体中文 创建项目 命令行操作 打开项目会展示以下步骤 在pycharm克隆gitlab的项目 通过菜单栏 1、在PyCharm的顶部菜单栏中&#xff0c;选择“V…
阅读更多...
uniapp字符串转base64，无需导入依赖（多端支持）

uniapp字符串转base64，无需导入依赖（多端支持）

使用示例 import { Base64Encode, Base64Decode } from "@/utils/base64.js" base64.js const _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";export const Base64Encode = (text)
阅读更多...
鸿蒙基本工程目录

鸿蒙基本工程目录

工程级目录 AppScope 中存放应用全局所需要的资源文件。entry 是应用的主模块&#xff0c;存放 HarmonyOS 应用的代码、资源等。oh_modules 是工程的依赖包&#xff0c;存放工程依赖的源文件。build-profile.json5 是工程级配置信息&#xff0c;包括签名、产品配置等。hvigorf…
阅读更多...
uniapp-vue3-vite 搭建小程序、H5 项目模板

uniapp-vue3-vite 搭建小程序、H5 项目模板

uniapp-vue3-vite 搭建小程序、H5 项目模板 特色准备拉取默认UniApp模板安装依赖启动项目测试结果 配置自动化导入安装依赖在vite.config.js中配置 引入 prerttier eslint stylelint.editorconfig.prettierrc.cjs.eslintrc.cjs.stylelintrc.cjs 引入 husky lint-staged com…
阅读更多...
《0基础》学习Python——第十一讲

《0基础》学习Python——第十一讲

一、lambda 匿名函数 lambda函数是一种匿名函数。它是一种快速定义单行函数的方法。与常规函数不同&#xff0c;lambda函数没有名称&#xff0c;也没有使用def关键字来定义。lambda函数通常用于一些简单的函数&#xff0c;可以在代码中快速定义和使用&#xff0c;而不需要为其定…
阅读更多...
推荐系统：从协同过滤到深度学习

推荐系统：从协同过滤到深度学习

目录 一、协同过滤&#xff08;Collaborative Filtering, CF&#xff09;1. 基于用户的协同过滤2. 基于物品的协同过滤 二、深度学习在推荐系统中的应用1. 深度学习模型的优势2. 深度学习在推荐系统中的应用实例 三、总结与展望 推荐系统是现代信息处理和传播中不可或缺的技术&…
阅读更多...
异常检测算法

异常检测算法

目录 一、异常检测算法功能&#xff1a;二、正态&#xff08;高斯&#xff09;分布&#xff1a;三、异常检测算法执行过程&#xff1a;四、如何选择特征&#xff1a;五、评估异常检测算法&#xff1a; 一、异常检测算法功能&#xff1a; 异常检测算法用来检测数据集中的一些异…
阅读更多...
VsCode 与远程服务器 ssh免密登录

VsCode 与远程服务器 ssh免密登录

首先配置信息 加入下列信息 Host qb-zn HostName 8.1xxx.2xx.3xx User root ForwardAgent yes Port 22 IdentityFile ~/.ssh/id_rsa 找到自己的公钥&#xff0c;不带pub是私钥&#xff0c;打死都不能给别人。复制公钥 拿到公钥后&#xff0c;来到远程服务器 vim ~/.ss…
阅读更多...
LLM 构建Data Multi-Agents 赋能数据分析平台的实践之④：数据分析之三(数据展示)

LLM 构建Data Multi-Agents 赋能数据分析平台的实践之④：数据分析之三(数据展示)

概述 在先前探讨的文章中&#xff0c;我们构建了一个全面的数据测试体系&#xff0c;该体系遵循“数据获取—数据治理—数据分析”的流程。如何高效地构建数据可视化看板&#xff0c;以直观展现分析结果&#xff0c;正逐渐成为利用新兴技术提升效能的关键领域。伴随业务拓展、数…
阅读更多...
前端路由手写Hash和History两种模式

前端路由手写Hash和History两种模式

文章目录 1. Hash模式&#xff1a;简洁而广泛适用2. History模式&#xff1a;更自然的用户体验3. 结论 在现代Web开发中&#xff0c;单页面应用&#xff08;Single Page Application&#xff0c;简称SPA&#xff09;因其流畅的用户体验和高效的页面交互能力而备受青睐。前端路由…
阅读更多...
C#学习3-微软C#官方文档Microsoft-dotnet-csharp.pdf

C#学习3-微软C#官方文档Microsoft-dotnet-csharp.pdf

文章目录 1.内插表达式的字段宽度和对齐方式 1.内插表达式的字段宽度和对齐方式 static void Main(string[] args) {var titles new Dictionary<string, string>() {["Doyle ,Arthur"] "Hound of the Basker,The",["Lodon ,Jack"] &quo…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023