【SSM架構】部落格系統開發8-背景首頁
- 1 完成效果
- 2 模闆頁的規劃
-
-
- (1) 加入 rapid 支援
- (2) 模組化闆頁framework.jsp
- (3) index.jsp繼承framework 模闆
-
- 3 建首頁index.jsp
- 4 提取文章清單的資料
-
-
- (1) 建實體類Article.java
- (2) 建 ArticleMapper.java接口
- (3) 建ArticleMapper.xml
- (4) 建業務層接口ArticleServic.java
- (5) 建業務層ArticleServiceImpl.java
- (6) 配置控制層AdminController.java
- (7) 首頁加入展示資料
-
- 5 資料庫表article結構
1 完成效果
通路位址:http://localhost:8080/blog-douyuzhi/login
登陸成功後進入index.jsp
2 模闆頁的規劃
(1) 加入 rapid 支援
它可以讓我們的jsp支援模闆的繼承
<dependency>
<groupId>com.googlecode.rapid-framework</groupId>
<artifactId>rapid-core</artifactId>
<version>4.0.5</version>
</dependency>
(2) 模組化闆頁framework.jsp
設計通用的模闆頁 framework.jsp 放在 src/main/webapp/jsp 目錄下
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.rapid-framework.org.cn/rapid" prefix="rapid" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<base href="<%=basePath%>">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta charset="utf-8">
<link rel="shortcut icon" href="resources/img/logo.png">
<title>部落格背景</title>
<link rel="stylesheet" href="resources/plugin/layui/css/layui.css">
<link rel="stylesheet" href="resources/css/back.css">
<link rel="stylesheet" href="resources/plugin/font-awesome/css/font-awesome.min.css">
<%--留給其他子產品引入自已的樣式或css --%>
<rapid:block name="frame-header-style"> </rapid:block>
<rapid:block name="frame-header-script"></rapid:block>
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">
<a href="/admin" style="color:#009688;"> 部落格背景 </a>
</div>
<!-- 頭部區域（可配合layui已有的水準導航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="/" target="_blank">前台</a></li>
<li class="layui-nav-item">
<a href="javascript:;">建立</a>
<dl class="layui-nav-child">
<dd><a href="/admin/article/insert">文章</a></dd>
<dd><a href="/admin/page/insert">頁面</a></dd>
<dd><a href="/admin/category/insert">分類</a></dd>
<dd><a href="/admin/notice/insert">公告</a></dd>
<dd><a href="/admin/link/insert">連結</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:void(0);"><img src="resources//uploads/2017/10/20171006225356181.jpg" class="layui-nav-img"> admin</a>
<dl class="layui-nav-child">
<dd><a href="/admin/user/profile">基本資料</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="/admin/logout">退出</a>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左側導航區域（可配合layui已有的垂直導航） -->
<ul class="layui-nav layui-nav-tree" >
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">文章</a>
<dl class="layui-nav-child">
<dd><a href="article">全部文章</a></dd>
<dd><a href="article/add">寫文章</a></dd>
<dd><a href="category">全部分類</a></dd>
<dd><a href="tag">全部标簽</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">頁面</a>
<dl class="layui-nav-child">
<dd><a href="page">全部頁面</a></dd>
<dd><a href="page/add">添加頁面</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a class="" href="javascript:;"> 連結 </a>
<dl class="layui-nav-child">
<dd><a href="link">全部連結</a></dd>
<dd><a href="link/add">添加連結</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">公告</a>
<dl class="layui-nav-child">
<dd><a href="notice">全部公告</a></dd>
<dd><a href="notice/add">添加公告</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="comment">評論</a>
</li>
<li class="layui-nav-item">
<a class="" href="javascript:;">使用者 </a>
<dl class="layui-nav-child">
<dd><a href="user">全部使用者</a></dd>
<dd><a href="user/add">添加使用者</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">設定</a>
<dl class="layui-nav-child">
<dd><a href="menu">菜單</a></dd>
<dd><a href="options">主要選項</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<div style="padding: 15px;">
<rapid:block name="frame-content">
内容主體區域 不同的頁面要分别進行不同的重寫
</rapid:block>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定區域 -->
? 這裡展示一些提示性資訊 <a href="#" target="_blank">其他導航</a> / <a href="#" target="_blank">其他導航</a>
</div>
</div>
<script src="resources/js/jquery.min.js"></script>
<script src="resources/plugin/layui/layui.all.js"></script>
<script src="resources/js/back.js"></script>
<%--留給其他子產品引入自已的css --%>
<rapid:block name="frame-footer-script">
</rapid:block>
</body>
</html>
(3) index.jsp繼承framework 模闆
把原來的index.jsp 改成從上面的 framework 模闆繼承,并重寫相應的子產品
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.rapid-framework.org.cn/rapid" prefix="rapid" %>
<rapid:override name="frame-header-style">
<link rel="stylesheet" href="resources/css/index-page.css" >
</rapid:override>
<rapid:override name="frame-content">
這是我重寫的内容,哈哈哈, 原來如此
</rapid:override>
<%@ include file="framework.jsp" %>
3 建首頁index.jsp
index.jsp 中,重寫内容
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.rapid-framework.org.cn/rapid" prefix="rapid" %>
<rapid:override name="frame-header-style">
<link rel="stylesheet" href="resources/css/index-page.css" >
</rapid:override>
<rapid:override name="frame-content">
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md6">
<div id="dashboard_activity" class="postbox ">
<div class="inside">
<div id="activity-widget">
<div id="published-posts" class="activity-block">
<h3>最近釋出</h3>
<br>
<ul>
<li><span>21:06 11月25日</span> <a href="/article/33"
target="_blank">MySQL常用指令語句</a></li>
<li><span>21:05 11月25日</span> <a href="/article/32"
target="_blank">Docker_入門？隻要這篇就夠了！（純幹貨适合0基礎小白）</a></li>
<li><span>21:02 11月25日</span> <a href="/article/31"
target="_blank">RocketMQ 實戰之快速入門</a></li>
<li><span>21:01 11月25日</span> <a href="/article/30"
target="_blank">SpringBoot + mongodb 整合,
記錄網站記錄檔，常用查詢操作</a></li>
<li><span>21:00 11月25日</span> <a href="/article/29"
target="_blank">IDEA啟動EDAS項目</a></li>
</ul>
</div>
<br>
<div id="latest-comments" class="activity-block">
<h3>近期評論</h3>
<ul id="the-comment-list" data-wp-lists="list:comment">
<li class="comment thread-even comment-item approved">
<img alt=""
src="http://cn.gravatar.com/avatar/88d5cb704d88bdad67d000eee4782000?s=128&d=identicon&r=PG"
class="avatar avatar-50 photo" height="50" width="50">
<div class="dashboard-comment-wrap has-row-actions">
<p class="comment-meta">
由<cite class="comment-author"> <a target="_blank"
href="" rel="external nofollow" class="url">1111</a>
</cite>發表在 《<a href="/article/6">Hibernate 簡單的CURD操作</a>》
</p>
<blockquote>
<p>1</p>
</blockquote>
<p class="row-actions">
| <span class=""> <a data-comment-id="1268"
href="/admin/comment/reply/29"> 回複 </a>
</span> <span class=""> | <a
href="/admin/comment/edit/29">編輯</a>
</span> <span class=""> | <a href="javascript:void(0)"
onclick="deleteComment(29)">删除</a>
</span>
</p>
</div>
</li>
<li class="comment thread-even comment-item approved">
<img alt=""
src="http://cn.gravatar.com/avatar/487f87505f619bf9ea08f26bb34f8118?s=128&d=identicon&r=PG"
class="avatar avatar-50 photo" height="50" width="50">
<div class="dashboard-comment-wrap has-row-actions">
<p class="comment-meta">
由<cite class="comment-author"> <a target="_blank"
href="" rel="external nofollow" class="url">你好</a>
</cite>發表在 《<a href="/article/6">Hibernate 簡單的CURD操作</a>》
</p>
<blockquote>
<p>ssss</p>
</blockquote>
<p class="row-actions">
| <span class=""> <a data-comment-id="1268"
href="/admin/comment/reply/22"> 回複 </a>
</span> <span class=""> | <a
href="/admin/comment/edit/22">編輯</a>
</span> <span class=""> | <a href="javascript:void(0)"
onclick="deleteComment(22)">删除</a>
</span>
</p>
</div>
</li>
<li class="comment thread-even comment-item approved">
<img alt=""
src="http://cn.gravatar.com/avatar/3ae8728fec3cd5cbfe99c4b966695f03?s=128&d=identicon&r=PG"
class="avatar avatar-50 photo" height="50" width="50">
<div class="dashboard-comment-wrap has-row-actions">
<p class="comment-meta">
由<cite class="comment-author"> <a target="_blank"
href="" rel="external nofollow" class="url">saysky3</a>
</cite>發表在 《<a href="/article/2">springmvc 表單中文亂碼解決方案</a>》
</p>
<blockquote>
<p>33333</p>
</blockquote>
<p class="row-actions">
| <span class=""> <a data-comment-id="1268"
href="/admin/comment/reply/20"> 回複 </a>
</span> <span class=""> | <a
href="/admin/comment/edit/20">編輯</a>
</span> <span class=""> | <a href="javascript:void(0)"
onclick="deleteComment(20)">删除</a>
</span>
</p>
</div>
</li>
<li class="comment thread-even comment-item approved">
<img alt=""
src="http://cn.gravatar.com/avatar/3ae8728fec3cd5cbfe99c4b966695f03?s=128&d=identicon&r=PG"
class="avatar avatar-50 photo" height="50" width="50">
<div class="dashboard-comment-wrap has-row-actions">
<p class="comment-meta">
由<cite class="comment-author"> <a target="_blank"
href="" rel="external nofollow" class="url">saysky2</a>
</cite>發表在 《<a href="/article/2">springmvc 表單中文亂碼解決方案</a>》
</p>
<blockquote>
<p>sssssss</p>
</blockquote>
<p class="row-actions">
| <span class=""> <a data-comment-id="1268"
href="/admin/comment/reply/19"> 回複 </a>
</span> <span class=""> | <a
href="/admin/comment/edit/19">編輯</a>
</span> <span class=""> | <a href="javascript:void(0)"
onclick="deleteComment(19)">删除</a>
</span>
</p>
</div>
</li>
<li class="comment thread-even comment-item approved">
<img alt=""
src="http://cn.gravatar.com/avatar/3ae8728fec3cd5cbfe99c4b966695f03?s=128&d=identicon&r=PG"
class="avatar avatar-50 photo" height="50" width="50">
<div class="dashboard-comment-wrap has-row-actions">
<p class="comment-meta">
由<cite class="comment-author"> <a target="_blank"
href="http://liuyanzhao.com" rel="external nofollow"
class="url">saysky</a>
</cite>發表在 《<a href="/article/2">springmvc 表單中文亂碼解決方案</a>》
</p>
<blockquote>
<p>ssssss</p>
</blockquote>
<p class="row-actions">
| <span class=""> <a data-comment-id="1268"
href="/admin/comment/reply/18"> 回複 </a>
</span> <span class=""> | <a
href="/admin/comment/edit/18">編輯</a>
</span> <span class=""> | <a href="javascript:void(0)"
onclick="deleteComment(18)">删除</a>
</span>
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div id="dashboard_quick_press" class="postbox ">
<div class="inside">
<form name="post" method="post" id="insertDraftForm"
class="initial-form hide-if-no-js"
action="/admin/article/insertDraftSubmit">
<div class="layui-form-item">
<div class="layui-input-block">
<input type="text" name="articleTitle" id="articleTitle"
required lay-verify="required" placeholder="請輸入标題"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<div class="layui-input-block">
<textarea name="articleContent" placeholder="請輸入内容"
id="articleContent" class="layui-textarea" required></textarea>
</div>
</div>
<input type="hidden" name="articleStatus" value="0">
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn layui-btn-small" lay-submit
lay-filter="formDemo" onclick="insertDraft()">儲存草稿</button>
<button type="reset"
class="layui-btn layui-btn-small layui-btn-primary">重置</button>
</div>
</div>
</form>
<div class="drafts">
<p class="view-all">
<a href="/admin/article" aria-label="檢視所有草稿">檢視所有</a>
</p>
<h2 class="hide-if-no-js">草稿</h2>
<ul>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</rapid:override>
<%@ include file="framework.jsp" %>
4 提取文章清單的資料
(1) 建實體類Article.java
文章表對應的實體類
package com.entity;
import java.util.Date;
public class Article {
//文章ID, 自增主鍵
private Integer articleId;
//建立文章的使用者
private Integer articleUserId;
//文章标題
private String articleTitle;
//浏覽次數
private Integer articleViewCount;
//回複次數
private Integer articleCommentCount;
//點贊次數
private Integer articleLikeCount;
//建立時間
private Date articleCreateTime;
//更新時間
private Date articleUpdateTime;
//是否回複
private Integer articleIsComment;
//狀态(0,草稿,1 已發表)
private Integer articleStatus;
//排序
private Integer articleOrder;
//文章内容
private String articleContent;
//文章概述
private String articleSummary;
//使用者
private User user;
//文章挂有哪些标簽
//private List<Tag> tagList;
//文章屬于哪些分類
//private List<Category> categoryList;
get set 方法//别忘了建立get set 方法
(2) 建 ArticleMapper.java接口
com.mapper.ArticleMapper 接口
package com.mapper;
import java.util.List;
import com.entity.Article;
public interface ArticleMapper {
/**
* 查詢最新釋出的前n條檔案
* @param n 查詢出的文章數
* @return 文章清單
*/
List<Article>listRecentArticle(Integer n);
}
(3) 建ArticleMapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.mapper.ArticleMapper">
<select id="listRecentArticle" resultType="Article">
select * from Article order by article_id DESC limit #{n}
</select>
</mapper>
(4) 建業務層接口ArticleServic.java
ArticleService 業務層接口
package com.service;
import java.util.List;
import com.entity.Article;
public interface ArticleService {
/**
* 查詢最新釋出的前n條檔案
* @param n 查詢出的文章數
* @return 文章清單
*/
List<Article>listRecentArticle(Integer n);
}
(5) 建業務層ArticleServiceImpl.java
業務層的實作類
package com.service.impl;
import java.util.List;
import javax.annotation.Resource;
import org.springframework.stereotype.Service;
import com.entity.Article;
import com.mapper.ArticleMapper;
import com.service.ArticleService;
@Service
public class ArticleServiceImpl implements ArticleService {
@Resource
private ArticleMapper articleMapper;
/**
* 查詢最近發表的前n條文章
*/
public List<Article> listRecentArticle(Integer n) {
return articleMapper.listRecentArticle(n);
}
}
(6) 配置控制層AdminController.java
控制層
@Controller
public class AdminController {
@Resource
private UserService userService;
@Resource
private ArticleService articleService;
@RequestMapping("/login")
public String login(String userName,String userPass,HttpServletRequest request) {
//調用dao層來進行資料通路
User user =userService.login(userName, userPass);
if(user!=null ) {
//把目前登入使用者的資訊放到 session 中,為了以後全局共享
request.getSession().setAttribute("session_user", user);
List<Article> articleList= articleService.listRecentArticle(5);
request.setAttribute("articleList", articleList);
return "index";
}
else {
request.setAttribute("msg", "使用者或或密碼錯誤,登入失敗");
return "login";
}
}
}
(7) 首頁加入展示資料
在index.jsp上展示模型資料
上方引入 jstl 标簽庫
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
然後把jsp中,原來的ul中的靜态的文章清單内容換成下面的:
<ul>
<c:forEach var= "a" items="${articleList }">
<li>
<span>
<fmt:formatDate value="${a.articleCreateTime }" pattern="yyyy/MM/dd hh:mm:ss" />
</span>
<a href="/article/${a.articleId }" target="_blank">${a.articleTitle }_AA</a>
</li>
</c:forEach>
</ul>
5 資料庫表article結構
