当前位置： 首页 > news >正文

基于 JAVASSM（Java + Spring + Spring MVC + MyBatis）框架开发一个九宫格日志系统

news 2024/11/5 21:30:12

基于 JAVASSM（Java + Spring + Spring MVC + MyBatis）框架开发一个九宫格日志系统
在这里插入图片描述

步骤一：需求分析

明确系统需要实现的功能，比如：

  • 用户注册和登录
  • 添加日志（包含标题、内容、图片）
  • 查看日志列表
  • 查看单个日志的详细信息
  • 九宫格展示日志图片

步骤二：设计数据库

使用 MySQL 数据库存储系统数据。设计数据库表结构如下：

用户表（users）
  • id (INT, 主键, 自增)
  • username (VARCHAR)
  • password (VARCHAR)
  • email (VARCHAR)
  • phone (VARCHAR)
日志表（logs）
  • id (INT, 主键, 自增)
  • user_id (INT, 外键)
  • title (VARCHAR)
  • content (TEXT)
  • created_at (DATETIME)
日志图片表（log_images）
  • id (INT, 主键, 自增)
  • log_id (INT, 外键)
  • image_url (VARCHAR)

步骤三：选择开发工具

使用 IntelliJ IDEA 或 Eclipse 作为开发环境。

步骤四：搭建项目结构

  1. 创建 Maven 项目。
  2. 添加必要的依赖项（Spring、Spring MVC、MyBatis、MySQL 驱动等）。

步骤五：配置文件

application.properties
spring.datasource.url=jdbc:mysql://localhost:3306/log_system?useSSL=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Drivermybatis.mapper-locations=classpath:mapper/*.xml
spring-mvc.xml
<beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:context="http://www.springframework.org/schema/context"xmlns:mvc="http://www.springframework.org/schema/mvc"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context.xsdhttp://www.springframework.org/schema/mvchttp://www.springframework.org/schema/mvc/spring-mvc.xsd"><context:component-scan base-package="com.logsystem"/><mvc:annotation-driven/><bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"><property name="prefix" value="/WEB-INF/views/"/><property name="suffix" value=".jsp"/></bean></beans>
mybatis-config.xml
<configuration><mappers><mapper resource="mapper/UserMapper.xml"/><mapper resource="mapper/LogMapper.xml"/><!-- 其他 Mapper 文件 --></mappers>
</configuration>

步骤六：编写实体类

User.java
package com.logsystem.entity;public class User {private int id;private String username;private String password;private String email;private String phone;// Getters and Setters
}
Log.java
package com.logsystem.entity;import java.util.Date;
import java.util.List;public class Log {private int id;private int userId;private String title;private String content;private Date createdAt;private List<String> images;// Getters and Setters
}

步骤七：编写 DAO 层

UserMapper.java
package com.logsystem.mapper;import com.logsystem.entity.User;
import org.apache.ibatis.annotations.*;@Mapper
public interface UserMapper {@Select("SELECT * FROM users WHERE username = #{username} AND password = #{password}")User login(@Param("username") String username, @Param("password") String password);@Insert("INSERT INTO users(username, password, email, phone) VALUES(#{username}, #{password}, #{email}, #{phone})")@Options(useGeneratedKeys = true, keyProperty = "id")void register(User user);
}
LogMapper.java
package com.logsystem.mapper;import com.logsystem.entity.Log;
import org.apache.ibatis.annotations.*;import java.util.List;@Mapper
public interface LogMapper {@Select("SELECT * FROM logs WHERE user_id = #{userId} ORDER BY created_at DESC")List<Log> getLogsByUserId(int userId);@Select("SELECT * FROM logs WHERE id = #{id}")Log getLogById(int id);@Insert("INSERT INTO logs(user_id, title, content, created_at) VALUES(#{userId}, #{title}, #{content}, NOW())")@Options(useGeneratedKeys = true, keyProperty = "id")void addLog(Log log);@Update("UPDATE logs SET title=#{title}, content=#{content} WHERE id=#{id}")void updateLog(Log log);@Delete("DELETE FROM logs WHERE id=#{id}")void deleteLog(int id);@Select("SELECT image_url FROM log_images WHERE log_id = #{logId}")List<String> getImagesByLogId(int logId);@Insert("INSERT INTO log_images(log_id, image_url) VALUES(#{logId}, #{imageUrl})")void addImageToLog(@Param("logId") int logId, @Param("imageUrl") String imageUrl);
}

