博客首页搭建,静态化页面
分类:pc28.am神测网

1.思路:在搭建博客首页的时候尽量运用了bootStrap的栅格布局,共分3行

思路深入分析:静态化的落实是把多少存入application中,由于初阶化时候将查询到的数量归入application中,后来就直接在application中取多少了,不用在查询数据库,进而抓好网站质量,以友情链接和博主音信为例

1.1:第后生可畏行放置的是左手博客Logo,侧面放置气象预测

内需将数据在档案的次序运营时候就放入application,创设三个监听器,须求选用applicationAwar接口以获取application,

1.2:中间行是重大内容,左侧放置10条博客消息,侧边是博主消息、日志和友情链接

ServletContext application=sce.getServletContext();

1.3:最下面是单排,放置版权音信

在实行进度中要求选取applicationContext以博得spring中的值所以须求serverletContext

以下是代码:

然后把conponent注入进spring

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ";
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap3/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/blog.css">
<script src="${pageContext.request.contextPath}/static/bootstrap3/js/jquery-1.11.2.min.js"></script>
<script src="${pageContext.request.contextPath}/static/bootstrap3/js/bootstrap.min.js"></script>
<title>博主主页</title>
<style type="text/css">
body{
padding-top: 10px;
padding-bottom: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<img alt="java1234开源博客系统" src="${pageContext.request.contextPath}/static/images/logo.png">
</div>
<div class="col-md-8">
<iframe style="float: right;" width="420" scrolling="no" height="60" frameborder="0" allowtransparency="true" src=";
</div>
</div>

末尾在web.xml中布置监听

<div class="row">
<div class="col-md-12" style="padding-top: 10px">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><font color="black"><strong>首页</strong></font></a>
</div>

public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
this.applicationContext=applicationContext;
}

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#"><font color="black"><strong>关于博主</strong></font></a></li>
<li><a href="#"><font color="black"><strong>本站源码下载</strong></font></a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入要查询的主要字...">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>

1.查询数据:

<div class="row">
<div class="col-md-9">
<div class="data_list">
<div class="data_list_title">
<img src="${pageContext.request.contextPath}/static/images/list_icon.png"/>
风行博客</div>

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
";
<mapper namespace="com.java1234.dao.BloggerDao">

<div class="datas">
<ul>
<li style="margin-bottom: 30px">
<span class="date"><a href="${pageContext.request.contextPath}/blog/articles/52.html">2016年02月15日</a></span>
<span class="title"><a href="${pageContext.request.contextPath}/blog/articles/52.html">使用CXF开发WebService客户端</a></span>
<span class="summary">摘要: 前面大器晚成讲开辟了webservice服务器端接口,前几天的话,大家来支付webservice顾客端,让我们来体验下进度;首先建三个Maven项目,项目名字,WS_Client;然后我们要用CXF给我们提供的工具wsdl2java 来根据央浼的url生成顾客端代码;wsdl2java工具在CXF开垦包里;开采下载地...</span>
<span class="img">

<resultMap type="Blogger" id="BloggerResult">
<result property="id" column="id"/>
<result property="userName" column="userName"/>
<result property="password" column="password"/>
<result property="profile" column="profile"/>
<result property="nickName" column="nickName"/>
<result property="sign" column="sign"/>
<result property="imageName" column="imageName"/>
</resultMap>

<a href="/blog/articles/52.html"><img src="${pageContext.request.contextPath}/static/userImages/a.jpg" alt="1455539511890048174.jpg"></a>
  

<select id="getByUserName" parameterType="String" resultMap="BloggerResult">
select * from t_blogger where userName=#{userName}
</select>
</mapper>

<a href="/blog/articles/52.html"><img alt="QQ鎴浘20160215203213.jpg" src="${pageContext.request.contextPath}/static/userImages/b.jpg" title="1455539700734093102.jpg" width="667" height="264" style="width: 667px; height: 264px;"></a>
  

2.询问接口:

<a href="/blog/articles/52.html"><img alt="QQ鎴浘20160215203317.jpg" src="${pageContext.request.contextPath}/static/userImages/c.jpg" title="1455539761187019902.jpg"></a>
  

package com.java1234.dao;

