maven+spring+springmvc+mybatis+ajax 框架下实现简单的聊天室

  搭建完之后刚好看到一本不错的书《锋利的jQuery》，结合最后的例子使用ajax实现了这个简单的聊天室。

1.项目目录创建

  controller表示控制层负责同页面数据的传输和页面的跳转，service表示服务层，dao和mapping负责持久层，pojo表示数据传输对象。resources下有jdbc.properties，log4j.properties，spring-mvc.xml，spring-mybatis.xml。另外还有一些日志文件，静态文件，JSP文件。完整目录结构如下：

2.配置pom文件，引入jar包

关于jar包的GroupId，ArtifactId，Version问题，可以在search.maven.org这里进行查找，至于jar包的依赖问题，maven可以直接帮你做到

[html]  view plain  copy

1. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
2.   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">  
3.   <modelVersion>4.0.0</modelVersion>  
4.   <groupId>com.wzy</groupId>  
5.   <artifactId>carsmanage</artifactId>  
6.   <packaging>war</packaging>  
7.   <version>0.0.1-SNAPSHOT</version>  
8.   <name>carsmanage Maven Webapp</name>  
9.   <url>http://maven.apache.org</url>  
10.     
11.   <properties>  
12.         <!-- spring版本号 -->  
13.         <spring.version>3.2.4.RELEASE</spring.version>  
14.         <!-- mybatis版本号 -->  
15.         <mybatis.version>3.2.4</mybatis.version>  
16.         <!-- log4j日志文件管理包版本 -->  
17.         <slf4j.version>1.6.6</slf4j.version>  
18.         <log4j.version>1.2.9</log4j.version>  
19.     </properties>  
20.     <dependencies>  
21.         <dependency>   
22.             <groupId>javax.servlet</groupId>   
23.             <artifactId>servlet-api</artifactId>   
24.             <version>2.5</version>   
25.             <scope>provided</scope>   
26.         </dependency>  
27.         <!-- 导入dbcp的jar包，用来在applicationContext.xml中配置数据库 -->  
28.         <dependency>  
29.             <groupId>commons-dbcp</groupId>  
30.             <artifactId>commons-dbcp</artifactId>  
31.             <version>1.2.2</version>  
32.         </dependency>   
33.         <!-- 上传组件包 -->  
34.         <dependency>  
35.             <groupId>commons-fileupload</groupId>  
36.             <artifactId>commons-fileupload</artifactId>  
37.             <version>1.3.1</version>  
38.         </dependency>  
39.         <dependency>  
40.             <groupId>commons-io</groupId>  
41.             <artifactId>commons-io</artifactId>  
42.             <version>2.4</version>  
43.         </dependency>  
44.         <dependency>  
45.             <groupId>commons-codec</groupId>  
46.             <artifactId>commons-codec</artifactId>  
47.             <version>1.9</version>  
48.         </dependency>  
49.         <!-- 映入JSON -->  
50.         <dependency>  
51.             <groupId>org.codehaus.jackson</groupId>  
52.             <artifactId>jackson-mapper-asl</artifactId>  
53.             <version>1.9.13</version>  
54.         </dependency>  
55.         <!-- 格式化对象，方便输出日志 -->  
56.         <dependency>  
57.             <groupId>com.alibaba</groupId>  
58.             <artifactId>fastjson</artifactId>  
59.             <version>1.1.41</version>  
60.         </dependency>  
61.         <dependency>  
62.             <groupId>org.apache.tomcat</groupId>  
63.             <artifactId>jsp-api</artifactId>  
64.             <version>6.0.32</version>  
65.             <scope>provided</scope>  
66.         </dependency>  
67.           
68.         <!-- spring核心包 -->  
69.         <!-- springframe start -->  
70.         <dependency>  
71.             <groupId>org.springframework</groupId>  
72.             <artifactId>spring-core</artifactId>  
73.             <version>${spring.version}</version>  
74.         </dependency>  
75.    
76.         <dependency>  
77.             <groupId>org.springframework</groupId>  
78.             <artifactId>spring-web</artifactId>  
79.             <version>${spring.version}</version>  
80.         </dependency>  
81.    
82.         <dependency>  
83.             <groupId>org.springframework</groupId>  
84.             <artifactId>spring-oxm</artifactId>  
85.             <version>${spring.version}</version>  
86.         </dependency>  
87.    
88.         <dependency>  
89.             <groupId>org.springframework</groupId>  
90.             <artifactId>spring-tx</artifactId>  
91.             <version>${spring.version}</version>  
92.         </dependency>  
93.    
94.         <dependency>  
95.             <groupId>org.springframework</groupId>  
96.             <artifactId>spring-jdbc</artifactId>  
97.             <version>${spring.version}</version>  
98.         </dependency>  
99.    
100.         <dependency>  
101.             <groupId>org.springframework</groupId>  
102.             <artifactId>spring-webmvc</artifactId>  
103.             <version>${spring.version}</version>  
104.         </dependency>  
105.    
106.         <dependency>  
107.             <groupId>org.springframework</groupId>  
108.             <artifactId>spring-aop</artifactId>  
109.             <version>${spring.version}</version>  
110.         </dependency>  
111.    
112.         <dependency>  
113.             <groupId>org.springframework</groupId>  
114.             <artifactId>spring-context-support</artifactId>  
115.             <version>${spring.version}</version>  
116.         </dependency>  
117.    
118.         <dependency>  
119.             <groupId>org.springframework</groupId>  
120.             <artifactId>spring-aop</artifactId>  
121.             <version>${spring.version}</version>  
122.         </dependency>  
123.    
124.         <dependency>  
125.             <groupId>org.springframework</groupId>  
126.             <artifactId>spring-test</artifactId>  
127.             <version>${spring.version}</version>  
128.         </dependency>  
129.         <!-- springframe end -->  
130.    
131.         <!-- mybatis核心包 -->  
132.         <dependency>  
133.             <groupId>org.mybatis</groupId>  
134.             <artifactId>mybatis</artifactId>  
135.             <version>${mybatis.version}</version>  
136.         </dependency>  
137.         <!-- mybatis/spring包 -->  
138.         <dependency>  
139.             <groupId>org.mybatis</groupId>  
140.             <artifactId>mybatis-spring</artifactId>  
141.             <version>1.2.2</version>  
142.         </dependency>  
143.         <!-- mysql驱动包 -->  
144.         <dependency>  
145.             <groupId>mysql</groupId>  
146.             <artifactId>mysql-connector-java</artifactId>  
147.             <version>5.1.29</version>  
148.         </dependency>  
149.         <!-- junit测试包 -->  
150.         <dependency>  
151.             <groupId>junit</groupId>  
152.             <artifactId>junit</artifactId>  
153.             <version>4.11</version>  
154.             <scope>test</scope>  
155.         </dependency>  
156.         <!-- 阿里巴巴数据源包 -->  
157.         <dependency>  
158.             <groupId>com.alibaba</groupId>  
159.             <artifactId>druid</artifactId>  
160.             <version>1.0.2</version>  
161.         </dependency>  
162.    
163.         <!-- json数据 -->  
164.         <dependency>  
165.             <groupId>org.codehaus.jackson</groupId>  
166.             <artifactId>jackson-mapper-asl</artifactId>  
167.             <version>1.9.13</version>  
168.         </dependency>  
169.    
170.         <!-- 日志文件管理包 -->  
171.         <!-- log start -->  
172.         <dependency>  
173.             <groupId>log4j</groupId>  
174.             <artifactId>log4j</artifactId>  
175.             <version>${log4j.version}</version>  
176.         </dependency>  
177.         <dependency>  
178.             <groupId>org.slf4j</groupId>  
179.             <artifactId>slf4j-api</artifactId>  
180.             <version>${slf4j.version}</version>  
181.         </dependency>  
182.         <dependency>  
183.             <groupId>org.slf4j</groupId>  
184.             <artifactId>slf4j-log4j12</artifactId>  
185.             <version>${slf4j.version}</version>  
186.         </dependency>  
187.         <!-- log end -->  
188.     </dependencies>  
189.     <build>  
190.         <finalName>springmvc</finalName>  
191.     </build>  
192. </project>  

