如何使用ssm实现班级同学录网站

@TOC

10912ssm班级同学录网站

系统概述

进过系统的分析后，就开始记系统的设计，系统设计包含总体设计和详细设计。总体设计只是一个大体的设计，经过了总体设计，我们能够划分出系统的一些东西，例如文件、文档、数据等。而且我们通过总体设计，大致可以划分出了程序的模块，以及功能。但是只是一个初步的分类，并没有真正的实现。

整体设计，只是一个初步设计，而且，对于一个项目，我们可以进行多个整体设计，通过对比，包括性能的对比、成本的对比、效益的对比，来最终确定一个最优的设计方案，选择优秀的整体设计可以降低开发成本，增加用户效益，从这一点来讲，整体设计还是非常重要的。

班级同学录网站工作原理图如图4-1所示：

图4-1 系统工作原理图

4.2 系统结构设计

系统架构图属于系统设计阶段，系统架构图只是这个阶段一个产物，系统的总体架构决定了整个系统的模式，是系统的基础。班级同学录网站的整体结构设计如图4-2所示。

图4-2 系统结构图

4.3数据库设计

数据库是计算机信息系统的基础。目前，电脑系统的关键与核心部分就是数据库。数据库开发的优劣对整个系统的质量和速度有着直接影响。

4.3.1 数据库设计原则

数据库的概念结构设计采用实体—联系（E-R）模型设计方法。E-R模型法的组成元素有：实体、属性、联系，E-R模型用E-R图表示，是提示用户工作环境中所涉及的事物，属性则是对实体特性的描述。在系统设计当中数据库起着决定性的因素。下面设计出这几个关键实体的实体—关系图。

4.3.2 数据库实体

数据模型中的实体（Entity），也称为实例，对应现实世界中可区别于其他对象的“事件”或“事物”。例如，学校中的每个学生，家里中的每个家具。

本系统的E-R图如下图所示：

1、用户管理实体图如图4-3所示：

图4-3用户管理实体图

2、同学录管理实体图如图4-4所示：

图4-4同学录管理实体图

3、聚会报名管理实体图如图4-5所示：

图4-5聚会报名管理实体图

#########

4.3.3 数据库表设计

数据库的表信息属于设计的一部分，下面介绍数据库中的各个表的详细信息。

表4-1 gonggaoxinxi表

列名	数据类型	长度	约束
id	int	11	NOT NULL
username	varchar	50	default NULL
biaoti	varchar	50	default NULL
tupian	varchar	50	default NULL
gonggaoneirong	varchar	50	default NULL
fabushijian	varchar	50	default NULL

表4-2 juhuibaoming表

列名	数据类型	长度	约束
id	int	11	NOT NULL
addtime	varchar	50	default NULL
yonghuming	varchar	50	default NULL
xingming	varchar	50	default NULL
shoujihaoma	varchar	50	default NULL
juhuishijian	varchar	50	default NULL
juhuididian	varchar	50	default NULL
baomingshijian	varchar	50	default NULL

表4-3：tongxuelu表

列名	数据类型	长度	约束
id	int	11	NOT NULL
addtime	varchar	50	default NULL
yonghuming	varchar	50	default NULL
xingming	varchar	50	default NULL
touxiang	varchar	50	default NULL
xingbie	varchar	50	default NULL
shoujihaoma	varchar	50	default NULL
youxiang	varchar	50	default NULL
banji	varchar	50	default NULL
jiebie	varchar	50	default NULL

表4-4：xiaoyoufengcai表

列名	数据类型	长度	约束
id	int	11	NOT NULL
addtime	varchar	50	default NULL
xingming	varchar	50	default NULL
tupian	varchar	50	default NULL
xingbie	varchar	50	default NULL
fengguangshiji	varchar	50	default NULL
zaixiaoshijian	varchar	50	default NULL

表4-5：yonghu表

列名	数据类型	长度	约束
id	int	11	NOT NULL
addtime	varchar	50	default NULL
yonghuming	varchar	50	default NULL
mima	varchar	50	default NULL
xingming	varchar	50	default NULL
touxiang	varchar	50	default NULL
xingbie	varchar	50	default NULL
shoujihaoma	varchar	50	default NULL
youxiang	varchar	50	default NULL

5系统详细设计

5.1前台首页功能模块

班级同学录网站，在前台首页可以查看首页、公告信息、校友风采、论坛信息、我的、跳转到后台、客服等内容，如图5-1所示。

图5-1前台首页功能界面图

用户注册，在用户注册页面可以填写用户名、姓名、头像、性别、手机号码、邮箱等信息进行注册，如图5-2所示。

图5-2用户注册界面图

用户登录，在用户登录页面通过填写账号、密码等信息完成登录，如图5-3所示。在论坛中心页面通过填写标题、类型、内容等信息进行发布帖子等操作，如图5-4所示。

图5-3用户登录界面图

图5-4论坛中心界面图

5.2管理员功能模块

管理员登录，通过填写注册时输入的用户名、密码进行登录，如图5-5所示。

图5-5管理员登录界面图

管理员登录进入班级同学录网站可以查看个人中心、用户管理、公告信息管理、同学录管理、校友风采管理、聚会报名管理、论坛管理、系统管理等信息。

用户管理，在用户管理页面中可以通过填写用户名、姓名、头像、性别、手机号码、邮箱等内容进行查看、修改、删除等操作，如图5-6所示。还可以根据需要对公告信息管理进行查看、修改、删除等操作，如图5-7所示。

图5-6用户管理界面图

图5-7公告信息管理界面图

同学录管理，在同学录管理页面中可以填写用户名、姓名、头像、性别、手机号码、邮箱、班级、届别等信息，并可根据需要对已有同学录管理进行查看、修改或删除等操作，如图5-8所示。

图5-8同学录管理界面图

校友风采管理，在校友风采管理页面中可以填写姓名、图片、性别、风光事迹、在校时间等信息，并可根据需要对已有校友风采管理进行查看、修改或删除等详细操作，如图5-9所示。

图5-9校友风采管理界面图

聚会报名管理，在聚会报名管理页面中可以填写用户名、姓名、手机号码、聚会时间、聚会地点、报名时间等内容，并且根据需要对已有聚会报名管理进行查看、修改或删除等详细操作，如图5-10所示。

图5-10聚会报名管理界面图

论坛管理，在论坛管理页面中可以填写帖子标题、帖子内容、父节点id、用户id、用户名 状态等内容，并且根据需要对已有论坛管理进行查看、修改或删除等详细操作，如图5-11所示。

图5-11论坛管理界面图

轮播图；该页面为轮播图管理界面。管理员可以在此页面进行首页轮播图的管理，通过新建操作可在轮播图中加入新的图片，还可以对以上传的图片进行修改操作，以及图片的删除操作，如图5-12所示。

图5-12轮播图管理界面图

5.3用户功能模块

用户登录进入班级同学录网站可以查看个人中心、同学录管理、聚会报名管理等内容。同学录管理，在同学录管理页面中通过填写用户名、姓名、头像、性别、手机号码、邮箱、班级、届别等信息，还可以根据需要对同学录管理进行查看、添加等操作，如图5-13所示。

图5-13同学录管理界面图

聚会报名管理，在聚会报名管理页面中可以填写用户名、姓名、手机号码、聚会时间、聚会地点、报名时间等信息，并且根据需要对已有聚会报名管理进行查看、添加等其他详细操作，如图5-14所示。

图5-14聚会报名管理界面图

ForumController.java

package com.controller;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Calendar;
import java.util.Map;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Date;
import java.util.List;
import javax.servlet.http.HttpServletRequest;

import com.utils.ValidatorUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.annotation.IgnoreAuth;

import com.entity.ForumEntity;
import com.entity.view.ForumView;

import com.service.ForumService;
import com.service.TokenService;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.MD5Util;
import com.utils.MPUtil;
import com.utils.CommonUtil;


/**
 * 论坛表
 * 后端接口
 * @author 
 * @email 
 * @date 2021-03-12 15:20:53
 */
@RestController
@RequestMapping("/forum")
public class ForumController {
    @Autowired
    private ForumService forumService;
    


