myeclipse2015搭建Spring项目（前后端交互涉及jquery $.ajax）

背景：用框架写了一段时间的东西，突然新建项目，需要删除spring多余配置，研究下spring，于是从零开始搭建spring项目

本文分两部分，第一部分为搭建项目，网上给的经验（但网上不详细复写一遍，包括一些自己的浅显理解，不涉及ajax），第二部分为涉及ajax的前后端内容

如果不完整不详细请留言

***********************************************************************************************************************************************************

第一部分************************************************************************************************************************************************

***********************************************************************************************************************************************************

新建一个Web Project,就叫abc吧，注意java EE version和java version，由于版本更迭很多东西是变化的，比如版本过高tomcat7并不兼容，所以选择好对应的版本，Target runtime不要选择内置的，选择tomcat7

完成后目录是这样的：

现在添加spring，在项目上右键出现如下界面，一步步选择Install spring facet:

出现如下，一定不要直接完成，点击“next”,不然会涉及AOP等更复杂的东西，增加了项目冗余度

next出现如下界面,中间两个选择项取消。对于最后那个选择框，是建立一个applicationContext.xml的文件，这个文件需要在后面web.xml配置（后续有配置内容），默认放在src下。如果你不喜欢放在src下或者喜欢叫其他名字，那就不要勾选此选项

此时，项目目录如下。多了一些配置文件和Libraries

applicationContext.xml内容如下，自动扫描的包里一般存放后台的.java文件，稍后在src下建立com.controller包，即可扫描了。（一般来讲，包名可以命名成com.abc.controller，此时在该xml中写成<context:component-scan base-package="com.*.controller"></context:component-scan>即可扫描所有该命名格式的包名）

<?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: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.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd">
        
        
        <!-- 配置自动扫描的包 -->
        <context:component-scan base-package="com.controller"></context:component-scan>
        
        <!-- 配置视图解析器 如何把handler 方法返回值解析为实际的物理视图 -->
        <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
            <property name = "prefix" value="/WEB-INF/"></property>
            <property name = "suffix" value = ".jsp"></property>
        </bean>
</beans>

再配置web.xml，web.xml在WebRoot/WEB-INF（详细目录结构下文会给出）下，如果你的项目下没有，自己建立一个。注意到其中一个配置<param-value>classpath:applicationContext.xml</param-value>，此句就是写刚才的配置文件位置

<?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_2_5.xsd"
    id="WebApp_ID" version="2.5">
    
    <!-- 配置DispatchcerServlet -->
    <servlet>
        <servlet-name>springDispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!-- 配置Spring mvc下的配置文件的位置和名称 -->
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:applicationContext.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>springDispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
</web-app>

在WEB-INF下建立success.jsp，内容什么都可以。我是直接建立一个新的，里面内容加一个success，做辨识

建立一个包com.controller,其下建立Hello.java，内容如下。解释一下内容：@controller一定要有，是spring扫描的关键，@requestMapping后面的路径是辨识的路径，你可以直接在网址中输入http://localhost:8888/abc/helloworld访问到success.jsp，可以理解为@requestMapping所写的路径代替了原本的路径，现在是访问不了http://localhost:8888/abc/WEB-INF/success.jsp的，该路径被helloworld替代了。return返回的内容是原本的路径，因为在applicationContext.xml中配置过前缀和后缀，所以此处只需要success即可，但如果你将配置文件中前后缀删除，return就需要“/WEB-INF/success.jsp”这种完整路径

package com.controller;

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


@Controller
public class Hello{

    /**
     * 1. 使用RequestMapping注解来映射请求的URL
     * 2. 返回值会通过视图解析器解析为实际的物理视图, 对于InternalResourceViewResolver视图解析器，会做如下解析
     * 通过prefix+returnVal+suffix 这样的方式得到实际的物理视图，然后会转发操作
     * "/WEB-INF/success.jsp"
     * @return
     */
    @RequestMapping("/helloworld")
    public String hello(){
        System.out.println("hello world");
        return "success";
    }
    
}

此时项目结构如下，你可以看见Hello.java和applicationContext.xml的右上角有蓝色小S，意思就是被spring所关联了，有时候蓝色S不出现也有可能，出现的时候心中一稳，妥了

最后修改Index.jsp，该JSP是默认的，加上一句<a href="helloworld">请点击这里</a>，a标签是超链接，href指链接地址，helloworld映射刚才java文件中@RequestMapping。同时注意将编码改为utf-8.

<%@ 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>My JSP 'index.jsp' starting page</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="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  </head>
  
  <body>
   
    This is my JSP page. <br>
    <a href="helloworld">请点击这里</a>
    
  </body>
</html>

