【Vue进阶】ElementUI、Vue-Router、Vuex
文章目录
-
- Vue 进阶
-
- 1) ElementUI
-
- 表格组件
- 分页组件
- 分页搜索
- 级联选择
- 2) Vue-Router
-
- 配置路由
- 动态导入
- 嵌套路由
- ElementUI 布局
- 路由跳转
-
- 标签式
- 编程式
- 导航菜单
- 动态路由与菜单
-
- 动态路由
- 重置路由
- 页面刷新
- 动态菜单
- 3) Vuex
-
- 入门
- mapState
- mapMutations
- actions
Vue 进阶
1) ElementUI
安装（在项目的目录下）
npm install element-ui -S
在main.js中引入组件
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)
测试，在自己的组件中使用 ElementUI 的组件
按钮
表格组件
<template>
<div>
<el-table :data="students">
<el-table-column label="编号" prop="id">el-table-column>
<el-table-column label="姓名" prop="name">el-table-column>
<el-table-column label="性别" prop="sex">el-table-column>
<el-table-column label="年龄" prop="age">el-table-column>
el-table>
div>
template>
<script>
import axios from '../util/myaxios'
const options = {
async mounted() {
const resp = await axios.get('/api/students');
this.students = resp.data.data
},
data() {
return {
students: []
}
}
}
export default options;
script>
分页组件
<template>
<div>
<el-table v-bind:data="students">
<el-table-column label="编号" prop="id">el-table-column>
<el-table-column label="姓名" prop="name">el-table-column>
<el-table-column label="性别" prop="sex">el-table-column>
<el-table-column label="年龄" prop="age">el-table-column>
el-table>
el-pagination>
div>
template>
<script>
import axios from '../util/myaxios'
const options = {
mounted() {
this.query();
},
methods: {
currentChange(page) {
this.queryDto.page = page;
this.query();
},
sizeChange(size){
this.queryDto.size = size;
this.query();
},
async query() {
const resp = await axios.get('/api/students/q', {
params: this.queryDto //get请求，只能传参，不能使用请求体
});
this.students = resp.data.data.list;
this.total = resp.data.data.total;
}
},
data() {
return {
students: [],
total: 0,
queryDto: {
page: 1,
size: 5
}
}
}
}
export default options;
script>
- 三种情况都应该触发查询
- mounted 组件挂载完成后
- 页号变化时
- 页大小变化时
- 查询传参应该根据后台需求，灵活采用不同方式
- 本例中因为是 get 请求，无法采用请求体，只能用 params 方式传参
- 返回响应的格式也许会很复杂，需要掌握【根据返回的响应结构，获取数据】的能力
分页搜索
<template>
<div>
<el-input placeholder="请输入姓名" size="mini" v-model="queryDto.name">el-input>
<el-select placeholder="请选择性别" size="mini" v-model="queryDto.sex" clearable>
<el-option value="男">el-option>
<el-option value="女">el-option>
el-select>
<el-select placeholder="请选择年龄" size="mini" v-model="queryDto.age" clearable>
<el-option value="0,20" label="0到20岁">el-option>
<el-option value="21,30" label="21到30岁">el-option>
<el-option value="31,40" label="31到40岁">el-option>
<el-option value="41,120" label="41到120岁">el-option>
el-select>
<el-button type="primary" size="mini" @click="search()">搜索el-button>
<el-divider>el-divider>
<el-table v-bind:data="students">
<el-table-column label="编号" prop="id">el-table-column>
<el-table-column label="姓名" prop="name">el-table-column>
<el-table-column label="性别" prop="sex">el-table-column>
<el-table-column label="年龄" prop="age">el-table-column>
el-table>
<el-pagination :total="total" :page-size="queryDto.size" :current-page="queryDto.page"
layout="prev,pager,next,sizes,->,total" :page-sizes="[5, 10, 15, 20]" @current-change="currentChange"
@size-change="sizeChange">el-pagination>
div>
template>
<script>
import axios from '../util/myaxios'
const options = {
mounted() {
this.query();
},
methods: {
currentChange(page) {
this.queryDto.page = page;
this.query();
},
sizeChange(size) {
this.queryDto.size = size;
this.query();
},
async query() {
const resp = await axios.get('/api/students/q', {
params: this.queryDto
});
this.students = resp.data.data.list;
this.total = resp.data.data.total;
},
search() {
this.query();
}
},
data() {
return {
students: [],
total: 0,
queryDto: {
name: '',
sex: '',
age: '',
page: 1,
size: 5
}
}
}
}
export default options;
script>
- sex 与 age 均用
''表示用户没有选择的情况 - age 取值
0,20会被 spring 转换为new int[]{0, 20} - age 取值
''会被 spring 转换为new int[0] - clearable：表示可清除的
级联选择
级联选择器中选项的数据结构为
[
{value:100, label:'主页',children:[
{value:101, label:'菜单1', children:[
{value:105, label:'子项1'},
{value:106, label:'子项2'}
]},
{value:102, label:'菜单2', children:[
{value:107, label:'子项3'},
{value:108, label:'子项4'},
{value:109, label:'子项5'}
]},
{value:103, label:'菜单3', children:[
{value:110, label:'子项6'},
{value:111, label:'子项7'}
]},
{value:104, label:'菜单4'}
]}
]
下面的例子是将后端返回的一维数组【树化】
<template>
<el-cascader :options="ops">el-cascader>
template>
<script>
import axios from '../util/myaxios'
const options = {
async mounted() {
const resp = await axios.get('/api/menu')
console.log(resp.data.data)
const array = resp.data.data;
const map = new Map();
// 1. 将所有数据存入 map 集合(为了接下来查找效率)
for(const {id,name,pid} of array) {
map.set(id, {value:id, label:name, pid:pid})
}
// 2. 建立父子关系
// 3. 找到顶层对象
const top = [];
for(const obj of map.values()) {
const parent = map.get(obj.pid);
if(parent !== undefined) {
//if(parent.children==null){
// parent.children = [];
//}
parent.children ??= [];//zhe'han
parent.children.push(obj);
} else {
top.push(obj)
}
}
this.ops = top;
},
data(){
return {
ops: []
}
}
};
export default options;
script>
2) Vue-Router
vue 属于单页面应用，所谓的路由，就是根据浏览器路径不同，用不同的视图组件替换这个页面内容展示
配置路由
新建一个路由 js 文件，例如 src/router/example14.js，内容如下
import Vue from 'vue'
import VueRouter from 'vue-router'
import ContainerView from '@/views/example14/ContainerView.vue'//绝对路径，@表示src目录
import LoginView from '@/views/example14/LoginView.vue'
import NotFoundView from '@/views/example14/NotFoundView.vue'
Vue.use(VueRouter)
const routes = [
{
path:'/',
component: ContainerView
},
{
path:'/login',
component: LoginView
},
{
path:'/404',
component: NotFoundView
}
]
const router = new VueRouter({ //固定写法
routes
})
export default router
- 最重要的就是建立了【路径】与【视图组件】之间的映射关系
- 本例中映射了 3 个路径与对应的视图组件
在 main.js 中采用我们的路由 js
import Vue from 'vue'
import e14 from './views/Example14View.vue'
import router from './router/example14' // 修改这里，原来是./router,省略了/index
import store from './store'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(Element)
new Vue({
router,
store,
render: h => h(e14)
}).$mount('#app')
根组件是 Example14View.vue，内容为：
<template>
<div class="all">
<router-view>router-view>
div>
template>
- 样式略
- 其中
动态导入
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path:'/',
component: () => import('@/views/example14/ContainerView.vue')
},
{
path:'/login',
component: () => import('@/views/example14/LoginView.vue')
},
{
path:'/404',
component: () => import('@/views/example14/NotFoundView.vue')
}
]
const router = new VueRouter({
routes
})
export default router
- 静态导入是将所有组件的 js 代码打包到一起，如果组件非常多，打包后的 js 文件会很大，影响页面加载速度
- 动态导入是将组件的 js 代码放入独立的文件，用到时才加载
嵌套路由
组件内再要切换内容，就需要用到嵌套路由（子路由），下面的例子是在【ContainerView 组件】内定义了 3 个子路由
const routes = [
{
path:'/',
component: () => import('@/views/example14/ContainerView.vue'),
redirect: '/c/p1', //父界面加载就重定向到p1
children: [
{
path:'c/p1',
component: () => import('@/views/example14/container/P1View.vue')
},
{
path:'c/p2',
component: () => import('@/views/example14/container/P2View.vue')
},
{
path:'c/p3',
component: () => import('@/views/example14/container/P3View.vue')
}
]
},
{
path:'/login',
component: () => import('@/views/example14/LoginView.vue')
},
{
path:'/404',
component: () => import('@/views/example14/NotFoundView.vue')
},
{
path:'*', //将所有访问路径不存在的重定向到404界面
redirect: '/404'
}
]
子路由变化，切换的是【ContainerView 组件】中
<template>
<div class="container">
<router-view></router-view>
</div>
</template>
- redirect 可以用来重定向（跳转）到一个新的地址
- path 的取值为 * 表示匹配不到其它 path 时，就会匹配它
ElementUI 布局
通常主页要做布局，下面的代码是 ElementUI 提供的【上-【左-右】】布局
<template>
<div class="container">
<el-container>
<el-header>el-header>
<el-container>
<el-aside width="200px">el-aside>
<el-main>
<router-view>router-view>
el-main>
el-container>
el-container>
div>
template>
路由跳转
标签式
<el-aside width="200px">
<router-link to="/c1/p1">P1router-link>
<router-link to="/c1/p2">P2router-link>
<router-link to="/c1/p3">P3router-link>
el-aside>
编程式
<el-header>
<el-button type="primary" icon="el-icon-edit"
circle size="mini" @click="jump('/c1/p1')">el-button>
<el-button type="success" icon="el-icon-check"
circle size="mini" @click="jump('/c1/p2')">el-button>
<el-button type="warning" icon="el-icon-star-off"
circle size="mini" @click="jump('/c1/p3')">el-button>
el-header>
jump 方法
<script>
const options = {
methods : {
jump(url) {
this.$router.push(url);
}
}
}
export default options;
</script>
- 其中 this.$router 是拿到路由对象
- push 方法根据 url 进行跳转
导航菜单
<el-menu router background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<el-submenu index="/c1">
<span slot="title">
<i class="el-icon-platform-eleme">i>
菜单1
span>
<el-menu-item index="/c1/p1">子项1el-menu-item>
<el-menu-item index="/c1/p2">子项2el-menu-item>
<el-menu-item index="/c1/p3">子项3el-menu-item>
el-submenu>
<el-menu-item index="/c2">
<span slot="title">
<i class="el-icon-phone">i>
菜单2
span>
el-menu-item>
<el-menu-item index="/c3">
<span slot="title">
<i class="el-icon-star-on">i>
菜单3
span>
el-menu-item>
el-menu>
- el-submenu表示父菜单，下面还有子菜单，el-menu-item表示子菜单
- 图标和菜单项文字建议用
包裹起来 el-menu标签上加上router属性，表示结合导航菜单与路由对象，此时，就可以利用菜单项的index属性来路由跳转
动态路由与菜单
将菜单、路由信息（仅主页的）存入数据库中
insert into menu(id, name, pid, path, component, icon) values
(101, '菜单1', 0, '/m1', null, 'el-icon-platform-eleme'),
(102, '菜单2', 0, '/m2', null, 'el-icon-delete-solid'),
(103, '菜单3', 0, '/m3', null, 'el-icon-s-tools'),
(104, '菜单4', 0, '/m4', 'M4View.vue', 'el-icon-user-solid'),
(105, '子项1', 101, '/m1/c1', 'C1View.vue', 'el-icon-s-goods'),
(106, '子项2', 101, '/m1/c2', 'C2View.vue', 'el-icon-menu'),
(107, '子项3', 102, '/m2/c3', 'C3View.vue', 'el-icon-s-marketing'),
(108, '子项4', 102, '/m2/c4', 'C4View.vue', 'el-icon-s-platform'),
(109, '子项5', 102, '/m2/c5', 'C5View.vue', 'el-icon-picture'),
(110, '子项6', 103, '/m3/c6', 'C6View.vue', 'el-icon-upload'),
(111, '子项7', 103, '/m3/c7', 'C7View.vue', 'el-icon-s-promotion');
不同的用户查询的的菜单、路由信息是不一样的
例如：访问 /api/menu/admin 返回所有的数据
[
{
"id": 102,
"name": "菜单2",
"icon": "el-icon-delete-solid",
"path": "/m2",
"pid": 0,
"component": null
},
{
"id": 107,
"name": "子项3",
"icon": "el-icon-s-marketing",
"path": "/m2/c3",
"pid": 102,
"component": "C3View.vue"
},
{
"id": 108,
"name": "子项4",
"icon": "el-icon-s-platform",
"path": "/m2/c4",
"pid": 102,
"component": "C4View.vue"
},
{
"id": 109,
"name": "子项5",
"icon": "el-icon-picture",
"path": "/m2/c5",
"pid": 102,
"component": "C5View.vue"
}
]
访问 /api/menu/wang 返回
[
{
"id": 103,
"name": "菜单3",
"icon": "el-icon-s-tools",
"path": "/m3",
"pid": 0,
"component": null
},
{
"id": 110,
"name": "子项6",
"icon": "el-icon-upload",
"path": "/m3/c6",
"pid": 103,
"component": "C6View.vue"
},
{
"id": 111,
"name": "子项7",
"icon": "el-icon-s-promotion",
"path": "/m3/c7",
"pid": 103,
"component": "C7View.vue"
}
]
前端根据他们身份不同，动态添加路由和显示菜单
动态路由
export function addServerRoutes(array) {
for (const { id, path, component } of array) {
if (component !== null) {
// 动态添加路由
// 参数1：父路由名称
// 参数2：路由信息对象
router.addRoute('c', {
path: path,
name: id,
component: () => import(`@/views/example15/container/${component}`)
});
}
}
}
- js 这边只保留几个固定路由，如主页、404 和 login
- 以上方法执行时，将服务器返回的路由信息加入到名为 c 的父路由中去
- 这里要注意组件路径，前面 @/views 是必须在 js 这边完成拼接的，否则 import 函数会失效
重置路由
在用户注销时应当重置路由
export function resetRouter() {
router.matcher = new VueRouter({ routes }).matcher
}
页面刷新
页面刷新后，会导致动态添加的路由失效，解决方法是将路由数据存入 sessionStorage
页面刷新，重新创建路由对象时，从 sessionStorage 里恢复路由数据
const router = new VueRouter({
routes
})
// 从 sessionStorage 中恢复路由数据
const serverRoutes = sessionStorage.getItem('serverRoutes');
if(serverRoutes) {
const array = JSON.parse(serverRoutes);
addServerRoutes(array) // 动态添加路由
}
动态菜单
代码部分
<script>
const options = {
mounted() {
const serverRoutes = sessionStorage.getItem('serverRoutes');
const array = JSON.parse(serverRoutes);
const map = new Map();
for(const obj of array) {
map.set(obj.id, obj);
}
const top = [];
for(const obj of array) {
const parent = map.get(obj.pid);
if(parent) {
parent.children ??= [];
parent.children.push(obj);
} else {
top.push(obj);
}
}
this.top = top;
},
data() {
return {
top: []
}
}
}
export default options;
script>
菜单部分
<el-menu router background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :unique-opened="true">
<template v-for="m1 of top">
<el-submenu v-if="m1.children" :key="m1.id" :index="m1.path">
<span slot="title">
<i :class="m1.icon">i> {{m1.name}}
span>
<el-menu-item v-for="m2 of m1.children" :key="m2.id" :index="m2.path">
<span slot="title">
<i :class="m2.icon">i> {{m2.name}}
span>
el-menu-item>
el-submenu>
<el-menu-item v-else :key="m1.id" :index="m1.path">
<span slot="title">
<i :class="m1.icon">i> {{m1.name}}
span>
el-menu-item>
template>
el-menu>
- 没有考虑递归菜单问题，认为菜单只有两级
3) Vuex
入门
vuex 可以在多个组件之间共享数据，并且共享的数据是【响应式】的，即数据的变更能及时渲染到模板
- 与之对比 localStorage 与 sessionStorage 也能共享数据，但缺点是数据并非【响应式】
首先需要定义 state 与 mutations 他们一个用来读取共享数据，一个用来修改共享数据
src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
/*
读取数据，走 state, getters
修改数据，走 mutations, actions
*/
export default new Vuex.Store({
state: {
name: '',
age: 18
},
getters: {
},
mutations: {
updateName(state, name) {
state.name = name;
}
},
actions: {
},
modules: {
}
})
修改共享数据
<template>
<div class="p">
<el-input placeholder="请修改用户姓名"
size="mini" v-model="name">el-input>
<el-button type="primary" size="mini" @click="update()">修改el-button>
div>
template>
<script>
const options = {
methods: {
update(){
this.$store.commit('updateName', this.name);
}
},
data () {
return {
name:''
}
}
}
export default options;
script>
- mutations 方法不能直接调用，只能通过
store.commit(mutation方法名, 参数)来间接调用
读取共享数据
<template>
<div class="container">
<el-container>
<el-header>
<div class="t">
欢迎您：{{ $store.state.name }}, {{ $store.state.age }}
div>
el-header>
<el-container>
<el-aside width="200px">
el-aside>
<el-main>
<router-view>router-view>
el-main>
el-container>
el-container>
div>
template>
mapState
每次去写 $store.state.name 这样的代码显得非常繁琐，可以用 vuex 帮我们生成计算属性
<template>
<div class="container">
<el-container>
<el-header>
<div class="t">欢迎您：{{ name }}, {{ age }}div>
el-header>
<el-container>
<el-aside width="200px">
el-aside>
<el-main>
<router-view>router-view>
el-main>
el-container>
el-container>
div>
template>
<script>
import { mapState } from 'vuex'
const options = {
computed: {
...mapState(['name', 'age'])
}
}
export default options;
script>
- mapState 返回的是一个对象，对象内包含了 name() 和 age() 的这两个方法作为计算属性
- 此对象配合
...展开运算符，填充入 computed 即可使用
mapMutations
<template>
<div class="p">
<el-input placeholder="请修改用户姓名"
size="mini" v-model="name">el-input>
<el-button type="primary" size="mini" @click="updateName(name)">修改el-button>
div>
template>
<script>
import {mapMutations} from 'vuex'
const options = {
methods: {
...mapMutations(['updateName'])
},
data () {
return {
name:''
}
}
}
export default options;
script>
- 类似的，调用 mutation 修改共享数据也可以简化
- mapMutations 返回的对象中包含的方法，就会调用 store.commit() 来执行 mutation 方法
- 注意参数传递略有不同
actions
mutations 方法内不能包括修改不能立刻生效的代码，否则会造成 Vuex 调试工具工作不准确，必须把这些代码写在 actions 方法中
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
/*
读取数据，走 state, getters
修改数据，走 mutations, actions
*/
import axios from '@/util/myaxios'
export default new Vuex.Store({
state: {
name: '',
age: 18
},
getters: {
},
mutations: {
updateName(state, name) {
state.name = name;
},
// 错误的用法，如果在mutations方法中包含了异步操作，会造成开发工具不准确
/* async updateServerName(state) {
const resp = await axios.get('/api/user');
const {name, age} = resp.data.data;
state.name = name;
state.age = age;
} */
updateServerName(state, user) {
const { name, age } = user;
state.name = name;
state.age = age;
}
},
actions: {
async updateServerName(context) {
const resp = await axios.get('/api/user');
context.commit('updateServerName', resp.data.data)
}
},
modules: {
}
})
- 首先应当调用 actions 的 updateServerName 获取数据
- 然后再由它间接调用 mutations 的 updateServerName 更新共享数据
页面使用 actions 的方法可以这么写
<template>
<div class="p">
<el-button type="primary" size="mini"
@click="updateServerName()">从服务器获取数据,存入storeel-button>
div>
template>
<script>
import { mapActions } from 'vuex'
const options = {
methods: {
...mapActions(['updateServerName'])
}
}
export default options;
script>
-
mapActions 会生成调用 actions 中方法的代码
-
调用 actions 的代码内部等价于，它返回的是 Promise 对象，可以用同步或异步方式接收结果
this.$store.dispatch('action名称', 参数)