步骤八：编写 Service 层

UserService.java
package com.logsystem.service;import com.logsystem.entity.User;
import com.logsystem.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;@Service
public class UserService {@Autowiredprivate UserMapper userMapper;public User login(String username, String password) {return userMapper.login(username, password);}public void register(User user) {userMapper.register(user);}
}
LogService.java
package com.logsystem.service;import com.logsystem.entity.Log;
import com.logsystem.mapper.LogMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;@Service
public class LogService {@Autowiredprivate LogMapper logMapper;public List<Log> getLogsByUserId(int userId) {List<Log> logs = logMapper.getLogsByUserId(userId);for (Log log : logs) {log.setImages(logMapper.getImagesByLogId(log.getId()));}return logs;}public Log getLogById(int id) {Log log = logMapper.getLogById(id);log.setImages(logMapper.getImagesByLogId(id));return log;}public void addLog(Log log) {logMapper.addLog(log);for (String imageUrl : log.getImages()) {logMapper.addImageToLog(log.getId(), imageUrl);}}public void updateLog(Log log) {logMapper.updateLog(log);logMapper.deleteImagesByLogId(log.getId());for (String imageUrl : log.getImages()) {logMapper.addImageToLog(log.getId(), imageUrl);}}public void deleteLog(int id) {logMapper.deleteImagesByLogId(id);logMapper.deleteLog(id);}
}

步骤九：编写 Controller 层

UserController.java
package com.logsystem.controller;import com.logsystem.entity.User;
import com.logsystem.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;@Controller
public class UserController {@Autowiredprivate UserService userService;@GetMapping("/login")public String showLoginForm() {return "login";}@PostMapping("/login")public String handleLogin(@RequestParam("username") String username, @RequestParam("password") String password, Model model) {User user = userService.login(username, password);if (user != null) {model.addAttribute("user", user);return "redirect:/logs";} else {model.addAttribute("error", "Invalid username or password");return "login";}}@GetMapping("/register")public String showRegisterForm() {return "register";}@PostMapping("/register")public String handleRegister(User user) {userService.register(user);return "redirect:/login";}
}
LogController.java
package com.logsystem.controller;import com.logsystem.entity.Log;
import com.logsystem.service.LogService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;@Controller
public class LogController {@Autowiredprivate LogService logService;@GetMapping("/logs")public String showLogs(@RequestParam("userId") int userId, Model model) {List<Log> logs = logService.getLogsByUserId(userId);model.addAttribute("logs", logs);return "logs";}@GetMapping("/log/{id}")public String showLogDetails(@RequestParam("id") int id, Model model) {Log log = logService.getLogById(id);model.addAttribute("log", log);return "logDetails";}@GetMapping("/addLog")public String showAddLogForm() {return "addLog";}@PostMapping("/addLog")public String handleAddLog(@RequestParam("title") String title, @RequestParam("content") String content,@RequestParam("images") MultipartFile[] images, HttpServletRequest request) throws IOException {Log log = new Log();log.setTitle(title);log.setContent(content);log.setUserId(Integer.parseInt(request.getParameter("userId")));List<String> imageUrls = new ArrayList<>();for (MultipartFile file : images) {if (!file.isEmpty()) {String originalFilename = file.getOriginalFilename();String uploadDir = request.getServletContext().getRealPath("/uploads");File uploadFile = new File(uploadDir, originalFilename);file.transferTo(uploadFile);imageUrls.add("/uploads/" + originalFilename);}}log.setImages(imageUrls);logService.addLog(log);return "redirect:/logs?userId=" + log.getUserId();}@GetMapping("/editLog/{id}")public String showEditLogForm(@RequestParam("id") int id, Model model) {Log log = logService.getLogById(id);model.addAttribute("log", log);return "editLog";}@PostMapping("/editLog")public String handleEditLog(@RequestParam("id") int id, @RequestParam("title") String title, @RequestParam("content") String content,@RequestParam("images") MultipartFile[] images, HttpServletRequest request) throws IOException {Log log = logService.getLogById(id);log.setTitle(title);log.setContent(content);List<String> imageUrls = new ArrayList<>();for (MultipartFile file : images) {if (!file.isEmpty()) {String originalFilename = file.getOriginalFilename();String uploadDir = request.getServletContext().getRealPath("/uploads");File uploadFile = new File(uploadDir, originalFilename);file.transferTo(uploadFile);imageUrls.add("/uploads/" + originalFilename);}}log.setImages(imageUrls);logService.updateLog(log);return "redirect:/logs?userId=" + log.getUserId();}@GetMapping("/deleteLog/{id}")public String handleDeleteLog(@RequestParam("id") int id) {logService.deleteLog(id);return "redirect:/logs?userId=" + request.getParameter("userId");}
}

