OA办公系统案例开发

标签：ci SET utf8 CHARACTER OA 案例办公 COLLATE NULL

创建数据库

创建名为 oa 的数据库，如下：

创建 oa 数据库表，如下：

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for t_contact
-- ----------------------------
DROP TABLE IF EXISTS `t_contact`;
CREATE TABLE `t_contact`  (
  `id` int(0) NOT NULL AUTO_INCREMENT COMMENT '主键标识',
  `name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '姓名',
  `phone` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '电话',
  `email` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '邮箱',
  `position` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '部门',
  `department` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '职务',
  `account` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '用户账号',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 21 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Table structure for t_meeting
-- ----------------------------
DROP TABLE IF EXISTS `t_meeting`;
CREATE TABLE `t_meeting`  (
  `id` int(0) UNSIGNED NOT NULL AUTO_INCREMENT,
  `sender` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL DEFAULT '',
  `start_time` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `end_time` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `address` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `title` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `content` text CHARACTER SET utf8 COLLATE utf8_general_ci NULL,
  PRIMARY KEY (`id`) USING BTREE,
  UNIQUE INDEX `ID`(`id`) USING BTREE,
  INDEX `ID_2`(`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Table structure for t_message
-- ----------------------------
DROP TABLE IF EXISTS `t_message`;
CREATE TABLE `t_message`  (
  `id` int(0) NOT NULL AUTO_INCREMENT COMMENT '主键标识',
  `sender_account` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '发送者账号',
  `sender_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '发送者姓名',
  `title` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '标题',
  `content` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '内容',
  `receiver_account` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '接收者账号',
  `receiver_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '接收者姓名',
  `receive_time` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '接收时间',
  `isRead` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '是否阅读',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 19 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Table structure for t_notice
-- ----------------------------
DROP TABLE IF EXISTS `t_notice`;
CREATE TABLE `t_notice`  (
  `id` int(0) UNSIGNED NOT NULL AUTO_INCREMENT,
  `sender` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL DEFAULT '',
  `title` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `content` text CHARACTER SET utf8 COLLATE utf8_general_ci NULL,
  `send_time` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE,
  UNIQUE INDEX `ID`(`id`) USING BTREE,
  INDEX `ID_2`(`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Table structure for t_schedule
-- ----------------------------
DROP TABLE IF EXISTS `t_schedule`;
CREATE TABLE `t_schedule`  (
  `id` int(0) UNSIGNED NOT NULL AUTO_INCREMENT,
  `account` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL DEFAULT '',
  `year` int(0) NULL DEFAULT NULL,
  `month` int(0) NULL DEFAULT NULL,
  `day` int(0) NULL DEFAULT NULL,
  `plan` text CHARACTER SET utf8 COLLATE utf8_general_ci NULL,
  PRIMARY KEY (`id`) USING BTREE,
  UNIQUE INDEX `ID`(`id`) USING BTREE,
  INDEX `ID_2`(`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Table structure for t_user
-- ----------------------------
DROP TABLE IF EXISTS `t_user`;
CREATE TABLE `t_user`  (
  `id` int(0) NOT NULL AUTO_INCREMENT COMMENT '主键标识',
  `account` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '账号',
  `password` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '密码',
  `name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '姓名',
  `gender` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '性别',
  `phone` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '电话',
  `employeeId` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '工号',
  `department` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '部门',
  `position` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '职务',
  `email` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '邮件',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 13 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Table structure for t_worklog
-- ----------------------------
DROP TABLE IF EXISTS `t_worklog`;
CREATE TABLE `t_worklog`  (
  `id` int(0) UNSIGNED NOT NULL AUTO_INCREMENT,
  `account` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL DEFAULT '',
  `year` int(0) NULL DEFAULT NULL,
  `month` int(0) NULL DEFAULT NULL,
  `day` int(0) NULL DEFAULT NULL,
  `title` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `description` text CHARACTER SET utf8 COLLATE utf8_general_ci NULL,
  `log_time` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE,
  UNIQUE INDEX `ID`(`id`) USING BTREE,
  INDEX `ID_2`(`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;

SpringBoot 集成 MyBatisPlus 环境搭建

1. 创建 Maven 工程

maven Archetype 模板类型选择 webapp，如下：

2. pom.xml 添加 maven 依赖

项目需要添加 SpringBoot 和 MyBatisPlus 相关依赖，完整 pom.xml 文件内容如下：

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.binge</groupId>
    <artifactId>oa_system</artifactId>
    <packaging>war</packaging>
    <version>1.0-SNAPSHOT</version>
    <name>oa_system Maven Webapp</name>
    <url>http://maven.apache.org</url>
    <!--Spring Boot 项目的父级依赖-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.15</version>
        <relativePath/>
    </parent>

    <dependencies>
        <!-- springboot 依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>

        <!-- 测试依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!-- web 依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- servlet 依赖-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
        </dependency>

        <!-- tomcat 依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
            <scope>provided</scope>
        </dependency>

        <!-- jstl 依赖-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
        </dependency>

        <!-- 使用jsp引擎，springboot内置tomcat没有此依赖 -->
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
            <scope>provided</scope>
        </dependency>

        <!-- lombok 依赖-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.26</version>
        </dependency>

        <!-- mybatispulus 依赖-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.7</version>
        </dependency>

        <!-- mysql 驱动依赖（如果 mysql 数据库是 5.x 版本，需要修改 mysql 驱动的相应版本号）-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.28</version>
        </dependency>
    </dependencies>

    <build>
        <finalName>oa_system</finalName>
    </build>
</project>

3. 创建SpringBoot 的 application.properties 全局配置文件

添加 SpringBoot 和 MyBatisPlus 配置， application.properties 文件内容如下：

#配置JSP视图解析器路径前缀
spring.mvc.view.prefix=/

#配置JSP视图解析器路径后缀
spring.mvc.view.suffix=.jsp

### 数据库配置
#设置数据库URL地址
spring.datasource.url=jdbc:mysql://localhost:3306/oa
#设置数据库用户名（改为你自己的用户名）
spring.datasource.username=root
#设置数据库密码（改为你自己的密码）
spring.datasource.password=123456
#设置数据库驱动（如果 mysql 数据库是 5.x 版本，改为 com.mysql.jdbc.Driver）
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

### mybatisPlus配置
#设置数据模型所在的包
mybatis-plus.type-aliases-package=com.binge.model
#设置SQL语句控制台日志打印
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
#设置驼峰命名转换
mybatis-plus.configuration.map-underscore-to-camel-case=true

4. 工程中分别创建 controller、mapper 和 model 包

controller 包：用于存放页面控制器类
mapper 包：用于存放数据库映射接口
model 包：用于存放模型数据类

5. 创建 OASystemApplication.java 启动类

package com.binge;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("com.binge.mapper")
public class OASystemApplication {
    public static void main(String[] args) {
        SpringApplication.run(OASystemApplication.class, args);
    }
}

6. 测试环境搭建

运行启动类，如下：

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::               (v2.7.15)

2024-07-21 21:34:51.991  INFO 6192 --- [           main] com.binge.OASystemApplication            : Starting OASystemApplication using Java 1.8.0_202 on Binge2022 with PID 6192 (C:\Users\Administrator\Desktop\worksapce\oa_system\target\classes started by Binge in C:\Users\Administrator\Desktop\worksapce\oa_system)
2024-07-21 21:34:51.993  INFO 6192 --- [           main] com.binge.OASystemApplication            : No active profile set, falling back to 1 default profile: "default"
2024-07-21 21:34:52.741  INFO 6192 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat initialized with port(s): 8080 (http)
2024-07-21 21:34:52.747  INFO 6192 --- [           main] o.apache.catalina.core.StandardService   : Starting service [Tomcat]
2024-07-21 21:34:52.747  INFO 6192 --- [           main] org.apache.catalina.core.StandardEngine  : Starting Servlet engine: [Apache Tomcat/9.0.79]
2024-07-21 21:34:52.962  INFO 6192 --- [           main] org.apache.jasper.servlet.TldScanner     : At least one JAR was scanned for TLDs yet contained no TLDs. Enable debug logging for this logger for a complete list of JARs that were scanned but no TLDs were found in them. Skipping unneeded JARs during scanning can improve startup time and JSP compilation time.
2024-07-21 21:34:52.966  INFO 6192 --- [           main] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring embedded WebApplicationContext
2024-07-21 21:34:52.966  INFO 6192 --- [           main] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 939 ms
Logging initialized using 'class org.apache.ibatis.logging.stdout.StdOutImpl' adapter.
Get /192.168.55.1 network interface 
Get network interface info: name:eth6 (VMware Virtual Ethernet Adapter for VMnet1)
Initialization Sequence datacenterId:4 workerId:8
 _ _   |_  _ _|_. ___ _ |    _ 
| | |\/|_)(_| | |_\  |_)||_|_\ 
     /               |         
                        3.5.7 
2024-07-21 21:34:53.698  INFO 6192 --- [           main] o.s.b.a.w.s.WelcomePageHandlerMapping    : Adding welcome page template: index
2024-07-21 21:34:53.831  INFO 6192 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 8080 (http) with context path ''
2024-07-21 21:34:53.839  INFO 6192 --- [           main] com.binge.OASystemApplication            : Started OASystemApplication in 2.098 seconds (JVM running for 2.688)

打开浏览器输入：http://localhost:8080/index.jsp

说明 SpringBoot 集成 MyBatisPlus 环境搭建成功：）

OA 办公系统功能开发

用户登录功能开发

1. 创建 login.jsp 登录页面

在 webapp 根目录下创建 login.jsp 页面，页面内容如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录页面</title>
</head>
<body>
<%-- 显示登录错误信息 --%>
<c:if test="${not empty error}">
    <p style="color: red">${error}</p>
</c:if>

<form action="/user/login.do" method="post">
    <div>
        <label for="account">账号:</label>
        <input type="text" id="account" name="account" required>
    </div>
    <div>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required>
    </div>
    <div>
        <button type="submit">登录</button>
    </div>
</form>
</body>
</html>

2. 创建用户 User.java 模型数据

在 model 包中创建模型数据 User.java 类，内容如下：

package com.binge.model;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
@TableName("t_user")
public class User {
    @TableId(type = IdType.AUTO)
    private  Integer id;
    private String account;
    private String password;
    private String name;
    private String gender;
    private String phone;
    @TableField(value = "employeeId")
    private String employeeId;
    private String department;
    private String position;
    private String email;
}

3. 创建用户 UserMapper.java 数据库映射接口

在 mapper 包中创建 UserMapper.java 类，内容如下：

package com.binge.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.binge.model.User;

/**
 * @Description 用户数据库映射接口
 */
public interface UserMapper extends BaseMapper<User> {
}

4. 创建用户 UserController.java 页面控制器类

在 controller 包中创建模型数据 UserController.java 类，用于处理用户登录请求，内容如下：

package com.binge.controller;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import com.binge.mapper.UserMapper;
import com.binge.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.annotation.Resource;
import javax.servlet.http.HttpSession;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @Description 用户页面处理器
 */
@Controller
public class UserController {
    @Resource
    private UserMapper userMapper;

    //登录请求
    @RequestMapping("/user/login.do")
    public String login(String account, String password, HttpSession session) {
        System.out.println(account);
        System.out.println(password);

        //查询数据库是否存在该用户名和密码
        Map<String,Object> map = new HashMap<>();
        map.put("account",account);
        map.put("password",password);
        List<User> users = userMapper.selectByMap(map);
        if(users.size() == 0) {
            session.setAttribute("error", "用户名或密码错误"); // 登录失败后将错误信息存入session中
            return "login";
        } else {
            session.removeAttribute("error"); // 修改成功后清除session中错误信息
            session.setAttribute("account", account); // 将登录账号存入session中
            return "main"; // 登录成功后跳转到主页
        }
    }
}

如果登录失败，显示失败信息；登录成功，则跳转到 main.jsp 主页面。

5. 创建 main.jsp 主页面

使用 AI 工具自动生成一个带导航栏的 JSP 主页面，内容如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>主页</title>
    <style>
        .container{
            display: flex;
            justify-content: space-between;
            width: 100%;
        }
        .left-nav{
            width: 20%;
        }
        .accordion {
            background-color: #eee;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
        }

        .active, .accordion:hover {
            background-color: #ccc;
        }

        .panel {
            padding: 0 30px;
            background-color: white;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
        }

        .panel a {
            text-decoration: none;
            color: #2196F3;
            display: block;
            padding: 10px;
            border-bottom: 1px solid #e5e5e5;
            width: 100%;
        }
        .panel a:last-child {
            border-bottom: none;
        }
    </style>
</head>
<body>
<div class="header">
    <h1>欢迎使用 OA 自动化办公系统</h1>
    <h5><a href="/login.jsp">注销</a></h5>
</div>
<div class="container">
    <div class="left-nav">
        <button class="accordion">个人中心</button>
        <div class="panel">
            <a href="/user/info.do">查看信息</a>
            <a href="/password.jsp">修改密码</a>
        </div>

        <button class="accordion">联系人</button>
        <div class="panel">
            <a href="/contact/list.do">查看联系人</a>
            <a href="/contactAdd.jsp">添加联系人</a>
        </div>

        <button class="accordion">短消息</button>
        <div class="panel">
            <a href="/message/list.do">查看短消息</a>
            <a href="/message/send.do">发送短消息</a>
        </div>

        <button class="accordion">个人日程</button>
        <div class="panel">
            <a href="/schedule/list.do">查看日程</a>
            <a href="/schedule/add.do">添加日程</a>
        </div>

        <button class="accordion">工作日志</button>
        <div class="panel">
            <a href="/log/list.do">查看日志</a>
            <a href="/log/add.do">添加日志</a>
        </div>

        <button class="accordion">会议公告</button>
        <div class="panel">
            <a href="/pub/list.do">查看公告</a>
            <a href="/pub/add.do">发布公告</a>
        </div>
    </div>
    <div class="right">
        <img src="/img/home.jpg" width="1200" height="600" />
    </div>
</div>
<script>
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var panel = this.nextElementSibling;
            if (panel.style.maxHeight){
                panel.style.maxHeight = null;
            } else {
                panel.style.maxHeight = panel.scrollHeight + "px";
            }
        });
    }
</script>

</body>
</html>

主页面显示如下：

查看用户个人信息功能开发

1. 修改 UserController.jsp，添加查看用户个人信息请求方法 info，内容如下：

//查看个人信息请求
@RequestMapping("/user/info.do")
public String info(HttpSession session) {
    //从session中获取用户登录的账号
    String account = (String)session.getAttribute("account");
    System.out.println(account);
    //从数据库查询用户信息
    User user = userMapper.selectOne(new QueryWrapper<User>().eq("account",account));
    //将用户信息保存到session中
    session.setAttribute("user", user);
    return "information";
}

返回 information.jsp 页面，用于显示用户个人信息

2. 创建 information.jsp 页面

在 webapp 根目录下创建 information.jsp，内容如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>个人信息</title>
</head>
<body>
<div class="container">
    <div class="header">
        <h3>个人信息展示 <a href="/main.jsp">返回主页</a> </h3>
    </div>
    <div>
        <div>账号：${user.account}</div>
        <div>姓名：${user.name}</div>
        <div>性别：${user.gender}</div>
        <div>电话：${user.phone}</div>
        <div>工号：${user.employeeId}</div>
        <div>部门：${user.department}</div>
        <div>职位：${user.position}</div>
        <div>邮箱：${user.email}</div>
    </div>
</div>

</body>
</html>

修改用户密码功能开发

1. 创建 password.jsp 修改用户密码页面

在 webapp 根目录下创建 password.jsp 页面，内容如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>修改密码</title>
    </head>
    <body>
        <%-- 显示修改错误信息 --%>
        <c:if test="${not empty error}">
            <p style="color: red">${error}</p>
        </c:if>
        <div class="container">
            <div class="header">
                <h3>修改密码 <a href="/main.jsp">返回主页</a> </h3>
            </div>
            <div>
                <form action="/user/pwd.do" method="post">
                    <div>
                        <label for="password">新密码:</label>
                        <input type="password" id="password" name="password" required>
                    </div>
                    <div>
                        <button type="submit">修改</button>
                    </div>
                </form>
            </div>
        </div>

    </body>
</html>

2. 修改 UserController.jsp，添加修改用户密码请求方法 pwd，内容如下：

//修改密码请求
@RequestMapping("/user/pwd.do")
public String pwd(String password,HttpSession session) {
    //从 session 中获取用户登录账号
    String account = (String)session.getAttribute("account");
    //更新数据库中用户的密码
    Map<String,Object> map = new HashMap<>();
    map.put("account",account);
    map.put("password",password);
    int result = userMapper.update(new UpdateWrapper<User>().set("password", password).eq("account", account));
    if (result == 0) {
        session.setAttribute("error", "修改失败"); // 修改失败后将错误信息存入session中
        return "password";
    } else {
        session.removeAttribute("error"); // 修改成功后清除session中错误信息
        return  "redirect:/login.jsp"; // 修改成功后重定向跳转到登录页面
    }
}

用户密码修改成功后，需要通过重定向的跳转到登录页面，让用户重新登录。

添加联系人功能开发

1. 创建 contactAdd.jsp 添加联系人页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>添加联系人</title>
    </head>
    <body>
        <div class="header">
            <h3>添加联系人 <a href="/main.jsp">返回主页</a> </h3>
        </div>
        <form action="/contact/add.do" method="post">
            <div>
                <label for="name">姓名:</label>
                <input type="text" id="name" name="name" required value="${contact.name}">
            </div>
            <div>
                <label for="phone">电话:</label>
                <input type="phone" id="phone" name="phone" required value="${contact.phone}">
            </div>
            <div>
                <label for="email">邮箱:</label>
                <input type="email" id="email" name="email" required value="${contact.email}">
            </div>
            <div>
                <label for="position">职务:</label>
                <input type="position" id="position" name="position" required value="${contact.position}">
            </div>
            <div>
                <label for="department">部门:</label>
                <input type="department" id="department" name="department" required value="${contact.department}">
            </div>
            <div>
                <button type="submit">添加</button>
            </div>
        </form>
    </body>
</html>

2. 创建联系人 Contact.java 数据模型

在 model 包中创建 Contact.java 类，内容如下：

package com.binge.model;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * @Description 联系人数据模型类
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
@TableName("t_contact")
public class Contact {
    @TableId(type = IdType.AUTO)
    private Integer id;
    private String name;
    private String phone;
    private String email;
    private String position;
    private String department;
    private String account;
}

2. 创建联系人 ContactMapper.java 数据库映射接口

在 mapper 包中创建 ContactMapper.java 接口，内容如下：

package com.binge.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.binge.model.Contact;

/**
 * @Description 联系人数据库映射接口
 */
public interface ContactMapper extends BaseMapper<Contact> {
}

3. 创建联系人 ContactController.java 页面控制器类

在 controller 包下创建 ContactController.java 页面控制器类，内容如下：

package com.binge.controller;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.binge.mapper.ContactMapper;
import com.binge.model.Contact;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.annotation.Resource;
import javax.servlet.http.HttpSession;
import java.util.List;

/**
 * @Description 联系人页面处理器
 */
@Controller
public class ContactController {
    @Resource
    private ContactMapper contactMapper;
    
    @RequestMapping("/contact/add.do")
    public String contactAdd(Contact contact,HttpSession session) {
        //从session中获取用户登录账号
        String account = (String)session.getAttribute("account");
        contact.setAccount(account);
        //数据库插入联系人
        contactMapper.insert(contact);
        return "redirect:/contact/list.do"; // 跳转到联系人页面
    }
}

数据库插入联系人成功后，通过重定向跳转到显示联系人页面

查看联系人功能开发

1. 修改 ContactController.jsp，添加查看联系人请求 contactList 方法，内容如下：

@RequestMapping("/contact/list.do")
public String contactList(HttpSession session) {
    //从session中获取登录账号
    String account = (String) session.getAttribute("account");
    //查询联系人
    List<Contact> contactList = contactMapper.selectList(new QueryWrapper<Contact>().eq("account", account));
    //将联系人保存到session中
    session.setAttribute("contacts", contactList);
    return "contact";
}

返回 contact.jsp 用于显示联系人信息

2. 创建 contact.jsp 显示联系人页面

在 webapp 根路径下创建 contact.jsp 页面，内容如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
    <head>
        <title>联系人</title>
    </head>
    <body>
        <h3>联系人列表<a href="/main.jsp">返回主页</a> </h3>

        <table border="1">
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>电话号码</th>
                <th>电子邮件</th>
                <th>职位</th>
                <th>部门</th>
                <th>账号</th>
                <th>操作</th>
            </tr>
            <c:forEach items="${contacts}" var="contact">
                <tr>
                    <td>${contact.id}</td>
                    <td>${contact.name}</td>
                    <td>${contact.phone}</td>
                    <td>${contact.email}</td>
                    <td>${contact.position}</td>
                    <td>${contact.department}</td>
                    <td>${contact.account}</td>
                    <td>
                        <!-- 修改按钮 -->
                        <a href="/contact/edit.do?id=${contact.id}" class="btn">修改</a>
                        <!-- 删除按钮 -->
                        <a href="/contact/del.do?id=${contact.id}" class="btn" onclick="return confirm('确定要删除吗？');">删除</a>
                    </td>
                </tr>
            </c:forEach>
        </table>
    </body>
</html>

删除联系人功能开发

1. 修改 ContactController.jsp，添加删除联系人请求 contactDel 方法，内容如下：

@RequestMapping("/contact/del.do")
public String contactDel(Integer id) {
    //数据库删除联系人
    contactMapper.deleteById(id);
    return "redirect:/contact/list.do"; // 重定向跳转到联系人页面
}

删除成功后，自动刷新联系人 contact.jsp 页面

修改联系人功能开发

1. 修改 ContactController.jsp，添加修改联系人请求 contactEdit 方法，内容如下：

@RequestMapping("/contact/edit.do")
public String contactEdit(Integer id,HttpSession session) {
    //从session中获取登录账号
    String account = (String)session.getAttribute("account");
    //查询修改的联系人信息
    Contact contact = contactMapper.selectById(id);
    //将修改的联系人信息存放到session中
    session.setAttribute("contact", contact);
    return "contactEdit";
}

返回修改联系人 contactEdit.jsp 页面

2. 创建修改联系人 contactEdit.jsp 页面

在 webapp 根路径下创建 contactEdit.jsp 页面，内容如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>修改联系人</title>
    </head>
    <body>
        <div class="header">
            <h3>修改联系人 <a href="/main.jsp">返回主页</a> </h3>
        </div>
        <form action="/contact/editHandler.do" method="post">
            <div>
                <label for="id">编号:</label>
                <input type="text" id="id" name="id" required value="${contact.id}" readonly>
            </div>
            <div>
                <label for="name">姓名:</label>
                <input type="text" id="name" name="name" required value="${contact.name}">
            </div>
            <div>
                <label for="phone">电话:</label>
                <input type="phone" id="phone" name="phone" required value="${contact.phone}">
            </div>
            <div>
                <label for="email">邮箱:</label>
                <input type="email" id="email" name="email" required value="${contact.email}">
            </div>
            <div>
                <label for="position">职务:</label>
                <input type="position" id="position" name="position" required value="${contact.position}">
            </div>
            <div>
                <label for="department">部门:</label>
                <input type="department" id="department" name="department" required value="${contact.department}">
            </div>
            <div>
                <label for="account">账号:</label>
                <input type="account" id="account" name="account" required value="${contact.account}" readonly>
            </div>
            <div>
                <button type="submit">修改</button>
            </div>
        </form>
    </body>
</html>

3. 修改 ContactController.jsp，添加处理修改联系人请求 contactEditHandler 方法，内容如下：

@RequestMapping("/contact/editHandler.do")
public String contactEditHandler(Contact contact) {
    //数据库修改联系人
    contactMapper.updateById(contact);
    return "redirect:/contact/list.do"; // 重定向跳转到联系人页面
}

当修改联系人成功后，通过重定向跳转到联系人 contact.jsp，显示联系人信息，以查看修改结果。

总结

通过以上功能代码开发，已实现如下功能：

用户登录功能
显示主页面功能
查看用户个人信息功能
修改用户密码功能
添加联系人功能
查看联系人功能
删除联系人功能
修改联系人功能

标签：ci,SET,utf8,CHARACTER,OA,案例,办公,COLLATE,NULL
From： https://www.cnblogs.com/binbingg/p/18315061