使用注解springmvc+spring+mybatis一个简单ajax例子

最新推荐文章于 2022-11-09 10:58:42 发布

原创最新推荐文章于 2022-11-09 10:58:42 发布 · 4.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#mybatis #spring #springmvc #注解 #实例

一些实例的积累专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用SpringMVC、Spring、MyBatis及Ajax技术实现的问题展示系统。通过前后端分离的方式，实现了问题数据的异步加载，并详细展示了项目中各组件的配置过程。

和上一个springmvc配合jsp/ajax/json,实现简单的jsp遍历后台数据的效果一样，只是这一次会加上mybatis，spring，mysql数据库。

一，要实现的预览：在一个无任何信息的空页面点击下图的“热门问题”按钮后，异步访问一个（有问题，是否解决，价值三个属性的）问题模型的的数据的简易ajax演示。

1，点击热门问题前：

2，点击热门问题后产生异步效果：

二，准备工具：myeclipse/eclipse。

spring的包是spring-framework-4.2.3.RELEASE-dist.zip里面全部导进去的（为了偷懒~），jquery和bootstrap的js和css都是在官网很好下载的~

三，代码实现：

1.模型QuestionModel（M）：

package com.yuege.model;

public class QuestionModel {
private String question;
private String resolve;
private int valueTotal;
public String getQuestion() {
	return question;
}
public void setQuestion(String question) {
	this.question = question;
}
public String getResolve() {
	return resolve;
}
public void setResolve(String resolve) {
	this.resolve = resolve;
}
public int getValueTotal() {
	return valueTotal;
}
public void setValueTotal(int valueTotal) {
	this.valueTotal = valueTotal;
}
}

2.控制器WelcomeController（C）：

package com.yuege.web;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.yuege.model.QuestionModel;
import com.yuege.service.QuestionService;

@Controller
public class WelcomeController{

	@Resource(name = "questionService")
	private QuestionService questionService;
	
	
	@RequestMapping(value = "/HotIssue.do", method = RequestMethod.GET)		
	@ResponseBody
	public QuestionModel allQuestion(HttpServletRequest req, HttpServletResponse resp){
		QuestionModel questionModel = (QuestionModel) questionService.SelectAllQuestion();
	
		return questionModel;
	}
}

3.视图（V）：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String _path = request.getContextPath();
	String _basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ _path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>

<link rel="stylesheet"
	href="${pageContext.request.contextPath}/resources/core/css/bootstrap.min.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/core/js/jquery-1.12.0.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/core/js/bootstrap.min.js"></script>



<script type="text/javascript">
	$(document).ready(function() {
		$("#HotIssue").click(function() {
			$.ajax({
				dataType : "json",
				url : "HotIssue.do",
				type : "GET",
				success : function(data) {
					$("#allquestion").html(data.question)
					$("#allresolve").html(data.resolve)
					$("#allvalueTotal").html(data.valueTotal)
				}
			});
		});
	});
</script>


</head>
<body>

	<div class="container">
		<div class="row">

			<!-- 导航栏  -->
			<div class="col-md-1" style="background-color: #dedef8;">
				<ul class="nav nav-pills" id="myTab">
					<li><a id="HotIssue" href="#HotIssueContent" data-toggle="tab">热门问题</a></li>
					<li><a href="#">C#</a></li>
					<li><a href="#">VB.Net</a></li>
					<li><a href="#">Java</a></li>
					<li><a href="#">PHP</a></li>
				</ul>
			</div>


			<!-- 导航栏下的内容  -->
			<div class="col-md-11">
				<div id="myTabContent" class="tab-content">

					<div class="tab-pane fade" id="HotIssueContent">
						<table class="table table-striped">
							<caption>全部问题</caption>
							<thead>
								<tr>
									<th>问题</th>
									<th>是否解决</th>
									<th>价值</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td id="allquestion"><a href=""></a></td>
									<td id="allresolve"></td>
									<td id="allvalueTotal"></td>
								</tr>
							</tbody>
						</table>
					</div>




				</div>
			</div>


		</div>
	</div>
</body>
</html>

4.web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
	id="WebApp_ID" version="3.0">
	<display-name>springmvc_ajax_json_jsp</display-name>

	<servlet>
		<servlet-name>springmvc_ajax_json_jsp</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>springmvc_ajax_json_jsp</servlet-name>
		<url-pattern>*.do</url-pattern>
	</servlet-mapping>



	<!-- 配置根应用程序，也就是ApplicationContext -->
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>
            classpath:applicationContext.xml
    </param-value>
	</context-param>



	<welcome-file-list>
		<welcome-file>/WEB-INF/views/jsp/Welcome.jsp</welcome-file>
	</welcome-file-list>
</web-app>

5.spring的配置文件（applicationContext.xml）

