vue中的ElementUI的使用详解

#vue中的ElementUI的使用详解| 来源: 网络整理| 查看: 265

效果展示

在这里插入图片描述

登录成功后会把用户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

完整代码

添加新闻 {{str}}

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

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

【本文地址】

公司简介

联系我们