    /**
     * 后端列表
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,ForumEntity forum, 
		HttpServletRequest request){
    	if(!request.getSession().getAttribute("role").toString().equals("管理员")) {
    		forum.setUserid((Long)request.getSession().getAttribute("userId"));
    	}

        EntityWrapper<ForumEntity> ew = new EntityWrapper<ForumEntity>();
    	PageUtils page = forumService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, forum), params), params));
		request.setAttribute("data", page);
        return R.ok().put("data", page);
    }
    
    /**
     * 前端列表
     */
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params,ForumEntity forum, HttpServletRequest request){
    	if(!request.getSession().getAttribute("role").toString().equals("管理员")) {
    		forum.setUserid((Long)request.getSession().getAttribute("userId"));
    	}

        EntityWrapper<ForumEntity> ew = new EntityWrapper<ForumEntity>();
    	PageUtils page = forumService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, forum), params), params));
		request.setAttribute("data", page);
        return R.ok().put("data", page);
    }

	/**
     * 列表
     */
    @IgnoreAuth
    @RequestMapping("/flist")
    public R flist(@RequestParam Map<String, Object> params,ForumEntity forum, HttpServletRequest request){
        EntityWrapper<ForumEntity> ew = new EntityWrapper<ForumEntity>();
    	PageUtils page = forumService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.allEq(ew, forum), params), params));
        return R.ok().put("data", page);
    }

	 /**
     * 查询
     */
    @RequestMapping("/query")
    public R query(ForumEntity forum){
        EntityWrapper< ForumEntity> ew = new EntityWrapper< ForumEntity>();
 		ew.allEq(MPUtil.allEQMapPre( forum, "forum")); 
		ForumView forumView =  forumService.selectView(ew);
		return R.ok("查询论坛表成功").put("data", forumView);
    }
	
    /**
     * 后端详情
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") Long id){
        ForumEntity forum = forumService.selectById(id);
        return R.ok().put("data", forum);
    }

    /**
     * 前端详情
     */
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id){
        ForumEntity forum = forumService.selectById(id);
        return R.ok().put("data", forum);
    }
    
	/**
     * 论坛详情
     */
	@IgnoreAuth
    @RequestMapping("/list/{id}")
    public R list(@PathVariable("id") String id){
        ForumEntity forum = forumService.selectById(id);
        getChilds(forum);
        return R.ok().put("data", forum);
    }
    
	private ForumEntity getChilds(ForumEntity forum) {
    	List<ForumEntity> childs = new ArrayList<ForumEntity>();
    	childs = forumService.selectList(new EntityWrapper<ForumEntity>().eq("parentid", forum.getId()));
    	if(childs == null || childs.size()==0) {
    		return null;
    	}
    	forum.setChilds(childs);
    	for(ForumEntity forumEntity : childs) {
    		getChilds(forumEntity);
    	}
    	return forum;
    }



    /**
     * 后端保存
     */
    @RequestMapping("/save")
    public R save(@RequestBody ForumEntity forum, HttpServletRequest request){
    	forum.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    	//ValidatorUtils.validateEntity(forum);
    	forum.setUserid((Long)request.getSession().getAttribute("userId"));

        forumService.insert(forum);
        return R.ok();
    }
    
    /**
     * 前端保存
     */
    @RequestMapping("/add")
    public R add(@RequestBody ForumEntity forum, HttpServletRequest request){
    	forum.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    	//ValidatorUtils.validateEntity(forum);
    	forum.setUserid((Long)request.getSession().getAttribute("userId"));

        forumService.insert(forum);
        return R.ok();
    }

    /**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody ForumEntity forum, HttpServletRequest request){
        //ValidatorUtils.validateEntity(forum);
        forumService.updateById(forum);//全部更新
        return R.ok();
    }
    

    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
        forumService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }
    
    /**
     * 提醒接口
     */
	@RequestMapping("/remind/{columnName}/{type}")
	public R remindCount(@PathVariable("columnName") String columnName, HttpServletRequest request, 
						 @PathVariable("type") String type,@RequestParam Map<String, Object> map) {
		map.put("column", columnName);
		map.put("type", type);
		
		if(type.equals("2")) {
			SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
			Calendar c = Calendar.getInstance();
			Date remindStartDate = null;
			Date remindEndDate = null;
			if(map.get("remindstart")!=null) {
				Integer remindStart = Integer.parseInt(map.get("remindstart").toString());
				c.setTime(new Date()); 
				c.add(Calendar.DAY_OF_MONTH,remindStart);
				remindStartDate = c.getTime();
				map.put("remindstart", sdf.format(remindStartDate));
			}
			if(map.get("remindend")!=null) {
				Integer remindEnd = Integer.parseInt(map.get("remindend").toString());
				c.setTime(new Date());
				c.add(Calendar.DAY_OF_MONTH,remindEnd);
				remindEndDate = c.getTime();
				map.put("remindend", sdf.format(remindEndDate));
			}
		}
		
		Wrapper<ForumEntity> wrapper = new EntityWrapper<ForumEntity>();
		if(map.get("remindstart")!=null) {
			wrapper.ge(columnName, map.get("remindstart"));
		}
		if(map.get("remindend")!=null) {
			wrapper.le(columnName, map.get("remindend"));
		}


		int count = forumService.selectCount(wrapper);
		return R.ok().put("count", count);
	}
	
	


}