3.jdbc配置文件

[html]  view plain  copy

1. driver=com.mysql.jdbc.Driver  
2. url=jdbc:mysql://localhost:3306/mydb  
3. username=root  
4. password=admin  
5. #定义初始连接数  
6. initialSize=0  
7. #定义最大连接数  
8. maxActive=20  
9. #定义最大空闲  
10. maxIdle=20  
11. #定义最小空闲  
12. minIdle=1  
13. #定义最大等待时长  
14. maxWait=60000  

4.log4j配置文件

[html]  view plain  copy

1. #定义log输出级别  
2. log4j.rootLogger=INFO,Console,File  
3. #定义日志输出目的地为控制台  
4. log4j.appender.Console=org.apache.log4j.ConsoleAppender  
5. log4j.appender.Console.Target=System.out  
6. #可以灵活地指定日志输出格式，下面一行是指定具体的格式  
7. log4j.appender.Console.layout = org.apache.log4j.PatternLayout  
8. log4j.appender.Console.layout.ConversionPattern=[%c] - %m%n  
9.   
10. #文件大小到达指定尺寸的时候产生一个新的文件    
11. log4j.appender.File = org.apache.log4j.RollingFileAppender  
12. #指定输出目录    
13. log4j.appender.File.File = logs/ssm.log  
14. #定义文件最大大小    
15. log4j.appender.File.MaxFileSize = 10MB  
16. # 输出所以日志，如果换成DEBUG表示输出DEBUG以上级别日志    
17. log4j.appender.File.Threshold = ALL    
18. log4j.appender.File.layout = org.apache.log4j.PatternLayout    
19. log4j.appender.File.layout.ConversionPattern =[%p] [%d{yyyy-MM-dd HH\:mm\:ss}][%c]%m%n  

