一. VelocityTools介紹
1.1 VelocityTools簡介
Velocity Tools 是 Velocity模板引擎的一個子項目，用於將 Velocity 與 Web開發環境集成的工具包。
1.2 VelocityTools的組成
VelocityTools項目分為兩個部分：GenericTools和VelocityView .
- GenericTools :
GenericTools是一組類，它們提供在標准Velocity項目中使用工具的基本基礎結構，以及在通用Velocity模板中使用的一組工具。例如 : DateTool、NumberTool和RenderTool很多其他可用的工具 - Velocity view : 包括所有的通用工具結構和在web應用程序的視圖層中使用Velocity的專用工具。這包括用於處理Velocity模板請求的
VelocityViewServlet或VelocityLayoutServlet、用於在JSP中嵌入Velocity的VelocityViewTag和用於在Velocity模板中嵌入JSP標記庫的Maven插件。這里流行的工具是LinkTool和ParameterTool。
二. GenericTools使用
2.1 GenericTools介紹
GenericTools : GenericTools是一組類，它們提供在標准Velocity項目中使用工具的基本基礎結構，以及在通用Velocity模板中使用的一組工具。
簡單來說, GenericTools就是Velocity官方提供的一組可以在模板中使用的工具類庫
2.2 GenericTools環境搭建
2.2.1 創建項目
2.2.2 導入依賴
<dependencies>
<dependency>
<groupId>org.apache.velocity</groupId>
<artifactId>velocity-engine-core</artifactId>
<version>2.2</version>
</dependency>
<dependency>
<groupId>org.apache.velocity.tools</groupId>
<artifactId>velocity-tools-generic</artifactId>
<version>3.0</version>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.1</version>
<configuration>
<source>11</source>
<target>11</target>
<encoding>utf-8</encoding>
</configuration>
</plugin>
</plugins>
</build>
2.2.3 創建模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
當前時間 : $date.get('yyyy-MM-dd HH:mm:ss')
</body>
</html>
2.2.4 編寫配置
<?xml version="1.0" encoding="UTF-8"?>
<tools>
<toolbox scope="application">
<tool class="org.apache.velocity.tools.generic.DateTool"></tool>
</toolbox>
</tools>
2.2.5 輸出數據
@Test
public void test1() throws IOException {
// 創建引擎
VelocityEngine ve = new VelocityEngine();
// 設置模板加載路徑，這里設置的是class下
ve.setProperty(Velocity.RESOURCE_LOADER, "class");
ve.setProperty("class.resource.loader.class", "org.apache.velocity.runtime.resource.loader.ClasspathResourceLoader");
// 進行初始化操作
ve.init();
// 加載toolbox
ToolManager manager = new ToolManager();
manager.configure("configuration.xml");
// 加載模板，設定模板編碼
Template tpl = ve.getTemplate("vms/demo1.vm", "UTF-8");
// 設置初始化數據
Context context = manager.createContext();
context.put("now", new Date());
FileWriter fw = new FileWriter("D:\\work\\workspace\\velocity\\velocity_tools_01\\src\\main\\resources\\html\\demo1.html");
//合並數據到模板
tpl.merge(context, fw);
//釋放資源
fw.close();
}
2.3 工具類及案例
格式化工具類的主要作用就是對數據進行格式化之后輸出 , 例如 : 日期格式化 , 數字格式化等 , GenericTools提供的工具類有很多 , 隨着時間的推移很多工具類已經過期, 有更好更安全的替代方案, 這里我們僅僅介紹一些常用工具類
2.3.1 DateTool
DateTool用於訪問和格式化日期以及格式化Date和Calendar對象。該工具還可以用於在各種日期類型之間進行轉換。
模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
年 : $date.getYear()
月: $date.getMonth()
日: $date.getDay()
當前時間 : $date.format($now)
當前時間 : $date.format("yyyy-MM-dd HH:mm:ss",$now)
當前時間 : $date.get('yyyy-MM-dd HH:mm:ss')
</body>
</html>
配置
<toolbox scope="application">
<tool key="date" class="org.apache.velocity.tools.generic.DateTool" format="yyyy-MM-dd"></tool>
</toolbox>
格式基本上是固定的 ,
代表配置一個工具盒 , 里面可以配置很多個工具 <tool>, 這些表情上的屬性有很多
- scope : 此工具的作用范圍 ,
request，session或application。- key : 此工具映射到的上下文鍵。列入當前key是date , 那么在模板中既要使用
$date來使用工具 , 從VelocityTools 2開始，工具箱可以根據其類名自動確定工具的key。一個名為org.com.FooTool的工具將在模板中分配鍵$foo，名為org.com.FooBarTool的工具為$ fooBar，一個名為org.com.FooBar的工具也為$ fooBar。- class : 指定工具類的完全限定路徑
- format : 在使用DateTool工具的時候, 指定時間日期格式化得格式
2.3.2 NumberTool
NumberTool用於訪問和格式化任意數值類型對象。該工具還可以用於檢索NumberFormat實例或與各種數字類型進行相互轉換。
模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
原始數據 : $myNumber
格式化 : $number.format($myNumber)
取整 : $number.integer($myNumber)
</body>
</html>
配置
<toolbox scope="application">
<tool key="number" class="org.apache.velocity.tools.generic.NumberTool" />
</toolbox>
2.3.3 MathTool
MathTool用於在Velocity中執行數學運算。
模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
num1+num2 : $math.add($num1,$num2);
num1-num2 : $math.sub($num1,$num2);
num1*num2 : $math.mul($num1,$num2);
num1/num2 : $math.div($num1,$num2);
向上取整 : $math.ceil($math.div($num1,$num2))
向下取整 : $math.floor($math.div($num1,$num2))
四舍五入 : $math.roundTo(2,$math.div($num1,$num2)) ## 第一個參數保留的位數 , 第二個參數運算的值
</body>
</html>
配置
<toolbox scope="application">
<tool key="math" class="org.apache.velocity.tools.generic.MathTool" />
</toolbox>
2.3.4 DisplayTool
用於控制數據顯示和隱藏 , 以及數據格式的處理
模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
## list方法用於展示數據或集合中的數據 , 默認的展示格式為 A, B and C
默認輸出格式 : $display.list($list)
使用,分割輸出 : $display.list($list,",")
## truncate方法用於字符串截取 , 默認截取30個長度
字符串截取, 默認30個長度 : $display.truncate("truncate方法用於字符串截取默認截取30個長度")
字符串截取, 給定20個長度 : $display.truncate("truncate方法用於字符串截取默認截取30個長度",20)
字符串截取, 給定20個長度 : $display.truncate("truncate方法用於字符串截取默認截取30個長度",20,"")
## alt方法用於判斷給定的數據是否為空 , 如果為空展示第二個參數 , 如果不為空展示數據本身
不為空：$display.alt($num1,"num1不為空")
為空：$display.alt($num3,"num3為空")
</body>
</html>
配置
<toolbox scope="application">
<tool key="display" class="org.apache.velocity.tools.generic.DisplayTool"/>
</toolbox>
2.3.5 EscapeTool
用於對一些特殊字符進轉義處理 , 例如 $ , # , & 等...
模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
$velocity
$esc.velocity($velocity)
$html
$esc.html($html)
$url
$esc.url($url)
$esc.unurl($esc.url($url))
$esc.dollar ## $
$esc.d ## $
$esc.hash ## #
$esc.h ## #
$esc.backslash ## \
$esc.b ## \
$esc.quote ## "
$esc.q ## "
$esc.singleQuote ## '
$esc.s ## '
$esc.exclamation ## !
$esc.e ## !
</body>
</html>
配置
<toolbox scope="application">
<tool key="esc" class="org.apache.velocity.tools.generic.EscapeTool"/>
</toolbox>
2.3.6 FieldTool
作用 : 用於訪問類中定義public修飾的靜態常量
常量類
定義MyConstants常量類
package com.itheima.constants;
public class MyConstants {
public static String COUNTER_NAME = "COUNTER";
}
定義Counter常量類
public class Counter {
public static Integer MAX_VALUE = 100 ;
public static Integer MIN_VALUE = 100 ;
}
模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
## 訪問在配置中定義的靜態常量
獲取MyConstants中的常量 : $field.COUNTER_NAME
## 通過一個類中的常量
獲取Counter類中的量 : $field.in("com.itheima.counter.Counter").MAX_VALUE
## 傳入一個對象的實例 , 通過對象的實例獲取其類中定義的常量
獲取日歷對象中的YEAR常量 : $field.in($calender).YEAR
## 默認情況下, 當我們查找了一個類的常量之后, 這個類回保存在FieldTool工具中, 可以直接獲取下一個常量
獲取日歷對象中的DATE常量 : $field.DATE ## 因為之前已經獲取過 , 所以可以直接獲取
</body>
</html>
配置
<toolbox scope="application">
<tool key="field" class="org.apache.velocity.tools.generic.FieldTool" include="com.itheima.constants.MyConstants"/>
</toolbox>
include屬性可以引入一些類, 引入之后想要獲取其中的常量, 直接使用
$field.常量字段名稱即可 ! 引入多個類以,分割
2.3.7 ClassTool
ClassTool用於訪問一個類的Class對象信息以及其Filed , Method , Constructor等信息 , 它的設計沒有考慮到代碼的反射執行，因此無法通過反射執行代碼。
模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
## 獲取要查看的類上的所以注解 , 只有運行時期的注解才能夠獲取到
注解 : $class.getAnnotations()
構造方法 :
#foreach($constructor in $class.getConstructors())
$constructor
#end
屬性 :
#foreach($f in $class.getFields())
$f
#end
方法 :
#foreach($m in $class.getMethods())
$m
#end
包名 : $class.getPackage()
類名 : $class.getName()
## 也可以不通過配置文件 , 自己指定一個要查找的類
包名 : $class.inspect("java.lang.String").getPackage()
類名 : $class.inspect("java.lang.String").getName()
構造方法 :
#foreach($constructor in $class.inspect("java.lang.String").getConstructors())
$constructor
#end
</body>
</html>
配置
<toolbox scope="application">
<tool class="org.apache.velocity.tools.generic.ClassTool" inspect="com.itheima.utils.Result" ></tool>
</toolbox>
inspect : 指定一個需要查找的類
2.3.8 ContextTool
用於獲取Context中保存的數據和元數據
模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
context中的所有key :
#foreach( $key in $context.keys )
$key
#end
<br>
context中的所有value :
#foreach( $value in $context.values )
$value
#end
<br>
context中的所有key-value :
#foreach( $key in $context.keys )
$key = $context.get($key)
#end
</body>
</html>
配置
<toolbox scope="request">
<tool key="context" class="org.apache.velocity.tools.generic.ContextTool"/>
</toolbox>
需要注意的是在
application作用范圍中沒有ContextTool, 所以scope需要指定為request
2.3.9 RenderTool
Render用於將給定的字符串當作VTL秩序
模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
#set($list = [1,2,3] )
#set($object = '$list' )
#set($method = 'size()' )
## 將字符串當作VTL秩序
$render.eval("${object}.$method")
## 使用當前上下文遞歸地評估包含VTL的字符串，並將結果作為字符串返回。
#macro(say_hi)
hello world!
#end
#set($foo = "#say_hi()")
#set($bar = "$foo" )
$render.recurse($bar)
</body>
</html>
配置
<toolbox scope="request">
<tool key="render" class="org.apache.velocity.tools.generic.RenderTool"></tool>
</toolbox>
使用recurse遞歸時 ,RenderTool 默認將遞歸限制為20個周期，以防止無限循環
2.3.10 SortTool
SortTool用於對集合和數組數據進行排序 , 在排序操作期間，通過調用compareTo() 來進行比較，但要調用compareToIgnoreCase()的字符串除外。將集合數據轉化為合適的類型后 , 通過調用Collections.sort()來執行排序
模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
簡單類型排序 :
#set($strList = $sorter.sort($strs))
#foreach($str in $strList)
$str
#end
對象類型排序 - 單個字段 :
#set($users = $sorter.sort($userList,"age:asc"))
#foreach($user in $users)
$user.name : $user.age : $user.sex
#end
對象類型排序 - 多字段 :
#set($users = $sorter.sort($userList,["sex:desc","age:asc"]))
#foreach($user in $users)
$user.name : $user.age : $user.sex
#end
</body>
</html>
配置
<toolbox scope="application">
<tool key="sorter" class="org.apache.velocity.tools.generic.SortTool"/>
</toolbox>
SortTool已經被標注為過期, 建議使用下面
CollectionTool的排序方法
2.3.11 CollectionTool
CollectionTool允許用戶對集合中包含的對象公開的任意任意屬性集對集合（或數組，迭代器等）進行排序，並通過拆分字符串來生成數組。
模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
簡單類型排序 :
#set($strList = $collection.sort($strs))
#foreach($str in $strList)
$str
#end
對象類型排序 - 單個字段 :
#set($users = $collection.sort($userList,"age:asc"))
#foreach($user in $users)
$user.name : $user.age : $user.sex
#end
對象類型排序 - 多字段 :
#set($users = $collection.sort($userList,["sex:desc","age:asc"]))
#foreach($user in $users)
$user.name : $user.age : $user.sex
#end
拆分字符串 :
#set($str="hello word , how are you !")
#foreach($s in $collection.split($str))
$s
#end
</body>
</html>
配置
<tool key="collection" class="org.apache.velocity.tools.generic.CollectionTool" stringsDelimiter=" ">
</tool>
stringsDelimiter : 指定進行字符串分割時的分割符 , 默認是
,
2.3.12 XmlTool
XmlTool用於讀取和瀏覽XML文件。它底層使用dom4j為遍歷XML文件提供完整的XPath支持。
xml
<?xml version="1.0" encoding="UTF-8"?>
<users>
<user id="1" name="楊過" sex="男" age="18" > 喜歡看書 </user>
<user id="2" name="小龍女" sex="男" age="18" > 喜歡睡覺 </user>
<user id="3" name="郭靖" sex="男" age="18" > 喜歡玩游戲 </user>
<user id="4" name="黃蓉" sex="男" age="18" > 喜歡喝酒 </user>
</users>
模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
$xml.find("//user[@id='1']")
$xml.find("//user[@id='1']").attr("name")
$xml.find("//user[@id='1']").text
</body>
</html>
配置
<toolbox scope="application">
<tool key="xml" class="org.apache.velocity.tools.generic.XmlTool" resource="xml/user.xml"/>
</toolbox>
resource : 加載類路徑下的XML資源
source : 加載一個URL路徑下的XML資源
三. VelocityView使用
3.1 VelocityView介紹
VelocityView包含所有GenericTools並添加了用於在Web應用程序（Java EE項目）的視圖層中使用Velocity的基礎結構和專用工具。這包括用於處理Velocity模板請求的VelocityViewServlet或VelocityLayoutServlet，以及用於將Velocity嵌入JSP中的VelocityViewTag。
3.2 案例環境搭建
3.2.1 創建項目
3.2.2 導入依賴
<dependencies>
<dependency>
<groupId>org.apache.velocity</groupId>
<artifactId>velocity-engine-core</artifactId>
<version>2.2</version>
</dependency>
<dependency>
<groupId>org.apache.velocity.tools</groupId>
<artifactId>velocity-tools-generic</artifactId>
<version>3.0</version>
</dependency>
<dependency>
<groupId>org.apache.velocity.tools</groupId>
<artifactId>velocity-tools-view</artifactId>
<version>3.0</version>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.apache.tomcat</groupId>
<artifactId>tomcat-api</artifactId>
<version>9.0.10</version>
<scope>provided</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.1</version>
<configuration>
<source>11</source>
<target>11</target>
<encoding>utf-8</encoding>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.2</version>
<configuration>
<path>/</path>
<port>8080</port>
<uriEncoding>utf-8</uriEncoding>
</configuration>
</plugin>
</plugins>
</build>
3.2.3 配置Servlet
在web.xml中配置整合VelocityViewServlet
<?xml version="1.0" encoding="UTF-8"?>
<web-app
version="3.0"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<servlet>
<servlet-name>velocity</servlet-name>
<servlet-class>org.apache.velocity.tools.view.VelocityViewServlet</servlet-class>
<init-param>
<param-name>org.apache.velocity.toolbox</param-name>
<param-value>/WEB-INF/tools.xml</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>velocity</servlet-name>
<url-pattern>*.vm</url-pattern>
</servlet-mapping>
</web-app>
該配置表示攔截所有的vm結尾的請求 , vm就是velocity模板文件的擴展名
3.2.4 引入配置文件
在web.xml中可以引入的配置文件有兩個 :
- tools.xml : 配置頁面使用的一些工具
- velocity.properties : 配置一些日志, 編碼, 宏等一些配置
如果要引入配置文件, 官方建議將配置文件放置在web項目的/WEB-INF目錄下
tools.xml
<?xml version="1.0" encoding="UTF-8"?>
<tools>
<toolbox scope="application">
<tool key="date" class="org.apache.velocity.tools.generic.DateTool" format="yyyy-MM-dd"></tool>
<tool key="number" class="org.apache.velocity.tools.generic.NumberTool" />
<tool key="math" class="org.apache.velocity.tools.generic.MathTool" />
<tool key="display" class="org.apache.velocity.tools.generic.DisplayTool"/>
<tool key="esc" class="org.apache.velocity.tools.generic.EscapeTool"/>
<tool key="field" class="org.apache.velocity.tools.generic.FieldTool" include="com.itheima.constants.MyConstants"/>
<tool key="class" class="org.apache.velocity.tools.generic.ClassTool" inspect="com.itheima.utils.Result" ></tool>
<tool key="sorter" class="org.apache.velocity.tools.generic.SortTool"/>
<tool key="collection" class="org.apache.velocity.tools.generic.CollectionTool" stringsDelimiter=" "></tool>
<tool key="xml" class="org.apache.velocity.tools.generic.XmlTool" resource="xml/user.xml"/>
</toolbox>
<toolbox scope="request">
<tool key="context" class="org.apache.velocity.tools.generic.ContextTool"/>
<tool key="render" class="org.apache.velocity.tools.generic.RenderTool"></tool>
</toolbox>
</tools>
這里我們配置tools.xml即可, velocity.properties配置文件的相關配置可以查閱 官方文檔
3.3 使用VelocityView
當我們配置好了之后使用VelocityView非常簡單 , 只需要將數據保存在web項目的域中 , 在velocity模板中就可以直接獲取數據展示了
3.3.1 展示基礎數據
編寫模板
在web項目下創建user-info.vm模板文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
歡迎您: $name
</body>
</html>
創建Servlet
public class UserInfoServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//在request域保存數據
request.setAttribute("name",request.getParameter("name"));
//設置響應數據格式以及字符集
response.setContentType("text/html;charset=utf-8");
request.getRequestDispatcher("/vms/user-info.vm").forward(request,response);
}
}
配置Servlet
<servlet>
<servlet-name>UserInfoServlet</servlet-name>
<servlet-class>com.itheima.servlet.UserInfoServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>UserInfoServlet</servlet-name>
<url-pattern>/user/info</url-pattern>
</servlet-mapping>
訪問Servlet
打開瀏覽器輸入 : http://localhost:8080/user/info?name=zhangsan
3.3.2 展示列表數據
編寫模板
在項目下創建user-list.vm用於展示列表數據
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<tr>
<td>編號</td>
<td>姓名</td>
<td>性別</td>
<td>年齡</td>
<td>操作</td>
</tr>
#foreach($user in $userList)
<tr>
<td>$foreach.index</td>
<td>$user.name</td>
<td>$user.sex</td>
<td>$user.age</td>
<td>
<a href="">編輯</a>
<a href="">刪除</a>
</td>
</tr>
#end
</table>
</body>
</html>
創建Servlet
public class UserListServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<User> userList = new ArrayList<User>();
userList.add(new User("呂布",38,"man"));
userList.add(new User("貂蟬",16,"woman"));
userList.add(new User("劉備",28,"man"));
userList.add(new User("關羽",25,"man"));
userList.add(new User("張飛",20,"man"));
userList.add(new User("甄宓",21,"woman"));
request.setAttribute("userList",userList);
response.setContentType("text/html;charset=utf-8");
request.getRequestDispatcher("/vms/user-list.vm").forward(request,response);
}
}
配置Servlet
<servlet>
<servlet-name>UserListServlet</servlet-name>
<servlet-class>com.itheima.servlet.UserListServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>UserListServlet</servlet-name>
<url-pattern>/user/list</url-pattern>
</servlet-mapping>
訪問Servlet
打開瀏覽器輸入 : http://localhost:8080/user/list
3.3.3 使用Tools工具
因為我們在配置VelocityViewServlet的時候已經加載了tools.xml配置文件 , 所以直接在模板文件中使用工具即可
例如 : 列表頁面我們展示編號使用的是$foreach.index , 是從0開始的, 現在想讓編號從1開始 , 可以使用MathTool , 在index的基礎上+1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<tr>
<td>編號</td>
<td>姓名</td>
<td>性別</td>
<td>年齡</td>
<td>操作</td>
</tr>
#foreach($user in $userList)
<tr>
<td>$math.add($foreach.index,1)</td>
<td>$user.name</td>
<td>$user.sex</td>
<td>$user.age</td>
<td>
<a href="">編輯</a>
<a href="">刪除</a>
</td>
</tr>
#end
</table>
</body>
</html>
3.4 工具類及案例
VelocityView包含所有GenericTools並添加了用於在Web應用程序（Java EE項目）的視圖層中使用Velocity的基礎結構和專用工具 , 例如 :
- CookieTool
- BrowserTool
- ParameterTool
- ViewContextTool
3.4.1 CookieTool
CookieTool用於獲取和創建Cookie
模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
$cookie.username ## 獲取指定名稱的cookie值
$cookie.add("phone",'18917009089') ## 創建並設置cookie
</body>
</html>
配置
<toolbox scope="request">
<tool key="cookie" class="org.apache.velocity.tools.view.CookieTool"/>
</toolbox>
Servlet
public class CookieToolServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Cookie cookie = new Cookie("username", "zhangsan");
cookie.setPath("/");
response.addCookie(cookie);
response.sendRedirect(request.getContextPath()+"/vms/tool-cookie.vm");
}
}
<servlet>
<servlet-name>CookieToolServlet</servlet-name>
<servlet-class>com.itheima.servlet.CookieToolServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CookieToolServlet</servlet-name>
<url-pattern>/user/cookie</url-pattern>
</servlet-mapping>
測試
打開瀏覽器輸入 : http://localhost:8080/user/cookie
3.4.2 BrowserTool
BrowserTool用於獲取客戶端瀏覽器，操作系統，設備，語言等信息。
模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
設備信息 : $browser.device <br>
用戶客戶端 : $browser.userAgentString <br>
渲染引擎 : $browser.renderingEngine.name<br>
操作系統 : $browser.operatingSystem.name<br>
IP地址 : $browser.iPAddress<br>
</body>
</html>
配置
<toolbox scope="session">
<tool key="browser" class="org.apache.velocity.tools.view.BrowserTool" />
</toolbox>
可以定義在在
request和session范圍 , 建議在session范圍使用
Servlet
public class BrowserToolServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.getRequestDispatcher("/vms/tool-browser.vm").forward(request,response);
}
}
<servlet>
<servlet-name>BrowserToolServlet</servlet-name>
<servlet-class>com.itheima.servlet.BrowserToolServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>BrowserToolServlet</servlet-name>
<url-pattern>/user/browser</url-pattern>
</servlet-mapping>
測試
打開瀏覽器輸入 : http://localhost:8080/user/browser
3.4.3 ParameterTool
ParameterTool用戶獲取請求中的參數
模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
## 獲取所有的請求參數
#set($parameters = $params.all)
#foreach($entry in $parameters.entrySet())
$entry.key : $entry.value <br>
#end
<hr>
## 獲取一個key對應一個值的參數
name : $params.getString("username") <br>
## 獲取一個key對應多個值得參數
hobby : $params.getStrings("hobby")
</body>
</html>
配置
<toolbox scope="request">
<tool key="params" class="org.apache.velocity.tools.view.ParameterTool"/>
</toolbox>
測試
打開瀏覽器 , 輸入 : http://localhost:8080/vms/tool-parameter.vm?username=zhangsan&password=123&hobby=eat&hobby=drink&hobby=play
3.4.4 ViewContextTool
ViewContextTool是GenericTools中ContextTool的擴展 , 可以Velocity容器中的所有數據 , 包括HttpServletRequest, HttpSession and ServletContext中的數據.
模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
## 獲取velocity容器中的所有數據
#foreach( $key in $context.keys )
$key = $context.get($key) <br>
#end
</body>
</html>
配置
<toolbox scope="request">
<!-- <tool key="context" class="org.apache.velocity.tools.generic.ContextTool"/>-->
<tool key="context" class="org.apache.velocity.tools.view.ViewContextTool"/>
</toolbox>
Servlet
public class ViewContextToolServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//向reqest域保存數據
request.setAttribute("xxx","hello request");
//向session域保存數據
request.getSession().setAttribute("yyy","hello session");
//向ServletContext域保存數據
request.getServletContext().setAttribute("servletContext","hello servletContext");
response.setContentType("text/html;charset=utf-8");
request.getRequestDispatcher("/vms/tool-viewContext.vm").forward(request,response);
}
}
測試
打開瀏覽器, 訪問 http://localhost:8080/user/context
四. 自定義tools工具類
VelocityTools中定義了很多Tools供我們使用 , 如果官方提供的還不能滿足我們的需求, 我們也可以自己定義工具類 , 自定義工具類有一些要求 , 如下 :
- 工具類必須聲明為public
- 工具類中必須提供公共的無參構造方法
下面我們可以定義一個字符串的Tools類, 幫助我們對字符串進行特殊的處理 , 主要有二個功能
- 判斷字符串是否為Null或者""
- 隨機生成一個指定位數的數字字符串
4.1 編寫工具類
package com.itheima.tools;
import org.apache.commons.lang3.RandomStringUtils;
import org.apache.velocity.tools.config.DefaultKey;
import org.apache.velocity.tools.config.InvalidScope;
import org.apache.velocity.tools.config.ValidScope;
@DefaultKey("strings")
@ValidScope({"application","request","session"})
public class StringsTools {
/**
* 判斷字符串是否為空
* @param str
* @return
*/
public boolean isEmpty(String str){
if(str==null || "".equals(str)){
return true ;
}
return false ;
}
/**
* 生成一個指定位數的隨機字符串
* @param count
* @return
*/
public String randomNumeric(int count){
return RandomStringUtils.randomNumeric(count) ;
}
}
@DefaultKey : 用於指定默認的key
@ValidScope : 用於指定可用的作用范圍
4.2 配置工具類
<toolbox scope="application">
<tool key="strings" class="com.itheima.tools.StringsTools" />
</toolbox>
4.3 使用工具類
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
判斷字符串是否為空 : $strings.isEmpty("") <br>
隨機生成數字字符串 : $strings.randomNumeric(6);
</body>
</html>
4.4 編寫Serlvet
public class StringsToolServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
request.getRequestDispatcher("/vms/tool-strings.vm").forward(request,response);
}
}
其實直接訪問就可以, 但是我們模板中有中文, 需要在serlvet中設置響應數據的字符集 , 否則會有亂碼
4.5 訪問測試
打開瀏覽器 , 輸入 : http://localhost:8080/tools/strings
五. SpringMVC中使用
我們之前已經在Servlet中使用velocity作為我們的視圖展示數據 , 但是在開發過程中我們一般會使用框架來進行web開發, 提高我們的開發效率 , 所以下面我們來說一說在SpringMVC框架中如何使用Velocity作為視圖展示數據
5.1 步驟分析
在SpringMVC中使用Velocity非常簡單 , 主要有以下步驟
- 搭建springmvc開發環境
- 引入velocity依賴
- 配置Velocity開發環境
- 編寫Velocity模板
- 編寫springmvc控制器
5.2 代碼實現
5.2.1 搭建springmvc開發環境
創建項目
添加依賴
<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>5.2.5.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>5.2.5.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.2.5.RELEASE</version>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.apache.tomcat</groupId>
<artifactId>tomcat-api</artifactId>
<version>7.0.37</version>
<scope>provided</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.1</version>
<configuration>
<source>11</source>
<target>11</target>
<encoding>utf-8</encoding>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.2</version>
<configuration>
<path>/</path>
<port>8080</port>
<uriEncoding>utf-8</uriEncoding>
</configuration>
</plugin>
</plugins>
</build>
配置web.xml配置
<filter>
<filter-name>characterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>forceRequestEncoding</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>forceResponseEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>characterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<servlet>
<servlet-name>dispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springmvc.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dispatcherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
配置springmvc.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
<!--開啟組件掃描-->
<context:component-scan base-package="com.itheima"></context:component-scan>
<!--開啟注解驅動-->
<mvc:annotation-driven></mvc:annotation-driven>
</beans>
5.2.2 SpringMVC整合Velocity
引入velocity依賴
<dependency>
<groupId>org.apache.velocity</groupId>
<artifactId>velocity-engine-core</artifactId>
<version>2.2</version>
</dependency>
<dependency>
<groupId>org.apache.velocity.tools</groupId>
<artifactId>velocity-tools-generic</artifactId>
<version>3.0</version>
</dependency>
<dependency>
<groupId>org.apache.velocity.tools</groupId>
<artifactId>velocity-tools-view</artifactId>
<version>3.0</version>
</dependency>
引入Tools配置文件
在/WEB-INF/下創建並編寫tools.xml配置文件
<?xml version="1.0" encoding="UTF-8"?>
<tools>
<toolbox scope="application">
<tool key="date" class="org.apache.velocity.tools.generic.DateTool" format="yyyy-MM-dd"></tool>
<tool key="number" class="org.apache.velocity.tools.generic.NumberTool" />
<tool key="math" class="org.apache.velocity.tools.generic.MathTool" />
</toolbox>
</tools>
這個需要根據項目中使用的工具自己配置, 目前入門案例我們簡單配置幾個即可
配置web.xml配置
在
web.xml中配置VelocityViewServlet
<servlet>
<servlet-name>velocity</servlet-name>
<servlet-class>org.apache.velocity.tools.view.VelocityViewServlet</servlet-class>
<init-param>
<param-name>org.apache.velocity.toolbox</param-name>
<param-value>/WEB-INF/tools.xml</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>velocity</servlet-name>
<url-pattern>*.vm</url-pattern>
</servlet-mapping>
配置視圖解析器
因為我們現在使用velocity充當SpringMVC的視圖解析器 , 所以需要配置視圖解析器, 指定視圖模板文件的位置及擴展名
<bean id="internalResourceViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/vms/"></property>
<property name="suffix" value=".vm"></property>
</bean>
5.2.3 編寫Velocity模板
在/vms/目錄下創建user-list.vm模板文件 , 用於展示列表數據
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<tr>
<td>編號</td>
<td>姓名</td>
<td>性別</td>
<td>年齡</td>
<td>操作</td>
</tr>
#foreach($user in $userList)
<tr>
<td>$math.add($foreach.index,1)</td>
<td>$user.name</td>
<td>$user.sex</td>
<td>$user.age</td>
<td>
<a href="">編輯</a>
<a href="">刪除</a>
</td>
</tr>
#end
</table>
</body>
</html>
5.2.4 創建實體類
package com.itheima.pojo;
public class User {
private String name ;
private Integer age ;
private String sex ;
public User() {
}
public User(String name, Integer age, String sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
}
5.2.5 編寫springmvc控制器
@Controller
@RequestMapping(path = "/user")
public class UserController {
@RequestMapping(path = "/list")
public String list(Model model){
List<User> userList = new ArrayList<User>();
userList.add(new User("呂布",38,"man"));
userList.add(new User("貂蟬",16,"woman"));
userList.add(new User("劉備",28,"man"));
userList.add(new User("關羽",25,"man"));
userList.add(new User("張飛",20,"man"));
userList.add(new User("甄宓",21,"woman"));
model.addAttribute("userList",userList);
return "user-list";
}
}
因為我們配置了SpringMVC的視圖解析器 , 所以控制方法返回視圖名稱字符串即可, 視圖解析器會自動拼接完整視圖路徑 , 展示數據
5.2.6 訪問測試
打開瀏覽器 , 輸入 : http://localhost:8080/user/list
六. VelocityTools案例
上面我們已經學習了Velocity的基本使用, 下面我們使用SSM+Velocity來實現用戶數據增刪改查
6.1 環境准備
數據庫准備
create database velocity; -- 創建數據庫
use velocity; -- 使用數據庫
create table user( -- 創建表
id int primary key auto_increment,
name varchar(20) not null,
gender varchar(5),
age int,
address varchar(32),
qq varchar(20),
email varchar(50)
);
insert into `user`(`id`,`name`,`gender`,`age`,`address`,`qq`,`email`) values (1,'楊過','男',13,'揚州','12345','yangguo@itcast.cn');
insert into `user`(`id`,`name`,`gender`,`age`,`address`,`qq`,`email`) values (2,'小龍女','女',15,'古墓','88888','xiaolongnv@itcast.cn');
insert into `user`(`id`,`name`,`gender`,`age`,`address`,`qq`,`email`) values (3,'郭靖','女',40,'桃花島','88888','guojing@itcast.cn');
insert into `user`(`id`,`name`,`gender`,`age`,`address`,`qq`,`email`) values (4,'黃蓉','女',35,'桃花島','88888','huangrong@itcast.cn');
創建項目
引入依賴
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.itheima</groupId>
<artifactId>velocity_tools_04_case</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>5.2.5.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>5.2.5.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.2.5.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>5.2.5.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-tx</artifactId>
<version>5.2.5.RELEASE</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.5.3</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>2.0.3</version>
</dependency>
<dependency>
<groupId>tk.mybatis</groupId>
<artifactId>mapper</artifactId>
<version>4.1.5</version>
</dependency>
<dependency>
<groupId>javax.persistence</groupId>
<artifactId>persistence-api</artifactId>
<version>1.0</version>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.apache.tomcat</groupId>
<artifactId>tomcat-api</artifactId>
<version>7.0.37</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.apache.velocity</groupId>
<artifactId>velocity-engine-core</artifactId>
<version>2.2</version>
</dependency>
<dependency>
<groupId>org.apache.velocity.tools</groupId>
<artifactId>velocity-tools-generic</artifactId>
<version>3.0</version>
</dependency>
<dependency>
<groupId>org.apache.velocity.tools</groupId>
<artifactId>velocity-tools-view</artifactId>
<version>3.0</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.17</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.20</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.1</version>
<configuration>
<source>11</source>
<target>11</target>
<encoding>utf-8</encoding>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.2</version>
<configuration>
<path>/</path>
<port>8080</port>
<uriEncoding>utf-8</uriEncoding>
</configuration>
</plugin>
</plugins>
</build>
</project>
創建包結構
創建實體類
package com.itheima.pojo;
import tk.mybatis.mapper.annotation.KeySql;
import javax.persistence.Id;
import javax.persistence.Table;
@Table(name = "user")
public class User {
@Id
@KeySql(useGeneratedKeys = true)
private Integer id ;
private String name ;
private String gender;
private Integer age;
private String address;
private String qq;
private String email;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public String getQq() {
return qq;
}
public void setQq(String qq) {
this.qq = qq;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
}
編寫配置文件
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app
version="3.0"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<filter>
<filter-name>characterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>forceRequestEncoding</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>forceResponseEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>characterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<servlet>
<servlet-name>dispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springmvc.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dispatcherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>velocity</servlet-name>
<servlet-class>org.apache.velocity.tools.view.VelocityViewServlet</servlet-class>
<init-param>
<param-name>org.apache.velocity.toolbox</param-name>
<param-value>/WEB-INF/tools.xml</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>velocity</servlet-name>
<url-pattern>*.vm</url-pattern>
</servlet-mapping>
</web-app>
tools.xml
<?xml version="1.0" encoding="UTF-8"?>
<tools>
<toolbox scope="application">
<tool key="date" class="org.apache.velocity.tools.generic.DateTool" format="yyyy-MM-dd"></tool>
<tool key="number" class="org.apache.velocity.tools.generic.NumberTool" />
<tool key="math" class="org.apache.velocity.tools.generic.MathTool" />
</toolbox>
<toolbox scope="request">
<tool key="context" class="org.apache.velocity.tools.view.ViewContextTool"/>
</toolbox>
</tools>
springmvc.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
<!--開啟組件掃描-->
<context:component-scan base-package="com.itheima"></context:component-scan>
<!--開啟注解驅動-->
<mvc:annotation-driven></mvc:annotation-driven>
<!--配置視圖解析器-->
<bean id="internalResourceViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/"></property>
<property name="suffix" value=".vm"></property>
</bean>
<!--釋放靜態資源-->
<mvc:default-servlet-handler></mvc:default-servlet-handler>
</beans>
applicationContext.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
<bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
<property name="driverClassName" value="com.mysql.cj.jdbc.Driver"></property>
<property name="url" value="jdbc:mysql://118.25.197.221:3306/velocity"></property>
<property name="username" value="root"></property>
<property name="password" value="root"></property>
</bean>
<bean id="sessionFactoryBean" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource"></property>
</bean>
<bean class="tk.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="com.itheima.dao"/>
</bean>
</beans>
引入靜態資源
注意 :
-
復制完成后將靜態資源擴展名修改為
.vm, 后期我們將以這些靜態文件為基礎編寫我們的模板文件 -
因為我們開發過程中不可避免的會涉及到頁面的跳轉, 為了避免相對路徑的變化導致
JS以及CSS加載不到 , 我們可以先將各個模板文件中的資源引入路徑修改為絕對路徑 , 在velocity中獲取項目的動態虛擬路徑可以使用$context.request.contextPath, 如下:<!-- 1. 導入CSS的全局樣式 --> <link href="$context.request.contextPath/css/bootstrap.min.css" rel="stylesheet"> <!-- 2. jQuery導入，建議使用1.9以上的版本 --> <script src="$context.request.contextPath/js/jquery-2.1.0.min.js"></script> <!-- 3. 導入bootstrap的js文件 --> <script src="$context.request.contextPath/js/bootstrap.min.js"></script>$context代表ViewContextTool, 使用ViewContextTool可以獲取到request,session等對象
6.2 查詢學生
6.2.1 頁面修改
修改index.vm的超鏈接, 點擊查詢用戶列表
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>首頁</title>
<!-- 1. 導入CSS的全局樣式 -->
<link href="$context.request.contextPath/css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery導入，建議使用1.9以上的版本 -->
<script src="$context.request.contextPath/js/jquery-2.1.0.min.js"></script>
<!-- 3. 導入bootstrap的js文件 -->
<script src="$context.request.contextPath/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div align="center">
<a
href="$context.request.contextPath/user/list" style="text-decoration:none;font-size:33px">
查詢所有用戶信息
</a>
</div>
</body>
</html>
6.2.2 表現層實現
package com.itheima.controller;
import com.itheima.pojo.User;
import com.itheima.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.List;
@Controller
@RequestMapping(path = "/user")
public class UserController {
@Autowired
private UserService userService ;
@RequestMapping(path = "/list")
public String list(Model model){
List<User> userList = userService.list();
model.addAttribute("userList",userList);
return "list";
}
}
6.2.3 業務層實現
接口
package com.itheima.service;
import com.itheima.pojo.User;
import java.util.List;
public interface UserService {
List<User> list();
}
實現類
package com.itheima.service.impl;
import com.itheima.dao.UserDao;
import com.itheima.pojo.User;
import com.itheima.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserDao userDao ;
@Override
public List<User> list() {
return userDao.selectAll();
}
}
6.2.4 數據訪問層
package com.itheima.dao;
import com.itheima.pojo.User;
import org.springframework.stereotype.Repository;
import tk.mybatis.mapper.common.Mapper;
@Repository
public interface UserDao extends Mapper<User> {
}
6.2.5 Velocity模板
把html頁面擴展名改成.vm , 然后再模板中使用VTL展示數據即可 !
<!DOCTYPE html>
<!-- 網頁使用的語言 -->
<html lang="zh-CN">
<head>
<!-- 指定字符集 -->
<meta charset="utf-8">
<!-- 使用Edge最新的瀏覽器的渲染方式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- viewport視口：網頁可以根據設置的寬度自動進行適配，在瀏覽器的內部虛擬一個容器，容器的寬度與設備的寬度相同。
width: 默認寬度與設備的寬度相同
initial-scale: 初始的縮放比，為1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
<title>用戶信息管理系統</title>
<!-- 1. 導入CSS的全局樣式 -->
<link href="$context.request.contextPath/css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery導入，建議使用1.9以上的版本 -->
<script src="$context.request.contextPath/js/jquery-2.1.0.min.js"></script>
<!-- 3. 導入bootstrap的js文件 -->
<script src="$context.request.contextPath/js/bootstrap.min.js"></script>
<style type="text/css">
td, th {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h3 style="text-align: center">用戶信息列表</h3>
<!--搜索欄-->
<div style="float: left;">
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">姓名</label>
<input type="text" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group">
<label for="exampleInputName3">籍貫</label>
<input type="text" class="form-control" id="exampleInputName3" >
</div>
<div class="form-group">
<label for="exampleInputEmail2">郵箱</label>
<input type="email" class="form-control" id="exampleInputEmail2" >
</div>
<button type="submit" class="btn btn-default">查詢</button>
</form>
</div>
<!--按鈕-->
<div style="float: right;margin: 5px;">
<a class="btn btn-primary" href="add.html">添加聯系人</a>
<a class="btn btn-primary" href="add.html">刪除選中</a>
</div>
<table border="1" class="table table-bordered table-hover">
<tr class="success">
<th>編號</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>籍貫</th>
<th>QQ</th>
<th>郵箱</th>
<th>操作</th>
</tr>
#foreach($user in $userList)
<tr>
<td>$math.add($foreach.index,1) </td>
<td>$user.name</td>
<td>$user.gender</td>
<td>$user.age</td>
<td>$user.address</td>
<td>$user.qq</td>
<td>$user.email</td>
<td><a class="btn btn-default btn-sm" href="update.html">修改</a> <a class="btn btn-default btn-sm" href="">刪除</a></td>
</tr>
#end
<tr>
<td colspan="8" align="center"><a class="btn btn-primary" href="add.html">添加聯系人</a></td>
</tr>
</table>
</div>
</body>
</html>
6.3 添加學生
6.3.1 頁面修改
用戶點擊添加聯系人按鈕跳轉到添加頁面 , 修改超鏈接路徑 , 因為頁面上不需要有動態數據展示, 直接跳到add.vm即可
<tr>
<td colspan="8" align="center">
<a class="btn btn-primary" href="$context.request.contextPath/add.vm">
添加聯系人
</a>
</td>
</tr>
在add.vm模板文件中 , 確定各個輸入項的參數名稱是否和實體類對應 , 修改添加的表單的提交路徑
<form action="$context.request.contextPath/user/add" method="post">
表單具體內容省略....
</form>
6.3.2 表現層實現
/**
* 新增用戶
* @param user
* @return
*/
@RequestMapping(path = "/add")
public String add(User user){
userService.add(user);
return "redirect:/user/list";
}
6.3.3 業務層實現
接口
/**
* 新增用戶
* @param user
*/
void add(User user);
實現類
@Override
public void add(User user) {
userDao.insert(user);
}
6.3.4 數據訪問層
因為是使用的通用Maper , 業務層直接調用insert方法接口即可 , 數據訪問層不需要做其他的實現
6.4 修改學生
6.4.1 數據回顯
頁面修改
用戶點擊修改按鈕, 需要先去數據查詢數據詳情, 然后跳轉到編輯頁面回顯數據 , 所以首先需要對修改按鈕的超鏈接進行修改
<a class="btn btn-default btn-sm" href="$context.request.contextPath/user/findById?id=$user.id">修改</a>
表現層實現
/**
* 根據id查詢用戶詳情
* @param id
* @return
*/
@RequestMapping(path = "/findById")
public String findById(Integer id ,Model model){
User user = userService.findById(id);
model.addAttribute("user",user);
return "update";
}
業務層實現
接口
/**
* 根據id查詢用戶詳情
* @param id
* @return
*/
User findById(Integer id);
實現類
@Override
public User findById(Integer id) {
return userDao.selectByPrimaryKey(id);
}
數據訪問層
因為是使用的通用Maper , 業務層直接調用selectByPrimaryKey方法接口即可 , 數據訪問層不需要做其他的實現
Velocity模板
<!DOCTYPE html>
<!-- 網頁使用的語言 -->
<html lang="zh-CN">
<head>
<base href="<%=basePath%>"/>
<!-- 指定字符集 -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>修改用戶</title>
<link href="$context.request.contextPath/css/bootstrap.min.css" rel="stylesheet">
<script src="$context.request.contextPath/js/jquery-2.1.0.min.js"></script>
<script src="$context.request.contextPath/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="width: 400px;">
<h3 style="text-align: center;">修改聯系人</h3>
<form action="$context.request.contextPath/user/update" method="post">
<input type="hidden" name="id" value="$user.id">
<div class="form-group">
<label for="name">姓名：</label>
<input type="text" value="$user.name" class="form-control" id="name" name="name" readonly="readonly" placeholder="請輸入姓名" />
</div>
<div class="form-group">
<label>性別：</label>
<input type="radio" name="gender" value="男" #if($user.gender.equals('男')) checked #end />男
<input type="radio" name="gender" value="女" #if($user.gender.equals('女')) checked #end />女
</div>
<div class="form-group">
<label for="age">年齡：</label>
<input type="text" class="form-control" id="age" value="$user.age" name="age" placeholder="請輸入年齡" />
</div>
<div class="form-group">
<label for="address">籍貫：</label>
<select name="address" class="form-control" >
<option value="廣東" #if($user.address.equals('廣東')) selected #end >廣東</option>
<option value="廣西" #if($user.address.equals('廣西')) selected #end>廣西</option>
<option value="湖南" #if($user.address.equals('湖南')) selected #end>湖南</option>
</select>
</div>
<div class="form-group">
<label for="qq">QQ：</label>
<input type="text" class="form-control" value="$user.qq" name="qq" placeholder="請輸入QQ號碼"/>
</div>
<div class="form-group">
<label for="email">Email：</label>
<input type="text" class="form-control" value="$user.email" name="email" placeholder="請輸入郵箱地址"/>
</div>
<div class="form-group" style="text-align: center">
<input class="btn btn-primary" type="submit" value="提交" />
<input class="btn btn-default" type="reset" value="重置" />
<input class="btn btn-default" type="button" value="返回"/>
</div>
</form>
</div>
</body>
</html>
6.4.2 需改數據
頁面修改
用戶修改完數據點擊提交按鈕, 需要把數據提交到服務器, 服務器需要根據用戶修改數據的ID進行數據的更新 , 所以需要對表單的提交路徑進行修改
<form action="$context.request.contextPath/user/update" method="post"></form>
表現層實現
/**
* 更新用戶信息
* @param user
* @return
*/
@RequestMapping(path = "/update")
public String update(User user){
userService.update(user);
return "redirect:/user/list";
}
業務層實現
接口
/**
* 更新用戶信息
* @param user
*/
void update(User user);
實現
@Override
public void update(User user) {
userDao.updateByPrimaryKey(user);
}
數據訪問層
因為是使用的通用Maper , 業務層直接調用updateByPrimaryKey方法接口即可 , 數據訪問層不需要做其他的實現
6.5 刪除學生
6.5.1 頁面修改
用戶點擊刪除按鈕, 需要將數據從數據刪除(物理刪除) , 所以首先需要修改刪除按鈕的鏈接路徑
<a class="btn btn-default btn-sm" href="$context.request.contextPath/user/deleteById?id=$user.id">刪除</a>
6.5.2 表現層實現
/**
* 刪除用戶信息 - 物理刪除(慎用)
* @param id
* @return
*/
@RequestMapping(path = "/deleteById")
public String deleteById(Integer id){
userService.deleteById(id);
return "redirect:/user/list";
}
6.5.3 業務層實現
接口
/**
* 刪除用戶信息 - 物理刪除(慎用)
* @param id
*/
void deleteById(Integer id);
實現
@Override
public void deleteById(Integer id) {
userDao.deleteByPrimaryKey(id);
}
6.5.4 數據訪問層
因為是使用的通用Maper , 業務層直接調用deleteByPrimaryKey方法接口即可 , 數據訪問層不需要做其他的實現