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<Map<String,Object>> 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<Map<String, Object>> 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<Map<String, Object>> resultList = userService.queryAll();        for(Map<String,Object> map : resultList){            JSONObject jsObject = new JSONObject();            for(Map.Entry<String,Object> 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+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><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 += "<br>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文件内容如下：

<?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"      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">      <!-- 自动扫描bean，把作了注解的类转换为bean -->      <context:component-scan base-package="com.jswang.controller" />      <!-- 启动Spring MVC的注解功能，完成请求和注解POJO的映射 -->      <bean          class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />      <!-- 对模型视图名称的解析，在请求时模型视图名称添加前后缀 -->      <bean          class="org.springframework.web.servlet.view.InternalResourceViewResolver"          p:prefix="/" p:suffix=".jsp" />      <!-- apache.dbcp连接池的配置 -->      <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>      <!-- jdbc注入 -->      <bean id="jdbcTemplate"          class="org.springframework.jdbc.core.JdbcTemplate">          <property name="dataSource">              <ref bean="dataSource" />          </property>      </bean>      <!-- dao注入 -->      <bean id="personService" class="com.jswang.service.imp.UserServiceImp">          <property name="jdbcTemplate" ref="jdbcTemplate"></property>      </bean>  </beans> 

修改后的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>SpringTest</display-name>  <welcome-file-list>    <welcome-file>/index.jsp</welcome-file>  </welcome-file-list>  <servlet>    <servlet-name>spring</servlet-name>    <servlet-class>              org.springframework.web.servlet.DispatcherServlet          </servlet-class>    <load-on-startup>1</load-on-startup>  </servlet>  <servlet-mapping>    <servlet-name>spring</servlet-name>    <url-pattern>*.do</url-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环境搭建实例就全部完成了。