5.spring mybatis配置文件

建立spring-mybatis.xml配置文件，将spring和mybatis整合在一起

[html]  view plain  copy

1. <?xml version="1.0" encoding="UTF-8"?>    
2. <beans xmlns="http://www.springframework.org/schema/beans"    
3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"    
4.     xmlns:context="http://www.springframework.org/schema/context"    
5.     xmlns:mvc="http://www.springframework.org/schema/mvc"    
6.     xsi:schemaLocation="http://www.springframework.org/schema/beans      
7.                         http://www.springframework.org/schema/beans/spring-beans-3.1.xsd      
8.                         http://www.springframework.org/schema/context      
9.                         http://www.springframework.org/schema/context/spring-context-3.1.xsd      
10.                         http://www.springframework.org/schema/mvc      
11.                         http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd">  
12.     <!-- 自动扫描 -->    
13.     <context:component-scan base-package="com.chatroom" />  
14.       
15.     <!-- 引入配置文件 -->    
16.     <bean id="propertyConfigurer"    
17.         class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">    
18.         <property name="location" value="classpath:jdbc.properties" />    
19.     </bean>  
20.     <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource"    
21.         destroy-method="close">    
22.         <property name="driverClassName" value="${driver}" />    
23.         <property name="url" value="${url}" />    
24.         <property name="username" value="${username}" />    
25.         <property name="password" value="${password}" />    
26.         <!-- 初始化连接大小 -->    
27.         <property name="initialSize" value="${initialSize}"></property>    
28.         <!-- 连接池最大数量 -->    
29.         <property name="maxActive" value="${maxActive}"></property>    
30.         <!-- 连接池最大空闲 -->    
31.         <property name="maxIdle" value="${maxIdle}"></property>    
32.         <!-- 连接池最小空闲 -->    
33.         <property name="minIdle" value="${minIdle}"></property>    
34.         <!-- 获取连接最大等待时间 -->    
35.         <property name="maxWait" value="${maxWait}"></property>    
36.     </bean>  
37.       
38.     <!-- spring和MyBatis完美整合，不需要mybatis的配置映射文件 -->    
39.     <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">    
40.         <property name="dataSource" ref="dataSource" />    
41.         <!-- 自动扫描mapping.xml文件 -->    
42.         <property name="mapperLocations" value="classpath:com/chatroom/mapping/*.xml"></property>    
43.     </bean>  
44.       
45.     <!-- DAO接口所在包名，Spring会自动查找其下的类 -->    
46.     <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">    
47.         <property name="basePackage" value="com.chatroom.dao" />    
48.         <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"></property>    
49.     </bean>  
50.     <!-- 开启事务注解驱动 -->  
51.     <!-- (事务管理)transaction manager, use JtaTransactionManager for global tx -->    
52.     <bean id="transactionManager"    
53.         class="org.springframework.jdbc.datasource.DataSourceTransactionManager">    
54.         <property name="dataSource" ref="dataSource" />     
55.     </bean>   
56. </beans>  

6.使用junit测试spring和mybatis整合结果

从这里开始因为要涉及一些编码，同业务联系在一起，以免开始写代码时再推到重来。对于这个简单的聊天室，用户登录是通过数据库访问，聊天信息和在线人员信息放在application中。表数据结构只需要用户名，密码等一些简单的数据即可

6.1 建表

6.2代码

  可以mybatis generator自动生成实体类，dao接口，mybatis映射文件 使用方法参考这里

service实现类：UserService.Java

[java]  view plain  copy

1. @Service  
2. public class UserService implements IUserService {  
3.       
4.     @Resource  
5.     IUserDao userDao;  
6.   
7.     @Override  
8.     public User getUserById(int userId) {  
9.         return userDao.selectByPrimaryKey(userId);  
10.     }  
11. }  

测试类：TestMybatis.java

[java]  view plain  copy

1. @RunWith(SpringJUnit4ClassRunner.class)     //表示继承了SpringJUnit4ClassRunner类  
2. @ContextConfiguration(locations = {"classpath:spring-mybatis.xml"})  
3.   
4. public class TestMyBatis {  
5.     private static Logger logger = Logger.getLogger(TestMyBatis.class);  
6.       
7.     @Resource  
8.     private IUserService userService = null;  
9.   
10.     @Test  
11.     public void test1() {  
12.         User user = userService.getUserById(1);  
13.         logger.info(JSON.toJSONString(user));  
14.     }  
15. }  

6.3测试结果：

[java]  view plain  copy

1. [com.test.TestMyBatis] - {"age":22,"id":1,"password":"wzy","userName":"wzy"}  

