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-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.mfbz.cn/a/800215.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

多样化数据可视化方法的全面示例：基于Python的多样化数据可视化

多样化数据可视化方法的全面示例：基于Python的多样化数据可视化

文章目录 前言代码效果展示 前言 本文演示了使用Python进行温度数据的多样化可视化方法。通过导入、处理和分析气象数据&#xff0c;我们生成了多种图表&#xff0c;包括直方图、核密度估计图、箱型图、小提琴图、条形图、山脊图、经验累积分布函数图和折线图。这些图表帮助我…
阅读更多...
从产品手册用户心理学分析到程序可用性与易用性的重要区别

从产品手册用户心理学分析到程序可用性与易用性的重要区别

注&#xff1a;机翻&#xff0c;未校对。 Designing for People Who Have Better Things To Do With Their Lives 为那些生活中有更重要事情要做的人设计 When you design user interfaces, it’s a good idea to keep two principles in mind: 在设计用户界面时&#xff0c;…
阅读更多...
微软Office PLUS办公插件下载安装指南

微软Office PLUS办公插件下载安装指南

微软OfficePLUS插件下载安装指南 简介&#xff1a; OfficePLUS微软官方出品的Office插件 &#xff0c;OfficePLUS拥有30万高质量模板素材&#xff0c;能帮助Word、Excel、Powerpoint、PDF等多种办公软件提升效率&#xff0c;具有智能化、模板质量高、运行快、稳定性强等优点。…
阅读更多...
探索Facebook：数字社交的魔力源泉

探索Facebook：数字社交的魔力源泉

在当今信息爆炸和全球互联的时代&#xff0c;社交媒体平台成为了人们生活中不可或缺的一部分。而在这些平台中&#xff0c;Facebook无疑是最具影响力和创新性的代表之一。自2004年成立以来&#xff0c;Facebook不仅改变了人们的沟通方式&#xff0c;更通过不断的技术创新和用户…
阅读更多...
Pycharm与Gitlab交互

Pycharm与Gitlab交互

环境准备 1、下载配置好本地Git 2、配置Pycharm上的Git 3、gitlab账号 Gitlab配置 Gitlab配置中文 账号》设置》偏好设置》简体中文 创建项目 命令行操作 打开项目会展示以下步骤 在pycharm克隆gitlab的项目 通过菜单栏 1、在PyCharm的顶部菜单栏中&#xff0c;选择“V…
阅读更多...
探索智能合约在金融科技中的前沿应用与挑战

探索智能合约在金融科技中的前沿应用与挑战

随着区块链技术的发展和普及&#xff0c;智能合约作为其核心应用之一&#xff0c;在金融科技&#xff08;FinTech&#xff09;领域中展现出了巨大的潜力和挑战。本文将深入探讨智能合约的基本概念、前沿应用案例&#xff0c;以及面临的技术挑战和发展趋势&#xff0c;旨在帮助读…
阅读更多...
R语言进行集成学习算法：随机森林

R语言进行集成学习算法：随机森林

# 10.4 集成学习及随机森林 # 导入car数据集 car <- read.table("data/car.data",sep ",") # 对变量重命名 colnames(car) <- c("buy","main","doors","capacity","lug_boot","safety"…
阅读更多...
昇思25天学习打卡营第11天|RNN实现情感分类

昇思25天学习打卡营第11天|RNN实现情感分类

概述 情感分类是自然语言处理中的经典任务&#xff0c;是典型的分类问题。本节使用MindSpore实现一个基于RNN网络的情感分类模型&#xff0c;实现如下的效果&#xff1a; 输入: This film is terrible 正确标签: Negative 预测标签: Negative输入: This film is great 正确标…
阅读更多...
SpringBoot之健康监控（Actuator）

SpringBoot之健康监控（Actuator）

1&#xff0c;基本介绍 Spring Actuator 是 Spring Boot 提供的一个扩展模块&#xff0c;用于监控和管理应用程序的生产环境。它通过 HTTP 端点暴露了大量的监控和管理功能&#xff0c;使得开发者可以在运行时查看应用程序的运行状况、配置信息、性能指标等。 主要功能&#…
阅读更多...
【Qt】探索Qt框架：开发经典贪吃蛇游戏的全过程与实践

【Qt】探索Qt框架：开发经典贪吃蛇游戏的全过程与实践

文章目录 引言项目链接&#xff1a;1. Qt框架的使用简介2. 贪吃蛇游戏设计2.1 游戏规则和玩法介绍2.2 游戏界面设计概述 3. 核心代码解析3.1 主界面&#xff08;GameHall&#xff09;3.1.1 布局和功能介绍3.1.2 代码实现分析 3.2 游戏选择界面&#xff08;GameSelect&#xff0…
阅读更多...
WPF+MvvmLight 项目入门完整教程（一）

