springboot+ajax+json+mybatisPuls示例

本文是在另外一位博主的基础上增加了和数据库交互

 

ThinkingInGIS博主的原文地址Spring Boot AJAX 示例 点击进入

开发环境：

 

1. Spring Boot 1.5.6.RELEASE
2. Spring 4.3.6.RELEASE
3. Maven 3.3
4. jQuery
5. Bootstrap 3
6. eclipse oxygen
7. mysql
8. mybatispuls

先看一下项目结构

最后的项目运行图，输入localhost:8080。增加了一个重置。存在一个无关紧要的小bug

数据库sql语句，数据库名字自己到db配置文件中查看或者修改

/*
Navicat MySQL Data Transfer

Source Server         : localhost
Source Server Version : 50724
Source Host           : localhost:3306
Source Database       : thinkingingis

Target Server Type    : MYSQL
Target Server Version : 50724
File Encoding         : 65001

Date: 2019-03-06 11:59:21
*/

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
  `username` varchar(10) CHARACTER SET utf8 DEFAULT NULL,
  `password` varchar(16) CHARACTER SET utf8 DEFAULT NULL,
  `email` varchar(20) CHARACTER SET utf8 DEFAULT NULL,
  `address` varchar(20) CHARACTER SET utf8 DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES ('赵六', '123456', '123@qq.com', '北京东城');
INSERT INTO `user` VALUES ('李四', '123456', '123456@qq.com', '上海浦东机场');
INSERT INTO `user` VALUES ('王五', '123456', '123321@qq.com', '广州荔湾区');
INSERT INTO `user` VALUES ('张三', '654321', '321123@qq.com', '浙江杭州');

SpringBootWebApplication.java

package org.thinkingingis;

import org.slf4j.LoggerFactory;
import org.slf4j.Logger;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringBootWebApplication {
	private static Logger logger=LoggerFactory.getLogger(SpringBootWebApplication.class);;
	
	public static void main(String[] args) {
		SpringApplication.run(SpringBootWebApplication.class, args);
		
		logger.info("springboot+ajax启动成功");
	}

}

IndexController.java

package org.thinkingingis.controller;

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

@Controller
public class IndexController {
	@GetMapping("/")
	public String index() {
		return "index";
	}
}

SearchController.java

package org.thinkingingis.controller;

import java.util.List;
import java.util.stream.Collectors;

import javax.validation.Valid;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.validation.Errors;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import org.thinkingingis.model.AjaxResponseBody;
import org.thinkingingis.model.SearchCriteria;
import org.thinkingingis.model.User;
import org.thinkingingis.service.UserService;

@RestController
public class SearchController {
	
	UserService userService;
	
	@Autowired
	public void setUserService(UserService userService) {
		this.userService = userService;
	}
	
	@PostMapping("/api/search")
	public ResponseEntity<?> getSearchResultViaAjax(@Valid @RequestBody SearchCriteria search, Errors errors){
		AjaxResponseBody result = new AjaxResponseBody();
		
		if(errors.hasErrors()) {
			result.setMsg(errors.getAllErrors()
					.stream().map(x -> x.getDefaultMessage())
					.collect(Collectors.joining(",")));
			return ResponseEntity.badRequest().body(result);
		}
		
		if(search.getUsername()==null || "".equals(search.getUsername())) {
			List<User> users = userService.findByUserNameOrEmail();
			if(users.isEmpty()) {
				result.setMsg("no user found!");
			}else {
				result.setMsg("success");
			}
			result.setResult(users);
			return ResponseEntity.ok(result);
		}else {
		List<User> users = userService.findByUserNameOrEmail(search.getUsername());
		if(users.isEmpty()) {
			result.setMsg("no user found!");
		}else {
			result.setMsg("success");
		}
		result.setResult(users);
		
		return ResponseEntity.ok(result);
	}
	}
}

UserMapper.java

package org.thinkingingis.mapper;

import org.thinkingingis.model.User;

import com.baomidou.mybatisplus.mapper.BaseMapper;

public interface UserMapper extends BaseMapper<User>{

}