至此spring和mybatis已经整合成功下面开始同springmvc的整合

7.建立spring-mvc.xml配置文件

[html]  view plain  copy

1. <?xml version="1.0" encoding="UTF-8"?>    
2. <beans xmlns="http://www.springframework.org/schema/beans"    
3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"    
4.     xmlns:context="http://www.springframework.org/schema/context"    
5.     xmlns:mvc="http://www.springframework.org/schema/mvc"    
6.     xsi:schemaLocation="http://www.springframework.org/schema/beans      
7.                         http://www.springframework.org/schema/beans/spring-beans-3.1.xsd      
8.                         http://www.springframework.org/schema/context      
9.                         http://www.springframework.org/schema/context/spring-context-3.1.xsd      
10.                         http://www.springframework.org/schema/mvc      
11.                         http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd">    
12.     <!-- 自动扫描该包，使SpringMVC认为包下用了@controller注解的类是控制器 -->    
13.     <context:component-scan base-package="com.chatroom.controller" />   
14.     <!--避免IE执行AJAX时，返回JSON出现下载文件 -->    
15.     <bean id="mappingJacksonHttpMessageConverter"    
16.         class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">    
17.         <property name="supportedMediaTypes">    
18.             <list>    
19.                 <value>text/html;charset=UTF-8</value>    
20.             </list>    
21.         </property>    
22.     </bean>  
23.     <!-- 启动SpringMVC的注解功能，完成请求和注解POJO的映射 -->  
24.     <!-- 多动作控制器必须有此配置 -->    
25.     <bean    
26.         class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">    
27.         <property name="messageConverters">    
28.             <list>    
29.                 <ref bean="mappingJacksonHttpMessageConverter" /> <!-- JSON转换器 -->    
30.             </list>    
31.         </property>    
32.     </bean>  
33.     <!-- 定义跳转的文件的前后缀 ，视图模式配置-->    
34.     <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">    
35.         <!-- 这里的配置我的理解是自动给后面action的方法return的字符串加上前缀和后缀，变成一个 可用的url地址 -->    
36.         <property name="prefix" value="/WEB-INF/jsp/" />    
37.         <property name="suffix" value=".jsp" />    
38.     </bean>  
39.       
40.     <!-- 配置文件上传，如果没有使用文件上传可以不用配置，当然如果不配，那么配置文件中也不必引入上传组件包 -->    
41.     <bean id="multipartResolver"      
42.         class="org.springframework.web.multipart.commons.CommonsMultipartResolver">      
43.         <!-- 默认编码 -->    
44.         <property name="defaultEncoding" value="utf-8" />      
45.         <!-- 文件大小最大值 -->    
46.         <property name="maxUploadSize" value="10485760000" />      
47.         <!-- 内存中的最大值 -->    
48.         <property name="maxInMemorySize" value="40960" />      
49.     </bean>  
50.   
51. </beans>  
52.       

8 配置web.xml文件

