第二篇來寫一些頁面邏輯叠必,上一篇寫了一個(gè)簡單的頁面∽婺铮現(xiàn)在修改一下,使更符合實(shí)際的業(yè)務(wù)場景啊奄。大致的思路應(yīng)該是渐苏,注冊→用戶登錄→聊天場景。
在這里我們省去注冊步驟菇夸,因?yàn)樽孕枰Y(jié)合業(yè)務(wù)琼富,權(quán)限等,那我們先做個(gè)簡單的登錄頁面index.html:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>chart</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<link rel="stylesheet" >
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding: 100px 100px 10px;">
<div>
<p>輸入用戶名進(jìn)入聊天室</p>
</div>
<form class="bs-example bs-example-form" role="form" th:action="@{init}">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" id="userName" name="userName">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
Go!
</button>
</span>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
看一下頁面效果:
緊接著根據(jù)登錄后跳轉(zhuǎn)聊天頁面的場景庄新,修改ChartController.java:
@Controller
@RequestMapping("/webSocket")
public class ChartController {
@RequestMapping(value = "/init")
public String chart(String userName,Model model){
model.addAttribute("userName",userName);
return "socket/chart";
}
@RequestMapping("/index")
public String index(){
return "socket/index";
}
}
很明顯鞠眉,我們的思路是讓index.html提交的用戶名值傳遞到chart.html: