Spring：spring+springMVC+jQuery+Ajax+Mysql环境搭建实例
本文记录如何使用MyEclipse搭建Spring+SpringMVC+jQuery+Ajax+Mysql，形成一个简易的Web应用框架。有图有代码，有运行结果。
本文使用到的jar包已经上传到csdn
下载地址为：spring+springMVC+mysql+JSON_jar包整合
本文的使用的到基础环境：
- MyEclipse10
- Mysql5.6.21
- Tomcat8
1 数据库准备
1.1 建库
打开cmd控制台，在控制台登录进入mysql控制界面，查看当前已有的数据库。
输入建库命令：create database springtest;
输入命令show databases;查看当前所有数据库，发现数据库已经创建好了，接下来就可以建表了。
1.2 建表
输入命令use springtest;切换当前使用的数据库,再输入下列建表语句创建数据表spring_user
CREATE TABLE `spring_user` (
`id` VARCHAR(40) NOT NULL,
`name` VARCHAR(40) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=INNODB DEFAULT CHARSET=utf8;
输入命令show tables;可以看到spring_user表创建成功了。
接下来再往表spring_user中新增一条数据。
数据库准备做完之后，就可以开始在myeclipse中创建工程了。
2 创建工程
创建一个Web Project，名称为SpringTest,选择java版本1.6，runtime为Tomcat8，使用myeclipse自带的tomcat也可以。
点击next来到这个页面，在这个页面可以创建一些目录，也可以工程创建完后再创建，这里直接点击next跳过。
在这个页面勾选上自动生成web.xml的选项，然后点击finish完成工程创建。
创建好的工程结构如下
接下来需要下载spring相关的jar包，jar包链接已经写在文章开始处，下载完成后，将所有jar包复制到WEB-INF/lib目录中
由于本次实例还将用到jQuery所以需要在WebRoot目录下新建目录js,并且去jQuery的官网下载jQuery环境，本文使用的是jQuery-1.11.3，将下载好的jQuery包放入js目录下
引入jQuery后可能会像上图一样报错，解决方法–>右击报错的jQuery文件–>MyEclipse–>Exclude From Validation。
3 CODE
经过数据库准备和工程创建，我们现在已经有了本次项目的所有支撑了，接下来就可以开始写代码了。
首先，创建实体类User,代码：
package com.jswang.domain;
public class User {
private String name;
private String id;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
}创建Service接口UserService，代码：
package com.jswang.service;
import java.util.List;
import java.util.Map;
import com.jswang.domain.User;
public interface UserService {
int save(User person);
int del(User person);
int update(User person);
List> queryAll();
} 创建Service实现类UserServiceImp，代码：
package com.jswang.service.imp;
import java.util.List;
import java.util.Map;
import org.springframework.jdbc.core.JdbcTemplate;
import com.jswang.domain.User;
import com.jswang.service.UserService;
public class UserServiceImp implements UserService{
/**
* spring的jdbc组件，需要搭配servlet-spring.xml中配置的datasourse数据源使用
*/
private JdbcTemplate jdbcTemplate;
@Override
public int save(User person) {
/**
* 新增user数据
*/
return jdbcTemplate.update("insert into spring_user values(?,?)",
new Object[]{person.getId(),person.getName()});
}
@Override
public int del(User person) {
/**
* 本次工程暂不实现删除操作
*/
return 0;
}
@Override
public int update(User person) {
/**
* 本次工程暂不实现更新操作
*/
return 0;
}
@Override
public List> queryAll() {
/**
* 查询user表中的所有数据
*/
return jdbcTemplate.queryForList("select * from spring_user");
}
public JdbcTemplate getJdbcTemplate() {
return jdbcTemplate;
}
/**
* 必要方法，用于spring的bean工厂根据spring-servlet.xml自动注入jdbcTemplate实例
*/
public void setJdbcTemplate(JdbcTemplate jdbcTemplate) {
this.jdbcTemplate = jdbcTemplate;
}
}
接下来再创建一个Controller类MyController，我们的后台代码就写完了,代码：
package com.jswang.controller;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.jswang.service.UserService;
import com.jswang.domain.User;
@Controller
@RequestMapping(value = "/action")
public class MyController {
@Autowired
UserService userService;
@RequestMapping(value = "/insert.do")
/**
* 新增一个用户
* @param request
* @param modelMap
* @return String
*/
public String insert(HttpServletRequest request, ModelMap modelMap) {
User user = new User();
String id = request.getParameter("id");
String name = request.getParameter("name");
if (null != id && null != name) {
user.setId(id);
user.setName(name);
userService.save(user);
System.out.println(user.getId());
System.out.println(user.getName());
modelMap.put("person", user);
}
return "index";
}
@RequestMapping(value="/queryAll.do")
@ResponseBody
/**
* 查询所有用户
* @param request
* @return String
*/
public String queryAll(HttpServletRequest request){
JSONArray js = new JSONArray();
List> resultList = userService.queryAll();
for(Map map : resultList){
JSONObject jsObject = new JSONObject();
for(Map.Entry entry:map.entrySet()){
jsObject.put(entry.getKey().toString(), entry.getValue().toString());
}
js.add(jsObject);
}
String result = js.toString();
return result;
}
}
接下来还要写一个简单的JSP用于交互。将WebRoot目录下创建工程时自动生成的index.jsp改成下列代码即可：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>spring环境实例title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.11.3.min.js">script>
<script type="text/javascript" src="js/jquery-1.11.3.js">script>
<script type="text/javascript" src="myJS.js">script>
head>
<body>
<form action="action/insert.do" method="post">
序号:<input type="text" name="id"><br>
姓名:<input type="text" name="name">
<input type="submit" value="注册">
form>
<br>
<div id="allUser">div>
body>
html>
然后在WebRoot目录下新建一个js文件myJS.js,代码：
$(function() {
func();
});
//获取所有用户信息
function func() {
var url = "action/queryAll.do";
var data = doAjax(url);
var str = "";
$(data).each(function() {
str += "
id:" + this.id + " name:" + this.name;
});
$("#allUser").html(str);
}
//ajax请求
function doAjax(url) {
var reslutData = {};
$.ajax({
url : url,
type : "POST",
dataType : "json",
async : false,
success : function(data) {
reslutData = data;
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
return textStatus;
},
});
return reslutData;
}此时，除了配置文件之外，我们的工程已经全部建好，目前的工程目录如下图所示：
4 配置文件
最后，还需要在WEB-INF目录下添加spring的xml文件spring-servlet.xml，以及修改web.xml文件。添加的spring.xml文件内容如下：
<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"
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">
<context:component-scan base-package="com.jswang.controller" />
<bean
class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver"
p:prefix="/" p:suffix=".jsp" />
<bean id="dataSource"
class="org.apache.commons.dbcp.BasicDataSource"
destroy-method="close">
<property name="driverClassName"
value="com.mysql.jdbc.Driver">
property>
<property name="url" value="jdbc:mysql://127.0.0.1/springtest">property>
<property name="username" value="root">property>
<property name="password" value="w2550064js">property>
<property name="maxActive" value="100">property>
<property name="maxIdle" value="30">property>
<property name="maxWait" value="500">property>
<property name="defaultAutoCommit" value="true">property>
bean>
<bean id="jdbcTemplate"
class="org.springframework.jdbc.core.JdbcTemplate">
<property name="dataSource">
<ref bean="dataSource" />
property>
bean>
<bean id="personService" class="com.jswang.service.imp.UserServiceImp">
<property name="jdbcTemplate" ref="jdbcTemplate">property>
bean>
beans> 修改后的web.xml文件内容如下：
<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>SpringTestdisplay-name>
<welcome-file-list>
<welcome-file>/index.jspwelcome-file>
welcome-file-list>
<servlet>
<servlet-name>springservlet-name>
<servlet-class>
org.springframework.web.servlet.DispatcherServlet
servlet-class>
<load-on-startup>1load-on-startup>
servlet>
<servlet-mapping>
<servlet-name>springservlet-name>
<url-pattern>*.dourl-pattern>
servlet-mapping>
web-app>加上配置文件后，整个工程的目录结构如下：
5 演示
右击工程名–>Debug As–>Myeclipse Server Application:
如果安装了Tomcat8，并且在Myeclipse中配置了tomcat，则此处会显示Tomcat 8.x 否则只有Myeclipse自带的tomcat，这里我选择Tomcat 8.x作为服务器运行，当然也可以选择Myeclipse自带的tomcat，都可以。
服务启动完毕后，在浏览器输入：http://127.0.0.1:8080/SpringTest/
可以看到，ajax请求成功，并且返回我们在建表时插入的第一条用户数据
在表单中填写数据并且点击注册：
可以看到填写的数据新增成功。
至此，本次spring+springMVC+jQuery+Ajax+Mysql环境搭建实例就全部完成了。