原文地址:http://www.work100.net/training/monolithic-frameworks-example.html
更多教程:光束云 - 免费课程
综合实例
序号 | 文内章节 | 视频 |
---|---|---|
1 | 概述 | |
2 | 创建项目 | |
3 | 使用AdminLTE模板 | |
4 | 创建登录页 | |
5 | 登录功能实现 | |
6 | 提升用户体验 | |
7 | 实例源码 |
请参照如上章节导航
进行阅读
1.概述
本节将把「Java单体应用」课程做一个阶段性的总结,通过一个综合的案例将所学知识完整实践一下。
我们后续阶段的课程还有:
为了后续课程的连续性,我们的 综合实例
将搭建一个简单的 IoT管理后台
项目 iot-admin
,实现用户的登录功能。
学习的过程要跟着练习并做好笔记!
2.创建项目
2.1.构建项目结构
创建项目文件夹
通过 IntelliJ IDEA
打开前述章节的项目结构,新增一个项目文件夹 iot-admin
创建 POM
添加一个 pom.xml
文件,文件内容如下:
<?xml version="1.0" encoding="UTF-8"?>
<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/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>net.work100.training.stage2</groupId>
<artifactId>iot-admin</artifactId>
<version>1.0.0-SNAPSHOT</version>
<packaging>war</packaging>
<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>5.2.3.RELEASE</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-log4j12</artifactId>
<version>1.7.25</version>
</dependency>
</dependencies>
</project>
然后将 pom.xml
托管到 Maven
。
完善Maven结构
完善下表的目录结构:
目录或文件 | 说明 |
---|---|
pom.xml | POM文件 |
src/main/java | 源码文件夹 |
src/main/resources | 资源文件夹 |
src/main/webapp | 网站文件夹 |
src/main/webapp/WEB-INF | 网站配置文件夹 |
src/main/webapp/WEB-INF/web.xml | 网站配置文件 |
src/test/java | 测试源码文件夹 |
项目结构如下图:

完善 src/main/webapp/WEB-INF/web.xml
文件,内容如下:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
</web-app>
完善项目架构
结合三层架构及MVC架构,在 src/main/java
下构建项目的类包结构,如下表:
类包 | 说明 |
---|---|
net.work100.training.stage2.iot.admin | 项目总的类包 |
net.work100.training.stage2.iot.admin.dao | 数据访问层 |
net.work100.training.stage2.iot.admin.service | 服务层 |
net.work100.training.stage2.iot.admin.web | Web层 |
项目结构如下图:

配置 Spring 和 Log4j
在 src/main/resources
下添加 spring-context.xml
和 log4j.properties
文件:
spring-context.xml
代码如下:
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">
</beans>
log4j.properties
代码如下:
log4j.rootLogger=INFO, console, file
log4j.appender.console=org.apache.log4j.ConsoleAppender
log4j.appender.console.layout=org.apache.log4j.PatternLayout
log4j.appender.console.layout.ConversionPattern=%d %p [%c] - %m%n
log4j.appender.file=org.apache.log4j.DailyRollingFileAppender
log4j.appender.file.File=logs/log.log
log4j.appender.file.layout=org.apache.log4j.PatternLayout
log4j.appender.A3.MaxFileSize=1024KB
log4j.appender.A3.MaxBackupIndex=10
log4j.appender.file.layout.ConversionPattern=%d %p [%c] - %m%n
构建前端框架结构
参照 Bootstrap - 环境搭建 - 实例 中的步骤构建 Bootstrap
的目录结构:
目录 | 说明 |
---|---|
src/main/webapp/assets/ | 静态资源文件目录 |
src/main/webapp/assets/css/ | 自定义样式 |
src/main/webapp/assets/images/ | 自定义图片 |
src/main/webapp/assets/js/ | 自定义JS |
src/main/webapp/assets/plugins/ | 插件 |
src/main/webapp/assets/plugins/bootstrap/ | Bootstrap插件 |
src/main/webapp/assets/plugins/bootstrap/css/ | Bootstrap 样式表文件 |
src/main/webapp/assets/plugins/bootstrap/font-awesome/ | 第三方字体 |
src/main/webapp/assets/plugins/bootstrap/js/ | Bootstrap JS文件 |
src/main/webapp/assets/plugins/bootstrap/jquery-3.4.1.min.js | jQuery |
在 src/main/webapp
下新建 index.jsp
文件,代码如下:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>IoT-Admin</title>
</head>
<body>
Hello IoT-Admin
</body>
</html>
项目结构如下图:

配置 Tomcat
参考 架构模式 - 实践练习 中所述的 Tomcat
配置方式将运行环境配好,并运行验证效果:

3.使用AdminLTE模板
3.1.下载 AdminLTE
AdminLTE
是一个基于 Bootstrap
的后端模板引擎,最新版本基于 Bootstrap 4
构建,高度可定制且易于使用,适合从小型移动设备到大型台式机的多种屏幕分辨率。
官网地址为 https://adminlte.io/ ,AdminLTE为开源软件,可以前往