CommonServiceImpl.java

package com.service.impl;


import java.util.List;
import java.util.Map;

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

import com.dao.CommonDao;
import com.service.CommonService;


/**
 * 系统用户
 */
@Service("commonService")
public class CommonServiceImpl implements CommonService {
	
	@Autowired
	private CommonDao commonDao;

	@Override
	public List<String> getOption(Map<String, Object> params) {
		return commonDao.getOption(params);
	}
	
	@Override
	public Map<String, Object> getFollowByOption(Map<String, Object> params) {
		return commonDao.getFollowByOption(params);
	}
	
	@Override
	public void sh(Map<String, Object> params) {
		commonDao.sh(params); 
	}

	@Override
	public int remindCount(Map<String, Object> params) {
		return commonDao.remindCount(params);
	}

	@Override
	public Map<String, Object> selectCal(Map<String, Object> params) {
		return commonDao.selectCal(params);
	}
	
	@Override
	public List<Map<String, Object>> selectGroup(Map<String, Object> params) {
		return commonDao.selectGroup(params);
	}
	
	@Override
	public List<Map<String, Object>> selectValue(Map<String, Object> params) {
		return commonDao.selectValue(params);
	}

}

GonggaoxinxiController.java

package com.controller;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Calendar;
import java.util.Map;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Date;
import java.util.List;
import javax.servlet.http.HttpServletRequest;

import com.utils.ValidatorUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.annotation.IgnoreAuth;

import com.entity.GonggaoxinxiEntity;
import com.entity.view.GonggaoxinxiView;

import com.service.GonggaoxinxiService;
import com.service.TokenService;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.MD5Util;
import com.utils.MPUtil;
import com.utils.CommonUtil;


/**
 * 公告信息
 * 后端接口
 * @author 
 * @email 
 * @date 2021-03-12 15:20:53
 */
@RestController
@RequestMapping("/gonggaoxinxi")
public class GonggaoxinxiController {
    @Autowired
    private GonggaoxinxiService gonggaoxinxiService;
    


