本文记录如何使用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

[code lang=text]
CREATE TABLE `spring_user` (
`id` VARCHAR(40) NOT NULL,
`name` VARCHAR(40) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=INNODB DEFAULT CHARSET=utf8;
[/code]

这里写图片描述

输入命令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,代码:

[code lang=text]
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;
}
}
[/code]

创建Service接口UserService,代码:

[code lang=text]
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();
}
[/code]

创建Service实现类UserServiceImp,代码:

[code lang=text]
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;
}
}

[/code]

接下来再创建一个Controller类MyController,我们的后台代码就写完了,代码:

[code lang=text]
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;
}

}

[/code]

接下来还要写一个简单的JSP用于交互。将WebRoot目录下创建工程时自动生成的index.jsp改成下列代码即可:

[code lang=text]
<%@ 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>

[/code]

然后在WebRoot目录下新建一个js文件myJS.js,代码:

[code lang=text]
$(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;
}
[/code]

此时,除了配置文件之外,我们的工程已经全部建好,目前的工程目录如下图所示:
这里写图片描述

4 配置文件

最后,还需要在WEB-INF目录下添加spring的xml文件spring-servlet.xml,以及修改web.xml文件。添加的spring.xml文件内容如下:

[code lang=text]
<?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>
[/code]

修改后的web.xml文件内容如下:

[code lang=text]
<?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>
[/code]

加上配置文件后,整个工程的目录结构如下:
这里写图片描述

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环境搭建实例就全部完成了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注