ElementUIV12相关使用方法

2024-07-19 1285阅读

今日内容

零、复习昨日

一、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

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 登录页

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

编写登录页面

  
    
      
        登录页面
        
          
            
          
          
            
          
          
            登录
          
        
      
    
  


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
          });
        }
      })
    }
  }
}

配置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);
});

4.2 主页

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

  
    
    
      
      用户管理系统后端
      
      
        
        
          
          
            
                用户管理
                选项1
                选项2
            
            
              角色管理
              选项1
              选项2
            
            
              系统设置
              选项1
              选项2
            
          
        
        
        
          
          Main
          
          © 2024 Java2403ByTaotie Copyright
        
      
    
  


export default {
  name: 'Admin'
}


.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;
}

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

4.3 退出按钮

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

4.4 存储、销毁登录状态

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

登录时存入

退出时销毁

设置路由守护拦截

// 完整的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
```

配置

在/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 用户界面路由展示

设置路由入口,

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

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

4.6 用户页面布局

  
    
      
        
      
      
        
      
      
        查询
      
    
  
  
    
      
      
      
      
      
      
    
  
  
    
    
  


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 弄'
      },]
    }
  }
}


.box-card {
  width: 100%;
  margin-top: 10px;
}

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

4.7 查询全部用户

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

  
  
    
      
        
      
      
        
      
      
        查询
      
    
  
  
  
    
      
      
      
      
      
      
      
      
      
        
          编辑
          删除
        
      
    
  
  
  
    
    
  


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()
  }
}


.box-card {
  width: 100%;
  margin-top: 10px;
}

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

4.8 分页展现

修改UserView页面的js代码

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条
  }
}

4.9 模糊查询

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

js中设置事件,搜索

后端SpringBoot要设置动态sql

.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)]

VPS购买请点击我

免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们，邮箱：ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

ElementUIV12相关使用方法

今日内容

零、复习昨日

一、Element UI

二安装&入门使用

2.1 创建vue项目

2.2 安装ElementUI

2.3 项目中引入

2.4 测试

三、常用组件

四、练习

4.1 登录页

4.2 主页

4.3 退出按钮

4.4 存储、销毁登录状态

4.5 用户界面路由展示

4.6 用户页面布局

4.7 查询全部用户

4.8 分页展现

4.9 模糊查询

相关阅读

怎么把织梦的模板替换?

dedecms怎么调用特定的栏目文档?

怎么抓包一个网页?

wap怎么封装app?

目录[+]

今日内容

零、 复习昨日

一、Element UI

二 安装&入门使用

2.1 创建vue项目

2.2 安装ElementUI

2.3 项目中引入

2.4 测试

三、常用组件

四、练习

4.1 登录页

登录页面

4.2 主页

4.3 退出按钮

4.4 存储、销毁登录状态

4.5 用户界面路由展示

4.6 用户页面布局

4.7 查询全部用户

4.8 分页展现

4.9 模糊查询

相关阅读

怎么把织梦的模板替换?

dedecms怎么调用特定的栏目文档?

怎么抓包一个网页?

wap怎么封装app?

目录[+]

零、复习昨日

二安装&入门使用