</span>
<span class="info">发表于 2016-02-15 21:06 阅读(71) 评论(5) </span>

import com.java1234.entity.Blogger;

</li>
<hr style="height:5px;border:none;border-top:1px dashed gray;padding-bottom: 10px;" />

/**
* 博主Dao接口
* @author Administrator
*
*/
public interface BloggerDao {

<li style="margin-bottom: 30px">
<span class="date"><a href="${pageContext.request.contextPath}/blog/articles/52.html">2016年02月15日</a></span>
<span class="title"><a href="${pageContext.request.contextPath}/blog/articles/52.html">使用CXF开发WebService客户端</a></span>
<span class="summary">摘要: 前边风流倜傥讲开采了webservice服务器端接口,前日的话,我们来开荒webservice客户端,让我们来体会下进度;首先建多少个Maven项目,项目名字,WS_Client;然后大家要用CXF给大家提供的工具wsdl2java 来根据诉求的url生成客商端代码;wsdl2java工具在CXF开拓包里;开垦下载地...</span>
<span class="img">

/**
* 通过客户名询问客商
* @param userName
* @return
*/
public Blogger getByUserName(String userName);
}

<a href="/blog/articles/52.html"><img src="${pageContext.request.contextPath}/static/userImages/a.jpg" alt="1455539511890048174.jpg"></a>
  

3.service接口:

<a href="/blog/articles/52.html"><img alt="QQ鎴浘20160215203213.jpg" src="${pageContext.request.contextPath}/static/userImages/b.jpg" title="1455539700734093102.jpg" width="667" height="264" style="width: 667px; height: 264px;"></a>
  

package com.java1234.service;

<a href="/blog/articles/52.html"><img alt="QQ鎴浘20160215203317.jpg" src="${pageContext.request.contextPath}/static/userImages/c.jpg" title="1455539761187019902.jpg"></a>
  

import com.java1234.entity.Blogger;

</span>
<span class="info">发表于 2016-02-15 21:06 阅读(71) 评论(5) </span>

/**
* 博主Service接口
* @author Administrator
*
*/
public interface BloggerService {

</li>
<hr style="height:5px;border:none;border-top:1px dashed gray;padding-bottom: 10px;" />

/**
* 通过客户名询问客商
* @param userName
* @return
*/
public Blogger getByUserName(String userName);
}

<li style="margin-bottom: 30px">
<span class="date"><a href="${pageContext.request.contextPath}/blog/articles/52.html">2016年02月15日</a></span>
<span class="title"><a href="${pageContext.request.contextPath}/blog/articles/52.html">使用CXF开发WebService客户端</a></span>
<span class="summary">摘要: 后面风度翩翩讲开垦了webservice服务器端接口,今日的话,大家来支付webservice客商端,让大家来体验下进度;首先建三个Maven项目,项目名字,WS_Client;然后大家要用CXF给大家提供的工具wsdl2java 来依照诉求的url生成顾客端代码;wsdl2java工具在CXF开荒包里;开垦下载地...</span>
<span class="img">

4.service实现

<a href="/blog/articles/52.html"><img src="${pageContext.request.contextPath}/static/userImages/a.jpg" alt="1455539511890048174.jpg"></a>
  

package com.java1234.service.impl;

<a href="/blog/articles/52.html"><img alt="QQ鎴浘20160215203213.jpg" src="${pageContext.request.contextPath}/static/userImages/b.jpg" title="1455539700734093102.jpg" width="667" height="264" style="width: 667px; height: 264px;"></a>
  

import javax.annotation.Resource;

<a href="/blog/articles/52.html"><img alt="QQ鎴浘20160215203317.jpg" src="${pageContext.request.contextPath}/static/userImages/c.jpg" title="1455539761187019902.jpg"></a>
  

import org.springframework.stereotype.Service;

</span>
<span class="info">发表于 2016-02-15 21:06 阅读(71) 评论(5) </span>

import com.java1234.dao.BloggerDao;
import com.java1234.entity.Blogger;
import com.java1234.service.BloggerService;

</li>
<hr style="height:5px;border:none;border-top:1px dashed gray;padding-bottom: 10px;" />

