[JavaScript知识库]前端小结1

1. 引入bootstrap

<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

2. 表格组件的代码

<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column" >
            <table class="table table-hover table-striped">
                <thead>
                    <tr>
                        <th>书籍编号</th>
                        <th>书籍名称</th>
                        <th>书籍类型</th>
                        <th>书籍数量 </th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <c:forEach var="book" items="${books}">
                        <tr>
                            <td>${book.id}</td>
                            <td>${book.name}</td>
                            <td>${book.type}</td>
                            <td>${book.count}</td>
                            <td>
                                <a href="${pageContext.request.contextPath}/toUpdatePage/${book.id}">修改</a>
                                &nbsp; | &nbsp;
                                <a href="${pageContext.request.contextPath}/deleteBook/${book.id}">删除</a>
                            </td>
                        </tr>
                    </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</div>

?其中，最外层的div的class要为container，这样里面的元素可以引用bootstrap的组件。class="row clearfix"?表示不受其他样式控制，是非常独立的设置。class="col-md-12 column"表示将该div占12份（bootstrap默认将屏幕分为12等份）。使用table标签，class要带上table，表示使用bootstrap的table样式，table-hover，table-striped表示表格有条纹且隔行变色。a标签的跳转链接href属性值要带上${pageContext.request.contextPath}/，表示项目的url固定前缀。使用c:forEach标签循环遍历集合中的元素，集合变量名用于item属性，循环时的变量名用var属性值表示。另外，使用c:forEach标签需要在jsp文件前加上：

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

引入上述代码可能会报错Cannot resolve taglib with uri http://java.sun.com/jsp/jstl/core，引入两个pom依赖即可解决：

<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
    <version>1.2</version>
</dependency>

<dependency>
    <groupId>org.apache.taglibs</groupId>
    <artifactId>taglibs-standard-impl</artifactId>
    <version>1.2.5</version>
    <scope>runtime</scope>
</dependency>

3. 表单组件的代码

<form action="${pageContext.request.contextPath}/updateBook" method="post">
    <div class="form-group" hidden>
        <input type="text" name="id" class="form-control" value="${book.id}" required>
    </div>
    <div class="form-group">
        <label>书籍名称: </label>
        <input type="text" name="name" class="form-control" value="${book.name}" required>
    </div>
    <div class="form-group">
        <label>书籍类型: </label>
        <input type="text" name="type" class="form-control" value="${book.type}" required>
    </div>
    <div class="form-group">
        <label>书籍数量: </label>
        <input type="text" name="count" class="form-control" value="${book.count}" required>
    </div>
    <div class="form-group">
        <input type="submit" class="form-control" value="确定" required>
    </div>
</form>

4. 样式编写

在jsp文件的head中编写style标签：

<style>
    .container{
        border:8px solid #F00
    }
    .table{
        border:2px solid #ff0000
    }
</style>

这里的样式表示class为container的组件的边框是8px厚度的红线，class为table的组件的边框是2px厚度的红线

5. 模糊搜索时，使用 ${...} 代替 #{...}

select * from book where name like '%${name}%'

6. 更新实体（比如User、Book等）时，请求的链接不需要带上一堆实体的属性参数，相应的Controller类中的方法只要入参为实体对象即可，因为前端页面中的表单提交后，会自动产生一个实体对象（如果各个字段和输入框都能对应上的话），注意前端页面不要忘记加上一个隐藏的id文本框/输入框组件，因为更新操作的sql语句的条件一般是where id = #{id}。