上次内容讲述了如何搭建框架和实现初步登录的测试
1.测试用户
找到登录成功后的页面waterMainMenu.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title> XXX送水公司后台管理系统</title>
<!--Bootstrap固定框架-->
<link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}">
<link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap-theme.css}">
<!--图标库-->
<link rel='stylesheet' th:href='@{/css/material-design-iconic-font.min.css}'>
<!--核心样式-->
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<div id="viewport">
<!-- Sidebar -->
<!--a中href="#"表示回到最顶部。如果当前页面中需要滚动的话,那么用这种方式就可以直接回到顶部。比如有些网站会在右下角制作一个图标按钮,回到顶部,那么此时可以考虑用这种最简单的方式实现。-->
<div id="sidebar">
<header>
<a href="#">公司后台管理</a>
</header>
<!--<ul class="nav">:表示这个ul标签内部包含着菜单信息-->
<ul class="nav">
<li>
<a>
<i class="zmdi zmdi-view-dashboard"></i> 客户管理
</a>
</li>
<li>
<a>
<i class="zmdi zmdi-link"></i> 送水工管理
</a>
</li>
<li>
<a>
<i class="zmdi zmdi-widgets"></i> 送水历史管理
</a>
</li>
<li>
<a>
<i class="zmdi zmdi-widgets"></i> 计算工资
</a>
</li>
<li>
<a>
<i class="zmdi zmdi-widgets"></i> 统计送水数量
</a>
</li>
<li>
<a>
<i class="zmdi zmdi-widgets"></i> 修改密码
</a>
</li>
</ul>
</div>
<!-- Content -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid" >
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#"><i class="zmdi zmdi-notifications text-danger"></i>
</a>
</li>
<li><a href="#">测试用户123</a></li>
</ul>
</div>
</nav>
<div class="container-fluid">
</div>
</div>
</div>
</body>
</html>
<!--a中href="#"表示回到最顶部。如果当前页面中需要滚动的话,那么用这种方式就可以直接回到顶部。比如有些网站会在右下角制作一个图标按钮,回到顶部,那么此时可以考虑用这种最简单的方式实现。-->
1.1修改测试用户123
1.2我们在数据库的密码因为MD5的关系,已经加密,所以我们要去百度搜索解密方法
搜索MD5在线解密或直接输入网址MD5免费在线解密破解_MD5在线加密-SOMD5
输入加密密码后,得到原始密码admin
我们要去实现让它登陆后显示的不是测试用户,而是我们当前用户,方法:
1.3 我们需要用户名从后端传递到前端,所以要在我们原本在Controller层中的loginAccount方法(此方法是登录方法)中加入 http会话 形参(HttpSession)用model也可以
@RequestMapping(value="/login")
public String loginAccount(String userName, String userPwd, Model model, HttpSession session) {
boolean result = accountService.login(userName, userPwd);
if (result) {
//登陆成功,用户名传递到前端
session.setAttribute("currentUser",userName);
//跳转主页
return "waterMainMenu";
} else {
//失败,提示后,继续跳转到登录页面
model.addAttribute("loginFail","用户名密码错误");
return "index";
}
}
}
然后这个存入会话的值,在前端的(waterMainMenu.html)中去获取这个值
<!-- Content -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid" >
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#"><i class="zmdi zmdi-notifications text-danger"></i>
</a>
</li>
<li><a href="#">当前用户:[[${session.currentUser}]]</a></li>
</ul>
</div>
</nav>
<div class="container-fluid">
</div>
</div>
这样在登陆界面才能输入正确的账户和密码才可以登陆
2.客户管理
要求:点击客户管理跳转到客户管理的页面,点击送水工管理跳转到送水工管理页面
2.1 定义Customer实体类
@Data
@NoArgsConstructor
@AllArgsConstructor
@TableName("tb_customer")
public class Customer {
/**
* 客户编号
*/
private Integer cid;
/**
* 客户名称
*/
private String custName;
/**
* 客户地址
*/
private String custAddress;
/**
* 客户联系方式
*/
private String custMobile;
/**
* 水票数量
*/
private String custTicket;
}
2.2定义Mapper接口
@Repository //mapper层中的这个注解可以不要,因为我们在主程序中扫描了这个层,如果没有做扫描的话,一定要加上@Mapper注解
public interface CustomerMapper extends BaseMapper<Customer> {
}
2.3 编写业务逻辑接口Service
public interface CustomerService {
/**
* 返回所有客户信息
* @return 客户列表
*/
List<Customer> listCustomer();
}
2.4 编写Service实现类
@Service
public class CustomerServiceImpl implements CustomerService {
@Autowired
private CustomerMapper customerMapper;
/**
* 返回所有客户信息
*
* @return 客户列表
*/
@Override
public List<Customer> listCustomer() {
return customerMapper.selectList(null);
}
}
2.5 编写Controller控制器
@Controller
@RequestMapping("/cust")
@Slf4j
public class CustomerController {
/**
* 控制器依赖业务逻辑,按照类型自动装配CustomerService对象
*/
@Autowired
private CustomerService customerService ;
/**
* 用户点击"客户管理"超链接按钮,显示所有的客户信息