AjaxResponseBody.java

package org.thinkingingis.model;

import java.util.List;

public class AjaxResponseBody {
	private String msg;
	private List<User> result;
	
	public String getMsg() {
		return msg;
	}
	
	public void setMsg(String msg) {
		this.msg = msg;
	}
	
	public List<User> getResult() {
		return result;
	}
	
	public void setResult(List<User> result) {
		this.result = result;
	}

}

SearchCriteria.java

package org.thinkingingis.model;

public class SearchCriteria {
	//@NotBlank(message = "用户名不能为空")
	String username	;

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

}

User.java

package org.thinkingingis.model;

import com.baomidou.mybatisplus.annotations.TableField;
import com.baomidou.mybatisplus.annotations.TableName;

@TableName(value = "User")
public class User {
	@TableField(value = "username")
	private String username;
	@TableField(value = "password")
	private String password;
	@TableField(value = "email")
	private String email;
	@TableField(value = "address")
	private String address;
	
	public User() {
		
	}
	
	public User(String username, String password, String email,String address) {
		this.username = username;
		this.password = password;
		this.email = email;
		this.address=address;
	}

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

	public String getAddress() {
		return address;
	}

	public void setAddress(String address) {
		this.address = address;
	}

	@Override
	public String toString() {
		
		return "User{"+"username="+username+",password="+password+",email="+email+",address="+address+"}";
	}
	
}

UserService.java

package org.thinkingingis.service;

import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;

import javax.annotation.PostConstruct;

import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;
import org.springframework.stereotype.Service;
import org.thinkingingis.mapper.UserMapper;
import org.thinkingingis.model.User;

import com.baomidou.mybatisplus.mapper.EntityWrapper;


@Service
public class UserService {
	
	 private ApplicationContext context = new ClassPathXmlApplicationContext("classpath:applicationContext.xml");
	    
	 private UserMapper userMapper = context.getBean("userMapper", UserMapper.class);
	
	private List<User> users;
	
	public List<User> findByUserNameOrEmail(String username){
		List<User> result = users.stream()
				.filter(x -> x.getUsername().equalsIgnoreCase(username))
				.collect(Collectors.toList());
		return result;
	}
	
	public List<User> findByUserNameOrEmail(){
		List<User> result = users;
		return result;
	}
	
	//初始化一些user
	@PostConstruct
	private void initDataForTesting() {
		users = new ArrayList<User>();
//		User user1 = new User("Thinking", "password111", "thinking@gis.com","湖南长沙");
//		User user2 = new User("in", "password222", "in@gis.com","北京大胡同");
//		User user3 = new User("gis", "password333", "gis@gis.com","广东广州");
//		
//		users.add(user1);
//		users.add(user2);
//		users.add(user3);
		EntityWrapper<User> wrapper = new EntityWrapper<User>();
//		wrapper.and("password={0}","123456");
		users= userMapper.selectList(wrapper);
	}

}

main.js。在static里面，截图忘记打开了

$(document).ready(function(){
	$('#search-form').submit(function(event){
		//stop submit the form, we will post it manually.
        event.preventDefault();
        fire_ajax_submit();
	});
});