步骤十：前端页面

使用 JSP 创建前端页面。以下是简单的 JSP 示例：

login.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Login</title>
</head>
<body>
<h2>Login</h2>
<form action="${pageContext.request.contextPath}/login" method="post">Username: <input type="text" name="username"><br>Password: <input type="password" name="password"><br><input type="submit" value="Login">
</form>
<c:if test="${not empty error}"><p style="color: red">${error}</p>
</c:if>
</body>
</html>
logs.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head><title>Logs</title><style>.grid-container {display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;}.grid-item {border: 1px solid #ccc;padding: 10px;text-align: center;}</style>
</head>
<body>
<h2>Logs</h2>
<a href="${pageContext.request.contextPath}/addLog">Add New Log</a>
<div class="grid-container"><c:forEach items="${logs}" var="log"><div class="grid-item"><h3>${log.title}</h3><p>${log.content}</p><c:forEach items="${log.images}" var="image"><img src="${image}" alt="${log.title}" width="100"></c:forEach><a href="${pageContext.request.contextPath}/log/${log.id}?userId=${log.userId}">View Details</a><a href="${pageContext.request.contextPath}/editLog/${log.id}?userId=${log.userId}">Edit</a><a href="${pageContext.request.contextPath}/deleteLog/${log.id}?userId=${log.userId}">Delete</a></div></c:forEach>
</div>
</body>
</html>

步骤十一：测试与调试

对每个功能进行详细测试，确保所有功能都能正常工作。

步骤十二：部署与发布

编译最终版本的应用程序，并准备好 WAR 文件供 Tomcat 或其他应用服务器部署。


http://www.mrgr.cn/news/66298.html

相关文章：

  • YOLOv10改进策略【卷积层】| CVPR-2023 SCConv 空间和通道重建卷积：即插即用，减少冗余计算并提升特征学习
  • 【WebRTC】WebRTC的简单使用
  • 不同的科技查新机构之间有什么区别？
  • 曼切斯特编码原理以及FPGA实现
  • MySQL 的 select * 会用到事务吗？
  • 【ESP32】ESP-IDF开发 | I2C从机接收i2c_slave_receive函数的BUG导致程序崩溃解决（idf-v5.3.1版本）
  • Flutter 正在切换成 Monorepo 和支持 workspaces
  • 【Classifier Guidance/Classifier-free Guidance】理论推导与代码实现
  • 『VUE』19. scope避免组件之间样式互相覆盖（详细图文注释）
  • MATLAB - ROS 2 分析器
  • 欢迎使用Markdown编辑器
  • GaussDB高智能--库内AI引擎：模型管理数据集管理
  • 省级-社会保障水平数据（2007-2022年）
  • 视频编辑学习笔记
  • “大跳水”的全新奥迪A3，精准狙击年轻人的心
  • 【NOIP普及组】明明的随机数
  • 华为HarmonyOS借助AR引擎帮助应用实现虚拟与现实交互的能力3-获取设备位姿
  • 腾讯混元宣布大语言模型和3D模型正式开源
  • 外包干了6年，技术退步明显.......
  • 小张求职记五
  • C++【string类，模拟实现string类】
  • 数码管驱动电路音响LED驱动芯片VK1640
  • 【通俗理解】自由能与熵的关系是怎样的？ ——从热力学第二定律看自由能最小化与熵最大化的趋势
  • C++ ＜string＞ 标头文件详解
  • 多线程--模拟实现定时器--Java
  • 了解分布式数据库系统中的CAP定理