众筹项目学习
一、登录模块
welcome页面，<jsp:forward page="/index"></jsp:forward>去找控制器
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<jsp:forward page="/index"></jsp:forward>
</body>
</html>
登录controller
@RequestMapping("dologin")
@ResponseBody
public Map<String,String> doLogin(TAdmin tadmin,HttpSession session,Model model) {
System.out.println(tadmin.getLoginacct());
Map<String, String> ret = new HashMap<String,String>();
if(tadmin == null){
ret.put("type", "error");
ret.put("msg","用户不能为空");
return ret;
}
if(StringUtils.isEmpty(tadmin.getLoginacct())){
ret.put("type", "error");
ret.put("msg","账号不能为空");
return ret;
}
if(StringUtils.isEmpty(tadmin.getUserpswd())){
ret.put("type", "error");
ret.put("msg","密码不能为空");
return ret;
}
TAdmin findByUsername = tAdminServiceImpl.findByUsername(tadmin.getLoginacct());
if(findByUsername == null){
ret.put("type", "error");
ret.put("msg", "账户不存在");
return ret;
}
if(!tadmin.getUserpswd().equals(findByUsername.getUserpswd())){
ret.put("type", "error");
ret.put("msg", "密码错误");
return ret;
}
session.setAttribute("admin", findByUsername);
//model.addAttribute("admin", findByUsername);
ret.put("type", "success");
ret.put("msg","登录成功");
return ret;
}
serviceImpl实现类代码
public TAdmin findByUsername(String loginacct) {
TAdminExample example = new TAdminExample();
example.createCriteria().andLoginacctEqualTo(loginacct);
List<TAdmin> list = adminMapper.selectByExample(example);
if(list == null || list.size() == 0) {
return null;
}
return list.get(0);
}
前端页面login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="keys" content="">
<meta name="author" content="">
<link rel="stylesheet" href="${PATH}/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${PATH}/static/css/font-awesome.min.css">
<link rel="stylesheet" href="${PATH}/static/css/login.css">
<style>
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<div><a class="navbar-brand" href="index.html" style="font-size:32px;">尚筹网-创意产品众筹平台</a></div>
</div>
</div>
</nav>
<div class="container">
<form id="loginForm" class="form-signin" role="form" action="dologin" method="post">
<h2 class="form-signin-heading"><i class="glyphicon glyphicon-log-in"></i> 用户登录</h2>
<div class="form-group has-success has-feedback">
<input type="text" class="form-control" id="loginacct" name="loginacct" placeholder="请输入登录账号" autofocus>
<span class="help-block"></span>
<!-- <span class="glyphicon glyphicon-user form-control-feedback"></span> -->
</div>
<div class="form-group has-success has-feedback">
<input type="password" class="form-control" id="userpswd" name="userpswd" placeholder="请输入登录密码" style="margin-top:10px;">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="form-group has-success has-feedback">
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> 记住我
</label>
<br>
<label>
忘记密码
</label>
<label style="float:right">
<a href="reg.html">我要注册</a>
</label>
</div>
<a class="btn btn-lg btn-success btn-block" onclick="dologin()" > 登录</a>
</form>
</div>
<script src="${PATH}/static/jquery/jquery-2.1.1.min.js"></script>
<script src="${PATH}/static/bootstrap/js/bootstrap.min.js"></script>
<script>
//登录
function dologin() {
var loginacct = $("#loginacct").val();
var userpswd = $("#userpswd").val();
if(loginacct == '' || loginacct == 'undefined'){
alert("请填写账号！！");
return;
}
if(userpswd == '' || userpswd == 'undefined'){
alert("请填写密码！！");
return;
}
$.ajax({
url:"dologin",
data:{loginacct:loginacct,userpswd:userpswd},
type:'post',
dataType:'json',
success:function(result){
if(result.type == 'success'){
window.location = 'main';
}else{
alert(result.msg);
}
}
})
}
//校验表单数据
function validate_login_form(){
//1.拿到要校验的数据
var loginacct = $("#loginacct").val();
var regloginacct = /(^[a-z0-9_-]{6,10}$)/;
if(!regloginacct.test(loginacct)){
//alert("书名可以是2-5位中文")
show_validate_msg("#loginacct","error","账户输入不正确，请输入是6-10位数字或英文组合");
return false;
}else{
show_validate_msg("#loginacct","success","");
}
return true;
}
//显示校验结果的提示信息
function show_validate_msg(ele,status,msg){
//清除当前元素的校验状态
$(ele).parent().removeClass("has-success has-error");
$(ele).next("span").text("");
if("success"==status){
$(ele).parent().addClass("has-success");
$(ele).next("span").text(msg);
}else if("error" == status){
$(ele).parent().addClass("has-error");
$(ele).next("span").text(msg);
}
}
</script>
</body>
</html>
静态包含和动态包含，抽取公共代码块
<!-- 静态包含：最终生成一个class -->
<%@ include file="/WEB-INF/jsp/common/css.jsp" %>
<!-- 动态包含：最终生成两个class -->
<jsp:include page="/WEB-INF/jsp/common/css.jsp"></jsp:include>
二、 左侧菜单
Menu类
package com.atguigu.atcrowdfunding.bean;
import java.util.ArrayList;
import java.util.List;
public class TMenu {
private Integer id;
private Integer pid;
private String name;
private String icon;
private String url;
private List<TMenu> children = new ArrayList<TMenu>();
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public Integer getPid() {
return pid;
}
public void setPid(Integer pid) {
this.pid = pid;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name == null ? null : name.trim();
}
public String getIcon() {
return icon;
}
public void setIcon(String icon) {
this.icon = icon == null ? null : icon.trim();
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url == null ? null : url.trim();
}
public List<TMenu> getChildren() {
return children;
}
public void setChildren(List<TMenu> children) {
this.children = children;
}
}
controller
@RequestMapping("/main")
public String main(HttpSession session) {
List<TMenu> menu = new ArrayList<TMenu>();
menu = tMenuServiceImpl.listMenuAll();
session.setAttribute("menuList", menu);
return "main";
}
serviceImpl
@Override
public List<TMenu> listMenuAll() {
System.out.println("555");
List<TMenu> menuList = new ArrayList<TMenu>(); // 只存放父菜单，但是将children属性赋值
Map<Integer, TMenu> cache = new HashMap<Integer, TMenu>();
List<TMenu> allList = menuMapper.selectByExample(null); // 所有的菜单
System.out.println(allList.size()); // 查询从所有菜单中查询父菜单
for (TMenu tMenu : allList) {
if (tMenu.getPid() == 0) {
menuList.add(tMenu);
cache.put(tMenu.getId(), tMenu);
}
}
for (TMenu tMenu : allList) {
if (tMenu.getPid() != 0) {
Integer pid = tMenu.getPid();
TMenu parent = cache.get(pid);
parent.getChildren().add(tMenu); // 根据子菜单pid查找父菜单id,然后根据父菜单children属性进行父子关系组合。
}
}
return menuList;
}
jsp公共页
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<div class="col-sm-3 col-md-2 sidebar">
<div class="tree">
<ul style="padding-left:0px;" class="list-group">
<c:forEach items="${menuList}" var="parent">
<c:if test="${empty parent.children}">
<li class="list-group-item tree-closed" >
<a href="${PATH}/${parent.url}"><i class="glyphicon glyphicon-dashboard"></i> ${parent.name}</a>
</li>
</c:if>
<c:if test="${not empty parent.children}">
<li class="list-group-item tree-closed">
<span><i class="${parent.icon}"></i> ${parent.name} <span class="badge" style="float:right">3</span></span>
<c:forEach items="${parent.children}" var="children">
<ul style="margin-top:10px;display:none;">
<li style="height:30px;">
<a href="${PATH}/${children.url}"><i class="${children.icon}"></i>${children.name}</a>
</li>
</ul>
</c:forEach>
</li>
</c:if>
</c:forEach>
</ul>
</div>
</div>
页面数据分页
controller
@RequestMapping("/admin/index")
public String index(@RequestParam(value="pageNum",required=false,defaultValue="1") Integer pageNum,
@RequestParam(value="pageSize",required=false,defaultValue="7") Integer pageSize,
Model model) {
//List<TAdmin> allAdmin = tAdminServiceImpl.getAllAdmin();
PageHelper.startPage(pageNum, pageSize); //线程绑定
Map<String,Object> paramMap = new HashMap<String,Object>();
PageInfo<TAdmin> page = tAdminServiceImpl.getAllAdmin(paramMap);
model.addAttribute("page", page);
return "admin/index";
}
serviceImpl
@Override
public PageInfo<TAdmin> getAllAdmin(Map<String,Object> paramMap) {
List<TAdmin> list = adminMapper.selectByExample(null);
PageInfo<TAdmin> page = new PageInfo<TAdmin>(list);
return page;
}
jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- 静态包含：最终生成一个class -->
<%@ include file="/WEB-INF/jsp/common/css.jsp" %>
<style>
.tree li {
list-style-type: none;
cursor:pointer;
}
table tbody tr:nth-child(odd){background:#F4F4F4;}
table tbody td:nth-child(even){color:#C00;}
</style>
</head>
<body>
<!-- 动态包含：最终生成两个class -->
<jsp:include page="/WEB-INF/jsp/common/top.jsp"></jsp:include>
<div class="container-fluid">
<div class="row">
<!-- 动态包含：最终生成两个class -->
<jsp:include page="/WEB-INF/jsp/common/sidebar.jsp"></jsp:include>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
</div>
<div class="panel-body">
<form class="form-inline" role="form" style="float:left;">
<div class="form-group has-feedback">
<div class="input-group">
<div class="input-group-addon">查询条件</div>
<input class="form-control has-success" type="text" placeholder="请输入查询条件">
</div>
</div>
<button type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
</form>
<button type="button" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button>
<button type="button" class="btn btn-primary" style="float:right;" onclick="window.location.href='add.html'"><i class="glyphicon glyphicon-plus"></i> 新增</button>
<br>
<hr style="clear:both;">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr >
<th width="30">#</th>
<th width="30"><input type="checkbox"></th>
<th>账号</th>
<th>名称</th>
<th>邮箱地址</th>
<th width="100">操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${page.list}" var="admin" varStatus="status">
<tr>
<td>${status.count}</td>
<td><input type="checkbox"></td>
<td>${admin.loginacct}</td>
<td>${admin.username}</td>
<td>${admin.email}</td>
<td>
<button type="button" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></button>
<button type="button" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></button>
<button type="button" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></button>
</td>
</tr>
</c:forEach>
</tbody>
<tfoot>
<tr >
<td colspan="6" align="center">
<ul class="pagination">
<c:if test="${page.isFirstPage }">
<li class="disabled"><a href="#">上一页</a></li>
</c:if>
<c:if test="${!page.isFirstPage }">
<li><a href="${PATH}/admin/index?pageNum=${page.pageNum-1}">上一页</a></li>
</c:if>
<c:forEach items="${page.navigatepageNums}" var="num">
<c:if test="${num == page.pageNum }">
<li class="active"><a href="${PATH}/admin/index?pageNum=${num}">${num} <span class="sr-only">(current)</span></a></li>
</c:if>
<c:if test="${num != page.pageNum }">
<li><a href="${PATH}/admin/index?pageNum=${num}">${num}</a></li>
</c:if>
</c:forEach>
<c:if test="${page.isLastPage }">
<li class="disabled"><a href="#">下一页</a></li>
</c:if>
<c:if test="${!page.isLastPage }">
<li><a href="${PATH}/admin/index?pageNum=${page.pageNum+1}">下一页</a></li>
</c:if>
</ul>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<%@ include file="/WEB-INF/jsp/common/js.jsp" %>
<script type="text/javascript">
$(function () {
$(".list-group-item").click(function(){
if ( $(this).find("ul") ) {
$(this).toggleClass("tree-closed");
if ( $(this).hasClass("tree-closed") ) {
$("ul", this).hide("fast");
} else {
$("ul", this).show("fast");
}
}
});
});
$("tbody .btn-success").click(function(){
window.location.href = "assignRole.html";
});
$("tbody .btn-primary").click(function(){
window.location.href = "edit.html";
});
</script>
</body>
</html>
来源：CSDN
作者：ageltt
链接：https://blog.csdn.net/ageltt/article/details/104584875