    /**
     * 后端列表
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,GonggaoxinxiEntity gonggaoxinxi, 
		HttpServletRequest request){

        EntityWrapper<GonggaoxinxiEntity> ew = new EntityWrapper<GonggaoxinxiEntity>();
    	PageUtils page = gonggaoxinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, gonggaoxinxi), params), params));
		request.setAttribute("data", page);
        return R.ok().put("data", page);
    }
    
    /**
     * 前端列表
     */
	@IgnoreAuth
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params,GonggaoxinxiEntity gonggaoxinxi, HttpServletRequest request){
        EntityWrapper<GonggaoxinxiEntity> ew = new EntityWrapper<GonggaoxinxiEntity>();
    	PageUtils page = gonggaoxinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, gonggaoxinxi), params), params));
		request.setAttribute("data", page);
        return R.ok().put("data", page);
    }

	/**
     * 列表
     */
    @RequestMapping("/lists")
    public R list( GonggaoxinxiEntity gonggaoxinxi){
       	EntityWrapper<GonggaoxinxiEntity> ew = new EntityWrapper<GonggaoxinxiEntity>();
      	ew.allEq(MPUtil.allEQMapPre( gonggaoxinxi, "gonggaoxinxi")); 
        return R.ok().put("data", gonggaoxinxiService.selectListView(ew));
    }

	 /**
     * 查询
     */
    @RequestMapping("/query")
    public R query(GonggaoxinxiEntity gonggaoxinxi){
        EntityWrapper< GonggaoxinxiEntity> ew = new EntityWrapper< GonggaoxinxiEntity>();
 		ew.allEq(MPUtil.allEQMapPre( gonggaoxinxi, "gonggaoxinxi")); 
		GonggaoxinxiView gonggaoxinxiView =  gonggaoxinxiService.selectView(ew);
		return R.ok("查询公告信息成功").put("data", gonggaoxinxiView);
    }
	
    /**
     * 后端详情
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") Long id){
        GonggaoxinxiEntity gonggaoxinxi = gonggaoxinxiService.selectById(id);
        return R.ok().put("data", gonggaoxinxi);
    }

    /**
     * 前端详情
     */
	@IgnoreAuth
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id){
        GonggaoxinxiEntity gonggaoxinxi = gonggaoxinxiService.selectById(id);
        return R.ok().put("data", gonggaoxinxi);
    }
    



    /**
     * 后端保存
     */
    @RequestMapping("/save")
    public R save(@RequestBody GonggaoxinxiEntity gonggaoxinxi, HttpServletRequest request){
    	gonggaoxinxi.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    	//ValidatorUtils.validateEntity(gonggaoxinxi);

        gonggaoxinxiService.insert(gonggaoxinxi);
        return R.ok();
    }
    
    /**
     * 前端保存
     */
    @RequestMapping("/add")
    public R add(@RequestBody GonggaoxinxiEntity gonggaoxinxi, HttpServletRequest request){
    	gonggaoxinxi.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    	//ValidatorUtils.validateEntity(gonggaoxinxi);

        gonggaoxinxiService.insert(gonggaoxinxi);
        return R.ok();
    }

    /**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody GonggaoxinxiEntity gonggaoxinxi, HttpServletRequest request){
        //ValidatorUtils.validateEntity(gonggaoxinxi);
        gonggaoxinxiService.updateById(gonggaoxinxi);//全部更新
        return R.ok();
    }
    

    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
        gonggaoxinxiService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }
    
    /**
     * 提醒接口
     */
	@RequestMapping("/remind/{columnName}/{type}")
	public R remindCount(@PathVariable("columnName") String columnName, HttpServletRequest request, 
						 @PathVariable("type") String type,@RequestParam Map<String, Object> map) {
		map.put("column", columnName);
		map.put("type", type);
		
		if(type.equals("2")) {
			SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
			Calendar c = Calendar.getInstance();
			Date remindStartDate = null;
			Date remindEndDate = null;
			if(map.get("remindstart")!=null) {
				Integer remindStart = Integer.parseInt(map.get("remindstart").toString());
				c.setTime(new Date()); 
				c.add(Calendar.DAY_OF_MONTH,remindStart);
				remindStartDate = c.getTime();
				map.put("remindstart", sdf.format(remindStartDate));
			}
			if(map.get("remindend")!=null) {
				Integer remindEnd = Integer.parseInt(map.get("remindend").toString());
				c.setTime(new Date());
				c.add(Calendar.DAY_OF_MONTH,remindEnd);
				remindEndDate = c.getTime();
				map.put("remindend", sdf.format(remindEndDate));
			}
		}
		
		Wrapper<GonggaoxinxiEntity> wrapper = new EntityWrapper<GonggaoxinxiEntity>();
		if(map.get("remindstart")!=null) {
			wrapper.ge(columnName, map.get("remindstart"));
		}
		if(map.get("remindend")!=null) {
			wrapper.le(columnName, map.get("remindend"));
		}


		int count = gonggaoxinxiService.selectCount(wrapper);
		return R.ok().put("count", count);
	}
	
	


}

