Layui 个人博客项目

Layui 个人博客项目


前期准备

项目的技术栈:

前端: freemarker + layui + websocket
后端: spring boot + mybatisplus + redis + lombok + es + shiro + tio

创建数据库

对于一个项目来说,数据库的设计是很重要的。此项目数据库设计代码如下【复制到图形工具执行代码即可】:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
/*
SQLyog Ultimate v8.32
MySQL - 5.5.49 : Database - Layui_Blog
*********************************************************************
*/


/*!40101 SET NAMES utf8 */;

/*!40101 SET SQL_MODE=''*/;

/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
CREATE DATABASE /*!32312 IF NOT EXISTS*/`Layui_Blog` /*!40100 DEFAULT CHARACTER SET utf8 */;

USE `Layui_Blog`;

/*Table structure for table `m_category` */

DROP TABLE IF EXISTS `category`;

CREATE TABLE `category` (
`id` bigint(32) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
`name` varchar(512) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '标题',
`content` text COLLATE utf8mb4_unicode_ci COMMENT '内容描述',
`summary` text COLLATE utf8mb4_unicode_ci,
`icon` varchar(128) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '图标',
`post_count` int(11) unsigned DEFAULT '0' COMMENT '该分类的内容数量',
`order_num` int(11) DEFAULT NULL COMMENT '排序编码',
`parent_id` bigint(32) unsigned DEFAULT NULL COMMENT '父级分类的ID',
`meta_keywords` varchar(256) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT 'SEO关键字',
`meta_description` varchar(256) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT 'SEO描述内容',
`created` datetime DEFAULT NULL COMMENT '创建日期',
`modified` datetime DEFAULT NULL,
`status` tinyint(2) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci ROW_FORMAT=DYNAMIC;

/*Data for the table `m_category` */

insert into `category`(`id`,`name`,`content`,`summary`,`icon`,`post_count`,`order_num`,`parent_id`,`meta_keywords`,`meta_description`,`created`,`modified`,`status`) values (1,'Java 学习',NULL,NULL,NULL,8,NULL,NULL,NULL,NULL,'2020-04-28 22:36:48',NULL,0),(2,'数据结构与算法',NULL,NULL,NULL,5,NULL,NULL,NULL,NULL,'2020-04-28 22:36:48',NULL,0),(3,'数据库',NULL,NULL,NULL,3,NULL,NULL,NULL,NULL,'2020-04-28 22:36:48',NULL,0),(4,'计算机网络',NULL,NULL,NULL,2,NULL,NULL,NULL,NULL,'2020-04-28 22:36:48',NULL,0),(5,'教程工具',NULL,NULL,NULL,6,NULL,NULL,NULL,NULL,'2020-04-28 22:36:48',NULL,0),(6,'前端知识',NULL,NULL,NULL,5,NULL,NULL,NULL,NULL,'2020-04-28 22:36:48',NULL,0);

/*Table structure for table `m_comment` */

DROP TABLE IF EXISTS `comment`;

CREATE TABLE `comment` (
`id` bigint(32) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
`content` longtext COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '评论的内容',
`parent_id` bigint(32) DEFAULT NULL COMMENT '回复的评论ID',
`post_id` bigint(32) NOT NULL COMMENT '评论的内容ID',
`user_id` bigint(32) NOT NULL COMMENT '评论的用户ID',
`vote_up` int(11) unsigned NOT NULL DEFAULT '0' COMMENT '“顶”的数量',
`vote_down` int(11) unsigned NOT NULL DEFAULT '0' COMMENT '“踩”的数量',
`level` tinyint(2) unsigned NOT NULL DEFAULT '0' COMMENT '置顶等级',
`status` tinyint(2) DEFAULT NULL COMMENT '评论的状态',
`created` datetime NOT NULL COMMENT '评论的时间',
`modified` datetime DEFAULT NULL COMMENT '评论的更新时间',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci ROW_FORMAT=DYNAMIC;

/*Data for the table `m_comment` */

insert into `comment`(`id`,`content`,`parent_id`,`post_id`,`user_id`,`vote_up`,`vote_down`,`level`,`status`,`created`,`modified`) values (1,' 盗将行\r\n盗将行,何以停,枕风宿雪独自迎;\r\n红昭愿,情人念,隔却山海几时恋;\r\n落花情,心难平,一种相思花飘零;\r\n对黄昏,泪滚滚,骗过天下笑昆仑;\r\n多情岸,怎相盼,饮马长川痴情叹!',1,1,1,1,0,0,1,'2020-07-16 00:00:00',NULL);

/*Table structure for table `m_post` */

DROP TABLE IF EXISTS `post`;

CREATE TABLE `post` (
`id` bigint(32) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
`title` varchar(128) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '标题',
`content` longtext COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '内容',
`edit_mode` varchar(32) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '0' COMMENT '编辑模式:html可视化,markdown ..',
`category_id` bigint(32) DEFAULT NULL,
`user_id` bigint(32) DEFAULT NULL COMMENT '用户ID',
`vote_up` int(11) unsigned NOT NULL DEFAULT '0' COMMENT '支持人数',
`vote_down` int(11) unsigned NOT NULL DEFAULT '0' COMMENT '反对人数',
`view_count` int(11) unsigned NOT NULL DEFAULT '0' COMMENT '访问量',
`comment_count` int(11) NOT NULL DEFAULT '0' COMMENT '评论数量',
`recommend` tinyint(1) DEFAULT NULL COMMENT '是否为精华',
`level` tinyint(2) NOT NULL DEFAULT '0' COMMENT '置顶等级',
`status` tinyint(2) DEFAULT NULL COMMENT '状态',
`created` datetime DEFAULT NULL COMMENT '创建日期',
`modified` datetime DEFAULT NULL COMMENT '最后更新日期',
`avatar` varchar(256) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci ROW_FORMAT=DYNAMIC;

/*Data for the table `m_post` */

insert into `post`(`id`,`title`,`content`,`edit_mode`,`category_id`,`user_id`,`vote_up`,`vote_down`,`view_count`,`comment_count`,`recommend`,`level`,`status`,`created`,`modified`,`avatar`) values (1,'算法入门教程',' 你有多久没好好学习一个开源项目了?\n\n你是否经常为找不到好的开源项目而烦恼?\n\n你是否为不知道怎么入手去看一个开源项目?\n\n你是否想看别人的项目学习笔记?\n\n你是否想跟着别人的项目搭建过程一步一步跟着做项目?\n\n为了让更多Java的开发者能更容易找到值得学习的开源项目,我搭建了这个Java开源学习网站,宗旨梳理Java知识,共享开源项目笔记。来瞧一瞧:\n\nimg[//image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/20200414/473f73a3eb6f471e8154620a9c1d5306.png] \n\n网站截图中可以看出,点击筛选条件组合之后,再点击搜索就会搜索出对应的开源项目。\n\n比如打开renren-fast项目,可以看到具体项目的信息,以及模块解析。\n\nimg[//image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/20200414/f74740692dab4d9c937cd56336ead1b4.png]\n\n这样,学习一个开源项目就不再费劲,每天学习一个开源项目,在不知不觉中提升技术水平!目前网站已经收录了近100个开源项目,让Java不再难懂!\n\n直接扫公众号下方的二维码,回复关键字【网站】即可获得网站的域名地址!\n\nimg[//image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/20200414/f58f7c6d038c4dfb99bd9cf40935392e.png]\n\n关注上方的公众号二维码\n\n回复【网站】即可获取项目域名地址。\n','0',2,1,0,0,15,0,1,1,NULL,'2020-04-28 14:41:41','2020-04-28 14:41:41','/res/images/avatar/5.jpg'),(2,'Spring Boot 入门教程',' 盗将行\r\n盗将行,何以停,枕风宿雪独自迎;\r\n红昭愿,情人念,隔却山海几时恋;\r\n落花情,心难平,一种相思花飘零;\r\n对黄昏,泪滚滚,骗过天下笑昆仑;\r\n多情岸,怎相盼,饮马长川痴情叹!','0',1,1,0,0,22,0,1,1,NULL,'2020-04-28 14:55:16','2020-04-28 14:55:16','/res/images/avatar/5.jpg'),(3,'从 0 开始搭建 Hexo 博客',' 你有多久没好好学习一个开源项目了?\r\n\r\n你是否经常为找不到好的开源项目而烦恼?\r\n\r\n你是否为不知道怎么入手去看一个开源项目?\r\n\r\n你是否想看别人的项目学习笔记?\r\n\r\n你是否想跟着别人的项目搭建过程一步一步跟着做项目?\r\n\r\n为了让更多Java的开发者能更容易找到值得学习的开源项目,我搭建了这个Java开源学习网站,宗旨梳理Java知识,共享开源项目笔记。来瞧一瞧:\r\n\r\nimg[//image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/20200414/473f73a3eb6f471e8154620a9c1d5306.png] \r\n\r\n网站截图中可以看出,点击筛选条件组合之后,再点击搜索就会搜索出对应的开源项目。\r\n\r\n比如打开renren-fast项目,可以看到具体项目的信息,以及模块解析。\r\n\r\nimg[//image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/20200414/f74740692dab4d9c937cd56336ead1b4.png]\r\n\r\n这样,学习一个开源项目就不再费劲,每天学习一个开源项目,在不知不觉中提升技术水平!目前网站已经收录了近100个开源项目,让Java不再难懂!\r\n\r\n直接扫公众号下方的二维码,回复关键字【网站】即可获得网站的域名地址!\r\n\r\nimg[//image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/20200414/f58f7c6d038c4dfb99bd9cf40935392e.png]\r\n\r\n关注上方的公众号二维码\r\n\r\n回复【网站】即可获取项目域名地址。\r\n','0',5,1,0,0,14,0,0,0,NULL,'2020-04-28 14:55:48','2020-04-28 14:55:48','/res/images/avatar/5.jpg'),(4,'Redis 入门教程',' 你有多久没好好学习一个开源项目了?\r\n\r\n你是否经常为找不到好的开源项目而烦恼?\r\n\r\n你是否为不知道怎么入手去看一个开源项目?\r\n\r\n你是否想看别人的项目学习笔记?\r\n\r\n你是否想跟着别人的项目搭建过程一步一步跟着做项目?\r\n\r\n为了让更多Java的开发者能更容易找到值得学习的开源项目,我搭建了这个Java开源学习网站,宗旨梳理Java知识,共享开源项目笔记。来瞧一瞧:\r\n\r\nimg[//image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/20200414/473f73a3eb6f471e8154620a9c1d5306.png] \r\n\r\n网站截图中可以看出,点击筛选条件组合之后,再点击搜索就会搜索出对应的开源项目。\r\n\r\n比如打开renren-fast项目,可以看到具体项目的信息,以及模块解析。\r\n\r\nimg[//image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/20200414/f74740692dab4d9c937cd56336ead1b4.png]\r\n\r\n这样,学习一个开源项目就不再费劲,每天学习一个开源项目,在不知不觉中提升技术水平!目前网站已经收录了近100个开源项目,让Java不再难懂!\r\n\r\n直接扫公众号下方的二维码,回复关键字【网站】即可获得网站的域名地址!\r\n\r\nimg[//image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/20200414/f58f7c6d038c4dfb99bd9cf40935392e.png]\r\n\r\n关注上方的公众号二维码\r\n\r\n回复【网站】即可获取项目域名地址。\r\n','0',3,1,0,0,0,0,NULL,0,NULL,'2020-07-17 00:00:00','2020-07-17 00:00:00','/res/images/avatar/5.jpg'),(5,'计算机网络入门教程','计算机网络入门……','0',4,1,0,0,0,0,NULL,0,NULL,'2020-07-18 00:00:00','2020-07-18 00:00:00','/res/images/avatar/5.jpg'),(6,'HTML 入门教程','HTML 入门……','0',6,1,0,0,0,0,NULL,0,NULL,'2020-07-19 00:00:00','2020-07-19 00:00:00','/res/images/avatar/5.jpg');

/*Table structure for table `m_user` */

DROP TABLE IF EXISTS `user`;

CREATE TABLE `user` (
`id` bigint(32) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
`username` varchar(128) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '昵称',
`password` varchar(128) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '密码',
`email` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '邮件',
`mobile` varchar(32) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '手机电话',
`point` int(11) unsigned NOT NULL DEFAULT '0' COMMENT '积分',
`sign` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '个性签名',
`gender` varchar(16) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '性别',
`wechat` varchar(32) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '微信号',
`vip_level` int(32) DEFAULT NULL COMMENT 'vip等级',
`birthday` datetime DEFAULT NULL COMMENT '生日',
`avatar` varchar(256) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '头像',
`post_count` int(11) unsigned NOT NULL DEFAULT '0' COMMENT '内容数量',
`comment_count` int(11) unsigned NOT NULL DEFAULT '0' COMMENT '评论数量',
`status` tinyint(2) NOT NULL DEFAULT '0' COMMENT '状态',
`lasted` datetime DEFAULT NULL COMMENT '最后的登陆时间',
`created` datetime NOT NULL COMMENT '创建日期',
`modified` datetime DEFAULT NULL COMMENT '最后修改时间',
PRIMARY KEY (`id`),
UNIQUE KEY `username` (`username`) USING BTREE,
UNIQUE KEY `email` (`email`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci ROW_FORMAT=DYNAMIC;

/*Data for the table `m_user` */

insert into `user`(`id`,`username`,`password`,`email`,`mobile`,`point`,`sign`,`gender`,`wechat`,`vip_level`,`birthday`,`avatar`,`post_count`,`comment_count`,`status`,`lasted`,`created`,`modified`) values (1,'guoshizhan','e10adc3949ba59abbe56e057f20f883e','12345678@qq.com',NULL,0,'关注公众号:MarkerHub,一起学Java!!','0',NULL,0,NULL,'/res/images/avatar/5.jpg',0,0,0,'2020-07-20 17:08:30','2020-04-28 14:37:24',NULL),(2,'test007','96e79218965eb72c92a549dd5a330112','1111@qq.com',NULL,0,NULL,'0',NULL,0,NULL,'/res/images/avatar/default.png',0,0,0,NULL,'2020-04-28 14:45:07',NULL),(3,'test004','96e79218965eb72c92a549dd5a330112','144d11@qq.com',NULL,0,NULL,'0',NULL,0,NULL,'/res/images/avatar/default.png',0,0,0,NULL,'2020-04-28 14:48:26',NULL),(4,'test005','96e79218965eb72c92a549dd5a330112','144d15@qq.com',NULL,0,NULL,'0',NULL,0,NULL,'/res/images/avatar/default.png',0,0,0,NULL,'2020-04-28 14:48:26',NULL),(5,'test00756','96e79218965eb72c92a549dd5a330112','45454541@qq.com',NULL,0,NULL,'0',NULL,0,NULL,'/res/images/avatar/default.png',0,0,0,NULL,'2020-04-28 14:53:49',NULL),(6,'guoshizhanddddd','e10adc3949ba59abbe56e057f20f883e','1223233@qq.com',NULL,0,NULL,'0',NULL,0,NULL,'/res/images/avatar/default.png',0,0,0,NULL,'2020-07-18 14:48:04',NULL),(7,'hexueqin','e10adc3949ba59abbe56e057f20f883e','123456@qq.com',NULL,0,'物品,一起学 Java!!','1',NULL,0,NULL,'/res/images/avatar/default.png',0,0,0,'2020-07-19 12:43:59','2020-07-18 22:57:55',NULL);

/*Table structure for table `m_user_action` */

DROP TABLE IF EXISTS `user_action`;

CREATE TABLE `user_action` (
`id` varchar(32) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '',
`user_id` varchar(32) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '用户ID',
`action` varchar(32) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '动作类型',
`point` int(11) DEFAULT NULL COMMENT '得分',
`post_id` varchar(32) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '关联的帖子ID',
`comment_id` varchar(32) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '关联的评论ID',
`created` datetime DEFAULT NULL,
`modified` datetime DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci ROW_FORMAT=DYNAMIC;

/*Data for the table `m_user_action` */

/*Table structure for table `m_user_collection` */

DROP TABLE IF EXISTS `user_collection`;

CREATE TABLE `user_collection` (
`id` bigint(20) NOT NULL AUTO_INCREMENT,
`user_id` bigint(20) NOT NULL,
`post_id` bigint(20) NOT NULL,
`post_user_id` bigint(20) NOT NULL,
`created` datetime NOT NULL,
`modified` datetime NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci ROW_FORMAT=DYNAMIC;

/*Data for the table `m_user_collection` */

insert into `user_collection`(`id`,`user_id`,`post_id`,`post_user_id`,`created`,`modified`) values (1,1,1,1,'2020-07-14 00:00:00','2020-07-14 00:00:00'),(2,1,2,1,'2020-07-15 00:00:00','2020-07-15 00:00:00'),(3,1,3,1,'2020-07-15 00:00:00','2020-07-15 00:00:00');

/*Table structure for table `m_user_message` */

DROP TABLE IF EXISTS `user_message`;

CREATE TABLE `user_message` (
`id` bigint(20) NOT NULL AUTO_INCREMENT,
`from_user_id` bigint(20) NOT NULL COMMENT '发送消息的用户ID',
`to_user_id` bigint(20) NOT NULL COMMENT '接收消息的用户ID',
`post_id` bigint(20) DEFAULT NULL COMMENT '消息可能关联的帖子',
`comment_id` bigint(20) DEFAULT NULL COMMENT '消息可能关联的评论',
`content` text COLLATE utf8mb4_unicode_ci,
`type` tinyint(2) DEFAULT NULL COMMENT '消息类型',
`created` datetime NOT NULL,
`modified` datetime DEFAULT NULL,
`status` int(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci ROW_FORMAT=DYNAMIC;

/*Data for the table `m_user_message` */

insert into `user_message`(`id`,`from_user_id`,`to_user_id`,`post_id`,`comment_id`,`content`,`type`,`created`,`modified`,`status`) values (1,1,2,1,1,'天上掉下个猪八戒',1,'2020-07-15 00:00:00','2020-07-15 00:00:00',1);

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

下载 fly 社区模板

我们首先需要下载 fly 社区的模板 。具体如下图所示:

把下载好的 fly 模板解压之后如下图:

新建 Spring Boot 工程

如何创建 Spring Boot 工程这里就不多说了。我们主要看 pom.xml 里面的的依赖。代码如下:

pom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<?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>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.2.RELEASE</version>
<relativePath/>
</parent>
<groupId>club.guoshizhan</groupId>
<artifactId>Layui-Blog</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>jar</packaging>

<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-redis</artifactId><!--netty-->
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>

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

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
<!--mp-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.2.0</version>
</dependency>
<!--代码生成器-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-generator</artifactId>
<version>3.2.0</version>
</dependency>

<!-- sql分析器 -->
<dependency>
<groupId>p6spy</groupId>
<artifactId>p6spy</artifactId>
<version>3.8.6</version>
</dependency>
<!-- commons-lang3 -->
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.9</version>
</dependency>

<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>4.1.17</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>

接下来的步骤:通过阅读下列文字完成相关的操作 。步骤如下:

1
2
3
4
5
6
7
8
+++ 接下来的步骤

+ 1、在 templates 目录下新建首页模板页面文件 index.ftl ,因为使用了 freemarker 模板 ,所以后缀为 ftl 。
+ 2、然后把下载的 fly 社区模板 html 文件夹里的 index.html 的内容复制到我们新建的 index.ftl 里面。
+ 3、最后把 res 整个文件夹复制到项目的 static 目录下。
+ 4、在 guoshizhan 包下新建 controller 包,前端控制器都写在这个包下。

+++ 接下来的步骤

接下来在 controller 包 下新建 BaseController 类 【作为一个基类】。代码如下:

1
2
3
4
5
6
7
8
9
package club.guoshizhan.controller;

/**
* @Author: guoshizhan
* @Create: 2020/7/27 10:11
* @Description: 基类,存放公共部分
*/
public class BaseController {
}

然后在 controller 包 下新建 IndexController 类 【首页控制器】。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
package club.guoshizhan.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
* @Author: guoshizhan
* @Create: 2020/7/27 10:12
* @Description: 首页控制器
*/
@Controller
public class IndexController extends BaseController {

@RequestMapping({"", "/", "/index"})
public String index() {
return "index";
}

}

编写配置文件 application.yml配置数据库连接 。代码如下:

application.yml
1
2
3
4
5
6
7
# MySQL 数据库连接
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/layui_blog?serverTimezone=GMT%2B8
username: root
password: root

注意啦!!!

1、我们使用的 Spring boot 版本是 2.1.2 ,用这个版本主要是稳定。
2、一定要先在配置文件 application.yml 里面 配置好数据库连接 之后再启动项目,否则会报错。

启动项目

启动我们的 LayuiBlogApplication 启动类,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
package club.guoshizhan;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
* @Author: guoshizhan
* @Create: 2020/7/26 23:44
* @Description: Layui-Blog 的启动类
*/
@SpringBootApplication
public class LayuiBlogApplication {
public static void main(String[] args) {
SpringApplication.run(LayuiBlogApplication.class, args);
// 加入这行代码目的:让我们无需在浏览器输入地址,而是在控制台点击即可进入到项目
System.out.println("\n项目的访问地址: http://localhost:8080\n");
}
}

启动之后的效果如下图:

项目的最终目录结构,如下图:

到此为止,前期准备已经结束!!!这里注意一下下列问题:

如果启动项目后,访问的页面无法加载样式,这个问题可能会出现。我的做法是:把 res 文件夹改为其他名字。例如:sdfajsdlfkj。然后启动一次项目,这个肯定是没有样式的,然后去访问一次。访问完之后再把 sdfajsdlfkj 名字改回原来的 res ,再次重启项目,就有样式了。这个做法在我的机子上是成功的。

完善首页

模块划分

模块划分 就是把公共的部分给抽取出来成为一个模块 ,以后的页面需要这个模块时,把它引入即可。接下来就开始进行操作吧!!!


第一步:templates 目录 下新建 include 目录 ,然后在 include 目录 下新建 header.ftl 文件,把如下代码复制到里面【这部分代码就剪切自 index.ftl 页面的头部】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<div class="fly-header layui-bg-black">
<div class="layui-container">
<a class="fly-logo" href="/">
<img src="/res/images/logo.png" alt="layui">
</a>
<ul class="layui-nav" lay-filter="" style="margin-left: 180px;">
<li class="layui-nav-item"><a href="">博客首页</a></li>
<li class="layui-nav-item layui-this"><a href="">归档</a></li>
<li class="layui-nav-item"><a href="">分类</a></li>
<li class="layui-nav-item"><a href="">标签</a></li>
<li class="layui-nav-item"><a href="">友情链接</a></li>
<li class="layui-nav-item">
<a href="javascript:;">实验室</a>
<dl class="layui-nav-child"> <!-- 二级菜单 -->
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
<dd><a href="">相册</a></dd>
<dd><a href="">影音</a></dd>
<dd><a href="">关于</a></dd>
<dd><a href="">私密</a></dd>
<dd><a href="">随笔</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
<li class="layui-nav-item layui-this"><a href="">发表博客</a></li>
<li class="layui-nav-item layui-this">
<span class="fly-search"><i class="layui-icon"></i></span>
</li>
</ul>
<#--<ul class="layui-nav fly-nav layui-hide-xs">
<li class="layui-nav-item layui-this">
<a href="/pages/catalog">
<i class="iconfont icon-jiaoliu"></i>
站点导航
</a>
</li>
<li class="layui-nav-item">
<a href="/pages/catalog">
<i class="iconfont icon-iconmingxinganli"></i>
文章分类
</a>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child" style="z-index: 999999px;"> <!-- 二级菜单 &ndash;&gt;
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="http://www.layui.com/" target="_blank">Layui 框架</a></dd>
<dd><a href="/pages/custom">时间轴</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item layui-this">
<a href="/pages/add">
发表博客
</a>
</li>
<li class="layui-nav-item layui-this">
<span class="fly-search"><i class="layui-icon"></i></span>
</li>
</ul>-->

<ul class="layui-nav fly-nav-user">
<!-- 未登入的状态 -->
<#--<li class="layui-nav-item">
<a class="iconfont icon-touxiang layui-hide-xs" href="/pages/login"></a>
</li>-->
<li class="layui-nav-item"><a href="/pages/login">登入</a></li>
<li class="layui-nav-item" style="color: rgba(255,255,255,.7);">
|
</li>
<li class="layui-nav-item"><a href="/pages/reg">注册</a></li>
<#--<li class="layui-nav-item layui-hide-xs">
<a href="/app/qq/" onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})" title="QQ登入" class="iconfont icon-qq"></a>
</li>
<li class="layui-nav-item layui-hide-xs">
<a href="/app/weibo/" onclick="layer.msg('正在通过微博登入', {icon:16, shade: 0.1, time:0})" title="微博登入" class="iconfont icon-weibo"></a>
</li>-->

<!-- 登入后的状态 -->
<!--
<li class="layui-nav-item">
<a class="fly-nav-avatar" href="javascript:;">
<cite class="layui-hide-xs">贤心</cite>
<i class="iconfont icon-renzheng layui-hide-xs" title="认证信息:layui 作者"></i>
<i class="layui-badge fly-badge-vip layui-hide-xs">VIP3</i>
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg">
</a>
<dl class="layui-nav-child">
<dd><a href="user/set.html"><i class="layui-icon">&#xe620;</i>基本设置</a></dd>
<dd><a href="user/message.html"><i class="iconfont icon-tongzhi" style="top: 4px;"></i>我的消息</a></dd>
<dd><a href="user/home.html"><i class="layui-icon" style="margin-left: 2px; font-size: 22px;">&#xe68e;</i>我的主页</a></dd>
<hr style="margin: 5px 0;">
<dd><a href="/user/logout/" style="text-align: center;">退出</a></dd>
</dl>
</li>
-->
</ul>
</div>
</div>
<div style="width: 100%;height: 15px;"></div>

第二步:include 目录 下新建 footer.ftl 文件,把如下代码复制到里面【这部分代码就剪切自 index.ftl 页面的底部】:

1
2
3
4
5
6
7
8
9
10
11
<div class="fly-footer">
<p>
<a href="http://fly.layui.com/" target="_blank">Fly 社区</a> 2020 &copy;
<a href="http://www.layui.com/" target="_blank">layui.com 出品</a>
</p>
<p>
<a href="http://fly.layui.com/jie/3147/" target="_blank">付费计划</a>
<a href="http://www.layui.com/template/fly/" target="_blank">获取 Fly 社区模版</a>
<a href="http://fly.layui.com/jie/2461/" target="_blank">微信公众号</a>
</p>
</div>

第三步:include 目录 下新建 left.ftl 文件,把如下代码复制到里面【这部分代码就剪切自 index.ftl 页面的中间部分的右侧(md4 那一块),但是我喜欢把更窄的放在左边,所以命名为 left.ftl】:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<div class="layui-col-md3">
<div class="fly-panel" style="padding: 20px 5px; text-align: center;">
<div style="width: 100%;border-bottom: 1px solid #393D49;height: 100px;">
<div style="width: 30%;height: 100px;float: left;">
<a href="/"><img src="../../res/images/avatar/5.jpg" style="width: 80px; height: 80px;border-radius: 40px;" alt="layui"></a>
</div>
<div style="width: 70%;height: 100px;float: left;">
<h2>何年の再遇见</h2>
<p style="position: relative; color: #666;">愿你走出半生,归来仍是少年</p>
<p style="position: relative; color: #666;">
<i class="layui-icon"></i> 井冈山大学
</p>
</div>
</div>
<div style="width: 100%;border-bottom: 1px solid #393D49;height: 70px;">
<table style="width: 100%;height: 70px;">
<tr><td>文章</td><td>分类</td><td>标签</td></tr>
<tr><td>32</td><td>9</td><td>43</td></tr>
</table>
</div>
<p id="hitokoto" style="color: #666;text-align: center;padding-top: 20px;">
一言句子获取中……
</p>
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto"></script>
</div>
<style>
.fly-panel .fly-panel-main li {
padding: 3px 0;
list-style: none;
margin-bottom: 3px;
}
.fly-panel .fly-panel-main li:hover {
background: #fff9ec;
/*cursor: pointer;*/
}
.fly-panel .fly-panel-main li span {
margin-right: 8px;
padding: 0 10px;
float: right;
border-radius: 9999px;
color: white;
background: #5FB878;
}
.fly-panel .fly-panel-main li a {
text-decoration: none;
color: #000;
}
</style>
<div class="fly-panel">
<h3 class="fly-panel-title" style="color: #7a7a7a;">博客文章分类</h3>
<ul class="fly-panel-main fly-list-static">
<#--<#list categories as item>
<li style="list-style: none">
<a href="/post/category/${item.id}">${item.name}</a>
<span>${item.postCount}</span>
</li>
</#list>-->
<li style="list-style: none">
<a href="http://fly.layui.com/jie/4281/" target="_blank">Java 学习</a>
<span>8</span>
</li>
<li>
<a href="http://fly.layui.com/jie/5366/" target="_blank">
数据结构与算法
</a>
<span>
5
</span>
</li>
<li>
<a href="http://fly.layui.com/jie/4281/" target="_blank">
数据库
</a>
<span>
3
</span>
</li>
<li>
<a href="http://fly.layui.com/jie/5366/" target="_blank">
计算机网络
</a>
<span>
2
</span>
</li>
</ul>
</div>
<div class="fly-panel fly-signin">
<div class="fly-panel-title">
签到
<span class="fly-signin-days">已连续签到<cite>16</cite></span>
</div>
<div class="fly-panel-main fly-signin-main">
<button class="layui-btn layui-btn-danger" id="LAY_signin">今日签到</button>
<span>可获得<cite>5</cite>飞吻</span>

<!-- 已签到状态 -->
<!--
<button class="layui-btn layui-btn-disabled">今日已签到</button>
<span>获得了<cite>20</cite>飞吻</span>
-->
</div>
</div>

<div class="fly-panel fly-rank fly-rank-reply" id="LAY_replyRank">
<h3 class="fly-panel-title">回贴周榜</h3>
<dl>
<!--<i class="layui-icon fly-loading">&#xe63d;</i>-->
<dd>
<a href="user/home.html">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"><cite>贤心</cite><i>106次回答</i>
</a>
</dd>
<dd>
<a href="user/home.html">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"><cite>贤心</cite><i>106次回答</i>
</a>
</dd>
</dl>
</div>

<dl class="fly-panel fly-list-one">
<dt class="fly-panel-title">本周热议</dt>
<dd>
<a href="jie/detail.html">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>
<dd>
<a href="jie/detail.html">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>
<dd>
<a href="jie/detail.html">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>
<dd>
<a href="jie/detail.html">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>
<dd>
<a href="jie/detail.html">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>

<!-- 无数据时 -->
<!--
<div class="fly-none">没有相关数据</div>
-->
</dl>

<div class="fly-panel">
<div class="fly-panel-title">
这里可作为广告区域
</div>
<div class="fly-panel-main">
<a href="http://layim.layui.com/?from=fly" target="_blank" class="fly-zanzhu" time-limit="2017.09.25-2099.01.01" style="background-color: #5FB878;">LayIM 3.0 - layui 旗舰之作</a>
</div>
<div class="fly-panel-main">
<a href="" target="_blank" class="fly-zanzhu" style="background-color: #393D49;">虚席以待</a>
</div>
</div>

<div class="fly-panel fly-link">
<h3 class="fly-panel-title">友情链接</h3>
<dl class="fly-panel-main">
<dd><a href="http://www.layui.com/" target="_blank">layui</a><dd>
<dd><a href="http://www.layui.com/laydate/" target="_blank">layDate</a><dd>
<dd><a href="mailto:xianxin@layui-inc.com?subject=%E7%94%B3%E8%AF%B7Fly%E7%A4%BE%E5%8C%BA%E5%8F%8B%E9%93%BE" class="fly-link">申请友链</a><dd>
</dl>
</div>

</div>

开启热部署: settings –> Build –> compiler –> build project automatically

第四步:include 目录 下新建 layout.ftl 文件,用于定义宏 ,即一个通用模块,在任何页面都适用。如何定义以及其他介绍都写在代码里面了。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<#macro layout title>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>${title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="keywords" content="何年の再遇见">
<meta name="description" content="何年の再遇见">
<link rel="stylesheet" href="/res/layui/css/layui.css">
<link rel="stylesheet" href="/res/css/global.css">
<script src="/res/layui/layui.all.js"></script>
</head>
<style>
*{font-family: SimSun;}
</style>
<body>
<#--<#include "common.ftl" />-->
<#include "header.ftl" />
<#nested />
<#include "footer.ftl" />

<script src="/res/layui/layui.js"></script>
<script>
// layui.cache.page = '';
layui.cache.user = {
username: '游客'
,uid: -1
,avatar: '../res/images/avatar/00.jpg'
,experience: 83
,sex: '男'
};
layui.config({
version: "3.0.0"
,base: '../res/mods/' // 这里实际使用时,建议改成绝对路径
}).extend({
fly: 'index'
}).use('fly');
</script>

<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_30088308'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "w.cnzz.com/c.php%3Fid%3D30088308' type='text/javascript'%3E%3C/script%3E"));</script>

</body>
</html>
</#macro>

第五步: 清空 index.ftl 的内容,然后把以下代码复制进去 。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
<#include "include/layout.ftl" />

<@layout "何年の再遇见-博客首页">

<#include "include/header.ftl">
<div class="layui-container">
<div class="layui-row layui-col-space10">
<#include 'include/left.ftl'>
<div class="layui-col-md9">
<div class="fly-panel">
<div class="fly-panel-title fly-filter">
<a>置顶</a>
<a href="#signin" class="layui-hide-sm layui-show-xs-block fly-right" id="LAY_goSignin" style="color: #FF5722;">去签到</a>
</div>
<ul class="fly-list">
<li>
<a href="user/home.html" class="fly-avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<h2>
<a class="layui-badge">动态</a>
<a href="jie/detail.html">基于 layui 的极简社区页面模版</a>
</h2>
<div class="fly-list-info">
<a href="user/home.html" link>
<cite>贤心</cite>
<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
</a>
<span>刚刚</span>

<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> 66
</span>
</div>
<div class="fly-list-badge">
<!--
<span class="layui-badge layui-bg-black">置顶</span>
<span class="layui-badge layui-bg-red">精帖</span>
-->
</div>
</li>
<li>
<a href="user/home.html" class="fly-avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<h2>
<a class="layui-badge">公告</a>
<a href="jie/detail.html">基于 layui 的极简社区页面模版</a>
</h2>
<div class="fly-list-info">
<a href="user/home.html" link>
<cite>贤心</cite>
<!--
<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
-->
</a>
<span>2017-11-30</span>

<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
<!--<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>-->
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> 66
</span>
</div>
<div class="fly-list-badge">
<!--
<span class="layui-badge layui-bg-black">置顶</span>
<span class="layui-badge layui-bg-red">精帖</span>
-->
</div>
</li>
<li>
<a href="user/home.html" class="fly-avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<h2>
<a class="layui-badge">公告</a>
<a href="jie/detail.html">基于 layui 的极简社区页面模版</a>
</h2>
<div class="fly-list-info">
<a href="user/home.html" link>
<cite>贤心</cite>
<!--
<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
-->
</a>
<span>刚刚</span>

<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
<!--<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>-->
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> 66
</span>
</div>
<div class="fly-list-badge">
<!--
<span class="layui-badge layui-bg-black">置顶</span>
<span class="layui-badge layui-bg-red">精帖</span>
-->
</div>
</li>
<li>
<a href="user/home.html" class="fly-avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<h2>
<a class="layui-badge">公告</a>
<a href="jie/detail.html">基于 layui 的极简社区页面模版</a>
</h2>
<div class="fly-list-info">
<a href="user/home.html" link>
<cite>贤心</cite>
<!--
<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
-->
</a>
<span>刚刚</span>

<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
<!--<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>-->
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> 66
</span>
</div>
<div class="fly-list-badge">
<!--
<span class="layui-badge layui-bg-black">置顶</span>
<span class="layui-badge layui-bg-red">精帖</span>
-->
</div>
</li>
</ul>
</div>

<div class="fly-panel" style="margin-bottom: 0;">

<div class="fly-panel-title fly-filter">
<a href="" class="layui-this">综合</a>
<span class="fly-mid"></span>
<a href="">未结</a>
<span class="fly-mid"></span>
<a href="">已结</a>
<span class="fly-mid"></span>
<a href="">精华</a>
<span class="fly-filter-right layui-hide-xs">
<a href="" class="layui-this">按最新</a>
<span class="fly-mid"></span>
<a href="">按热议</a>
</span>
</div>

<ul class="fly-list">
<li>
<a href="user/home.html" class="fly-avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<h2>
<a class="layui-badge">分享</a>
<a href="jie/detail.html">基于 layui 的极简社区页面模版</a>
</h2>
<div class="fly-list-info">
<a href="user/home.html" link>
<cite>贤心</cite>
<!--
<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
-->
</a>
<span>刚刚</span>

<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
<!--<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>-->
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> 66
</span>
</div>
<div class="fly-list-badge">
<!--<span class="layui-badge layui-bg-red">精帖</span>-->
</div>
</li>
<li>
<a href="user/home.html" class="fly-avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<h2>
<a class="layui-badge">动态</a>
<a href="jie/detail.html">基于 layui 的极简社区页面模版</a>
</h2>
<div class="fly-list-info">
<a href="user/home.html" link>
<cite>贤心</cite>
<!--<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>-->
<i class="layui-badge fly-badge-vip">VIP3</i>
</a>
<span>刚刚</span>

<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> 66
</span>
</div>
<div class="fly-list-badge">
<span class="layui-badge layui-bg-red">精帖</span>
</div>
</li>
<li>
<a href="user/home.html" class="fly-avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<h2>
<a class="layui-badge">动态</a>
<a href="jie/detail.html">基于 layui 的极简社区页面模版</a>
</h2>
<div class="fly-list-info">
<a href="user/home.html" link>
<cite>贤心</cite>
<!--
<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
-->
</a>
<span>刚刚</span>

<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
<!--<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>-->
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> 66
</span>
</div>
<div class="fly-list-badge">
<!--<span class="layui-badge layui-bg-red">精帖</span>-->
</div>
</li>
<li>
<a href="user/home.html" class="fly-avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<h2>
<a class="layui-badge">动态</a>
<a href="jie/detail.html">基于 layui 的极简社区页面模版</a>
</h2>
<div class="fly-list-info">
<a href="user/home.html" link>
<cite>贤心</cite>
<!--
<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
-->
</a>
<span>刚刚</span>

<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
<!--<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>-->
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> 66
</span>
</div>
<div class="fly-list-badge">
<!--<span class="layui-badge layui-bg-red">精帖</span>-->
</div>
</li>
<li>
<a href="user/home.html" class="fly-avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<h2>
<a class="layui-badge">动态</a>
<a href="jie/detail.html">基于 layui 的极简社区页面模版</a>
</h2>
<div class="fly-list-info">
<a href="user/home.html" link>
<cite>贤心</cite>
<!--
<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
-->
</a>
<span>刚刚</span>

<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
<!--<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>-->
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> 66
</span>
</div>
<div class="fly-list-badge">
<!--<span class="layui-badge layui-bg-red">精帖</span>-->
</div>
</li>
<li>
<a href="user/home.html" class="fly-avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<h2>
<a class="layui-badge">动态</a>
<a href="jie/detail.html">基于 layui 的极简社区页面模版</a>
</h2>
<div class="fly-list-info">
<a href="user/home.html" link>
<cite>贤心</cite>
<!--
<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
-->
</a>
<span>刚刚</span>

<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
<!--<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>-->
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> 66
</span>
</div>
<div class="fly-list-badge">
<!--<span class="layui-badge layui-bg-red">精帖</span>-->
</div>
</li>
<li>
<a href="user/home.html" class="fly-avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<h2>
<a class="layui-badge">动态</a>
<a href="jie/detail.html">基于 layui 的极简社区页面模版</a>
</h2>
<div class="fly-list-info">
<a href="user/home.html" link>
<cite>贤心</cite>
<!--
<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
-->
</a>
<span>刚刚</span>

<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
<!--<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>-->
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> 66
</span>
</div>
<div class="fly-list-badge">
<!--<span class="layui-badge layui-bg-red">精帖</span>-->
</div>
</li>
<li>
<a href="user/home.html" class="fly-avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<h2>
<a class="layui-badge">动态</a>
<a href="jie/detail.html">基于 layui 的极简社区页面模版</a>
</h2>
<div class="fly-list-info">
<a href="user/home.html" link>
<cite>贤心</cite>
<!--
<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
-->
</a>
<span>刚刚</span>

<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
<!--<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>-->
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> 66
</span>
</div>
<div class="fly-list-badge">
<!--<span class="layui-badge layui-bg-red">精帖</span>-->
</div>
</li>
<li>
<a href="user/home.html" class="fly-avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<h2>
<a class="layui-badge">动态</a>
<a href="jie/detail.html">基于 layui 的极简社区页面模版</a>
</h2>
<div class="fly-list-info">
<a href="user/home.html" link>
<cite>贤心</cite>
<!--
<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
-->
</a>
<span>刚刚</span>

<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
<!--<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>-->
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> 66
</span>
</div>
<div class="fly-list-badge">
<!--<span class="layui-badge layui-bg-red">精帖</span>-->
</div>
</li>
<li>
<a href="user/home.html" class="fly-avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<h2>
<a class="layui-badge">动态</a>
<a href="jie/detail.html">基于 layui 的极简社区页面模版</a>
</h2>
<div class="fly-list-info">
<a href="user/home.html" link>
<cite>贤心</cite>
<!--
<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
-->
</a>
<span>刚刚</span>

<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
<!--<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>-->
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> 66
</span>
</div>
<div class="fly-list-badge">
<!--<span class="layui-badge layui-bg-red">精帖</span>-->
</div>
</li>
<li>
<a href="user/home.html" class="fly-avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<h2>
<a class="layui-badge">动态</a>
<a href="jie/detail.html">基于 layui 的极简社区页面模版</a>
</h2>
<div class="fly-list-info">
<a href="user/home.html" link>
<cite>贤心</cite>
<!--
<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
-->
</a>
<span>刚刚</span>

<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
<!--<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>-->
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> 66
</span>
</div>
<div class="fly-list-badge">
<!--<span class="layui-badge layui-bg-red">精帖</span>-->
</div>
</li>
<li>
<a href="user/home.html" class="fly-avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<h2>
<a class="layui-badge">动态</a>
<a href="jie/detail.html">基于 layui 的极简社区页面模版</a>
</h2>
<div class="fly-list-info">
<a href="user/home.html" link>
<cite>贤心</cite>
<!--
<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
-->
</a>
<span>刚刚</span>

<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
<!--<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>-->
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> 66
</span>
</div>
<div class="fly-list-badge">
<!--<span class="layui-badge layui-bg-red">精帖</span>-->
</div>
</li>
</ul>
<div style="text-align: center">
<div class="laypage-main">
<a href="jie/index.html" class="laypage-next">更多求解</a>
</div>
</div>

</div>
</div>
</div>
</div>

</@layout>

接着启动项目,看到的结果如下图:

到此为止,模块划分就结束了,以后的页面划分模块和这里的步骤是一样的。所以以后就不再说了。

博客分类数据填充

第一步:templates 目录 下新建 post 目录 ,然后在 post 目录 下新建 category.ftl 文件和 detail.ftl 文件。

然后把下载的模板 html/jie/index.html 的内容复制到 category.ftl 文件,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基于 layui 的极简社区页面模版</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="keywords" content="fly,layui,前端社区">
<meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区,致力于为web开发提供强劲动力">
<link rel="stylesheet" href="../../res/layui/css/layui.css">
<link rel="stylesheet" href="../../res/css/global.css">
</head>
<body>

<div class="fly-header layui-bg-black">
<div class="layui-container">
<a class="fly-logo" href="/">
<img src="../../res/images/logo.png" alt="layui">
</a>
<ul class="layui-nav fly-nav layui-hide-xs">
<li class="layui-nav-item layui-this">
<a href="/"><i class="iconfont icon-jiaoliu"></i>交流</a>
</li>
<li class="layui-nav-item">
<a href="../case/case.html"><i class="iconfont icon-iconmingxinganli"></i>案例</a>
</li>
<li class="layui-nav-item">
<a href="http://www.layui.com/" target="_blank"><i class="iconfont icon-ui"></i>框架</a>
</li>
</ul>

<ul class="layui-nav fly-nav-user">

<!-- 未登入的状态 -->
<li class="layui-nav-item">
<a class="iconfont icon-touxiang layui-hide-xs" href="user/login.html"></a>
</li>
<li class="layui-nav-item">
<a href="user/login.html">登入</a>
</li>
<li class="layui-nav-item">
<a href="user/reg.html">注册</a>
</li>
<li class="layui-nav-item layui-hide-xs">
<a href="/app/qq/" onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})" title="QQ登入" class="iconfont icon-qq"></a>
</li>
<li class="layui-nav-item layui-hide-xs">
<a href="/app/weibo/" onclick="layer.msg('正在通过微博登入', {icon:16, shade: 0.1, time:0})" title="微博登入" class="iconfont icon-weibo"></a>
</li>

<!-- 登入后的状态 -->
<!--
<li class="layui-nav-item">
<a class="fly-nav-avatar" href="javascript:;">
<cite class="layui-hide-xs">贤心</cite>
<i class="iconfont icon-renzheng layui-hide-xs" title="认证信息:layui 作者"></i>
<i class="layui-badge fly-badge-vip layui-hide-xs">VIP3</i>
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg">
</a>
<dl class="layui-nav-child">
<dd><a href="../user/set.html"><i class="layui-icon">&#xe620;</i>基本设置</a></dd>
<dd><a href="../user/message.html"><i class="iconfont icon-tongzhi" style="top: 4px;"></i>我的消息</a></dd>
<dd><a href="../user/home.html"><i class="layui-icon" style="margin-left: 2px; font-size: 22px;">&#xe68e;</i>我的主页</a></dd>
<hr style="margin: 5px 0;">
<dd><a href="" style="text-align: center;">退出</a></dd>
</dl>
</li>
-->
</ul>
</div>
</div>

<div class="fly-panel fly-column">
<div class="layui-container">
<ul class="layui-clear">
<li class="layui-hide-xs"><a href="/">首页</a></li>
<li class="layui-this"><a href="">提问</a></li>
<li><a href="">分享<span class="layui-badge-dot"></span></a></li>
<li><a href="">讨论</a></li>
<li><a href="">建议</a></li>
<li><a href="">公告</a></li>
<li><a href="">动态</a></li>
<li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><span class="fly-mid"></span></li>

<!-- 用户登入后显示 -->
<li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><a href="../user/index.html">我发表的贴</a></li>
<li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><a href="../user/index.html#collection">我收藏的贴</a></li>
</ul>

<div class="fly-column-right layui-hide-xs">
<span class="fly-search"><i class="layui-icon"></i></span>
<a href="add.html" class="layui-btn">发表新帖</a>
</div>
<div class="layui-hide-sm layui-show-xs-block" style="margin-top: -10px; padding-bottom: 10px; text-align: center;">
<a href="add.html" class="layui-btn">发表新帖</a>
</div>
</div>
</div>

<div class="layui-container">
<div class="layui-row layui-col-space15">
<div class="layui-col-md8">
<div class="fly-panel" style="margin-bottom: 0;">

<div class="fly-panel-title fly-filter">
<a href="" class="layui-this">综合</a>
<span class="fly-mid"></span>
<a href="">未结</a>
<span class="fly-mid"></span>
<a href="">已结</a>
<span class="fly-mid"></span>
<a href="">精华</a>
<span class="fly-filter-right layui-hide-xs">
<a href="" class="layui-this">按最新</a>
<span class="fly-mid"></span>
<a href="">按热议</a>
</span>
</div>

<ul class="fly-list">
<li>
<a href="user/home.html" class="fly-avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<h2>
<a class="layui-badge">分享</a>
<a href="detail.html">基于 layui 的极简社区页面模版</a>
</h2>
<div class="fly-list-info">
<a href="user/home.html" link>
<cite>贤心</cite>
<!--
<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
-->
</a>
<span>刚刚</span>

<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
<!--<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>-->
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> 66
</span>
</div>
<div class="fly-list-badge">
<span class="layui-badge layui-bg-black">置顶</span>
<!--<span class="layui-badge layui-bg-red">精帖</span>-->
</div>
</li>
<li>
<a href="user/home.html" class="fly-avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<h2>
<a class="layui-badge">动态</a>
<a href="detail.html">基于 layui 的极简社区页面模版</a>
</h2>
<div class="fly-list-info">
<a href="user/home.html" link>
<cite>贤心</cite>
<!--<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>-->
<i class="layui-badge fly-badge-vip">VIP3</i>
</a>
<span>刚刚</span>

<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> 66
</span>
</div>
<div class="fly-list-badge">
<span class="layui-badge layui-bg-red">精帖</span>
</div>
</li>
<li>
<a href="user/home.html" class="fly-avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<h2>
<a class="layui-badge">动态</a>
<a href="detail.html">基于 layui 的极简社区页面模版</a>
</h2>
<div class="fly-list-info">
<a href="user/home.html" link>
<cite>贤心</cite>
<!--
<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
-->
</a>
<span>刚刚</span>

<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
<!--<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>-->
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> 66
</span>
</div>
<div class="fly-list-badge">
<!--<span class="layui-badge layui-bg-red">精帖</span>-->
</div>
</li>
<li>
<a href="user/home.html" class="fly-avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<h2>
<a class="layui-badge">动态</a>
<a href="detail.html">基于 layui 的极简社区页面模版</a>
</h2>
<div class="fly-list-info">
<a href="user/home.html" link>
<cite>贤心</cite>
<!--
<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
-->
</a>
<span>刚刚</span>

<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
<!--<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>-->
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> 66
</span>
</div>
<div class="fly-list-badge">
<!--<span class="layui-badge layui-bg-red">精帖</span>-->
</div>
</li>
<li>
<a href="user/home.html" class="fly-avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<h2>
<a class="layui-badge">动态</a>
<a href="detail.html">基于 layui 的极简社区页面模版</a>
</h2>
<div class="fly-list-info">
<a href="user/home.html" link>
<cite>贤心</cite>
<!--
<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
-->
</a>
<span>刚刚</span>

<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
<!--<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>-->
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> 66
</span>
</div>
<div class="fly-list-badge">
<!--<span class="layui-badge layui-bg-red">精帖</span>-->
</div>
</li>
<li>
<a href="user/home.html" class="fly-avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<h2>
<a class="layui-badge">动态</a>
<a href="detail.html">基于 layui 的极简社区页面模版</a>
</h2>
<div class="fly-list-info">
<a href="user/home.html" link>
<cite>贤心</cite>
<!--
<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
-->
</a>
<span>刚刚</span>

<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
<!--<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>-->
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> 66
</span>
</div>
<div class="fly-list-badge">
<!--<span class="layui-badge layui-bg-red">精帖</span>-->
</div>
</li>
<li>
<a href="user/home.html" class="fly-avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<h2>
<a class="layui-badge">动态</a>
<a href="detail.html">基于 layui 的极简社区页面模版</a>
</h2>
<div class="fly-list-info">
<a href="user/home.html" link>
<cite>贤心</cite>
<!--
<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
-->
</a>
<span>刚刚</span>

<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
<!--<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>-->
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> 66
</span>
</div>
<div class="fly-list-badge">
<!--<span class="layui-badge layui-bg-red">精帖</span>-->
</div>
</li>
<li>
<a href="user/home.html" class="fly-avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<h2>
<a class="layui-badge">动态</a>
<a href="detail.html">基于 layui 的极简社区页面模版</a>
</h2>
<div class="fly-list-info">
<a href="user/home.html" link>
<cite>贤心</cite>
<!--
<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
-->
</a>
<span>刚刚</span>

<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
<!--<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>-->
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> 66
</span>
</div>
<div class="fly-list-badge">
<!--<span class="layui-badge layui-bg-red">精帖</span>-->
</div>
</li>
</ul>

<!-- <div class="fly-none">没有相关数据</div> -->

<div style="text-align: center">
<div class="laypage-main"><span class="laypage-curr">1</span><a href="/jie/page/2/">2</a><a href="/jie/page/3/">3</a><a href="/jie/page/4/">4</a><a href="/jie/page/5/">5</a><span></span><a href="/jie/page/148/" class="laypage-last" title="尾页">尾页</a><a href="/jie/page/2/" class="laypage-next">下一页</a></div>
</div>

</div>
</div>
<div class="layui-col-md4">
<dl class="fly-panel fly-list-one">
<dt class="fly-panel-title">本周热议</dt>
<dd>
<a href="">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>
<dd>
<a href="">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>
<dd>
<a href="">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>
<dd>
<a href="">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>
<dd>
<a href="">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>
<dd>
<a href="">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>
<dd>
<a href="">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>
<dd>
<a href="">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>
<dd>
<a href="">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>
<dd>
<a href="">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>

<!-- 无数据时 -->
<!--
<div class="fly-none">没有相关数据</div>
-->
</dl>

<div class="fly-panel">
<div class="fly-panel-title">
这里可作为广告区域
</div>
<div class="fly-panel-main">
<a href="" target="_blank" class="fly-zanzhu" style="background-color: #393D49;">虚席以待</a>
</div>
</div>

<div class="fly-panel fly-link">
<h3 class="fly-panel-title">友情链接</h3>
<dl class="fly-panel-main">
<dd><a href="http://www.layui.com/" target="_blank">layui</a><dd>
<dd><a href="http://layim.layui.com/" target="_blank">WebIM</a><dd>
<dd><a href="http://layer.layui.com/" target="_blank">layer</a><dd>
<dd><a href="http://www.layui.com/laydate/" target="_blank">layDate</a><dd>
<dd><a href="mailto:xianxin@layui-inc.com?subject=%E7%94%B3%E8%AF%B7Fly%E7%A4%BE%E5%8C%BA%E5%8F%8B%E9%93%BE" class="fly-link">申请友链</a><dd>
</dl>
</div>

</div>
</div>
</div>

<div class="fly-footer">
<p><a href="http://fly.layui.com/" target="_blank">Fly社区</a> 2017 &copy; <a href="http://www.layui.com/" target="_blank">layui.com 出品</a></p>
<p>
<a href="http://fly.layui.com/jie/3147/" target="_blank">付费计划</a>
<a href="http://www.layui.com/template/fly/" target="_blank">获取Fly社区模版</a>
<a href="http://fly.layui.com/jie/2461/" target="_blank">微信公众号</a>
</p>
</div>

<script src="../../res/layui/layui.js"></script>
<script>
layui.cache.page = 'jie';
layui.cache.user = {
username: '游客'
,uid: -1
,avatar: '../../res/images/avatar/00.jpg'
,experience: 83
,sex: '男'
};
layui.config({
version: "3.0.0"
,base: '../../res/mods/'
}).extend({
fly: 'index'
}).use('fly');
</script>

</body>
</html>

最后把下载的模板 html/jie/detail.html 的内容复制到 detail.ftl 文件,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fly Template v3.0,基于 layui 的极简社区页面模版</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="keywords" content="fly,layui,前端社区">
<meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区,致力于为web开发提供强劲动力">
<link rel="stylesheet" href="../../res/layui/css/layui.css">
<link rel="stylesheet" href="../../res/css/global.css">
</head>
<body>

<div class="fly-header layui-bg-black">
<div class="layui-container">
<a class="fly-logo" href="/">
<img src="../../res/images/logo.png" alt="layui">
</a>
<ul class="layui-nav fly-nav layui-hide-xs">
<li class="layui-nav-item layui-this">
<a href="/"><i class="iconfont icon-jiaoliu"></i>交流</a>
</li>
<li class="layui-nav-item">
<a href="../case/case.html"><i class="iconfont icon-iconmingxinganli"></i>案例</a>
</li>
<li class="layui-nav-item">
<a href="http://www.layui.com/" target="_blank"><i class="iconfont icon-ui"></i>框架</a>
</li>
</ul>

<ul class="layui-nav fly-nav-user">

<!-- 未登入的状态 -->
<!--
<li class="layui-nav-item">
<a class="iconfont icon-touxiang layui-hide-xs" href="user/login.html"></a>
</li>
<li class="layui-nav-item">
<a href="user/login.html">登入</a>
</li>
<li class="layui-nav-item">
<a href="user/reg.html">注册</a>
</li>
<li class="layui-nav-item layui-hide-xs">
<a href="/app/qq/" onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})" title="QQ登入" class="iconfont icon-qq"></a>
</li>
<li class="layui-nav-item layui-hide-xs">
<a href="/app/weibo/" onclick="layer.msg('正在通过微博登入', {icon:16, shade: 0.1, time:0})" title="微博登入" class="iconfont icon-weibo"></a>
</li>
-->

<!-- 登入后的状态 -->
<li class="layui-nav-item">
<a class="fly-nav-avatar" href="javascript:;">
<cite class="layui-hide-xs">贤心</cite>
<i class="iconfont icon-renzheng layui-hide-xs" title="认证信息:layui 作者"></i>
<i class="layui-badge fly-badge-vip layui-hide-xs">VIP3</i>
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg">
</a>
<dl class="layui-nav-child">
<dd><a href="../user/set.html"><i class="layui-icon">&#xe620;</i>基本设置</a></dd>
<dd><a href="../user/message.html"><i class="iconfont icon-tongzhi" style="top: 4px;"></i>我的消息</a></dd>
<dd><a href="../user/home.html"><i class="layui-icon" style="margin-left: 2px; font-size: 22px;">&#xe68e;</i>我的主页</a></dd>
<hr style="margin: 5px 0;">
<dd><a href="" style="text-align: center;">退出</a></dd>
</dl>
</li>
</ul>
</div>
</div>

<div class="layui-hide-xs">
<div class="fly-panel fly-column">
<div class="layui-container">
<ul class="layui-clear">
<li class="layui-hide-xs"><a href="/">首页</a></li>
<li class="layui-this"><a href="">提问</a></li>
<li><a href="">分享<span class="layui-badge-dot"></span></a></li>
<li><a href="">讨论</a></li>
<li><a href="">建议</a></li>
<li><a href="">公告</a></li>
<li><a href="">动态</a></li>
<li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><span class="fly-mid"></span></li>

<!-- 用户登入后显示 -->
<li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><a href="../user/index.html">我发表的贴</a></li>
<li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><a href="../user/index.html#collection">我收藏的贴</a></li>
</ul>

<div class="fly-column-right layui-hide-xs">
<span class="fly-search"><i class="layui-icon"></i></span>
<a href="add.html" class="layui-btn">发表新帖</a>
</div>
<div class="layui-hide-sm layui-show-xs-block" style="margin-top: -10px; padding-bottom: 10px; text-align: center;">
<a href="add.html" class="layui-btn">发表新帖</a>
</div>
</div>
</div>
</div>

<div class="layui-container">
<div class="layui-row layui-col-space15">
<div class="layui-col-md8 content detail">
<div class="fly-panel detail-box">
<h1>Fly Template v3.0,基于 layui 的极简社区页面模版</h1>
<div class="fly-detail-info">
<!-- <span class="layui-badge">审核中</span> -->
<span class="layui-badge layui-bg-green fly-detail-column">动态</span>

<span class="layui-badge" style="background-color: #999;">未结</span>
<!-- <span class="layui-badge" style="background-color: #5FB878;">已结</span> -->

<span class="layui-badge layui-bg-black">置顶</span>
<span class="layui-badge layui-bg-red">精帖</span>

<div class="fly-admin-box" data-id="123">
<span class="layui-btn layui-btn-xs jie-admin" type="del">删除</span>

<span class="layui-btn layui-btn-xs jie-admin" type="set" field="stick" rank="1">置顶</span>
<!-- <span class="layui-btn layui-btn-xs jie-admin" type="set" field="stick" rank="0" style="background-color:#ccc;">取消置顶</span> -->

<span class="layui-btn layui-btn-xs jie-admin" type="set" field="status" rank="1">加精</span>
<!-- <span class="layui-btn layui-btn-xs jie-admin" type="set" field="status" rank="0" style="background-color:#ccc;">取消加精</span> -->
</div>
<span class="fly-list-nums">
<a href="#comment"><i class="iconfont" title="回答">&#xe60c;</i> 66</a>
<i class="iconfont" title="人气">&#xe60b;</i> 99999
</span>
</div>
<div class="detail-about">
<a class="fly-avatar" href="../user/home.html">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
</a>
<div class="fly-detail-user">
<a href="../user/home.html" class="fly-link">
<cite>贤心</cite>
<i class="iconfont icon-renzheng" title="认证信息:{{ rows.user.approve }}"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
</a>
<span>2017-11-30</span>
</div>
<div class="detail-hits" id="LAY_jieAdmin" data-id="123">
<span style="padding-right: 10px; color: #FF7200">悬赏:60飞吻</span>
<span class="layui-btn layui-btn-xs jie-admin" type="edit"><a href="add.html">编辑此贴</a></span>
</div>
</div>
<div class="detail-body photos">
<p>
该模版由 layui官方社区(<a href="http://fly.layui.com/" target="_blank">fly.layui.com</a>)倾情提供,只为表明我们对 layui 执着的信念、以及对未来持续加强的承诺。该模版基于 layui 搭建而成,可作为极简通用型社区的页面支撑。
</p>
<p>更新日志:</p>
<pre>
# v3.0 2017-11-30
* 采用 layui 2.2.3 作为 UI 支撑
* 全面同步最新的 Fly 社区风格,各种细节得到大幅优化
* 更友好的响应式适配能力
</pre>

下载<hr>
<p>
官网:<a href="http://www.layui.com/template/fly/" target="_blank">http://www.layui.com/template/fly/</a><br>
码云:<a href="https://gitee.com/sentsin/fly/" target="_blank">https://gitee.com/sentsin/fly/</a><br>
GitHub:<a href="https://github.com/layui/fly" target="_blank">https://github.com/layui/fly</a>
</p>
封面<hr>
<p>
<img src="../../res/images/fly.jpg" alt="Fly社区">
</p>
</div>
</div>

<div class="fly-panel detail-box" id="flyReply">
<fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
<legend>回帖</legend>
</fieldset>

<ul class="jieda" id="jieda">
<li data-id="111" class="jieda-daan">
<a name="item-1111111111"></a>
<div class="detail-about detail-about-reply">
<a class="fly-avatar" href="">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt=" ">
</a>
<div class="fly-detail-user">
<a href="" class="fly-link">
<cite>贤心</cite>
<i class="iconfont icon-renzheng" title="认证信息:XXX"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
</a>

<span>(楼主)</span>
<!--
<span style="color:#5FB878">(管理员)</span>
<span style="color:#FF9E3F">(社区之光)</span>
<span style="color:#999">(该号已被封)</span>
-->
</div>

<div class="detail-hits">
<span>2017-11-30</span>
</div>

<i class="iconfont icon-caina" title="最佳答案"></i>
</div>
<div class="detail-body jieda-body photos">
<p>香菇那个蓝瘦,这是一条被采纳的回帖</p>
</div>
<div class="jieda-reply">
<span class="jieda-zan zanok" type="zan">
<i class="iconfont icon-zan"></i>
<em>66</em>
</span>
<span type="reply">
<i class="iconfont icon-svgmoban53"></i>
回复
</span>
<div class="jieda-admin">
<span type="edit">编辑</span>
<span type="del">删除</span>
<!-- <span class="jieda-accept" type="accept">采纳</span> -->
</div>
</div>
</li>

<li data-id="111">
<a name="item-1111111111"></a>
<div class="detail-about detail-about-reply">
<a class="fly-avatar" href="">
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt=" ">
</a>
<div class="fly-detail-user">
<a href="" class="fly-link">
<cite>贤心</cite>
</a>
</div>
<div class="detail-hits">
<span>2017-11-30</span>
</div>
</div>
<div class="detail-body jieda-body photos">
<p>蓝瘦那个香菇,这是一条没被采纳的回帖</p>
</div>
<div class="jieda-reply">
<span class="jieda-zan" type="zan">
<i class="iconfont icon-zan"></i>
<em>0</em>
</span>
<span type="reply">
<i class="iconfont icon-svgmoban53"></i>
回复
</span>
<div class="jieda-admin">
<span type="edit">编辑</span>
<span type="del">删除</span>
<span class="jieda-accept" type="accept">采纳</span>
</div>
</div>
</li>

<!-- 无数据时 -->
<!-- <li class="fly-none">消灭零回复</li> -->
</ul>

<div class="layui-form layui-form-pane">
<form action="/jie/reply/" method="post">
<div class="layui-form-item layui-form-text">
<a name="comment"></a>
<div class="layui-input-block">
<textarea id="L_content" name="content" required lay-verify="required" placeholder="请输入内容" class="layui-textarea fly-editor" style="height: 150px;"></textarea>
</div>
</div>
<div class="layui-form-item">
<input type="hidden" name="jid" value="123">
<button class="layui-btn" lay-filter="*" lay-submit>提交回复</button>
</div>
</form>
</div>
</div>
</div>
<div class="layui-col-md4">
<dl class="fly-panel fly-list-one">
<dt class="fly-panel-title">本周热议</dt>
<dd>
<a href="">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>
<dd>
<a href="">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>
<dd>
<a href="">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>
<dd>
<a href="">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>
<dd>
<a href="">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>
<dd>
<a href="">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>
<dd>
<a href="">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>
<dd>
<a href="">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>
<dd>
<a href="">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>
<dd>
<a href="">基于 layui 的极简社区页面模版</a>
<span><i class="iconfont icon-pinglun1"></i> 16</span>
</dd>

<!-- 无数据时 -->
<!--
<div class="fly-none">没有相关数据</div>
-->
</dl>

<div class="fly-panel">
<div class="fly-panel-title">
这里可作为广告区域
</div>
<div class="fly-panel-main">
<a href="http://layim.layui.com/?from=fly" target="_blank" class="fly-zanzhu" time-limit="2017.09.25-2099.01.01" style="background-color: #5FB878;">LayIM 3.0 - layui 旗舰之作</a>
</div>
</div>

<div class="fly-panel" style="padding: 20px 0; text-align: center;">
<img src="../../res/images/weixin.jpg" style="max-width: 100%;" alt="layui">
<p style="position: relative; color: #666;">微信扫码关注 layui 公众号</p>
</div>

</div>
</div>
</div>

<div class="fly-footer">
<p><a href="http://fly.layui.com/" target="_blank">Fly社区</a> 2017 &copy; <a href="http://www.layui.com/" target="_blank">layui.com 出品</a></p>
<p>
<a href="http://fly.layui.com/jie/3147/" target="_blank">付费计划</a>
<a href="http://www.layui.com/template/fly/" target="_blank">获取Fly社区模版</a>
<a href="http://fly.layui.com/jie/2461/" target="_blank">微信公众号</a>
</p>
</div>

<script src="../../res/layui/layui.js"></script>
<script>
layui.cache.page = 'jie';
layui.cache.user = {
username: '游客'
,uid: -1
,avatar: '../../res/images/avatar/00.jpg'
,experience: 83
,sex: '男'
};
layui.config({
version: "3.0.0"
,base: '../../res/mods/'
}).extend({
fly: 'index'
}).use(['fly', 'face'], function(){
var $ = layui.$
,fly = layui.fly;
//如果你是采用模版自带的编辑器,你需要开启以下语句来解析。
/*
$('.detail-body').each(function(){
var othis = $(this), html = othis.html();
othis.html(fly.content(html));
});
*/
});
</script>

</body>
</html>

到这里,第一步结束了。但是,模板的抽取就不会在这里过多的叙述了。根据上面讲过的模板抽取,自行把它们抽取处理。

第二步: 新建 PostController 类。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
package club.guoshizhan.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;

/**
* @Author: guoshizhan
* @Create: 2020/7/29 18:07
* @Description: 文章控制器
*/
@Controller
public class PostController {

@GetMapping("/category/{id:\\d*}")
public String category(@PathVariable(name = "id") Long id) {
return "post/category";
}

@GetMapping("/post/{id:\\d*}")
public String details(@PathVariable(name = "id") Long id) {
return "post/detail";

}

}

此时写好之后可以重启项目运行,看是否有结果。经过测试,我的没有问题。(多个浏览器测试,防止有缓存)

第三步: 引入 mybatis-plus 依赖,前面已经引入了
第四步: 配置数据库连接,前面已经配置好了。

1
2
3
4
5
6
7
8
9
10
11
# MySQL 数据库连接
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/layui_blog?serverTimezone=GMT%2B8
username: root
password: root

# mybatis-plus 的 xml 文件的位置
mybatis-plus:
mapper-locations: classpath*:/mapper/**Mapper.xml

第五步: 引入代码生成器,生成相应的实体代码以及 mapper、service、controller 等等。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
package club.guoshizhan;

import com.baomidou.mybatisplus.core.exceptions.MybatisPlusException;
import com.baomidou.mybatisplus.core.toolkit.StringPool;
import com.baomidou.mybatisplus.core.toolkit.StringUtils;
import com.baomidou.mybatisplus.generator.AutoGenerator;
import com.baomidou.mybatisplus.generator.InjectionConfig;
import com.baomidou.mybatisplus.generator.config.*;
import com.baomidou.mybatisplus.generator.config.po.TableInfo;
import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;
import com.baomidou.mybatisplus.generator.engine.FreemarkerTemplateEngine;

import java.util.ArrayList;
import java.util.List;
import java.util.Scanner;

/**
* @Author: guoshizhan
* @Create: 2020/7/16 13:50
* @Description: 代码生成器
*/
// 演示例子,执行 main 方法控制台输入模块表名回车自动生成对应项目目录中
public class CodeGenerator {

/**
* 读取控制台内容
*/
public static String scanner(String tip) {
Scanner scanner = new Scanner(System.in);
StringBuilder help = new StringBuilder();
help.append("请输入" + tip + ":");
System.out.println(help.toString());
if (scanner.hasNext()) {
String ipt = scanner.next();
if (StringUtils.isNotEmpty(ipt)) {
return ipt;
}
}
throw new MybatisPlusException("请输入正确的" + tip + "!");
}

public static void main(String[] args) {
// 代码生成器
AutoGenerator mpg = new AutoGenerator();

// 全局配置
GlobalConfig gc = new GlobalConfig();
String projectPath = System.getProperty("user.dir");
gc.setOutputDir(projectPath + "/src/main/java");
gc.setAuthor("guoshizhan");
gc.setOpen(false);
// gc.setSwagger2(true); 实体属性 Swagger2 注解
mpg.setGlobalConfig(gc);

// 数据源配置
DataSourceConfig dsc = new DataSourceConfig();
dsc.setUrl("jdbc:mysql://localhost:3306/layui_blog?serverTimezone=GMT%2B8");
// dsc.setSchemaName("public");
dsc.setDriverName("com.mysql.cj.jdbc.Driver");
dsc.setUsername("root");
dsc.setPassword("root");
mpg.setDataSource(dsc);

// 包配置
PackageConfig pc = new PackageConfig();
pc.setModuleName(null);
pc.setParent("club.guoshizhan");
mpg.setPackageInfo(pc);

// 自定义配置
InjectionConfig cfg = new InjectionConfig() {
@Override
public void initMap() {
// to do nothing
}
};

// 如果模板引擎是 freemarker
String templatePath = "/templates/mapper.xml.ftl";
// 如果模板引擎是 velocity
// String templatePath = "/templates/mapper.xml.vm";

// 自定义输出配置
List<FileOutConfig> focList = new ArrayList<>();
// 自定义配置会被优先输出
focList.add(new FileOutConfig(templatePath) {
@Override
public String outputFile(TableInfo tableInfo) {
// 自定义输出文件名 , 如果你 Entity 设置了前后缀、此处注意 xml 的名称会跟着发生变化!!
return projectPath + "/src/main/resources/mapper/" + pc.getModuleName()
+ "/" + tableInfo.getEntityName() + "Mapper" + StringPool.DOT_XML;
}
});
/*
cfg.setFileCreate(new IFileCreate() {
@Override
public boolean isCreate(ConfigBuilder configBuilder, FileType fileType, String filePath) {
// 判断自定义文件夹是否需要创建
checkDir("调用默认方法创建的目录,自定义目录用");
if (fileType == FileType.MAPPER) {
// 已经生成 mapper 文件判断存在,不想重新生成返回 false
return !new File(filePath).exists();
}
// 允许生成模板文件
return true;
}
});
*/
cfg.setFileOutConfigList(focList);
mpg.setCfg(cfg);

// 配置模板
TemplateConfig templateConfig = new TemplateConfig();

// 配置自定义输出模板
//指定自定义模板路径,注意不要带上.ftl/.vm, 会根据使用的模板引擎自动识别
// templateConfig.setEntity("templates/entity2.java");
// templateConfig.setService();
// templateConfig.setController();

templateConfig.setXml(null);
mpg.setTemplate(templateConfig);

// 策略配置
StrategyConfig strategy = new StrategyConfig();
strategy.setNaming(NamingStrategy.underline_to_camel);
strategy.setColumnNaming(NamingStrategy.underline_to_camel);
strategy.setSuperEntityClass("club.guoshizhan.entity.BaseEntity");
strategy.setEntityLombokModel(true);
strategy.setRestControllerStyle(true);
// 公共父类
strategy.setSuperControllerClass("club.guoshizhan.controller.BaseController");
// 写于父类中的公共字段
strategy.setSuperEntityColumns("id");
strategy.setInclude(scanner("表名,多个英文逗号分割").split(","));
strategy.setSuperEntityColumns("id", "created", "modified", "status");
strategy.setControllerMappingHyphenStyle(true);
strategy.setTablePrefix(pc.getModuleName() + "_");
mpg.setStrategy(strategy);
mpg.setTemplateEngine(new FreemarkerTemplateEngine());
mpg.execute();
}

}

然后执行代码即可生成相应的各种代码。生成代码之后我们启动项目,发现报错了,找不到XXX符号之类的。这个时候请看第六步。
category,comment,post,user,user_action,user_collection,user_message
第六步: 在 新建config 包,然后 编写 MybatisPlusConfig 类即可

同样在 config 包下新建 ContextStartup 类。类似缓存。里面有 categories 域,用于 left.ftl 页面博客分类的数据填充。填充完数据之后重启发现分类查出来了。

分页:

导入分页插件到:MybatisPlusConfig

1:03:39


📚 本站推荐文章
  👉 从 0 开始搭建 Hexo 博客
  👉 计算机网络入门教程
  👉 数据结构入门
  👉 算法入门
  👉 IDEA 入门教程

可在评论区留言哦

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×