今日内容

零、 复习昨日

零、 复习昨日

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

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

编写登录页面

配置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 主页

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

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

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 用户页面布局

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

4.7 查询全部用户

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

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

4.8 分页展现

修改UserView页面的js代码

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