[html]  view plain  copy

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    
3.     xmlns="http://java.sun.com/xml/ns/javaee"    
4.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"    
5.     version="3.0">    
6.     <display-name>Archetype Created Web Application</display-name>    
7.     <!-- Spring和mybatis的配置文件 -->    
8.     <context-param>    
9.         <param-name>contextConfigLocation</param-name>    
10.         <param-value>classpath:spring-mybatis.xml</param-value>    
11.     </context-param>    
12.     <!-- 编码过滤器 -->    
13.     <filter>    
14.         <filter-name>encodingFilter</filter-name>    
15.         <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>    
16.         <async-supported>true</async-supported>    
17.         <init-param>    
18.             <param-name>encoding</param-name>    
19.             <param-value>UTF-8</param-value>    
20.         </init-param>    
21.     </filter>    
22.     <filter-mapping>    
23.         <filter-name>encodingFilter</filter-name>    
24.         <url-pattern>/*</url-pattern>    
25.     </filter-mapping>    
26.     <!-- Spring监听器 -->    
27.     <listener>    
28.         <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>    
29.     </listener>    
30.     <!-- 防止Spring内存溢出监听器 -->    
31.     <listener>    
32.         <listener-class>org.springframework.web.util.IntrospectorCleanupListener</listener-class>    
33.     </listener>    
34.     
35.     <!-- Spring MVC servlet -->    
36.     <servlet>    
37.         <servlet-name>SpringMVC</servlet-name>    
38.         <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>    
39.         <init-param>    
40.             <param-name>contextConfigLocation</param-name>    
41.             <param-value>classpath:spring-mvc.xml</param-value>    
42.         </init-param>    
43.         <load-on-startup>1</load-on-startup>    
44.         <async-supported>true</async-supported>    
45.     </servlet>    
46.     <servlet-mapping>    
47.         <servlet-name>SpringMVC</servlet-name>    
48.         <!-- 此处可以可以配置成*.do，对应struts的后缀习惯 -->    
49.         <url-pattern>/</url-pattern>    
50.     </servlet-mapping>  
51.     <!-- 引入静态文件 -->  
52.      <servlet-mapping>  
53.      <servlet-name>default</servlet-name>  
54.      <url-pattern>*.js</url-pattern>  
55.     </servlet-mapping>  
56.     <servlet-mapping>  
57.      <servlet-name>default</servlet-name>  
58.      <url-pattern>*.css</url-pattern>  
59.     </servlet-mapping>  
60.     <servlet-mapping>  
61.      <servlet-name>default</servlet-name>  
62.      <url-pattern>*.gif</url-pattern>  
63.     </servlet-mapping>    
64.     <welcome-file-list>    
65.         <welcome-file>/index.jsp</welcome-file>    
66.     </welcome-file-list>    
67.     
68. </web-app>    

9 编码

整合已经完毕下边开始编码

9.1前端

 chatMain.css

[css]  view plain  copy

1. body  
2. {  
3.     font-size:11px  
4. }  
5. h3  
6. {  
7.     margin:0px  
8. }  
9. .divShow  
10. {  
11.     border:solid 1px #ccc;  
12.     height:300px;  
13.     padding:5px;  
14.     font-size:12px;  
15.     overflow-y:scroll  
16. }  
17. #divMain  
18. {  
19.     border:soild 5px #ccc  
20. }  
21. #divMain .divTop  
22. {  
23.     padding:10px  
24. }  
25. #divMain .divTop .divL  
26. {  
27.     float:left;  
28.     width:78%  
29. }  
30. #divMain .divTop .divR  
31. {  
32.     float:right;  
33.     width:20%  
34. }  
35. #divMain .divBot  
36. {  
37.     clear:both;  
38.     padding:10px  
39. }  
40. #divMain .divBot .pb  
41. {  
42.     padding-bottom:3px  
43. }  
44. #divMain .divBot .pl  
45. {  
46.     padding-left:12px  
47. }  
48. #divMain .divBot .pt  
49. {  
50.     padding-top:3px;  
51.     color:#555  
52. }  
53. .clsTip  
54. {  
55.     position:absolute;  
56.     width:160px;  
57.     text-align:center;  
58.     font-size:13px;  
59.     border:soild 1px #cc3300;  
60.     margin-top:5px;  
61.     padding:2px;  
62.     margin-bottom:5px;  
63.     backgroudn-color:#ffe0a3;  
64.     display:none  
65. }  
66. .btn  
67. {  
68.     border:soild 1px #666;  
69.     padding:2px;  
70.     width:135px;  
71.     height:54px;  
72.     font-size:16px;  
73.     filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,  
74.     EndColorStr=#ECE9D8)  
75. }  
76. .txt  
77. {  
78.     border:#666 1px solid;  
79.     padding:2px;  
80.     margin-right:3px  
81. }  

 chatMain.js

[javascript]  view plain  copy

1. $(function(){  
2.     //绑定全局ajaxStart事件  
3. //  $("#divMsg").ajaxStart(function(){  
4.     //  $(this).show()  
5.     //})  
6.     //绑定全局ajaxStop事件  
7. //  $("#divMsg").ajaxStop(function(){  
8.     //  $(this).hide()  
9. //  })  
10.     initFace();//初始化表情  
11.     getMessageList();//取得聊天信息  
12.     getOnlineList();//取得在线人员  
13.     /** 
14.      * 点击发送按钮 
15.      */  
16.     $("#btnSend").bind("click",function(){  
17.         var $content = $("#txtContent")  
18.         if($content.val()!=""){  
19.             sendContent($content.val())  
20.         }else{  
21.             alert("发送内容不能为空")  
22.             $content.foucus()  
23.             return false  
24.         }  
25.     })  
26.     /** 
27.      * 点击表情图标 
28.      */  
29.     $("table tr td img").bind("click",function(){  
30.         var strContent = $("#txtContent").val()+"<:"+this.id+":>"  
31.         $("#txtContent").val(strContent)  
32.     })  
33. })  
34.   
35. /** 
36.  * 发送聊天内容函数 
37.  * @param content 聊天内容 
38.  */  
39. function sendContent(content){  
40.     $.ajax({  
41.         type:'get',  
42.         data:{"content":content},  
43.         url:'sentContent.html',  
44.         dataType:'text',  
45.         success:function(data){  
46.             if(data=="success"){  
47.                 getMessageList();  
48.                 $("#txtContent").val("")  
49.             }else{  
50.                 alert("发送失败")  
51.                 return false  
52.             }  
53.         }  
54.     })  
55. }  
56.   
57. /** 
58.  * 取得聊天内容数据 
59.  */  
60. function getMessageList(){  
61.     $.ajax({  
62.         type:"get",  
63.         url:"getMassageList.html",  
64.         dataType:"text",  
65.         success:function(data){  
66.             $("#divContent").html(data)  
67.         }  
68.     })  
69.     autoUpdContent()  //定时获取聊天信息  
70. }  
71.   
72. /** 
73.  * 获取在线用户 
74.  */  
75. function getOnlineList(){  
76.     $.ajax({  
77.         type:"get",  
78.         url:"getOnlineList.html",  
79.         dataType:"text",  
80.         success:function(data){  
81.             $("#divOnLine").html(data)  
82.         }  
83.     })  
84. }  
85.   
86. /** 
87.  * 设置表情图标函数 
88.  */  
89. function initFace(){  
90.     var strHTML = "";  
91.     for(var i=1;i<=10;i++){  
92.         strHTML += "<img src='/chatroom/static/pic/"+i+".gif' id='"+i+"'/>"  
93.     }  
94.     $("#divFace").html(strHTML)  
95. }  
96.   
97. /** 
98.  * 定时返回聊天内容和在线人数 
99.  */  
100. function autoUpdContent(){  
101.     setTimeout(getMessageList,5000)  
102.     setTimeout(getOnlineList,6000)  
103. }  

 login.js