/**
* 博主Service实现类
* @author Administrator
*
*/
@Service("bloggerService")
public class BloggerServiceImpl implements BloggerService{

</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="data_list">
<div class="data_list_title">
<img src="${pageContext.request.contextPath}/static/images/user_icon.png"/>
博主消息
</div>
<div class="user_image">
<img src="${pageContext.request.contextPath}/static/userImages/20160202095456.jpg"/>
</div>
<div class="nickName">Java1234_小锋</div>
<div class="userSign">(知识改造时局,本领转移世界)</div>
</div>

@Resource
private BloggerDao bloggerDao;

<div class="data_list">
<div class="data_list_title">
<img src="${pageContext.request.contextPath}/static/images/byType_icon.png"/>
按日志连串
</div>
<div class="datas">
<ul>

public Blogger getByUserName(String userName) {
return bloggerDao.getByUserName(userName);
}

<li><span><a href="/index.html?typeId=1">Java宗旨根基(1)</a></span></li>

}

<li><span><a href="/index.html?typeId=2">Mysql(1)</a></span></li>

5.创建component

<li><span><a href="/index.html?typeId=3">Tomcat(1)</a></span></li>

package com.java1234.service.impl;

<li><span><a href="/index.html?typeId=10">jsoup(1)</a></span></li>

import java.util.List;

<li><span><a href="/index.html?typeId=7">shiro(1)</a></span></li>

import javax.servlet.ServletContext;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;

<li><span><a href="/index.html?typeId=9">webservice(2)</a></span></li>

import org.springframework.beans.BeansException;
import org.springframework.context.ApplicationContext;
import org.springframework.context.ApplicationContextAware;
import org.springframework.stereotype.Component;

<li><span><a href="/index.html?typeId=4">IT之路(3)</a></span></li>

import com.java1234.entity.Blogger;
import com.java1234.entity.Link;
import com.java1234.service.BloggerService;
import com.java1234.service.LinkService;

<li><span><a href="/index.html?typeId=5">随心生活(2)</a></span></li>

@Component
public class InitComponent implements ServletContextListener,ApplicationContextAware{

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

private static ApplicationContext applicationContext;

<div class="data_list">
<div class="data_list_title">
<img src="${pageContext.request.contextPath}/static/images/byDate_icon.png"/>
按日志日期
</div>
<div class="datas">
<ul>

public void contextInitialized(ServletContextEvent sce) {
ServletContext application=sce.getServletContext();
BloggerService bloggerService=(BloggerService) applicationContext.getBean("bloggerService");
Blogger blogger=bloggerService.find(); // 获取博主音信
blogger.setPassword(null);
application.setAttribute("blogger", blogger);

<li><span><a href="/index.html?releaseDateStr=2016年02月">2016年02月(11)</a></span></li>

LinkService linkService=(LinkService) applicationContext.getBean("linkService");
List<Link> linkList=linkService.list(null); // 查询全数的友情链接消息
application.setAttribute("linkList", linkList);
}

<li><span><a href="/index.html?releaseDateStr=2016年01月">2016年01月(1)</a></span></li>

public void contextDestroyed(ServletContextEvent sce) {
// TODO Auto-generated method stub

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

}

<div class="data_list">
<div class="data_list_title">
<img src="${pageContext.request.contextPath}/static/images/link_icon.png"/>
友情链接
</div>
<div class="datas">
<ul>

public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
this.applicationContext=applicationContext;
}

<li><span><a href="" target="_blank">Java知识分享网</a></span></li>

}

<li><span><a href="" target="_blank">百度云找出引擎</a></span></li>

6,在页面突显数据:

