【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第十节)1. 详情页面的布局2. 从主页面到详情页面的跳转问题

本节主要讲解详情页的页面布局和css样式,以及从主页面到详情页面的跳转问题。

1. 详情页面的布局

页面布局的话,我还是习惯先把静态页面做出来,确保没问题了,然后再跟后台对接。

在实际的开发过程中,静态页面一般是美工或者前端工程师负责,后台工程师主要关心如何把Java层的数据贴到静态页面。(虽然我经历的几个公司都是自己一个人全包了。。。)

之前我已经把我个人绘制静态页面的过程,还有自己的思路写出来了,所以从本节开始,我不会再写得那么详细,而是根据页面效果来简明扼要地介绍一下。

我绘制页面的一般流程,就是先在脑子里形成一个大概的模样,就是搞清楚到底要画一个怎样的页面?甚至还可以弄个草图,然后根据草图来逐步写html和css代码。

首先是搭骨架,骨架就是html代码。

搭好了骨架,才是添加css代码的时候。

我个人绘制页面,都是遵循这样一个流程。

好了,先看看效果:

1.gif

页面布局简图:

Paste_Image.png

第一部分,是文章的展示区域。

html骨架

<!-- 内容区 -->
<div class='article'>
    <div class='title'>文章标题</div>
    <div class='category'><span class='light-font'>分类:</span><span class='info'>编程代码类</span></div>
    <div class='publicDate'><span class='light-font'>发布时间:</span><span class='info'>2016-10-27</span></div>
    <hr/>
    <div class='content'>
        <p>初学javascript的人,都会接触到一个东西叫做闭包,听起来感觉很高大上的。网上也有各种五花八门的解释,其实我个人感觉,没必要用太理论化的观念来看待闭包。

        <p>事实上,你每天都在用闭包,只是你不知道罢了。
        
        <p>比如:
        
        var cheese = '奶酪';
        
        var test = function(){
            alert(cheese);
        }
        OK,你已经写了一个闭包。
        
        <p>函数也是一个数据类型</p>
        <p>变量 cheese 是在全局作用域中的一个变量,当你创建了一个 test 函数,那么,test 和 cheese 就共享一个全局作用域。</p>
        
        <p>你要额外明白的一点是,在js中,函数和变量本质上是一个东西。函数也是一个数据类型。</p>
        
        <p>从上面的定义中也能看出来这一点。你要是不相信的话,我们来看一下咯。</p>
        
        <p>alert(cheese);</p>
        <p>alert(test);</p>
        
        <p>Paste_Image.png</p>
        
        <p>Paste_Image.png</p>
        <p>让我们再来看看 test 和 cheese各是什么类型:</p>

    </div>
</div>

文章内容都是一些测试数据

展示一篇文章,包含这篇文章的标题,分类和发布时间,当然还有作者信息。

首先是文章标题,它就是一个div,没什么大不了的。不要把它想得太复杂了。

<div class='title'>文章标题</div>

标题的css:

.article .title {
    text-align: center;
    font-size: 28px;
    color: #565353;
    letter-spacing: 2px;
    margin-top:20px;
}

文字居中:

text-align: center;

这句话能让这个div里面的文字居中显示,所以你才能看到这个居中效果:

Paste_Image.png

标题的字体肯定不能太小了,所以我先给它一个28px。

font-size: 28px;

我觉得字体太黑了不好看,就把颜色稍微调淡了一些。

color: #565353;

接着是字间距,我们不希望每个字都紧凑得挤在一起,所以让字与字之间稍微空开一点。

letter-spacing: 2px;

这表示空开2个px。

letter-spacing真的可以做到,有图为证。

1.gif

向上的间距也要调大一点,不然紧紧贴着标题栏肯定不好看。

margin-top:20px;

就20个px吧。

Paste_Image.png

这样就差不多了。

接下来是这一块。

Paste_Image.png

可以看到,两边的颜色是不一样的。很显然,我肯定是给他们分别加了样式。

<div class='category'><span class='light-font'>分类:</span><span class='info'>编程代码类</span></div>
<div class='publicDate'><span class='light-font'>发布时间:</span><span class='info'>2016-10-27</span></div>

结构如图:

Paste_Image.png

为了分别控制左右两边的字体样式,我在外层div中嵌套了两个span,给他们分别加上不同的样式。

对应的css样式

.article .light-font{
    font-size:14px;
    color:#666;
}

.article .info{
    font-size:14px;
    color:#3c3a3a;
}

文章区域,我主要给里面的 P 标签加了样式:

.article .content p{
    text-indent:2em;
    margin-bottom:20px;
    font-family: 微软雅黑;
}

接下来演示一下层级关系:

Paste_Image.png

Paste_Image.png

Paste_Image.png

文章中的每一个段落,对应一个P标签,我给这些P标签加上特定的样式,包括首行缩进,底外边距,还有字体。

先这么简单弄一下吧,有个样子就行了。

至于作者信息的展示区,也是比较简单的,我就放了一个头像和作者名称。

Paste_Image.png

html

<div class='right mt32'>
    <div class='author'>
    <img src='${basePath}/static/img/1.jpg' class='header_pic' width='90' height='90'></img>
    作者:张三
    </div>
</div>

可见,头像和作者名称都是放在一个div里面的,这个div有一个叫做 right 的css属性。

Paste_Image.png

头像部分我用了一个相对定位

Paste_Image.png

最后是评论区:

Paste_Image.png

Paste_Image.png

剩下的具体评论是一个个p标签,就不一一细说了。

评论区html代码:

<!-- 评论区 -->
<div class='commentBox'>
    <textarea class="comment_input" id="commenttxt" placeholder="请输入评论信息(600)..." maxlength="600"></textarea>
          <input type="button" value="保存评论" class="button">
</div>
<div class='clearfix'></div>
<br/><hr/>
<div class='mb64' class="comment_list">
    <div class="comment_infor clearfix">
        <div style='border-bottom:1px solid #ccc' class="comment_word">
             <p style='border-bottom:20px solid #fff'>${comment.username}dwedewffrg 说:</p>
             <p class='mb32'>内容不错,感谢分享!</p>
         </div>
    </div>
</div>

2. 从主页面到详情页面的跳转问题

我们的首页会展示出不同分类的文章列表,每一篇文章都有一个封面,我们通过点击封面进入文章的详情页。

Paste_Image.png

这个时候,我们先来看看,当初是怎么把数据库里面的文章展示在首页的?

Paste_Image.png

原来,我们在index.jsp中,写过如下代码:

<% ArticleService articleService = new ArticleService(); %>

然后调用了 articleServicegetArticlesByCategoryId 方法。

<%
    //查询出编程代码类的相关文章
    List<Map<String,Object>>  articles2 = articleService.getArticlesByCategoryId(2, 0, 6);
    pageContext.setAttribute("articles2", articles2);
%>

默认查出来前六条数据。

如果没看明白的话,可以去回顾之前的章节,这里就不再赘述了。

好的,继续。

articles2 是一个list,拿到这个list之后,我们立即把它放在了pageContext里面,这样的话,我们在当前页面就能够访问到这个list了。

像这样:

<div class='category'>
    <div class='title'>编程代码类</div>
    <ul class='items'>
        <c:forEach items="${articles2}" var="item">
            <li class='item' onclick="detail('${item.id}');">
                <div class='item-banner'>
                    <div class='item-header'>${item.header}</div>
                    <div class='item-name' title = "${item.name}">${item.name}</div>
                    <div class='item-author'>@${item.author} 著</div>
                </div>
                <div class='item-description'>${item.description}</div>
            </li>
        </c:forEach>
        <div style='clear:both'></div>
    </ul>
</div>

我们要通过这个封面打开详情页,是不是需要一个点击事件呢?

因为我这边使用了onclick属性,所以我单独写了一个 detail 方法:

//打开详情页
function detail(id){
    var a = document.createElement("a");
    a.href = "detail.jsp?id=" + id; 
    console.log(a);
    a.target = '_new'; //指定在新窗口打开
    a.click();//触发打开事件
}

在detail方法里,我直接创造了一个a标签,目标地址指向了detail.jsp,并且使用get方式传递了一个参数,也就是文章的id。最后,手动触发了点击事件。

因为需要在detail.jsp中,从后台查出文章的具体内容,我们必然通过id去查。所以,我们需要给详情页传递一个id。

Paste_Image.png

我们这一章先不管怎么去后台查,先确保能把文章id传递到详情页再说。

当我们点击文章列表中的某一条数据,进入详情页的时候,会发现url地址栏就带了id。

比如: http://localhost:8080/Article/detail.jsp?id=ddc0136f-7bf5-41ed-ba6f-462d370afbe4

点击不同的文章,后面跟的id是不同的。这样就说明id的传递已经没问题了。

好的,这一章先到这里,下一节开始写详情页的业务代码。

我要下载源码

您的支持是我写作的最大动力:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端杂货铺

关于首屏时间采集自动化的解决方案

关于首屏 首屏时间是指从转向该页面到屏幕中该页面所有内容都可见时的时间。已经有太多的关于首屏时间的计算,在本文中并不重复阐述这些已经被提出或者实现的方案,而旨...

66570
来自专栏极客慕白的成长之路

React . js 是怎样炼成的?

内容整理自 2014 年的 OSCON - React Architecture by vjeux(https://speakerdeck.com/vjeux/...

17040
来自专栏IT大咖说

解读移动端的跨平台开发:TypeScript + Angular

摘要 Google技术经理陈亮将为大家介绍TypeScript和Angular是什么以及如何利用TypeScript和Angular进行移动端的跨平台介绍。 ?...

43780
来自专栏企鹅号快讯

前端工程师面试题汇总

作者:@markyun markyun.github.io/2015/Front-end-Developer-Questions/ HTML Doctype作用...

31780
来自专栏我和我大前端的故事

2018 我所了解的 Vue 知识大全(一)

Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的...

11330
来自专栏前端侠2.0

Angular Elements 组件在非angular 页面中使用的DEMO

      Angular Elements 是伴随Angular6.0一起推出的新技术。它借助Chrome浏览器的ShadowDom  API,实现一种自定义...

42120
来自专栏Web行业观察

移动前端兼容操作总结

手机设备屏幕尺寸不一,做移动端的Web页面,需要考虑在安卓/IOS的各种尺寸设备上的兼容,这里总结的是针对移动端设备的页面,设计与前端实现怎样做能更好地适配不同...

27230
来自专栏编程微刊

仿百度排列图片预览插件-Simple Lightbox

很久以前遇到过这样的一个面试题,要求手写代码,实现百度图片的排列预览,并且可以左右点击查看下一张照片,当时没有做出来,这个问题也就一直放在了脑后,工作之后,遇到...

24020
来自专栏九彩拼盘的叨叨叨

Web 前端菜鸟源码阅读列表

阅读优秀源码的好处有好多,如能学习一些技术知识,编码技巧,组织代码的方式,提高理解能力等等。

9610
来自专栏编程软文

H5混合开发二维码扫描以及调用本地摄像头

1.2K30

扫码关注云+社区

领取腾讯云代金券