[javascript]  view plain  copy

1. $(document).ready(function(){  
2.     //全局ajax开始事件  
3.     $("#msg").ajaxStart(function(){  
4.         $(this).html("正在登陆聊天室中···")  
5.     })  
6.   
7.     $("#btnLogin").bind("click",function(){  
8.         var $name = $("#txtName")  
9.         var $password = $("#txtPassword")  
10.         if($name.val()==""){  
11.             alert("用户名不能为空")  
12.             $name.focus()  
13.             return false  
14.         }else if($password.val()==""){  
15.             alert("密码不能为空")  
16.             $password.focus()  
17.             return false  
18.         }else{  
19.             userLogin($name.val(),$password.val())  
20.         }  
21.     })  
22. })  
23.   
24. //ajax登陆处理  
25. function userLogin(name,password){  
26.     $.ajax({  
27.         type:"GET",  
28.         url:"login.html",  
29.         data:{"name":name,"password":password},  
30.         dataType:'text',  
31.         success:function(data){  
32.             if(data == "success"){  
33.                 window.location.href="/chatroom/user/toChatMain.html";  
34.             }else{  
35.                 $("#msg").html("用户名或密码错误，请重新登录")  
36.                 return false  
37.             }  
38.         }  
39.     })  
40. }  

 pic

这个随意，名称只要是1、2、3···

 chatMain.jsp

[html]  view plain  copy

1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
3. <html>  
4. <head>  
5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
6. <title>大家的聊天室</title>  
7. <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-1.8.3.min.js"></script>  
8. <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/chatMain.js"></script>  
9. <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/chatMain.css" />  
10. </head>  
11. <body>  
12. <div id="divMain">  
13.     <div class="divTop">  
14.         <div class="divL">  
15.             <h3>大家的聊天室</h3>  
16.             <div class="divShow" id="divContent"></div>  
17.         </div>  
18.         <div class="divR">  
19.             <h3>当前在线人员</h3>  
20.             <div class="divShow" id="divOnLine"></div>  
21.         </div>  
22.     </div>  
23.     <div class="divBot">  
24.         <table cellpadding="0" cellspacing="0">  
25.             <tr><td colspan="2" id="divFace" class="pb"></td></tr>  
26.             <tr>  
27.                 <td>  
28.                     <textarea rows="3" cols="64" id="txtContent"></textarea>  
29.                 </td>  
30.                 <td class="p1">  
31.                     <input type="button" id="btnSend" value="发送" class="btn"> </input>  
32.                 </td>  
33.             </tr>  
34.             <tr><td colspan="2" class="pt">发送内容不能为空 </td></tr>  
35.         </table>  
36.     </div>  
37.     <span id="divMsg" class="clsTip">正在发送数据。。。</span>  
38. </div>  
39. </body>  
40. </html>  

 login.jsp

[html]  view plain  copy