WPF+MvvmLight 项目入门完整教程（一）

WPF+MvvmLight入门完整教程一 创建项目MvvmLight框架安装完善整个项目的目录结构创建自定义的字体资源下载更新和使用字体资源创建项目 打开VS2022,点击创建新项目,选择**WPF应用（.NET Framework）** 创建一个名称为 CommonProject_DeskTop 的项目，如下图所示：MvvmLight框架…
阅读更多...
redis原理之底层数据结构(二)-压缩列表

redis原理之底层数据结构(二)-压缩列表

1.绪论 压缩列表是redis最底层的结构之一&#xff0c;比如redis中的hash&#xff0c;list在某些场景下使用的都是压缩列表。接下来就让我们看看压缩列表结构究竟是怎样的。 2.ziplist 2.1 ziplist的组成 在低版本中压缩列表是由ziplist实现的&#xff0c;我们来看看他的结构…
阅读更多...
uniapp 微信小程序根据后端返回的文件链接打开并保存到手机文件夹中【支持doc、docx、txt、xlsx等类型的文件】

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

项目场景&#xff1a; 我们在使用uniapp官方提供的uni.downloadFile以及uni.saveFile时&#xff0c;会发现这个文件下载的默认保存位置和我们预想的不太一样&#xff0c;容易找不到&#xff0c;而且没有提示&#xff0c;那么我们就需要把文件打开自己保存并且有提示保存到哪个…
阅读更多...
fastadmin导入vue

fastadmin导入vue

前台 require-frontend.js或frontend-init.js 后台 require-backend.js或backend-init.js 后台 方法一 require-backend.js 在 paths 中加入’vue’:‘…/libs/vue/vue.min’, 在shim 中加入 paths: {............vue:../libs/vue/vue.min, } shim: {............vue: {ex…
阅读更多...
acrobat 中 PDF 复制时不能精确选中所选内容所在行的一种解决方法

acrobat 中 PDF 复制时不能精确选中所选内容所在行的一种解决方法

现象&#xff1a;划取行的时候&#xff0c;自动扩展为多行 如果整段选中复制&#xff0c;粘贴后是乱码 解决步骤 识别完&#xff0c;保存 验证 可以按行复制了。 如果遇到仅使用 acrobat OCR 不能彻底解决的&#xff0c;更换其他自己熟悉的进行 OCR。
阅读更多...
小程序-模板与配置

小程序-模板与配置

一、WXML模板语法 1.数据绑定 2.事件绑定 什么是事件 小程序中常用的事件 事件对象的属性列表 target和currentTarget的区别 bindtap的语法格式 在事件处理函数中为data中的数据赋值 事件传参 &#xff08;以下为错误示例&#xff09; 3.事件传参与数据同步 4.条件渲染 …
阅读更多...
three.js创建基础模型

three.js创建基础模型

场景是一个三维空间&#xff0c;是所有物品的容器。可以将其想象成一个空房间&#xff0c;里面可以放置要呈现的物体、相机、光源等。 通过new THREE.Scene()来创建一个新的场景。 /**1. 创建场景 -- 放置物体对象的环境*/ const scene new THREE.Scene();场景只是一个三维的…
阅读更多...
如何安装node.js

如何安装node.js

Node.js Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境。 主要特点和优势&#xff1a; 非阻塞 I/O 和事件驱动&#xff1a;能够高效处理大量并发连接&#xff0c;非常适合构建高并发的网络应用&#xff0c;如 Web 服务器、实时聊天应用等。 例如&#xff0c;在…
阅读更多...
电脑远程开关机

电脑远程开关机

1. 远程开机 参考&#xff1a;https://post.smzdm.com/p/664774/ 1.1 Wake On LAN - 局域网唤醒&#xff08;需要主板支持&#xff0c;一般都支持&#xff09; 要使用远程唤醒&#xff0c;有几种方式&#xff1a;使用类似向日葵开机棒&#xff08;很贵&#xff09;、公网ip&…
阅读更多...
车载音视频MediaPlayer优化方案

车载音视频MediaPlayer优化方案

媒体播放现状 从手机到车载&#xff0c;在很多地方还是有很大的不同。针对多媒体的场景Android车机目前大部分结构大致结构如下图&#xff1a; 从以上图看出的问题&#xff1a; 各个音视频APP单独实现播控界面&#xff0c;播放链路不一致&#xff0c;使用的底层播放器和音频焦…
阅读更多...
最新文章

Copyright @ 2022~2023