可以用tomcat发布了，(注意端口号，一般是8080，我是8888）http://localhost:8888/abc/指向默认的index.jsp，和http://localhost:8888/abc/index.jsp一样，界面如下，点击链接跳转到http://localhost:8888/abc/helloworld，也就是success.jsp

到此，最简单基本Spring映射项目完成

***********************************************************************************************************************************************************第二部分*************************************************************************************************************************************************

***********************************************************************************************************************************************************

再贴一次目录，此目录是基础目录，基于第一部分。JQuery $.ajax直接在该目录基础上搭建，如果直接看第二部分的朋友，这里统一简单说明下，Hello.java有更改后续会贴出详细代码可以不管，applicationContext.xml主要涉及component-scan扫描包的配置，success.jsp基本是空的加了一个success字段为了辨识出是哪个jsp，web.xml和index.jsp后续也会修改不用理会

此项目需要jquery.js和部分jar，百度云链接如下

链接：https://pan.baidu.com/s/12LfKikbhOrFc0Dpw0VYC_A 密码：cmqk

新建目录js，jquery.js放在JS目录下，jar包放在lib下，项目结构如下：

修改web.xml配置，主要添加了js、css、jpg、png等文件可识别读取，不然等会你会发现导入不了jquery.js，即使路径是对的

<?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_2_5.xsd"
    id="WebApp_ID" version="2.5">
    
    <!-- 配置DispatchcerServlet -->
    <servlet>
        <servlet-name>springDispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!-- 配置Spring mvc下的配置文件的位置和名称 -->
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:applicationContext.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>springDispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
    
    
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.js</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.css</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.png</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.jpg</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.gif</url-pattern>
    </servlet-mapping>
    
    
</web-app>

修改index.jsp:添加了一个按钮BUTTON，函数为go()，在下方javascript中写相关函数，导入juery.js：<script type="text/javascript" src="./js/jquery.js" ></script>（./表示同级目录，../表示父级目录,/表示根目录，验证导入成功：ctrl+左键点击"./js/jquery.js"会跳转到JS中）。ajax里面的内容如果想知道更多配置比如type:get等自行百度，这里只强调url，url是匹配的路径，等会会在后台.java文件中用@RequestMapping进行匹配，data是传入后台的数据，json形式，后台可以获取到。success:function(data)指调用成功后执行的函数

<%@ 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>My JSP 'index.jsp' starting page</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="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  </head>
  
 <body>
  
   This is my JSP page. <br>
   <a href="helloworld">请点击这里</a>
 	<button onclick="go()" ></button>
 </body>
 
<script type="text/javascript" src="./js/jquery.js" ></script>
 <script type="text/javascript">
  
 function go(){
  $.ajax({type: 'POST',   //请求方式
      url: "/abc/jqueryTest",    
      data: {"para":1555666},
	  dataType:"json",
	  //async:false,
	  cache:false,
	  global:false,
	  success:function(data){
	     alert(data.success);
	  },
	 });}
  </script>
</html>

Hello.java如下，注意前端传回的参数获取和传到前端的参数，再看一眼上文，success:function(data)中“alert(data.success);”即参数的形式，后台把参数以jsonobject形式传到前台，前台只需data.[参数key]即可获取。

package com.controller;

import java.io.IOException;
import java.io.PrintWriter;

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

import net.sf.json.JSONObject;

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


@Controller
public class Hello{

    /**
     * 1. 使用RequestMapping注解来映射请求的URL
     * 2. 返回值会通过视图解析器解析为实际的物理视图, 对于InternalResourceViewResolver视图解析器，会做如下解析
     * 通过prefix+returnVal+suffix 这样的方式得到实际的物理视图，然后会转发操作
     * "/WEB-INF/success.jsp"
     * @return
     */
    @RequestMapping("/helloworld")
    public String hello(){
        System.out.println("hello world");
        return "success";
    }
    
    @RequestMapping("/jqueryTest")
   	public String pageOpenCount(HttpServletRequest request,	HttpServletResponse response) {
       	//获取前台传回来的参数
    	String para = request.getParameter("para") == null ? ""	: request.getParameter("para").trim();
       	
       	JSONObject jsonObject = new JSONObject();
   		System.out.println("**********************"+para);
   		//传参数到前台
   		jsonObject.put("success", true);
   		setToHttp(response, jsonObject.toString());
   		return null;
   	}
       
    // json返回
	public static void setToHttp(HttpServletResponse response, String jsonObject) {
		PrintWriter writer = null;
		try {
			response.setCharacterEncoding("utf-8");
			response.setContentType("text/html;charset=utf-8");
			response.setHeader("Cache-Control", "no-cache");
			response.setHeader("Access-Control-Allow-Origin", "*");
			writer = response.getWriter();
			if (jsonObject != null) {
				writer.write(jsonObject.toString());
			}
			writer.flush();
		} catch (IOException e) {
			System.out.println("删除设备发生输出IO异常！");
		} catch (Exception e) {
			System.out.println("删除设备发生调用异常！");
		} finally {
			if (writer != null) {
				writer.close();
			}
		}
	}
 }

完工，发布项目，输入网址，可以看见相关按钮，按钮比较小，能用就行

点击按钮，前端界面如下，弹出一个alert，返回的数据是true，即后台.java文件给的success的数据参数

后台界面如下，这个参数就是jsp中ajax传递的“para”参数的数值

同时，你也可以输入http://localhost:8888/abc/jqueryTest，可查看后端返回的数据：

前后端交互就完成了

myeclipse2015搭建Spring项目（前后端交互涉及jquery $.ajax）

猜你喜欢