样式与布局

前一章中，我们已经完成了一个todos应用的最基础的功能，但不可否认的是，这个应用看起来太简陋了，几乎没有任何吸引力，而很明显，我们想要开发一个应用的目的就是让人来使用它，哪怕仅仅是自己使用（好惨），也喜欢有一个赏心悦目的ui吧

下面我们想要实现的效果如下：

• 一个精美，显眼的输入框，用于新建清单或者为已有清单增加待办事项
• 输入框居中，并且使用框体增加用户注意力

实现这个目标，并不是很简单的事，尤其是假定还要使用手机，平板电脑等设备来访问，所以，对于我这种懒人来说，最好的方法是使用css框架，目前css框架有很多，比如赫赫有名的Bootstrap,但毕竟Bootstrap使用的太广泛了，难免有千篇一律之嫌，所以就此考虑，使用了一个占有率稍小的前端框架：Semantic UI。

Semantic UI也可以使用Bootstrap提供的cdn来获取，在页面头部增加cdn的引用：

<link href="https://cdn.bootcss.com/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet">

当然，实际项目中可不能这么干，有个好的UI设计和前段开发还是很必要的，因为即使占有率不让Bootstrap那么高，用户也立刻就能看出你使用的默认的样式，给人一种你甚至连自己定制都懒得动的感觉：(

下面使用Semantic UI的强大功能对页面进行一下修改(这里强烈建议看一下Semantic UI文档)：

<div class="ui two column centered relaxed  grid">
    <div class="column row"></div>
    <div class="column ">
        <h2 class="ui huge header center violet aligned">jTodos!</h2>
        <div class="ui raised segment">
            <form action="index.jsp" method="post"  class="ui fluid action input">
                <input type="text" name="todo" placeholder="请输入一个备忘录项目">
                <button type="submit" class="ui button">OK</button>
            </form>
            <div class="ui aligned huge selection divided list">
                <c:forEach var="item" items="${todos}">
                    <div class="item">
                            <span class="header">${status.index+1}.${item}</span>
                    </div>
                </c:forEach>
            </div>
        </div>
    </div>
</div>

这段html中可以看出SemanticUI的特点，就是采用多种css类组合的方式，强调不同的css类的服用，这段代码最后执行的页面效果如下：

注意：此处严禁吐槽配色！！！

数据模型

对于一个todos来说，现在我假设你希望知道你这个idea的迸发时间，也就是item项发出创建的时间，这时候，就会发现单纯的使用字符串已经满足不了需求了，这时候，就轮到数据模型出场了。
一般来说，项目中会把数据模型统一管理，这里我们也来创建一个单独用于数据模型管理的包

此处不同版本的IntelliJ Idea的显示会不同

首先找到项目的main文件夹，在文件夹下创建java文件夹用来放置代码文件，但此时java文件夹为普通文件夹，需要把他修改为idea可识别的代码文件夹，修改方式如下：
修改前：

然后依次选择 file->Project Structure,
在弹出的窗体中选择java文件夹：

选择java文件夹，然后设置为Sources模式：

然后点击apply，最后点击ok，即可设置完成。

再次强调，此操作与Intellij Idea的版本有关，如果你的版本默认自带代码文件夹，则不需要此步骤。

完成准备工作，我们开始创建模型所在的包，以方便对数据模型的管理，包名一般都为域名的逆序，以保证唯一性，这里包名为：

com.niufennan.jtodos.models

然后创建一个数据类，暂时命名Todo，只做简单的演示，这里类中只有三个字段以及相应的封装，这个类的源代码如下：

package com.niufennan.jtodos.models;
import java.util.Date;
public class Todo {
    private int id;
    private String item;
    private Date createTime;
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getItem() {
        return item;
    }
    public void setItem(String item) {
        this.item = item;
    }
    public Date getCreateTime() {
        return createTime;
    }
    public void setCreateTime(Date createTime) {
        this.createTime = createTime;
    }
}

这样，每次新增的就不再是一个字符串项，而是一个Todo的数据模型，也就是所谓的一个javabean了。

修改代码如下：

<%
    request.setCharacterEncoding("utf-8");
    List<Todo> todos=(List<Todo>) application.getAttribute("todos");
    if(todos==null){
        todos=new ArrayList<>();
        application.setAttribute("todos",todos);
    }
    if(request.getParameter("todo")!=null){
        Todo todo=new Todo();
        todo.setCreateTime(new Date());
        todo.setItem(request.getParameter("todo"));
        todos.add(todo);
    }
%>

html模板部分修改为：

<c:forEach var="todo" varStatus="status" items="${todos}">
    <div class="item">
        <span class="header">${status.index+1}.${todo.item}</span>
    </div>
</c:forEach>

运行，效果入下：

与之前一模一样。

注意，这种随便改变数据类型的方法，为开发中大大忌，在实际开发中是严禁禁止的行为，但这篇blog为了照顾各个知识点，所以并未从开始进行整体架构设计，以后这种修改数据类型的行为会经常发生。
在此强调一遍，此为开发中的大忌，要严格禁止。

但是，你可能发现了，并没有出现这个todo项创建的时间呀，下面我们把创建时间写入数据模板，修改的代码如下：

 <c:forEach var="todo" varStatus="status" items="${todos}">
    <div class="item">
        <span class="right floated content">${todo.createTime}</span>
        <span class="left floated header">${status.index+1}.${todo.item}</span>
    </div>
</c:forEach>

显示效果为：

效果很明显，显示上符合了要求，但是，日期的格式很明显是错误的呀，这时候要对日期格式进行修改，就牵扯到在jsp中书写java方法，jsp中写java方法也很简单,写在代码框<%! code %>中即可，注意前边的!,实际代码如下：

<%!
    private String formatDate(Date date){
        SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String dateString = formatter.format(date);
        return dateString;
    }
%>

页面调用的方式如下：

<%
      for (int i=0;i<todos.size();i++) {
  %>
  <div class="item">
      <span class="right floated content"><%= formatDate(todos.get(i).getCreateTime())%></span>
      <span class="left floated header"><%=i+1%>.<%=todos.get(i).getItem()  %></span>
  </div>
  <%
      }
  %>

执行结果如下：

但是，你可能注意到了，我们又回到了html中嵌入代码的老路，这是因为jstl和java代码的调用问题，难道就不能不适用这种嵌入的方法么，答案是当然可以，jstl也提供了日期格式化的方式，首先在页面顶部引入前缀：

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

然后jstl下模板的写法：

<c:forEach var="todo" varStatus="status" items="${todos}">
  <div class="item">
      <span class="right floated content"><fmt:formatDate value="${todo.createTime}" type="date" pattern="yyyy-MM-dd HH:mm:ss"/></span>
      <span class="left floated header">${status.index+1}.${todo.item}</span>
  </div>
 </c:forEach>

注意pattern参数.

运行一下，显示的结果应该是与之前没有任何差别.

然后，就可以开开心心的把原来的格式化方法删除了.

本章的也将告于段落,从下一章开始,就会进入servlet和模块化的javabean的世界,难度应该会增加不少,不管怎么说,感谢您的阅读.

注意:本章第三次提醒!!!
Blog仅仅是为了介绍知识点,在实际项目中严禁使用这里使用的一些编码方式,对于由此产生的任何后果,本blog概不负责!!!

感谢您的阅读