vue中的ElementUI的使用详解

登录+sessionStorage

效果展示

登录成功后会把用户id存入前端的sessionStorage，拦截器会根据是否存在用户id来进行拦截
也可以将用户权限存入sessionStorage，然后当访问某个页面的时候在created方法中判断是否具有权限

//scoped="scoped" 表示样式仅仅规范当前VUE

分页表格

效果展示

分页这一块是难点也是重点！！！
handleSizeChange方法选择分页大小
handleCurrentChange方法选择第几页
loadData调用后端API接口获取分页的数据

后端

@ResponseBody
    @RequestMapping(value = "/querystudentbypage", method = RequestMethod.GET)
    public Map querystudentbypage(@RequestParam(value="pageNum")int pageNum, @RequestParam(value="pageSize")int pageSize)
    {
        PageHelper.startPage(pageNum,pageSize);
        List courses = recordsMapper.selectList(null);
        PageInfo page = new PageInfo<>(courses);
        System.out.println("---------------"+page);
        Map map = new HashMap();
        map.put("pagestudentdata", page);
        map.put("number", page.getTotal());
        return map;
    }

参考链接

开关+标签页

效果展示

开关的主要方法 switchChange
标签页不难，如果看不懂下面代码，可以参考官方文档

前端开关主要代码

完整代码

前端拦截器

判断路由是否需要登录权限

main.js

router.beforeEach((to, from, next) => {
	// next()
	if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
		if (sessionStorage.getItem("personid")) {
			next()
		} else {
			// 未登录，跳转到登录页面
			next('/')
		}
	} else {
		next()
	}
})

route.js

在路由中添加 meta： requireAuth：true
表示是否需要登录才能访问

{
		path: '/listxw',
		name: '新闻管理',
		component: Index,
		show: true,
		meta: {
			requireAuth: true
		},

		redirect: "/listxw",
		children: [{
				path: "/addxw",
				name: "添加新闻",
				component: addxw,
				meta: {
					requireAuth: true
				},

			},
			{
				path: "/updatexw",
				name: "修改新闻",
				component: updatexw,
				meta: {
					requireAuth: true
				},

			},
			{
				path: '/listxw',
				name: '新闻列表',
				component: listxw,
				meta: {
					requireAuth: true
				},

			},
			{
				path: '/person',
				name: '个人信息',
				component: person,
				meta: {
					requireAuth: true
				},

			},
			{
				path: '/record',
				name: '交易记录',
				component: record,
				meta: {
					requireAuth: true
				},
			
			}
		],
	},

富文本编辑器

效果展示
下面几个名字是使用了富文本编辑器的回显

首先需要安装Vue-Quill-Editor
命令：npm install vue-quill-editor --save
下载quill（Vue-Quill-Editor需要依赖）
npm install quill --save

完整代码

vue中富文本编辑器使用参考链接

本地源代码
前端E:\VNC\project\capital_vue
后端E:\VNC\project\capital

到此这篇关于vue中的ElementUI的使用详解的文章就介绍到这了,更多相关vue ElementUI 使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！