在线考试系统（三）优化登录页面和主页开发

优化登录页面

安装element-ui

cnpm install element-ui –S

引入element-ui

引入分为完整引入和按需引入两种模式，按需引入可以缩小项目的体积，这里我们选择完整引入。就是在main.js里面引入

使用element-ui

修改login.vue页面最外层的div为< el-card > ==

== 启动前端，访问登录页面看效果

优化登录页面

安装sass和iview

是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。
Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。

cnpm install node-sass --save-dev       //安装node-sass
cnpm install sass-loader --save-dev     //安装依赖包sass-loader
cnpm install style-loader --save-dev    //安装style-loader
cnpm install iview –save

main.js中引入iview

导入去除空格工具js文件

导入login.vue页面以及附属静态文件

== assets/img assets/css/main.css ==

修改App.vue的样式

启动测试

启动项目访问登录页面

创建主页

common中导入主页相关文件

配置路由

import Vue from 'vue'
import Router from 'vue-router'
//导入刚刚编写的组件
import Login from '@/components/page/Login'
import Home from '@/components/common/Home'
//使用vue对象注册路由
Vue.use(Router)
//通过export导出自定义路由对象，帮助我们跳转页面
export default new Router({
	routes:[
		{
			path:'/login',//login是App.vue的子组件
			name:'Login',
			component:Login//表示对应的登录组件地址
		},
		{
			path:'/home',//home是App.vue的子组件
			name:'Home',
			component:Home
		
		}
	]
})

启动测试

访问登录页面，输入账号密码点击登录

修改主页菜单为动态数据(Sidebar.vue)

数据库

需要清洗成以下格式发送给前端

后端

VO类

持久层

业务层

package cn.exam.service.impl;

import java.util.ArrayList;
import java.util.Comparator;
import java.util.List;
import java.util.TreeSet;
import java.util.stream.Collectors;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import cn.exam.dao.mapper.RoleMenuMapper;
import cn.exam.service.RoleMenuService;
import cn.exam.vo.MenuInfoVO;

@Service
@Transactional
public class RoleMenuServiceImpl implements RoleMenuService {

	@Autowired
	private RoleMenuMapper roleMenuMapper;

	/**
	 * 根据角色id
	 * @param roleIdList 角色列表
	 */
	@Override
	public List<MenuInfoVO> queryMenuList(List<String> roleIdList) {
		List<MenuInfoVO> menuList = roleMenuMapper.queryMenuList(roleIdList);
//		System.out.println(menuList);
		// 一级菜单
		List<MenuInfoVO> menuVOS = menuList.stream().filter(f -> f.getMenuDegree().equals(0)).collect(Collectors.toList());
		// 二级菜单
		List<MenuInfoVO> menuVOS1 = menuList.stream().filter(f -> f.getMenuDegree().equals(1)).collect(Collectors.toList());
//		System.out.println("二级菜单menuVOS1="+menuVOS1);
		//根据菜单的id去重排序
		ArrayList<MenuInfoVO> infos2 = menuVOS1.stream().collect(
					/*Collectors.collectingAndThen
						 * 接受两个参数，第一个参数用于 reduce操作，而第二参数用于 map操作。
						 * 先把流中的所有元素传递给第一个参数，然后把生成的集合传递给第二个参数来处理。
					 */
					Collectors.collectingAndThen( 
							//Collectors.toCollection 就是把集合中的元素转换成参数指定的集合类型进行保存。
							Collectors.toCollection(() -> new TreeSet<>(Comparator.comparing(MenuInfoVO::getMenuId))),
							ArrayList::new 
							)
				);
		//forEach() 方法用于遍历动态数组中每一个元素并执行特定操作。
		menuVOS.forEach(y -> {
			List<MenuInfoVO> collect = infos2.stream().filter(q -> q.getParentId().equals(y.getMenuId())).collect(Collectors.toList());
			System.out.println("collect="+collect);//对二级菜单进行分组
			collect.forEach(q -> q.setIndex(q.getMenuIndex()));
			y.setIndex(y.getMenuIndex());
			y.setSubs(collect);
		});
//		System.out.println("menuVOS:"+menuVOS);
		return menuVOS;
	}
}

业务层测试类

控制层LoginController

/**
     *  根据角色Id菜单查询
     * @param userRoleVO   角色id
     * @param response 响应体
     */
    @RequestMapping("queryMenuByRoleId.htm")
    public void queryMenuList(@RequestBody UserRoleVO userRoleVO, HttpServletResponse response) {
        //把角色roleId转成json数组
        JSONArray array = JSON.parseArray(userRoleVO.getRoleId());
        List<String> roleIdList = new ArrayList<>();
        for (Object json : array) {
            JSONObject jsonObject = JSON.parseObject(json.toString());
            Object roleId1 = jsonObject.get("roleId");
            roleIdList.add(roleId1.toString());
        }
        ResultDTO<List<MenuInfoVO>> resultDTO = new ResultDTO<>();
        //根据角色id查询出来菜单数据
        List<MenuInfoVO> menuVOS = roleMenuService.queryMenuList(roleIdList);
        // jdk8新特性 stream流处理去重
        ArrayList<MenuInfoVO> infos2 = menuVOS.stream()
                .collect(Collectors.collectingAndThen(
                        Collectors.toCollection(() -> new TreeSet<>(Comparator.comparing(MenuInfoVO::getMenuId))),
                        ArrayList::new));
        resultDTO.setResult(infos2);
        resultDTO.buildReturnCode(SystemCode.RET_CODE_SUCC, SystemCode.RET_MSG_SUCC);
        sendJson(resultDTO, response);
    }

postMan测试

前端

这里要修改下后端Login方法存入roleId

迭代Login.vue页面

迭代Sidebar.vue页面

测试