1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
2.   
3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
4. <html>  
5. <head>  
6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
7. <title>登陆</title>  
8. <style type="text/css">  
9. @CHARSET "UTF-8";  
10. /* 全局控制 */  
11. * {  
12.     margin:0;  
13.     padding:0;  
14. }  
15.   
16. body {  
17.     font-size: 12px;  
18.     font-family: "宋体";  
19.     text-align: center;  
20. }  
21.   
22. a {  
23.     color: #e3e3e3;  
24.     text-decoration: none;  
25.     padding: 2px;  
26. }  
27.   
28. a:hover {  
29.     color: #e3e3e3;  
30.     background-color: #606870;  
31. }  
32.   
33. ul {  
34.     list-style: none;  
35.     margin: 10px auto;  
36. }  
37.   
38. li {  
39.     margin: 3px 1px;  
40.     line-height: 24px;  
41.     height: 24px;  
42. }  
43.   
44. li:hover {  
45.     background-color: #eee;  
46. }  
47.   
48. button {  
49.     line-height: 24px;  
50.     height: 26px;  
51. }  
52.   
53. fieldset {  
54.     height: 120px;  
55.     width: 250px;  
56.     padding: 5px;  
57. }  
58.   
59. label {  
60.     width: 80px;  
61.     float: left;  
62.     text-align: right;  
63. }  
64.   
65. input {  
66.     width: 150px;  
67. }  
68. </style>  
69.   
70. <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-1.8.3.min.js"></script>  
71.   
72. <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/login.js"></script>  
73.   
74. </head>  
75. <body>  
76. <fieldset><legend>登录</legend>  
77.   
78.     <ul>  
79.         <li><span>用户名:</span><input type="text" id="txtName"></input></li>  
80.         <li><span>密码:</span><input type="password" id="txtPassword"></input></li>  
81.         <li>  
82.         <button id="btnLogin">登录</button>  
83.         <button id="btnReset" type="reset">重置</button>  
84.         </li>  
85.     </ul>  
86.     <span id="msg"></span>  
87.   
88. </fieldset>  
89. </body>  
90.   
91. </html>  

 index.jsp

[html]  view plain  copy

1. <script type="text/javascript">  
2.     window.location.href="/chatroom/user/toLogin.html";  
3. </script>  

9.2 后台

UserController.java

[java]  view plain  copy

1. package com.chatroom.controller;  
2.   
3. import java.io.PrintWriter;  
4. import java.io.UnsupportedEncodingException;  
5. import java.text.SimpleDateFormat;  
6. import java.util.Date;  
7.   
8. import javax.annotation.Resource;  
9. import javax.servlet.ServletContext;  
10. import javax.servlet.http.HttpServlet;  
11. import javax.servlet.http.HttpServletRequest;  
12. import javax.servlet.http.HttpSession;  
13.   
14. import org.springframework.stereotype.Controller;  
15. import org.springframework.ui.Model;  
16. import org.springframework.web.bind.annotation.RequestMapping;  
17. import org.springframework.web.bind.annotation.RequestMethod;  
18.   
19. import com.chatroom.service.IUserService;  
20.   
21. @Controller  
22. @RequestMapping("/user")  
23. public class UserController extends HttpServlet {  
24.     /** 
25.      *  
26.      */  
27.     private static final long serialVersionUID = 95163763702302820L;  
28.   
29.     @Resource  
30.     private IUserService userService;  
31.       
32.   //获取session  
33.     HttpSession session ;  
34.     ServletContext application;  
35.     /** 
36.      * 控制跳转到登录界面 
37.      * @param request 
38.      * @param model 
39.      * @return 
40.      */  
41.     @RequestMapping(value="/toLogin.html")  
42.     public String toLogin(HttpServletRequest request,Model model){  
43.         return "login";  
44.     }  
45.       
46.     /** 
47.      * 执行登录操作 
48.      * @param request 
49.      * @param model 
50.      * @param out 
51.      */  
52.     @RequestMapping(value="/login.html",method = RequestMethod.GET)  
53.     public void login(HttpServletRequest request,Model model,PrintWriter out){  
54.         String name = request.getParameter("name");  
55.         String password = request.getParameter("password");  
56.         String s = userService.login(name, password);  
57.         session = request.getSession();  
58.         if(s=="success"){  
59.             session.setAttribute("name", name); // 保存当前登录的用户名  
60.             //  
61.             application = request.getSession().getServletContext();  
62.             if(application.getAttribute("onLine")==null){  
63.                 application.setAttribute("onLine", "");  
64.             }  
65.             String onLine = application.getAttribute("onLine").toString();  
66.             onLine += name+"<br/>";  
67.             application.setAttribute("onLine", onLine);  
68.         }  
69.         //写入返回结果  
70.         out.write(s);  
71.     }  
72.       
73.     /** 
74.      * 控制跳转到聊天主界面 
75.      * @param request 
76.      * @param model 
77.      * @return 
78.      */  
79.     @RequestMapping("/toChatMain.html")  
80.     public String toChatMain(HttpServletRequest request,Model model){  
81.         return "chatMain";  
82.     }  
83.       
84.     /** 
85.      * 前端发送聊天内容 
86.      * @param request 
87.      * @param model 
88.      */  
89.     @RequestMapping("sentContent.html")  
90.     public void sentContent(HttpServletRequest request,Model model,PrintWriter out){  
91.         //存储信息的全局变量  
92.         application = request.getSession().getServletContext();  
93.         session = request.getSession();  
94.         if(application.getAttribute("message")==null){  
95.             application.setAttribute("message", "");  
96.         }  
97.         //获取application中存储的聊天内容  
98.         String sourceMessage = application.getAttribute("message").toString();  
99.         //获取前端发送的聊天内容  
100.         String content = request.getParameter("content");  
101.         content = content.replace("<:", "<img src='/chatroom/static/pic/");  
102.         content = content.replace(":>", ".gif'/>");  
103.         // 获取session中的登陆者  
104.         String name = session.getAttribute("name").toString();  
105.         sourceMessage += this.getTime()+ "<font color='blue'><strong> "+name+"</strong></font> :"+content+"</br>";  
106.         application.setAttribute("message", sourceMessage);  
107.         //写入返回结果  
108.         out.write("success");  
109.     }  
110.       
111.     /** 
112.      * 前端定时获取聊天信息 
113.      * @param request 
114.      * @param model 
115.      * @param out 
116.      */  
117.     @RequestMapping("/getMassageList.html")  
118.     public void getMassageList(HttpServletRequest request,Model model,PrintWriter out){  
119.         application = request.getSession().getServletContext();  
120.         if(application.getAttribute("message")==null){  
121.             application.setAttribute("message", "");  
122.         }  
123.         //获取application中存储的聊天内容  
124.         String sourceMessage = application.getAttribute("message").toString();  
125.         String str = null;  
126.         try {  
127.             str = new String (sourceMessage.getBytes(), "utf-8");  
128.         } catch (UnsupportedEncodingException e) {  
129.             e.printStackTrace();  
130.         }  
131.         out.write(str);  
132.     }  
133.       
134.     /** 
135.      * 前端定时获取在线人员 
136.      * @param request 
137.      * @param model 
138.      * @param out 
139.      */  
140.     @RequestMapping("getOnlineList.html")  
141.     public void getOnlineList(HttpServletRequest request,Model model,PrintWriter out){  
142.         application = request.getSession().getServletContext();  
143.         if(application.getAttribute("onLine")==null){  
144.             application.setAttribute("onLine", "");  
145.         }  
146.         //获取application中存储在 线人员  
147.         String sourceOnline = application.getAttribute("onLine").toString();  
148.         out.write(sourceOnline);  
149.     }  
150.       
151.     /** 
152.      * 自定义日期格式 
153.      * @return 
154.      */  
155.     private String getTime(){  
156.         Date date = new Date();  
157.         SimpleDateFormat df = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");  
158.         return df.format(date);  
159.     }  
160. }  