function fire_ajax_submit(){
	var search = {};
	search["username"] = $('#username').val();
	$("#btn-search").prop("disabled", true);
	$.ajax({
		type: 'POST',
		contentType: "application/json",
		url: "/api/search",
		data: JSON.stringify(search),
		dataType: 'json',
		cache: false,
		timeout: 600000,
		success: function(data){
		/*	var json = "<h4>Ajax Response</h4><pre>" 
				+ JSON.stringify(data, null, 4) + "</pre>";*/
			var msg = "";
			msg += "<tr>"+ "<th>"+ "姓名" + "</th>" 
			             + "<th>"+ "密码" + "</th>" 
			             + "<th>"+ "Email" + "</th>" 
			             + "<th>"+ "地址"+ "</th>" 
			             + "</tr>";
			for (var i=0;i<data.result.length;i++) {//循环json对象，拼接tr,td的html
				msg += "<tr>";
				msg += "<td>" + data.result[i].username + "</td>";
				msg += "<td>" + data.result[i].password + "</td>";
				msg += "<td>" + data.result[i].email + "</td>";
				msg += "<td>" + data.result[i].address + "</td>";
				msg += "</tr>";
			}
			/*var address="";
			for(var i=0;i<data.result.length;i++){
				address+="<p>"+data.result[i].address+"</p>";
			}*/
			$('#feedback').html(msg);
			//$('#address').html(address);
			console.log("SUCCESS : ", data);
            $("#btn-search").prop("disabled", false);
		},
		error: function(e){
            var json = "<h4>Ajax Response</h4><pre>"
                + e.responseText + "</pre>";
            $('#feedback').html(json);

            console.log("ERROR : ", e);
            $("#btn-search").prop("disabled", false);
			
		}
	})
}
	/**
	 * 重置
	 */
	function resetSubmit(){
	var search = {};
    $('#username').val("");
    fire_ajax_submit();
}

index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title>Spring Boot ajax example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css"
          href="webjars/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <style>
* {
	margin: 0;
	padding: 0;
}
 table.imagetable {
     text-align:center;
     font-family: verdana,arial,sans-serif;
     font-size:16px;
     color:#004080;
     border:1px solid #ff1a1a; 
	 border-collapse: collapse;
 }
 table.imagetable tr th {
     text-align:center;
     padding: 8px;
     border:1px solid #ff1a1a; 
 }
 table.imagetable tr td {
     text-align:center;
     padding: 8px;
     border:1px solid #ff1a1a; 
 }
</style>
</head>
<body onload='fire_ajax_submit()' >

<nav class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Spring Boot AJAX 示例</a>
        </div>
    </div>
</nav>

<div class="container" style="min-height: 500px">

    <div class="starter-template">
        <h1>Spring Boot AJAX 示例</h1>


        <form class="form-horizontal" id="search-form">
            <div class="form-group form-group-lg">
                <label class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="username"/>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" id="bth-search"
                            class="btn btn-primary btn-lg" onclick='fire_ajax_submit()'>查询
                    </button>
                    
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" id="bth-resetSearch"
                            class="btn btn-primary btn-lg" onclick='resetSubmit()'>重置
                    </button>
                </div>
            </div>
             
        </form>

        <table class="imagetable" id="feedback">
	    </table>
        <div id="address"></div>
    </div>

</div>

<div class="container">
    <footer>
        <p>
            © <a href="https://www.sogou.com/">thinkingingis</a> 2019
        </p>
    </footer>
</div>

<script type="text/javascript" src="webjars/jquery/2.2.4/jquery.min.js"></script>

<script type="text/javascript" src="main.js"></script>

</body>
</html>

application.xml 。另外一个properties什么都没写，忘记删掉了

<?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: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-4.0.xsd
		http://www.springframework.org/schema/tx 
		http://www.springframework.org/schema/tx/spring-tx-4.0.xsd">
    
    <!-- 数据源 -->
    <context:property-placeholder location="classpath:db.properties"/>
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
        <property name="url" value="${jdbc.url}"></property>
        <property name="username" value="${jdbc.username}"></property>
        <property name="password" value="${jdbc.password}"></property>
    </bean>

    <!-- 事务管理器 -->
    <bean id="dataSourceTransactionManager"
          class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"></property>
    </bean>
    
    <!-- 基于注解的事务管理 -->
    <tx:annotation-driven transaction-manager="dataSourceTransactionManager"/>
    
    <!-- MP 提供的 MybatisSqlSessionFactoryBean -->
    <bean id="sqlSessionFactoryBean" class="com.baomidou.mybatisplus.spring.MybatisSqlSessionFactoryBean">
        <!-- 数据源 -->
        <property name="dataSource" ref="dataSource"></property>
        <!-- mybatis 全局配置文件 -->
        <property name="configLocation" value="classpath:mybatis-config.xml"></property>
        <!-- 别名处理 -->
        <property name="typeAliasesPackage" value="org.thinkingingis.model"></property>
        <!-- 注入全局MP策略配置 -->
        <property name="globalConfig" ref="globalConfiguration"></property>
        <!-- 插件注册 -->
        <property name="plugins">
            <list>
                <!-- 注册分页插件 -->
                <bean class="com.baomidou.mybatisplus.plugins.PaginationInterceptor" />
                <!-- 注入 SQL 性能分析插件 -->
                <bean class="com.baomidou.mybatisplus.plugins.PerformanceInterceptor">
                    <property name="maxTime" value="1000" />
                    <!--SQL是否格式化 默认false-->
                    <property name="format" value="true" />
                </bean>
            </list>
        </property>
    </bean>

    <!-- 定义 MybatisPlus 的全局策略配置-->
    <bean id ="globalConfiguration" class="com.baomidou.mybatisplus.entity.GlobalConfiguration">
        <!-- 在2.3版本以后，dbColumnUnderline 默认值就是true -->
        <property name="dbColumnUnderline" value="true"></property>
        <!-- 全局的主键策略 -->
        <property name="idType" value="0"></property>
        <!-- 全局的表前缀策略配置 -->
        <property name="tablePrefix" value="tbl_"></property>
    </bean>
    
    <!-- 
        配置mybatis 扫描mapper接口的路径
     -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="org.thinkingingis.mapper"></property>
    </bean>


