背景:用框架写了一段时间的东西,突然新建项目,需要删除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,可查看后端返回的数据:
前后端交互就完成了