<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:tx="http://www.springframework.org/schema/tx"
	xmlns:aop="http://www.springframework.org/schema/aop" xmlns:mvc="http://www.springframework.org/schema/mvc"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="
        http://www.springframework.org/schema/beans 
		http://www.springframework.org/schema/beans/spring-beans-4.2.xsd 
		http://www.springframework.org/schema/tx 
		http://www.springframework.org/schema/tx/spring-tx-4.2.xsd
		http://www.springframework.org/schema/aop 
		http://www.springframework.org/schema/aop/spring-aop-4.2.xsd
		http://www.springframework.org/schema/context
		http://www.springframework.org/schema/context/spring-context-4.2.xsd">


	<!-- 注解启动 -->
	<context:annotation-config/>
	
	<!-- 注解启动  和  允许spring自动检测（指定的包及其子包）bean和定义bean  完全可以代替上面的语句  -->
	<context:component-scan base-package="com.yuege.service.impl" />

	
	
	
	
	
	
	
	
	
	
	
	<!-- 加载db.properties -->
 	<context:property-placeholder location="classpath:db.properties"/>
	
	<!-- 配置数据源 -->
	<bean name="dataSource" class="org.apache.commons.dbcp2.BasicDataSource" 
		destroy-method="close">
		<property name="driverClassName" value="${jdbc.driver}"/>
		<property name="url" value="${jdbc.url}" />
		<property name="username" value="${jdbc.username}" />
		<property name="password" value="${jdbc.password}" />
	</bean>

	<!-- sqlSessionFactory -->
	<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
		<!-- 数据库连接池 -->
		<property name="dataSource" ref="dataSource" />
		<!-- 加载MyBatis全局配置文件 -->
		<property name="configLocation" value="classpath:sqlMapConfig.xml"/>
	</bean>
	
	<!-- mapper扫描器 -->
	<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
		<!-- 扫描包路径 -->
		<property name="basePackage" value="com.yuege.dao"/>
		<property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
	</bean>

</beans>

6.数据库引用文件（db.properties）

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/daxuejingyanwang
jdbc.username=root
jdbc.password=**
7.Mybatis映射文件（sqlMapConfig.xml）

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration 
PUBLIC "-//mybatis.org//DTD Config 3.0//EN" 
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>

<!-- 会使用 Bean 的首字母小写的非限定类名来作为它的别名 -->
<typeAliases>
<package name="com.yuege.model"/>
</typeAliases>



<mappers>
    <mapper resource="com/yuege/dao/QuestionMapper.xml"/>
</mappers>

</configuration>

8.springmvc配置文件（springmvc_ajax_json_jsp-servlet.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:p="http://www.springframework.org/schema/p"
	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-3.0.xsd
    http://www.springframework.org/schema/context
    http://www.springframework.org/schema/context/spring-context-3.0.xsd
    http://www.springframework.org/schema/mvc  
    http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">


	<!-- 视图解析器 -->
	<bean
		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="viewClass"
			value="org.springframework.web.servlet.view.JstlView" />
		<property name="prefix" value="/WEB-INF/views/jsp/" />
		<property name="suffix" value=".jsp" />
	</bean>


	<context:annotation-config />
	<!-- 扫描 注解 -->
	<context:component-scan base-package="com.yuege.web" />
	<!-- Spring启用了 mvc:annotation-driven MVC注解配置 -->
	<mvc:annotation-driven />

</beans>

9.service

package com.yuege.service;


import com.yuege.model.QuestionModel;

public interface QuestionService {
	public QuestionModel SelectAllQuestion();
}

10.service实现类

package com.yuege.service.impl;


import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import com.yuege.dao.QuestionMapper;
import com.yuege.model.QuestionModel;
import com.yuege.service.QuestionService;

@Service(value="questionService")
public class QuestionServiceImpl implements QuestionService{

	@Resource(name="questionMapper")
	private QuestionMapper questionMapper;
	
	public QuestionModel SelectAllQuestion() {
	    // TODO Auto-generated method stub
	    return this.questionMapper.SelectAllQuestion();
	  }

	
	
	
	
}

11.dao接口

package com.yuege.dao;


import com.yuege.model.QuestionModel;

public interface QuestionMapper {

	public QuestionModel SelectAllQuestion();
}

12.dao映射文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.yuege.dao.QuestionMapper" >


<resultMap id="BaseResultMap" type="com.yuege.model.QuestionModel" >
    <result column="question" property="question"/>
    <result column="resolve" property="resolve"/>
    <result column="valueTotal" property="valueTotal"/>
</resultMap>
  

  <select id="SelectAllQuestion" resultMap="BaseResultMap">
      select question,resolve,valueTotal from question where valueTotal=1
  </select>
    
    
</mapper>

完成

13.sql语句

CREATE TABLE question (  
questionid int(11) NOT NULL AUTO_INCREMENT,  
question varchar(45) NOT NULL,  
resolve varchar(45) NOT NULL,  
valueTotal int(11) NOT NULL,  
PRIMARY KEY (questionid), 
UNIQUE KEY questionid_UNIQUE (questionid)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8

insert into question (question,resolve,valueTotal) values('问题','1',1)

14.部署在tomcat后启动tomcat，在浏览器输入http://localhost:8080/ssm_json_mysql_jsp_ajax/