springboot jsp引入和配置

最新推荐文章于 2024-06-26 18:53:08 发布

胖鹅68

最新推荐文章于 2024-06-26 18:53:08 发布

阅读量1.4k

点赞数 1

分类专栏： spring、SpringBoot、springMvc

本文链接：https://blog.csdn.net/hbiao68/article/details/89367388

版权

spring、SpringBoot、springMvc 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

文章目录

- 如何配置JSP页面
- 如何给JSP页面加载资源（CSS、js、image）

如何配置JSP页面

在pom.xml文件中添加如下配置

<!-- 允许JSP页面的功能 -->
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-tomcat</artifactId>
	<scope>provided</scope>
</dependency>
<dependency>
	<groupId>org.apache.tomcat.embed</groupId>
	<artifactId>tomcat-embed-jasper</artifactId>
	<scope>provided</scope>
</dependency>

添加配置文件

# 配置JSP页面，
spring.mvc.view.prefix=/WEB-INF/jsp/ 
spring.mvc.view.suffix=.jsp

创建/src/main/webapp/WEB-INF/jsp目录，用来存放jsp文件
创建/src/main/webapp/WEB-INF/web.xml 文件
创建Controller类，实现URL定向到具体的JSP页面

package com.hb.page;

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

/**
 * 使用@Controller 注解可以跳转到对应的jsp页面中去
 * @author 黄彪
 * 2018年9月6日
 */
@Controller
@RequestMapping("/pcustomer")
public class CustomerPageController {
	@RequestMapping("/Add")
    public String index(){
        return "addCustomer";
    }
}

说明：在地址栏中输入 localhost:9090/pcustomer/Add；页面显示的是/src/main/webapp/WEB-INF/jsp/addCustomer.jsp的内容

@RestController用于描述REST服务，相当于@Controller 和 @ResponseBody的组合，@ResponseBody表示请求直接返回的是字符串，而不是跳转到页面，因此控制器智能使用@Controller注解，才能跳转到JSP页面

如何给JSP页面加载资源（CSS、js、image）

创建/spbootstudy/src/main/webapp/static文件夹，所有的静态资源（CSS、image、js）存放在该目录下面
引入静态资源需要使用绝对路径（指明根目录，从根目录查找对应的文件）

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<!-- <link rel="stylesheet" href="/static/js/antd/antd.min.css" /> -->
<!-- 使用绝对路径引入资源文件，资源文件在webapp/static目录下面 -->
<script type="text/javascript" src="/static/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/vue/vue.min.js"></script>
</head>
<body>
	<div id="addCustomer">
		<div>
			用户名：<input v-model="username" placeholder="请输入用户名"/>
		</div>
		<div>
			年龄：<input v-model="age" placeholder="请输入年龄"/>
		</div>
		<div>
			生日：<input v-model="birthday" placeholder="请输入生日"/>
		</div>
		<div>
			<button @click="commitData">提交</button>
		</div>
	</div>
</body>
<script>
new Vue({
	  el: '#addCustomer',
	  data: function(){
		return {
			username:"huangbiao1",
			age:30,
			birthday:"1988-11-30",
			createDate:""
		}  
	  },
	  mounted: function() {
		  console.log("mounted");
	  },
	  methods:{
		  commitData: function(){
			  var that = this;
			  var paramObj = {
				username: that.username,
				age: that.age,
				birthday: that.birthday
			  }
			  console.log("commitData");
			  console.dir(that.data);
			  debugger
			  $.ajax({
				  method:"GET",
				  url:"/customer/save",
				  async:true,
				  data: paramObj
			  })
		  }
	  }
})
</script>
</html>