</beans>

db.properties

jdbc.url=jdbc:mysql://127.0.0.1/thinkingingis?useSSL=true&serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8
jdbc.username=root
jdbc.password=你数据库的密码

log4j.properties

#输出信息到控制台
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.Target=System.out
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%d{yyyy-MM-dd HH:mm:ss}  %m%n
#输出信息到文件

log4j.appender.FILE=org.apache.log4j.RollingFileAppender  
log4j.appender.FILE.Append=true  
log4j.appender.FILE.File=D:/log4j/log4jtest.log  
log4j.appender.FILE.Threshold=INFO  
log4j.appender.FILE.layout=org.apache.log4j.PatternLayout  
log4j.appender.FILE.layout.ConversionPattern=%d{yyyy-MM-dd HH\:mm\:ss} [%5p] - %c -%F(%L) -%m%n  
log4j.appender.FILE.MaxFileSize=10MB 
#设置级别
log4j.rootLogger=debug, stdout, file

mybatis-config.xml

<?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 />

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>org.thinkingingis</groupId>
  <artifactId>spring-boot-ajax-example</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>jar</packaging>

  <name>spring-boot-ajax-example</name>
  <url>http://maven.apache.org</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <java.version>1.8</java.version>
  </properties>

  <parent>
  	<groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.5.6.RELEASE</version>
  </parent>

  <dependencies>
  	<dependency>
    		<groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>jquery</artifactId>
    		<version>2.2.4</version>
    </dependency>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>bootstrap</artifactId>
    		<version>3.3.7</version>
    </dependency>
    <!-- MP -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus</artifactId>
            <version>2.3</version>
        </dependency>
        <!-- 测试 -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.10</version>
        </dependency>
        <!-- 数据源 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.10</version>
        </dependency>
        <!-- 数据库驱动 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.39</version>
        </dependency>
        <!-- Spring 相关 -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>4.3.9.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-orm</artifactId>
            <version>4.3.9.RELEASE</version>
        </dependency>
        <dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-tx</artifactId>
			<version>4.3.9.RELEASE</version>
		</dependency>
  </dependencies>
  
	<build>
		<plugins>
			<!-- macOS 使用如下plugin  这是告诉可执行的jar文件位置-->
			<plugin>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>3.3</version>
				<configuration>
					<fork>true</fork>
					<executable>/Library/Java/JavaVirtualMachines/jdk1.8.0_131.jdk/Contents/Home/bin/java</executable>
				</configuration>
			</plugin>
			<!--windows 系统 使用如下plugin  -->
			<!-- 
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
			 -->
		</plugins>
	</build>
</project>

上面就是源码，自己看着搭建吧！我就不提供源码下载了。

非懒得自己搭建的读者可以去原博主的文章去，他留了GitHub的源码下载链接。