topNav.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
	<style>
		.top-brand {
			position: fixed;
			top: 0;
			z-index: 998;
			width: 100%;
			height: 64px;
			padding: 0;
			margin: 0;
			border-radius: 0;
			border-width: 0 0px 70px 0;
			border-style: solid;
			border-color: rgba(21, 168, 72, 1);
			background-color: rgba(255, 255, 255, 1);
			box-shadow: 0 0 0px rgba(30, 144, 255, .8);
		}
		.top-brand .navbar-default {
			width: 100%;
			height: 64px;
			padding: 0 35px;
			margin: 0;
			border-radius: 0;
			border-width: 0;
			border-style: solid;
			border-color: rgba(0,0,0,.3);
			background-color: rgba(255, 255, 255, 1);
			box-shadow: 0 0 6px rgba(30, 144, 255, 0);
			justify-content: space-between;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			box-sizing: border-box;
		}
		
		.top-brand .navbar-default .navbar-header a {
						width: auto;
			line-height: 44px;
			padding: 0;
			margin: 0;
			color: rgba(21, 168, 72, 1);
			font-size: 20px;
			border-radius: 0;
			border-width: 0;
			border-style: solid;
			border-color: rgba(0,0,0,.3);
			background-color: rgba(0,0,0,0);
			box-shadow: 0 0 0px rgba(30, 144, 255, 0);
		}
		
		.top-brand .nav .fullscreen {
						display: none;
						padding: 8px;
			margin: 0 0 0 10px;
			color: #fff;
			font-size: 16px;
			border-radius: 50%;
			border-width: 0;
			border-style: solid;
			border-color: rgba(0,0,0,.3);
			background-color: #00c5dc;
			box-shadow: 0 0 6px rgba(0, 0, 0, .3);
		}
		
		.top-brand .nav .ti-user {
			padding: 8px;
			margin: 0 0 0 10px;
			color: #fff;
			font-size: 16px;
			border-radius: 50%;
			border-width: 0;
			border-style: solid;
			border-color: rgba(0,0,0,.3);
			background-color: rgba(21, 168, 72, 1);
			box-shadow: 0 0 0px rgba(0, 0, 0, .3);
		}
		
		.top-brand .nav .dropdown-menu.profile {
			width: 150px;
			height: auto;
			padding: 0;
			margin: 0;
			border-radius: 4px;
			border-width: 0;
			border-style: solid;
			border-color: rgba(0,0,0,.3);
			background-color: #fff;
			box-shadow: 0 0 6px rgba(30, 144, 255, .8);
			left: inherit;
			right: 0;
			top: 100%;
			min-width: auto;
			margin-top: 9px;
		}
		
		.top-brand .nav .dropdown-menu.profile::before {
			left: 100%;
			margin-left: -28px;
			border-bottom-color: #333;
		}
		
		.top-brand .nav .dropdown-menu.profile h5 {
			width: 100%;
			line-height: 44px;
			padding: 0 12px;
			margin: 0;
			color: #fff;
			font-size: 16px;
			border-radius: 4px 4px 0 0;
			border-width: 0;
			border-style: solid;
			border-color: #333;
			background-color: #333;
			box-shadow: 0 0 6px rgba(30, 144, 255, 0);
			text-align: center;
		}
		
		.top-brand .nav .dropdown-menu.profile .web {
			width: 100%;
			height: auto;
			padding: 0 12px;
			margin: 0;
			border-radius: 0;
			border-width: 0;
			border-style: solid;
			border-color: rgba(0,0,0,.3);
			background-color: #fff;
			box-shadow: 0 0 6px rgba(30, 144, 255, 0);
		}
		
		.top-brand .nav .dropdown-menu.profile .web span.ti-power-off {
						padding: 2px;
			margin: 0 10px 0 0;
			color: #fff;
			font-size: 12px;
			border-radius: 50%;
			border-width: 0;
			border-style: solid;
			border-color: #333;
			background-color: #333;
			box-shadow: 0 0 6px rgba(30, 144, 255, .3);
		}
		
		.top-brand .nav .dropdown-menu.profile .web span.text {
			padding: 0;
			margin: 0;
			width: auto;
			line-height: 44px;
			color: #333;
			font-size: 16px;
			border-radius: 0;
			border-width: 0;
			border-style: solid;
			border-color: #333;
			background-color: rgba(0,0,0,0);
			box-shadow: 0 0 6px rgba(30, 144, 255, 0);
		}
		
		.top-brand .nav .dropdown-menu.profile .web:hover{
			width: 100%;
			height: auto;
			padding: 0 12px;
			margin: 0;
			border-radius: 0;
			border-width: 0;
			border-style: solid;
			border-color: rgba(0,0,0,.3);
			background-color: #333;
			box-shadow: 0 0 6px rgba(30, 144, 255, 0);
		}
		
		.top-brand .nav .dropdown-menu.profile .web:hover span.ti-power-off{
			padding: 2px;
			margin: 0 10px 0 0;
			color: #333;
			font-size: 12px;
			border-radius: 50%;
			border-width: 0;
			border-style: solid;
			border-color: #fff;
			background-color: #fff;
			box-shadow: 0 0 6px rgba(30, 144, 255, .3);
		}
		
		.top-brand .nav .dropdown-menu.profile .web:hover span.text{
			padding: 0;
			margin: 0;
			width: auto;
			line-height: 44px;
			color: #fff;
			font-size: 16px;
			border-radius: 0;
			border-width: 0;
			border-style: solid;
			border-color: #fff;
			background-color: rgba(0,0,0,0);
			box-shadow: 0 0 6px rgba(30, 144, 255, 0);
		}
		
		.top-brand .nav .dropdown-menu.profile .exit {
			width: 100%;
			height: auto;
			padding: 0 12px;
			margin: 0;
			border-radius: 0 0 4px 4px;
			border-width: 1px 0 0 0;
			border-style: solid;
			border-color: rgba(0,0,0,.3);
			background-color: #fff;
			box-shadow: 0 0 6px rgba(30, 144, 255, 0);
		}
		
		.top-brand .nav .dropdown-menu.profile .exit span.ti-power-off {
						padding: 2px;
			margin: 0 10px 0 0;
			color: #fff;
			font-size: 12px;
			border-radius: 50%;
			border-width: 0;
			border-style: solid;
			border-color: #333;
			background-color: #333;
			box-shadow: 0 0 6px rgba(30, 144, 255, .3);
		}
		
		.top-brand .nav .dropdown-menu.profile .exit span.text {
			padding: 0;
			margin: 0;
			width: auto;
			line-height: 44px;
			color: #333;
			font-size: 16px;
			border-radius: 0;
			border-width: 0;
			border-style: solid;
			border-color: #333;
			background-color: rgba(0,0,0,0);
			box-shadow: 0 0 6px rgba(30, 144, 255, 0);
		}
		
		.top-brand .nav .dropdown-menu.profile .exit:hover{
			width: 100%;
			height: auto;
			padding: 0 12px;
			margin: 0;
			border-radius: 0 0 4px 4px;
			border-width: 1px 0 0 0;
			border-style: solid;
			border-color: rgba(0,0,0,.3);
			background-color: red;
			box-shadow: 0 0 6px rgba(30, 144, 255, 0);
		}
		
		.top-brand .nav .dropdown-menu.profile .exit:hover span.ti-power-off{
			padding: 2px;
			margin: 0 10px 0 0;
			color: #333;
			font-size: 12px;
			border-radius: 50%;
			border-width: 0;
			border-style: solid;
			border-color: #fff;
			background-color: #fff;
			box-shadow: 0 0 6px rgba(30, 144, 255, .3);
		}
		
		.top-brand .nav .dropdown-menu.profile .exit:hover span.text{
			padding: 0;
			margin: 0;
			width: auto;
			line-height: 44px;
			color: #fff;
			font-size: 16px;
			border-radius: 0;
			border-width: 0;
			border-style: solid;
			border-color: #fff;
			background-color: rgba(0,0,0,0);
			box-shadow: 0 0 6px rgba(30, 144, 255, 0);
		}
		
		.top-brand .menu-list-title {
						display: none;
			}
						padding: 0;
			margin: 0;
			width: 180px;
			line-height: $template2.back.top.logo.lineHeight;
			color: #fff;
			font-size: 16px;
			border-radius: 0;
			border-width: 0;
			border-style: solid;
			border-color: #333;
			background-color: rgba(0, 197, 220, 1);
						box-shadow: 0 0 6px rgba(30, 144, 255, 0);
		}
		
				.top-brand .menu-list-title:before {
			content: "logo";
			display: block;
			text-align: center;
			line-height: $template2.back.top.logo.lineHeight;
		}
			</style>
				<div class="container top-brand" style="display: flex;">
					<div class="menu-list-title"></div>
					<nav class="navbar navbar-default">			
						<div class="navbar-header">
							<a href="${pageContext.request.contextPath}/index.jsp">班级同学录网站</a>
						</div>
						<ul class="nav justify-content-end">
							<li class="nav-item">
								<a class="nav-link">
									<span class="ti-fullscreen fullscreen"></span>
								</a>							
							</li>
							<li class="nav-item" style="position: relative;">
								<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
								 aria-expanded="false">
									<span class="ti-user"></span>
								</a>
								<div class="dropdown-menu lochana-box-shadow2 profile animated flipInY">
									<h5>John Willing</h5>
									<a class="dropdown-item web" href="#" onclick="toFront()">
										<span class="ti-power-off"></span><span class="text">跳到前台</span></a>
									<a class="dropdown-item exit" href="#" onclick="logout()">
										<span class="ti-power-off"></span><span class="text">退出</span></a>
								</div>
							</li>
						</ul>
				
					</nav>
				</div>

声明

本博客适用于广泛的学术和教育用途，包括但不限于个人学习、开发设计，产品设计。仅供学习参考，旨在为读者提供深入理解和学术研究的材料。