spring+springmvc+mybatis+logback 框架搭建

注:本文僅僅屬於我的記錄文檔。javascript

1、項目的整體結構、以及所須要的jar包css

1.項目結構(注:此處的rsrc/resources爲資源目錄,新建時New -> source folder)html

2.所須要的jar包java

2、配置文件源代碼mysql

a. web.xmljquery

<?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">
	<display-name>portals</display-name>
	
	<!-- 編碼過濾 -->
	<filter>
         <filter-name>encodingFilter</filter-name>
         <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
         <init-param>
             <param-name>encoding</param-name>
             <param-value>UTF-8</param-value>
         </init-param>
     </filter>
     <filter-mapping>
         <filter-name>encodingFilter</filter-name>
         <url-pattern>/*</url-pattern>
     </filter-mapping>
	
	<!-- Spring 監聽器 -->
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>classpath:applicationContext.xml</param-value>
	</context-param>
	
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>
	
	<!-- logback 配置監聽器。 若不配置的話  會自動尋找根路徑下的logback.xml -->
	<!-- <context-param>  
         <param-name>logbackConfigLocation</param-name>  
         <param-value>classpath:logback.xml</param-value>  
	</context-param>  
	
	<listener>  
         <listener-class>ch.qos.logback.ext.spring.web.LogbackConfigListener</listener-class>  
	</listener> -->
	
	<!-- 配置DispatcherServlet -->
	<servlet>
		<servlet-name>spring</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>classpath:spring-mvc.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>spring</servlet-name>
		<!-- 此處配置成 /  注意和/*的區別  -->
		<url-pattern>/</url-pattern>
	</servlet-mapping>
	
	<welcome-file-list>
		<welcome-file>/WEB-INF/login.jsp</welcome-file>
	</welcome-file-list>
	
</web-app>

b.data.propertiesweb

driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/user
jdbc.username=
jdbc.password=

webServer=http://localhost:8080/portals

c.applicationContext.xmlajax

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:aop="http://www.springframework.org/schema/aop" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:util="http://www.springframework.org/schema/util"
	xmlns:tx="http://www.springframework.org/schema/tx"
	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.xsd
	http://www.springframework.org/schema/aop
	http://www.springframework.org/schema/aop/spring-aop.xsd
	http://www.springframework.org/schema/tx
	http://www.springframework.org/schema/tx/spring-tx.xsd
	http://www.springframework.org/schema/util
	http://www.springframework.org/schema/util/spring-util.xsd">
	<!-- 掃描service和dao -->
	<context:component-scan base-package="com.study.service,com.study.dao" />
	<!-- 引入資源文件的三種方式 -->
	<!-- <context:property-placeholder location="classpath:data.properties"/> -->
	<!-- <bean id="propertyConfigurer"
		class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
		<property name="location">
			<value>classpath:data.properties</value>
		</property>
	</bean> 
	<bean id="dataSource"
		class="org.springframework.jdbc.datasource.DriverManagerDataSource">
		<property name="driverClassName" value="${jdbc.driver}" />
		<property name="url" value="${jdbc.url}" />
		<property name="username" value="${jdbc.username}" />
		<property name="password" value="${jdbc.password}" />
	</bean>-->
	<util:properties id="settings" location="classpath:data.properties" />

	<bean id="dataSource"
		class="org.springframework.jdbc.datasource.DriverManagerDataSource">
		<property name="driverClassName" value="#{settings.driver}" />
		<property name="url" value="#{settings['jdbc.url']}" />
		<property name="username" value="#{settings['jdbc.username']}" />
		<property name="password" value="#{settings['jdbc.password']}" />
	</bean>
	<!-- 和mybatis的映射,能夠引入comfig文件的配置,也能夠不引入 -->
	<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
		<property name="dataSource" ref="dataSource" />
		<!-- mybatis主配置文件 -->
		<!-- <property name="configLocation" value="/WEB-INF/resource_xml/mybatis-config.xml" /> -->
		<!-- 映射mapper文件 -->
		<property name="mapperLocations" value="classpath*:com/study/sql/mybatis-sql-*.xml"/> 
		<!-- 在sql中寫入時    parameterType 能夠直接寫簡寫 沒必要寫整個包+class 和主配置文件一塊使用-->
		<!-- <property name="typeAliasesPackage" value="com.study.pojo.*"/>  -->
	</bean>

	<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
		<property name="basePackage" value="com.study.dao"></property>
		<property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"></property>
	</bean>
	<!-- 配置事物 -->
	<bean id="transactionManager"
		class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
		<property name="dataSource" ref="dataSource" />
	</bean>
	
	<tx:advice id="txAdvice" transaction-manager="transactionManager">
		<tx:attributes>
			<tx:method name="*" propagation="REQUIRED"/>
		</tx:attributes>
	</tx:advice>
	
	<aop:config>
		<aop:pointcut id="allServiceMethod" expression="execution(* com.study.service.*.*(..))"/>
		<aop:advisor advice-ref="txAdvice" pointcut-ref="allServiceMethod"/>
	</aop:config>
	<!-- 在容器啓動時,完成webServer的注入,前臺使用 -->
	<bean id="WebConfig" class="com.study.util.WebConfig">
		<property name="beanName" value="webServer" />
		<property name="webServer" value="#{settings.webServer}"></property>
	</bean>
	
</beans>

d.spring-mvc.xmlspring

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:aop="http://www.springframework.org/schema/aop"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:mvc="http://www.springframework.org/schema/mvc" 
	xmlns:context="http://www.springframework.org/schema/context"
	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.xsd
	http://www.springframework.org/schema/aop
	http://www.springframework.org/schema/aop/spring-aop.xsd
	http://www.springframework.org/schema/mvc
	http://www.springframework.org/schema/mvc/spring-mvc.xsd">
	
	<!-- 掃描controller     service和dao在applicationContext.xml中進行掃描 -->
	<context:component-scan base-package="com.study.controller"/>
	
	<mvc:annotation-driven/>
	
	<!-- 資源映射的兩種方式,選擇一種便可 -->
	<mvc:default-servlet-handler />
	<!-- <mvc:resources location="/resource/" mapping="/resource/**" /> -->
	
	<!-- 視圖解析 -->
	<bean id="viewResolver"
		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="viewClass"
			value="org.springframework.web.servlet.view.JstlView" />
		<property name="prefix" value="/WEB-INF/jsp/" />
		<property name="suffix" value=".jsp" />
	</bean>
	
	<!-- 此處本來是配置json的映射      發現引入了
		jackson-annotations-2.8.4.jar
		jackson-core-2.8.4.jar
		jackson-databind-2.8.4.jar   三個jar包就能夠實現 -->
	<!-- 在spring 4.x以後  使用 MappingJackson2HttpMessageConverter 
		                                 之前的爲 MappingJacksonHttpMessageConverter-->
	<!-- <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
		<property name="messageConverters">
			<list>
				<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
				</bean>
			</list>
		</property>
	</bean> -->
	
</beans>

e.mybatis-config.xmlsql

<?xml version="1.0" encoding="UTF-8" ?>  
<!DOCTYPE configuration  
  PUBLIC "-//mybatis.org//DTD Config 3.0//EN"  
  "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
	<typeAliases>
		<!-- <typeAlias type="com.study.pojo.User" alias="User"/> -->
	</typeAliases>
	<mappers>
		<!-- <mapper resource="com/study/sql/mybatis-sql-user.xml" /> -->
	</mappers>
</configuration>

f.logback.xml

<?xml version="1.0" encoding="UTF-8"?>
<!-- configuration file for LogBack (slf4J implementation) See here for more 
	details: http://gordondickens.com/wordpress/2013/03/27/sawing-through-the-java-loggers/ -->
<configuration scan="true" scanPeriod="30 seconds">

	<contextListener class="ch.qos.logback.classic.jul.LevelChangePropagator">
		<resetJUL>true</resetJUL>
	</contextListener>

	<!-- To enable JMX Management -->
	<jmxConfigurator />

	<appender name="console" class="ch.qos.logback.core.ConsoleAppender">
		<encoder>
			<pattern>%d{yyyy-MM-dd HH:mm:ss}-%-5level %logger{0} - %msg%n
			</pattern>
		</encoder>
	</appender>

	<!-- 滾動記錄文件,先將日誌記錄到指定文件,當符合某個條件時,將日誌記錄到其餘文件 -->
	<appender name="file"
		class="ch.qos.logback.core.rolling.RollingFileAppender">
		<Encoding>UTF-8</Encoding>
		<!-- 指定日誌文件的名稱 <file>${compilePath}/exam.log</file> -->
		<!-- 當發生滾動時,決定 RollingFileAppender 的行爲,涉及文件移動和重命名 TimeBasedRollingPolicy: 
			最經常使用的滾動策略,它根據時間來制定滾動策略,既負責滾動也負責出發滾動。 -->
		<rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
			<!-- 滾動時產生的文件的存放位置及文件名稱 %d{yyyy-MM-dd}:按天進行日誌滾動 %i:當文件大小超過maxFileSize時,按照i進行文件滾動 
				當使用tomcat配置時,修改$(user.dir)爲${catalina.base}。獲取絕對路徑。 -->
			<fileNamePattern>D:/portals/logs/%d{yyyy-MM-dd}-%i.log
			</fileNamePattern>
			<!-- 可選節點,控制保留的歸檔文件的最大數量,超出數量就刪除舊文件。假設設置天天滾動, 且maxHistory是365,則只保存最近365天的文件,刪除以前的舊文件。注意,刪除舊文件是, 
				那些爲了歸檔而建立的目錄也會被刪除。 -->
			<MaxHistory>365</MaxHistory>
			<!-- 當日志文件超過maxFileSize指定的大小是,根據上面提到的%i進行日誌文件滾動 注意此處配置SizeBasedTriggeringPolicy是沒法實現按文件大小進行滾動的,必須配置timeBasedFileNamingAndTriggeringPolicy -->
			<timeBasedFileNamingAndTriggeringPolicy
				class="ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP">
				<maxFileSize>50MB</maxFileSize>
			</timeBasedFileNamingAndTriggeringPolicy>
		</rollingPolicy>
		<!-- 日誌輸出格式:%d表示日期時間,%thread表示線程名,%-5level:級別從左顯示5個字符寬度 %logger{50} 表示logger名字最長50個字符,不然按照句點分割。 
			%msg:日誌消息,%n是換行符 -->
		<layout class="ch.qos.logback.classic.PatternLayout">
			<pattern>%d{yyyy-MM-dd HH:mm:ss} - [ %-5level ] [ %logger{0} : %line
				] - %msg%n</pattern>
		</layout>
	</appender>
	<!-- 打印sql語句 -->
	<logger name="java.sql.Connection" level="DEBUG" />
	<logger name="java.sql.Statement" level="DEBUG" />
	<logger name="java.sql.PreparedStatement" level="DEBUG" />

	<root level="debug">
		<appender-ref ref="console" />
		<!-- 放開以後,會寫入到文件中 -->
		<!-- <appender-ref ref="file" /> -->
	</root>
</configuration>

3、java文件代碼

a.User.java

package com.study.pojo;

import java.io.Serializable;

public class User implements Serializable {
	private static final long serialVersionUID = 1L;
	private int id;
	private String name;
	private String sex;
	private int age;
	public User() {
	}
	public User(int id, String name, String sex, int age) {
		super();
		this.id = id;
		this.name = name;
		this.sex = sex;
		this.age = age;
	}
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getSex() {
		return sex;
	}
	public void setSex(String sex) {
		this.sex = sex;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	@Override
	public String toString() {
		return "User [id=" + id + ", name=" + name + ", sex=" + sex + ", age=" + age + "]";
	}
}

b.UserController.java

package com.study.controller;

import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.study.pojo.User;
import com.study.service.UserService;
import com.study.util.JsonResult;

@Controller
public class UserController {
	@Autowired
	private UserService userService;
	
	@Value("#{settings.driver}")
	private String name;
	
	@RequestMapping("login")
	@ResponseBody  //不可缺乏該註解
	public JsonResult login(User user,HttpServletRequest req) {
		System.out.println("================"+user);		
		JsonResult jsonResult = new JsonResult();
		jsonResult.setFlag(true);
		jsonResult.setObject(user);
		jsonResult.setMessage("success");
		return jsonResult;
	}
	
	@RequestMapping("user")
	public String userList(Model model,HttpServletRequest req) {
		List<User> userList = userService.getUserList();
		/*for(int i=100; i<105; i++){
			userList.add(new User(i,"zhangsan","男",i-80));
		}*/
		System.out.println(userList.toString());		
		model.addAttribute("userList", userList);
		return "user";
	}
	
	@RequestMapping("add")
	public String addUser(Model model,HttpServletRequest req) {
		User user = new User(57,"jack","男",18);
		userService.addUser(user);
		/*for(int i=100; i<105; i++){
			userList.add(new User(i,"zhangsan","男",i-80));
		}*/
		System.out.println(user);		
		
		return "";
	}
	
	@RequestMapping("test")
	public String test(Model model,HttpServletRequest req) {
		System.out.println("------------------test--------------------");		
		List<User> userList = userService.getUserList();
		/*for(int i=100; i<105; i++){
			userList.add(new User(i,"zhangsan","男",i-80));
		}*/
		System.out.println(userList.toString());		
		model.addAttribute("userList", userList);
		return "test";
	}
	
	@RequestMapping("test2")
	public String test2(Model model,HttpServletRequest req) {
		System.out.println(name +"------------------name--------------------");		
		
		return "test";
	}
}