<li><span><a href="" target="_blank">小Logo下载</a></span></li>

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ";
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap3/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/blog.css">
<script src="${pageContext.request.contextPath}/static/bootstrap3/js/jquery-1.11.2.min.js"></script>
<script src="${pageContext.request.contextPath}/static/bootstrap3/js/bootstrap.min.js"></script>
<title>博主主页</title>
<style type="text/css">
body{
padding-top: 10px;
padding-bottom: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<img alt="java1234开源博客系统" src="${pageContext.request.contextPath}/staticlogo.png">
</div>
<div class="col-md-8">
<iframe style="float: right;" width="420" scrolling="no" height="60" frameborder="0" allowtransparency="true" src=";
</div>
</div>

<li><span><a href="" target="_blank">Java贴吧</a></span></li>

<div class="row">
<div class="col-md-12" style="padding-top: 10px">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><font color="black"><strong>首页</strong></font></a>
</div>

<li><span><a href="" target="_blank">免费logo在线制作</a></span></li>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#"><font color="black"><strong>关于博主</strong></font></a></li>
<li><a href="#"><font color="black"><strong>本站源码下载</strong></font></a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入要询问的重大字...">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>

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

<div class="row">
<div class="col-md-9">
<div class="data_list">
<div class="data_list_title">
<img src="${pageContext.request.contextPath}/staticlist_icon.png"/>
新式博客</div>

</div>
</div>

<div class="datas">
<ul>
<li style="margin-bottom: 30px">
<span class="date"><a href="${pageContext.request.contextPath}/blog/articles/52.html">2016年02月15日</a></span>
<span class="title"><a href="${pageContext.request.contextPath}/blog/articles/52.html">使用CXF开发WebService客户端</a></span>
<span class="summary">摘要: 前边大器晚成讲开拓了webservice服务器端接口,几天前的话,我们来开拓webservice顾客端,让大家来心得下进程;首先建三个Maven项目,项目名字,WS_Client;然后我们要用CXF给我们提供的工具wsdl2java 来依照需要的url生成客商端代码;wsdl2java工具在CXF开采包里;开荒下载地...</span>
<span class="img">

<div class="row">
<div class="col-md-12" >
<div align="center" style="padding-top: 120px" >
<span style="float: left;">Powered by <a href="" target="_blank">Java1234</a> V1.0</span>
Copyright © 二〇一三-二零一六 Java知识共享网 版权全数
</div>
</div>
</div>

<a href="/blog/articles/52.html"><img src="${pageContext.request.contextPath}/static/userImages/a.jpg" alt="1455539511890048174.jpg"></a>
  

</div>
</body>
</html>

<a href="/blog/articles/52.html"><img alt="QQ鎴浘20160215203213.jpg" src="${pageContext.request.contextPath}/static/userImages/b.jpg" title="1455539700734093102.jpg" width="667" height="264" style="width: 667px; height: 264px;"></a>
  

<a href="/blog/articles/52.html"><img alt="QQ鎴浘20160215203317.jpg" src="${pageContext.request.contextPath}/static/userImages/c.jpg" title="1455539761187019902.jpg"></a>
  

</span>
<span class="info">发表于 2016-02-15 21:06 阅读(71) 评论(5) </span>

</li>
<hr style="height:5px;border:none;border-top:1px dashed gray;padding-bottom: 10px;" />

<li style="margin-bottom: 30px">
<span class="date"><a href="${pageContext.request.contextPath}/blog/articles/52.html">2016年02月15日</a></span>
<span class="title"><a href="${pageContext.request.contextPath}/blog/articles/52.html">使用CXF开发WebService客户端</a></span>
<span class="summary">摘要: 前边豆蔻梢头讲开辟了webservice服务器端接口,明日的话,大家来开荒webservice客商端,让大家来心得下进程;首先建贰个Maven项目,项目名字,WS_Client;然后大家要用CXF给大家提供的工具wsdl2java 来依据诉求的url生成客户端代码;wsdl2java工具在CXF开荒包里;开采下载地...</span>
<span class="img">

<a href="/blog/articles/52.html"><img src="${pageContext.request.contextPath}/static/userImages/a.jpg" alt="1455539511890048174.jpg"></a>
  

<a href="/blog/articles/52.html"><img alt="QQ鎴浘20160215203213.jpg" src="${pageContext.request.contextPath}/static/userImages/b.jpg" title="1455539700734093102.jpg" width="667" height="264" style="width: 667px; height: 264px;"></a>
  

<a href="/blog/articles/52.html"><img alt="QQ鎴浘20160215203317.jpg" src="${pageContext.request.contextPath}/static/userImages/c.jpg" title="1455539761187019902.jpg"></a>
  

</span>
<span class="info">发表于 2016-02-15 21:06 阅读(71) 评论(5) </span>

</li>
<hr style="height:5px;border:none;border-top:1px dashed gray;padding-bottom: 10px;" />

<li style="margin-bottom: 30px">
<span class="date"><a href="${pageContext.request.contextPath}/blog/articles/52.html">2016年02月15日</a></span>
<span class="title"><a href="${pageContext.request.contextPath}/blog/articles/52.html">使用CXF开发WebService客户端</a></span>
<span class="summary">摘要: 前边生龙活虎讲开辟了webservice服务器端接口,前几天的话,大家来支付webservice客商端,让我们来体验下进程;首先建多个Maven项目,项目名字,WS_Client;然后我们要用CXF给大家提供的工具wsdl2java 来依照央浼的url生成顾客端代码;wsdl2java工具在CXF开垦包里;开采下载地...</span>
<span class="img">

<a href="/blog/articles/52.html"><img src="${pageContext.request.contextPath}/static/userImages/a.jpg" alt="1455539511890048174.jpg"></a>
  

<a href="/blog/articles/52.html"><img alt="QQ鎴浘20160215203213.jpg" src="${pageContext.request.contextPath}/static/userImages/b.jpg" title="1455539700734093102.jpg" width="667" height="264" style="width: 667px; height: 264px;"></a>
  

<a href="/blog/articles/52.html"><img alt="QQ鎴浘20160215203317.jpg" src="${pageContext.request.contextPath}/static/userImages/c.jpg" title="1455539761187019902.jpg"></a>
  

</span>
<span class="info">发表于 2016-02-15 21:06 阅读(71) 评论(5) </span>

</li>
<hr style="height:5px;border:none;border-top:1px dashed gray;padding-bottom: 10px;" />

</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="data_list">
<div class="data_list_title">
<img src="${pageContext.request.contextPath}/staticuser_icon.png"/>
博主音讯
</div>
<div class="user_image">
<img src="${pageContext.request.contextPath}/static/userImages/${blogger.imageName}"/>
</div>
<div class="nickName">${blogger.nickName}</div>
<div class="userSign">(${blogger.sign})</div>
</div>

<div class="data_list">
<div class="data_list_title">
<img src="${pageContext.request.contextPath}/staticyType_icon.png"/>
按日志种类
</div>
<div class="datas">
<ul>

<li><span><a href="/index.html?typeId=1">Java核心底子(1)</a></span></li>

<li><span><a href="/index.html?typeId=2">Mysql(1)</a></span></li>

<li><span><a href="/index.html?typeId=3">Tomcat(1)</a></span></li>

<li><span><a href="/index.html?typeId=10">jsoup(1)</a></span></li>

<li><span><a href="/index.html?typeId=7">shiro(1)</a></span></li>

<li><span><a href="/index.html?typeId=9">webservice(2)</a></span></li>

<li><span><a href="/index.html?typeId=4">IT之路(3)</a></span></li>

<li><span><a href="/index.html?typeId=5">随心生活(2)</a></span></li>

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

<div class="data_list">
<div class="data_list_title">
<img src="${pageContext.request.contextPath}/staticyDate_icon.png"/>
按日志日期
</div>
<div class="datas">
<ul>

<li><span><a href="/index.html?releaseDateStr=2016年02月">2016年02月(11)</a></span></li>

<li><span><a href="/index.html?releaseDateStr=2016年01月">2016年01月(1)</a></span></li>

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

<div class="data_list">
<div class="data_list_title">
<img src="${pageContext.request.contextPath}/staticlink_icon.png"/>
友情链接
</div>
<div class="datas">
<ul>
<c:forEach var="link" items="${linkList }">
<li><span><a href="${link.linkUrl }" target="_blank">${link.linkName }</a></span></li>
</c:forEach>

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

</div>
</div>

<div class="row">
<div class="col-md-12" >
<div align="center" style="padding-top: 120px" >
<span style="float: left;">Powered by <a href="" target="_blank">Java1234</a> V1.0</span>
Copyright © 二零一二-二零一五 Java知识分享网 版权全部
</div>
</div>
</div>

</div>
</body>
</html>

 

本文由pc28.am发布于pc28.am神测网,转载请注明出处:博客首页搭建,静态化页面

上一篇:FPGA全程进级,怎么着进行SI仿真 下一篇:没有了
猜你喜欢
热门排行
精彩图文