简易周报管理系统
实验环境测试
环境
mysql 8.0.15
mvn -v :Maven 3.6.3
java -version:Java 1.8
IDE: IDEA 2019
tomcat 9.0
项目创建与配置
1) 创建
1. 1. 1. F i l e File File - n e w new new - p r o j e c t project project
2) Project structure设置
检查设置
3) 配置Tomcat
配置 tomcat
测试运行,默认8080端口
4) 配置Mybatis
创建目录
可能遇到的问题 [百度关键词搜索即可解决]
-
j a v a java java文件夹 n e w new new中无法找到 p a c k a g e package package
-
IDEA中新增 p a c k a g e package package总是嵌套[IDEA中创建多级package]
取消勾选Compact Empty Middle Package
-
IDEA下maven项目编译后没有生成target文件
添加依赖
<!-- 数据库 mysql-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.15</version>
</dependency>
<!--数据库连接 mybatis-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.4.6</version>
</dependency>
<!--单元测试 junit-->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>
<!--servlet 控制跳转-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
追加配置
<!-- 路径查找-->
<build>
<resources>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.xml</include>
</includes>
</resource>
<resource> <directory>src/main/resources</directory>
<includes>
<include>**/*.xml</include>
<include>**/*.properties</include>
</includes>
</resource>
</resources>
</build>
创建该实验专用数据库
[ W e e k l y [Weekly [Weekly r e p o r t report report m a n a g e m e n t management management s y s t e m ] system] system]
create database wrmsysdb;
use wrmsysdb;
完成MyBatis工具类
java目录下 c o m . w r m s y s . u t i l s com.wrmsys.utils com.wrmsys.utils
BDTools.class
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import java.io.Reader;
public class DBTools {
public static SqlSessionFactory sessionFactory;
static{
try {
Reader reader = Resources.getResourceAsReader("mybatis.cfg.xml");
sessionFactory = new SqlSessionFactoryBuilder().build(reader);
} catch (Exception e) {
e.printStackTrace();
}
}
public static SqlSession getSession(){
return sessionFactory.openSession();
}
}
resources 目录下 mybatis.cfg.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<!-- 为JAVA Bean起类别名 -->
<typeAliases >
<package name="com.wrmsys.bean"/>
</typeAliases>
<!-- 配置mybatis运行环境 -->
<environments default="cybatis">
<environment id="cybatis">
<!-- type="JDBC" 代表使用JDBC的提交和回滚来管理事务 -->
<transactionManager type="JDBC" />
<!-- mybatis提供了3种数据源类型,分别是:POOLED,UNPOOLED,JNDI -->
<!-- POOLED 表示支持JDBC数据源连接池 -->
<!-- UNPOOLED 表示不支持数据源连接池 -->
<!-- JNDI 表示支持外部数据源连接池 -->
<dataSource type="POOLED">
<property name="driver" value="com.mysql.cj.jdbc.Driver" />
<!--url为数据库地址wrmsysdb-->
<property name="url" value="jdbc:mysql://localhost:3306/wrmsysdb?useSSL=false&serverTimezone=UTC" />
<!--用户名与密码,用户名默认为root-->
<property name="username" value="root" />
<property name="password" value="root" />
</dataSource>
</environment>
</environments>
<mappers>
<!-- 告知映射文件方式1,一个一个的配置
<mapper resource="com/cy/mybatis/mapper/UserMapper.xml"/>-->
<!-- 告知映射文件方式2,自动扫描包内的Mapper接口与配置文件 -->
<package name="com/wrmsys/mapper"/>
</mappers>
</configuration>
用户管理 Model
1) 用户表
用户表User
创建
create table t_user(
uname varchar(20) NOT NULL,
upass varchar(50)
);
测试
insert into t_user values('admin','233');
select * from t_user;
2) 用户类
User【注:alt+enter 自动补充class引用】
public class User {
private String uname;
private String upass;
/*
构造 以及 get,set方法(略)
*/
}
3) 用户Mapper接口
创建UserMapper接口
public interface UserMapper {
public List<User> getList();
public User login(User user);
public void save(User user);
}
创建UserMapper映射文件
<?xml version="1.0" encoding="UTF-8"?>
<!-- 不写会报错 -->
<!DOCTYPE mapper PUBLIC "-//mybatis.org/DTD Mapper 3.0" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.wrmsys.mapper.UserMapper">
<!--编写SQL-->
<select id="getList" resultType="User">
select * from t_user
</select>
<insert id="save">
insert into t_user(uname,upass) values(#{uname},#{upass})
</insert>
<!--登陆-->
<select id="login" resultType="User">
select * from t_user where uname=#{uname} and upass=#{upass}
</select>
</mapper>
用户模块测试
public class UserTest {
/**
* 测试MyBatis
*/
@Test
public void test01(){
SqlSession session= DBTools.getSession();
UserMapper mapper=session.getMapper(UserMapper.class);
try {
List<User> user=mapper.getList();
System.out.println(user);
session.commit();
} catch (Exception e) {
e.printStackTrace();
session.rollback();
}finally{
session.close();
}
}
}
@Test
public void test02(){
SqlSession session=DBTools.getSession();
UserMapper mapper=session.getMapper(UserMapper.class);
try {
mapper.save(new User("superman","999"));
System.out.println("添加成功");
session.commit();
} catch (Exception e) {
e.printStackTrace();
session.rollback();
}finally{
session.close();
}
}
}
4) 用户模块测试
周报管理 Model
1) 周报表
create table t_report(
id int PRIMARY KEY AUTO_INCREMENT,
name varchar(50),
achievement varchar(2000),
problem varchar(2000),
plan varchar(2000),
createtime datetime
);
2) 周报类
public class Report {
private Integer id;
private String name;
private String achievement;
private String problem;
private String plan;
private Date createtime;
/*
构造 以及 get,set方法(略)
*/
}
3) 周报Mapper接口
public interface ReportMapper {
public List<Report> getList();
public void save(Report user);
}
4) 周报模块测试
public class ReportTest {
/**
* 测试MyBatis
*/
// @Test
public void test01(){
SqlSession session=DBTools.getSession();
ReportMapper mapper=session.getMapper(ReportMapper.class);
try {
Report report=new Report("周报2021042401","成果1","问题1","计划1",null);
mapper.save(report);
System.out.println("添加成功");
session.commit();
} catch (Exception e) {
e.printStackTrace();
session.rollback();
}finally{
session.close();
}
}
@Test
public void test02(){
SqlSession session= DBTools.getSession();
ReportMapper mapper=session.getMapper(ReportMapper.class);
try {
List<Report> list=mapper.getList();
System.out.println(list);
session.commit();
} catch (Exception e) {
e.printStackTrace();
session.rollback();
}finally{
session.close();
}
}
}
Lay-ui 前端视图
页面目录
Index 首页
共同头引用
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Week Report Management System</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="./css/font.css" >
<link rel="stylesheet" href="./css/xadmin.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
</head>
< b o d y > <body> <body> 主体
<body>
<!-- 顶部开始 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<div class="container">
<div class="logo"><a href="./index.html">周报后台管理系统</a></div>
<div class="left_open">
<i title="展开左侧栏" class="iconfont"></i>
</div>
<ul class="layui-nav right" lay-filter="">
<li class="layui-nav-item">
<a href="javascript:">admin</a>
<dl class="layui-nav-child"> <!-- 二级菜单 -->
<dd><a onclick="x_admin_show('修改密码','./user/toUpdateUpass','600','400')">修改密码</a></dd>
<dd><a href="./user/logout">退出</a></dd>
</dl>
</li>
</ul>
</div>
<!-- 顶部结束 -->
<!-- 中部开始 -->
<!-- 左侧菜单开始 -->
<div class="left-nav">
<div id="side-nav">
<ul id="nav">
<li>
<a href="javascript:">
<i class="iconfont"></i>
<cite>用户管理</cite>
<i class="iconfont nav_right"></i>
</a>
<ul class="sub-menu">
<li class="layui-nav-item">
<a _href="./user_list.html">
<i class="iconfont"></i>
<cite>用户列表</cite>
</a>
</li >
</ul>
</li>
<li>
<a href="javascript:">
<i class="iconfont"></i>
<cite>周报管理</cite>
<i class="iconfont nav_right"></i>
</a>
<ul class="sub-menu">
<li class="layui-nav-item">
<a _href="./report_list.html">
<i class="iconfont"></i>
<cite>周报列表</cite>
</a>
</li >
</ul>
</li>
<li>
<a href="javascript:">
<i class="iconfont"></i>
<cite>系统管理</cite>
<i class="iconfont nav_right"></i>
</a>
<ul class="sub-menu">
<li>
<a href="homework/toTeacherHomeworkList">
<i class="iconfont"></i>
<cite>角色管理</cite>
</a>
</li >
<li>
<a href="homework/toStudentHomeworkList">
<i class="iconfont"></i>
<cite>权限管理</cite>
</a>
</li >
</ul>
</li>
</ul>
</div>
</div>
<!-- <div class="x-slide_left"></div> -->
<!-- 左侧菜单结束 -->
<!-- 右侧主体开始 -->
<div class="page-content">
<div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false">
<ul class="layui-tab-title">
<li class="home"><i class="layui-icon"></i>我的桌面</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<iframe id="ifMain" src="" frameborder="0" scrolling="yes" class="x-iframe"></iframe>
</div>
</div>
</div>
</div>
<div class="page-content-bg"></div>
<!-- 右侧主体结束 -->
<!-- 中部结束 -->
<!-- 底部开始 -->
<div class="footer">
<div class="copyright">Copyright ©2021 ---- All Rights Reserved</div>
</div>
<!-- 底部结束 -->
</body>
Login 登录
< b o d y > <body> <body> 主体
<body class="login-bg">
<div class="login layui-anim layui-anim-up">
<form method="post" class="layui-form" >
<label>
<input name="uname" placeholder="Username" type="text" lay-verify="required" class="layui-input" >
</label>
<hr class="hr15">
<label>
<input name="upass" lay-verify="required" placeholder="Password" type="password" class="layui-input">
</label>
<hr class="hr15">
<input value="Login" lay-submit lay-filter="login" style="width:100%;" type="submit">
<hr class="hr20" >
</form>
</div>
</body>
<script>
$(function () {
layui.use('form', function(){
var form = layui.form;
// layer.msg('玩命卖萌中', function(){
// //关闭后的操作
// });
//监听提交
form.on('submit(login)', function(data){
$.ajax({
url:"./login.do",
data:{uname:data.field.uname,upass:data.field.upass},
success:function (data) {
//成功的回掉方法
if(!("1" !== data)){
layer.msg("登陆成功");
window.location.href="./index.html";
}
else{
layer.msg("登陆失败");
}
}
});
return false;
});
});
})
</script>
User 操作界面
user_add.html
<body class="layui-anim layui-anim-up">
<div class="x-body layui-anim layui-anim-up">
<form class="layui-form">
<div class="layui-form-item">
<label for="uname" class="layui-form-label">
<span class="x-red">*用户名</span>
</label>
<div class="layui-input-inline">
<input type="text" id="uname" name="name" required="" lay-verify="uname"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="upass" class="layui-form-label">
<span class="x-red">*用户密码</span>
</label>
<div class="layui-input-inline">
<input type="password" id="upass" name="upass" required="" lay-verify="upass"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="L_repass" class="layui-form-label">
</label>
<button class="layui-btn" lay-filter="add" lay-submit="">
增加
</button>
</div>
</form>
</div>
<script>
layui.use(['form','layer','layedit'], function(){
$ = layui.jquery;
var form = layui.form
,layer = layui.layer;
//监听提交
form.on('submit(add)', function(data){
console.log(data);
var uname=$("#uname").val();
var upass=$("#upass").val();
//发异步
$.ajax({
url:"./user.do",
dataType:"json",
data:{"oper":"add","uname":uname,"upass":upass},
success:function (data) {
if(data.code==0){
layer.alert("增加成功", {icon: 6},function () {
// 获得frame索引
var index = parent.layer.getFrameIndex(window.name);
//关闭当前frame
parent.layer.close(index);
//修改成功后刷新父界面
window.parent.location.reload();
});
}
else{
layer.alert("添加失败");
}
}
});
return false;
});
});
</script>
</body>
user_list.html
<body>
<table id="demo" lay-filter="test"></table>
<button class="layui-btn" onclick="x_admin_show('添加用户','./user_add.html',700,500)"><i class="layui-icon"></i>添加</button>
</body>
<script>
$(function () {
layui.use('table', function(){
var table = layui.table;
//数据表格渲染
//第一个实例
table.render({
elem: '#demo'
,height: 312
,url: './user.do' //数据接口
,page: true //开启分页
,cols: [
[ //表头
{field: 'id', title: 'ID', width:100, sort: true, fixed: 'left'}
,{field: 'uname', title: '用户名', width:180}
,{field: 'upass', title: '密码', width:180, sort: true}
]
]
});
});
})
</script>
Report 操作界面
report_add.html
<body class="layui-anim layui-anim-up">
<div class="x-body layui-anim layui-anim-up">
<form class="layui-form">
<div class="layui-form-item">
<label for="L_name" class="layui-form-label">
<span class="x-red">*</span>标题
</label>
<div class="layui-input-inline">
<input type="text" id="name" name="name" required="" lay-verify="name"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="L_achievement" class="layui-form-label">
<span class="x-red">*</span>本周成果
</label>
<div class="layui-input-inline">
<textarea id="achievement" name="achievement" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<label for="L_problem" class="layui-form-label">
<span class="x-red">*</span>问题
</label>
<div class="layui-input-inline">
<textarea id="problem" name="problem" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<label for="L_repass" class="layui-form-label">
</label>
<button class="layui-btn" lay-filter="add" lay-submit="">
增加
</button>
</div>
</form>
</div>
<script>
layui.use(['form','layer','layedit'], function(){
$ = layui.jquery;
var form = layui.form
,layer = layui.layer;
//监听提交
form.on('submit(add)', function(data){
console.log(data);
var name=$("#name").val();
var achievement=$("#achievement").val();
var problem=$("#problem").val();
//发异步
$.ajax({
url:"./report.do",
dataType:"json",
data:{"oper":"add","name":name,"achievement":achievement,"problem":problem},
success:function (data) {
if(data.code==0){
layer.alert("增加成功", {icon: 6},function () {
// 获得frame索引
var index = parent.layer.getFrameIndex(window.name);
//关闭当前frame
parent.layer.close(index);
//修改成功后刷新父界面
window.parent.location.reload();
});
}
else{
layer.alert("添加失败");
}
}
});
return false;
});
});
</script>
</body>
report_list.html
<body>
<table id="demo" lay-filter="test"></table>
<button class="layui-btn" onclick="x_admin_show('添加周报','./report_add.html',700,500)"><i class="layui-icon"></i>添加</button>
</body>
<script>
$(function () {
layui.use('table', function(){
var table = layui.table;
//数据表格渲染
//第一个实例
table.render({
elem: '#demo'
,height: 312
,url: './report.do' //数据接口
,page: true //开启分页
,cols: [
[ //表头
{field: 'id', title: 'ID', width:100, sort: true, fixed: 'left'}
,{field: 'uname', title: '用户名', width:180}
,{field: 'achievement', title: '完成', width:180}
,{field: 'problem', title: '问题', width:180}
,{field: 'plan', title: '计划', width:180}
,{field: 'createtime', title: '创建日期', width:180}
]
]
});
});
})
</script>
Servlet 控制
配置Servlet与映射
WEB-INF → \rightarrow → web.xml 文件
<!--Servlet配置-->
<servlet>
<servlet-name>loginServlet</servlet-name>
<servlet-class>com.wrmsys.servlet.LoginServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>userServlet</servlet-name>
<servlet-class>com.wrmsys.servlet.UserServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>reportServlet</servlet-name>
<servlet-class>com.wrmsys.servlet.ReportServlet</servlet-class>
</servlet>
<!--Servlet映射-->
<servlet-mapping>
<servlet-name>loginServlet</servlet-name>
<url-pattern>/login.do</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>userServlet</servlet-name>
<url-pattern>/user.do</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>reportServlet</servlet-name>
<url-pattern>/report.do</url-pattern>
</servlet-mapping>
LoginServlet
/**
* Servlet是运行在服务端的Java代码
*/
public class LoginServlet extends HttpServlet {
UserMapper userMapper;
public LoginServlet() {
SqlSession session= DBTools.getSession();
userMapper=session.getMapper(UserMapper.class);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out=response.getWriter();
//获取浏览器端传递的用户名和密码 参数
String uname=request.getParameter("uname");
String upass=request.getParameter("upass");
//访问数据库
User user=userMapper.login(new User(uname,upass));
if(user!=null){
System.out.println("登陆成功");
out.print("1");
}
else{
System.out.println("登陆失败");
out.print("0");
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req,resp);
}
}
UserServlet
package com.wrmsys.servlet;
import com.alibaba.fastjson.JSONObject;
import com.wrmsys.bean.Report;
import com.wrmsys.mapper.ReportMapper;
import com.wrmsys.utils.DBTools;
import org.apache.ibatis.session.SqlSession;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
public class ReportServlet extends HttpServlet {
ReportMapper reportMapper;
SqlSession session;
public ReportServlet() {
session = DBTools.getSession();
reportMapper = session.getMapper(ReportMapper.class);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String oper = request.getParameter("oper");
if (oper != null && oper.equals("add")) {
//添加
String name = request.getParameter("name");
String achievement = request.getParameter("achievement");
String problem = request.getParameter("problem");
Report report = new Report(null, name, achievement, problem, "", null);
reportMapper.save(report);
JSONObject ret = new JSONObject();
ret.put("code", 0);
ret.put("msg", "success");
//对象转JSON串
String json = ret.toJSONString();
out.print(json);
} else {
//访问数据库,获取用户列表信息
List<Report> list = reportMapper.getList();
session.commit();
JSONObject ret = new JSONObject();
ret.put("code", 0);
ret.put("msg", "success");
ret.put("count", list.size());
ret.put("data", list);
//对象转JSON串
String json = ret.toJSONString();
out.print(json);
}
}
}
ReportServlet
public class UserServlet extends HttpServlet {
UserMapper userMapper;
public UserServlet() {
SqlSession session= DBTools.getSession();
userMapper=session.getMapper(UserMapper.class);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out=response.getWriter();
//访问数据库,获取用户列表信息
List<User> list=userMapper.getList();
JSONObject ret=new JSONObject();
ret.put("code",0);
ret.put("msg","success");
ret.put("count",list.size());
ret.put("data",list);
//对象转JSON串
String json=ret.toJSONString();
out.print(json);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req,resp);
}
}
运行结果
周报界面
内容添加
附录:
mapper绑定失败问题
检查 pom.xml 中 mybatis 目录配置是否完成
<build>
<resources>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.xml</include>
</includes>
</resource>
<resource> <directory>src/main/resources</directory>
<includes>
<include>**/*.xml</include>
<include>**/*.properties</include>
</includes>
</resource>
</resources>
</build>
检查 XXmapper.xml 中 目录是否正确,id名称是否写对
<mapper namespace="目录">
<select id="名称"></select>
注意resources层的目录创建