c.UserServiceImpl.java      (實現UserService接口)

package com.study.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.study.dao.UserDao;
import com.study.pojo.User;
import com.study.service.UserService;

@Service
public class UserServiceImpl implements UserService {
	@Autowired
	private UserDao userDao;

	@Override
	public List<User> getUserList() {
		List<User> userList= userDao.getUserList();
		return userList;
	}
        //測試事務
	@Override
	public int addUser(User user) {
		System.out.println("----111----test-tx----------------");
		int j = userDao.deleteUser(58);
			
		System.out.println("---222-----test-tx----------------");
		int i = userDao.addUser(user);
		System.out.println("---333-----test-tx----------------");	
			
		return 5;
	}

	@Override
	public int deleteUser(int id) {
		int i = userDao.deleteUser(id);
		return i;
	}

	@Override
	public int updateUser(int id) {
		int i = userDao.updateUser(id);
		return i;
	}
}

d.UserDao.java

package com.study.dao;

import java.util.List;

import org.springframework.stereotype.Repository;

import com.study.pojo.User;

@Repository
public interface UserDao {

	public List<User> getUserList();

	public int addUser(User user);

	public int deleteUser(int id);

	public int updateUser(int id);
	
}

e.mybatis-sql-user.xml

<?xml version="1.0" encoding="UTF-8" ?>  
<!DOCTYPE mapper  
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"  
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  <mapper namespace="com.study.dao.UserDao">
  
  	<resultMap type="com.study.pojo.User" id="User" >
  		<!-- <result column="id" property="id" />
  		<result column="name" property="name" />
  		<result column="sex" property="sex" />
  		<result column="age" property="age" /> -->
  	</resultMap>
  
  	<insert id="addUser" parameterType="com.study.pojo.User">
  		<![CDATA[
  			insert into tbl_user (id,password,name,sex,age) values(#{id},'123456',#{name},#{sex},#{age})
  		]]>
  	</insert>
  	
  	<select id="getUserList" resultMap="User">
  		<![CDATA[
  			select * from tbl_user
  		]]>
  	</select>
  	
  	<update id="updateUser" parameterType="int">
  		<![CDATA[
  			update tbl_user set name=#{name},sex=#{sex},age=#{age} where id=#{id}
  		]]>
  	</update>
  	
  	<delete id="deleteUser" parameterType="int">
  		<![CDATA[
  			delete from tbl_user where id=#{id}
  		]]>
  	</delete>
  	
  </mapper>

f.WebConfig.java

package com.study.util;

import javax.servlet.ServletContext;

import org.springframework.web.context.ServletContextAware;

public class WebConfig implements ServletContextAware {

	private String beanName;
	//@Value("#{settings.webServer}")
	private String webServer;
	
	@Override
	public void setServletContext(ServletContext servletContext) {
		servletContext.setAttribute(beanName, webServer);
	}

	public String getBeanName() {
		return beanName;
	}

	public void setBeanName(String beanName) {
		this.beanName = beanName;
	}

	public String getWebServer() {
		return webServer;
	}

	public void setWebServer(String webServer) {
		this.webServer = webServer;
	}
	
}

g.JsonResult.java

package com.study.util;

public class JsonResult {
	private boolean flag;
	private Object object;
	private String message;
	
	public boolean isFlag() {
		return flag;
	}
	public void setFlag(boolean flag) {
		this.flag = flag;
	}
	public Object getObject() {
		return object;
	}
	public void setObject(Object object) {
		this.object = object;
	}
	public String getMessage() {
		return message;
	}
	public void setMessage(String message) {
		this.message = message;
	}
	
}

4、jsp文件

a. user.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>user list</title>
</head>
<body>
<h1>${webServer}</h1>
	<c:forEach items="${userList}" var="user">
		<h1>${user.id}</h1>
		<h1>${user.name}</h1>
		<h1>${user.sex}</h1>
		<h1>${user.age}</h1>
	</c:forEach>
</body>
</html>

b.test.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=0.5, initial-scale=1.0">
	
	<title>my first bootstrap page</title>

	<link rel="stylesheet" type="text/css" href="${webServer}/resource/css/bootstrap.css">

	<script type="text/javascript" src="${webServer}/resource/js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="${webServer}/resource/js/bootstrap.js"></script>

	<style type="text/css">
		
	</style>
</head>
<body>
	<nav class="navbar navbar-inverse" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<a class="navbar-brand" href="javascript:void(0);">my library</a>
			</div>
			<div class="col-md-offset-2">
				<ul class="nav navbar-nav">
					<li class="active"><a href="javascript:void(0);">中文資料</a></li>
					<li><a href="javascript:void(0);">外文資料</a></li>
					<li><a href="javascript:void(0);">網絡技術資料</a></li>
					<li class="dropdown">
						<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">技術語言指導
							<span class="caret"></span>
						</a>
						<ul class="dropdown-menu">
							<li><a href="javascript:void(0);">java語言</a></li>
							<li class="divider"></li>
							<li><a href="javascript:void(0);">C語言</a></li>
							<li><a href="javascript:void(0);">C++語言</a></li>
						</ul>
					</li>
				</ul>
			</div>
			<div class="col-md-offset-10">
				<ul class="nav navbar-nav">
					<li class="disable"><a href="javascript:void(0);">歡迎:張三</a></li>
					<li class=""><a href="javascript:void(0);">2016-10-24</a></li>
				</ul>
			</div>
		</div>
	</nav>

	<div class="container-fluid">
		<div class="row">
			<div class="col-md-2">
				<ul class="nav nav-stacked" style="background-color: rgba(211, 220, 222, 0.16);;">
					<li style="background-color: rgba(134, 167, 210, 0.52);"><a href="javascript:void(0);">英文資料</a></li>
					<li><a href="javascript:void(0);">中文資料</a></li>
					<li class="disabled"><a href="javascript:void(0);">英文資料</a></li>
					<li><a href="javascript:void(0);">
						<span class="glyphicon glyphicon-fire"></span>中文資料</a></li>
					<li><a href="javascript:void(0);">
						<span class="glyphicon glyphicon-fire">英文資料</a></li>
					<li><a href="javascript:void(0);">中文資料</a></li>
					<li><a href="javascript:void(0);">英文資料</a></li>
				</ul>
			</div>
			<div class="col-md-10" style="backgroung-color:red;height:200px">
				<div id="myCarousel" class="carousel slide">
					<ol class="carousel-indicators">
						<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
						<li data-target="#myCarousel" data-slide-to="1"></li>
						<li data-target="#myCarousel" data-slide-to="2"></li>
					</ol>
					<div class="carousel-inner">
						<div class="item active">
							<img src="${webServer}/resource/img/Jellyfish.jpg" alt="First slide">
            				<div class="carousel-caption">美如畫</div>
						</div>
						<div class="item">
							<img src="${webServer}/resource/img/Koala.jpg" alt="Second slide">
            				<div class="carousel-caption">美如畫</div>
						</div>
						<div class="item">
							<img src="${webServer}/resource/img/Lighthouse.jpg" alt="Third slide">
            				<div class="carousel-caption">美如畫</div>
						</div>
					</div>
				</div>

				<div style="margin-top:20px">
					<ol class="breadcrumb">
					    <li><a href="javascript:void(0);">Home</a></li>
					    <li><a href="javascript:void(0);">first</a></li>
					    <li class="active">second</li>
					</ol>
				</div>

				<div style="margin-top:20px">
					<table class="table table-hover">
						<caption>懸停表格佈局</caption>
						<thead>
							<tr>
								<th>id</th>
								<th>姓名</th>
								<th>性別</th>
								<th>年齡</th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${userList}" var="user">
								<tr>
								<td>${user.id}</td>
								<td>${user.name}</td>
								<td>${user.sex}</td>
								<td>${user.age}</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>

				<div style="margin-top:20px">					
					<button type="button" class="btn btn-lg btn-primary" data-toggle="collapse" 
						data-target="#demo">簡單的可摺疊組件
					</button>    
					<div id="demo" class="collapse in">
						Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
					cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
					vice lomo.
					</div>
					<div class="pannel pannel-default">
						<div class="panel-heading">
							<span class="pannel-title">
								<a data-toggle="collapse" data-target="#myDemo">點擊</a>
							</span>
						</div>
						<div id="myDemo" class="pannel-collapse collapse in">
							<div class="panel-body">
								Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
							cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
							vice lomo.
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script>

	</script>
</body>
</html>

c login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<!-- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> -->
<title>Insert title here</title>

<script type="text/javascript" src="${webServer}/resource/js/jquery-3.1.1.min.js"></script>
</head>
<body>
<a href="http://localhost:8080/portals/user"><h1>跳轉</h1></a>
<div>
	姓名: <input id="name" type="text" value="張三" placeholder="張三"/><br/>
	性別: <select id="sex">
		<option value="male">男</option>
		<option value="female">女</option>
	</select><br/>
	年齡: <input id="age" type="text" value="20" placeholder="20"/>歲<br/>
	<button id="login">提交</button>
</div>
<script>
	$("#login").click(function(){
		var user={
				"name": $("#name").val(),
				"age" : $("#age").val(),
				"sex" : $("#sex").val()
		};
		alert(user.name);
		$.ajax({
			type: 'post',
			url: "${webServer}/login",
			data : user,
			success: function(data){
				alert(data.message);
			},
			error:function(data){  
				alert("出錯了!!:"+data.msg); 
			} 
		});
		return false;
	});
</script>

</body>
</html>
相關文章
相關標籤/搜索