1.引入資源包
在上一節中，我們把基本的框架都搭好了，用了Spring，SPringMVC。這一節，我們先來畫頁面，前端框架採用EasyUI來實現。
easyui是一種基於jQuery的用戶界面插件集合，使用easyui我們就不需要寫很多代碼，只需要通過編寫一些簡單HTML標記，就可以定義用戶界面。
現在，我們把easyui需要的資源包拷貝進來。
2.繪製主界面
界面的話，我們就用html來實現吧，在WebContent目錄下新建一個頁面叫index.html。
目錄結構如下：
代碼：
<title>學生管理主界面/<title>
<link>
<link>
現在，我們來畫四個按鈕：
可以看到每一個按鈕都是用a標籤來做的，我們給每一個a標籤添加一個 easyui-linkbutton 的class，就可以實現這一效果：
同時，每一個按鈕還有一個點擊事件，對應的函數我們先不寫，預留一個接口。
接下來，我們繪製搜索欄，到時候可以根據某些條件來查詢學生數據。
代碼：
用戶名
暱稱
自定義css樣式：
#searchBox{
margin-top: 16px;
background: #fff8f8;
padding: 4px;
font-size: 14px;
width: 500px;
}
頁面效果：
最後，畫數據列表，我們使用easyUI給我們提供的datagrid組件來實現：
<table> data-options="pagination:true,pageSize:10,rownumbers:true,fitColumns:true,
singleSelect:false,collapsible:false,url:''">
<thead>
/<thead>
/<table>
最終效果：
打開瀏覽器訪問：http://localhost/student/index.html 即可看到該頁面。
本節我們就簡單的畫一個頁面，下一講我們繼續寫後臺代碼。
分享到:
閱讀更多 程序猿的內心獨白 的文章