UserService.java

[java]  view plain  copy

1. package com.chatroom.service.impl;  
2.   
3. import java.util.List;  
4.   
5. import javax.annotation.Resource;  
6.   
7. import org.springframework.stereotype.Service;  
8.   
9. import com.chatroom.dao.IUserDao;  
10. import com.chatroom.pojo.User;  
11. import com.chatroom.service.IUserService;  
12.   
13. @Service  
14. public class UserService implements IUserService {  
15.       
16.     @Resource  
17.     IUserDao userDao;  
18.   
19.     @Override  
20.     public User getUserById(int userId) {  
21.         return userDao.selectByPrimaryKey(userId);  
22.     }  
23.   
24.     @Override  
25.     public void insertUser(List<User> users) {  
26.         // TODO Auto-generated method stub  
27.   
28.     }  
29.   
30.     @Override  
31.     public String login(String name, String password) {  
32.         User record = new User();  
33.         record.setUserName(name);  
34.         record.setPassword(password);  
35.         User user = userDao.selectUserForLogin(record);  
36.         if(user==null){  
37.             return "fail";  
38.         }else{  
39.             return "success";  
40.         }  
41.     }  
42.   
43. }  

IUserService.java

[java]  view plain  copy

1. package com.chatroom.service;  
2.   
3. import java.util.List;  
4.   
5. import com.chatroom.pojo.User;  
6.   
7. public interface IUserService {  
8.     public User getUserById(int userId);  
9.     public void insertUser(List<User> users);  
10.     /** 
11.      * 登陆处理 
12.      * @param name 
13.      * @param password 
14.      * @return 
15.      */  
16.     public String login(String name,String password);  
17. }  

IUserDao.java

只多了一行用于登陆的代码

[java]  view plain  copy

1. User selectUserForLogin(User record);  

UserMapper.xml

只多了一个用于select的语句，id和IUserDao的方法名一致

[html]  view plain  copy

1. <select id="selectUserForLogin" resultMap="BaseResultMap" parameterType="com.chatroom.pojo.User" >  
2.     select   
3.     <include refid="Base_Column_List" />  
4.     from user_t  
5.     where user_name = #{userName,jdbcType=VARCHAR}  
6.       and password = #{password,jdbcType=VARCHAR}  
7.   </select>  

至此所有代码已经结束，下面让我们看一下运行结果

基本功能已经完成就是这样，再次感谢文章开头那篇博文对框架整合的指导。

源码下载地址：http://download.csdn.NET/detail/a582127421/8064265