編碼的世界 / 優質文選 / 歷史

利用Intellij+MAVEN搭建Bootstrap+Spring+Mybatis+MySql+SpringMVC項目詳解

2022年7月18日
-   

 利用Intellij+MAVEN搭建Bootstrap+Spring+Mybatis+MySql+SpringMVC項目詳解
在前篇文章中http://blog.csdn.net/noaman_wgs/article/details/53893948，已經利用Intelli+MAVEN搭建成功了Spring+Mybatis+SpringMVC+Mysql的小項目，本篇文章繼續完善，加入Bootstrap前端框架，使顯示頁面更加美觀。
關於Bootstrap就不多做介紹了，我也是第一次使用，可以參看這個http://v3.bootcss.com/css/#tables。
1 導入Bootstrap包
Bootstrap包不需要在MAVEN的pom.xml中導入，只需下載一個Bootstrap的jar包，然後直接放入項目中即可。在IntelliJ中，我是直接粘貼到webapp下（注意，不是WEN-INF下）。


2  jsp頁面內調用Bootstrap樣式
在顯示頁面中，引入這個包，這裏要注意獲取Bootstrap路徑的問題，即：
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

     
我這裏比較簡單，可參看這篇bloghttp://blog.csdn.net/u010890358/article/details/53463543。
然後就可以直接調用Bootstrap定義的樣式了，如修飾table,就可直接使用,class後內容即為樣式。
可參考http://v3.bootcss.com/css/#tables內容。
<table class="table table-striped">

code:
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
 Created by IntelliJ IDEA.
 User: wanggenshen_sx
 Date: 2016/12/26
 Time: 17:25
 To change this template use File | Settings | File Templates.
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<head>
 <title>Show Page22</title>
 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>23
 <h2>Employee List</h2>
 <table class="table table-striped" border="1" cellspacing="0" cellpadding="10">
 <tr class="success">
 <th>ID</th>
 <th>LastName</th>





 <th>Email</th>
 </tr>
 <c:forEach items="${requestScope.employees}" var="emp">
 <tr class="danger">
 <td>${emp.id}</td>
 <td>${emp.lastName}</td>
 <td>${emp.email}</td>
 </tr>
 </c:forEach>
 </table>
</body>
</html>

3 成功：


源碼地址：https://github.com/nomico271/SpringMVCBootstrap

熱門文章