前面搭好了SSM的基本框架，这里准备正式写代码
一、引入前端框架layim
由于layim不是完全免费的，这里就不直接把本人用的资源文件直接分享给大家了。
https://gitee.com/weijg/layim/tree/master/
上面这个是layim官方的开源版（老了点，和最新的有点不一样），如果想获取最新的请前往官网https://www.layui.com/layim/
在拿到资源文件后，打开这样加入你的项目。
这是layim资源文件，这样直接放到你的项目里，就OK（如果你用的是开源版本的，引入方式会不一样）
对了，还有js文件，这里本人也上传了，1积分下载。https://download.csdn.net/download/qq_34859668/18994226
二、编写项目
1、登录
这里打算写成戳链接就能登上，方便附加到别的项目上。
后台代码
package com.wc.controller;
import java.io.UnsupportedEncodingException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import com.wc.service.UserService;
@Controller
@RequestMapping("/user")
public class UserController {
@Autowired
@Qualifier("userService")
private UserService userService;
@RequestMapping("/goChat.do")
public ModelAndView goChat(String uid,String uid2,String username,String username2,HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException {
//根据url中的参数完成登录和聊天界面创建
if (uid==null||uid.isEmpty()) {
return new ModelAndView("goLogin");
}else if (uid2==null||uid2.isEmpty()) {
return new ModelAndView("goLogin");
}else {
ModelMap map=new ModelMap();
map.put("uid", uid);
map.put("uid2", uid2);
map.put("username", username);
map.put("username2", username2);
return new ModelAndView("chat",map);
}
}
@RequestMapping("/login.do")
public ModelAndView login(String uid, String username, HttpServletRequest request, HttpServletResponse response)
throws UnsupportedEncodingException {
// 根据url中的参数完成登录
if (uid == null || uid.isEmpty()) {
// 若url中的参数不完整
return new ModelAndView("goLogin");
} else if (username == null || username.isEmpty()) {
return new ModelAndView("goLogin");
} else {
ModelMap map = new ModelMap();
map.put("uid", uid);
map.put("username", username);
return new ModelAndView("work", map);
}
}
}
前端代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<base href="${pageContext.request.contextPath }/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>咨询</title>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="layui/css/layui.css">
<script type="application/javascript" src="js/jquery.min.js"></script>
<script type="application/javascript" src="js/bootstrap.min.js"></script>
</head>
<body class="bg-success" style="background: #EBEBEB;">
<div style="margin-top: 50px;">
<h2 class="form-signin-heading" style="text-align: center;">咨询</h2>
</div>
<div class="container" style="width:50%;height:300px;background: white;border-radius: 10px;border:1px solid #9D9D9D;box-shadow: darkgrey 10px 10px 30px 5px;">
<a onclick=window.open("http://localhost:8080/WeChat/user/goChat.do?uid=123&uid2=7788&username=咨询者&username2=咨询师","","width=1300,height=650","scrollbars=auto")>
<button class="btn btn-lg btn-primary btn-block">点我咨询</button>
</a>
<br>
<a onclick=window.open("http://localhost:8080/WeChat/user/login.do?uid=7788&username=咨询师","","width=1300,height=650","scrollbars=auto")>
<button class="btn btn-lg btn-primary btn-block">点我登录</button>.
</a>
</div>
</body>
</html>整个过程很简单，甚至不需要数据库参与，参数啥的直接写到url里，就是用来测试聊天功能的辅助功能，随意写的。
http://localhost:8080/WeChat/user/login.do?uid=7788&username=咨询师
一个用户的ID（uid），一个用户名（username）两个参数。
至于如何用websocket实现会话，咱们下一篇文章见。