Springboot+Ajax同步实现数据显示

Springboot+Ajax同步实现数据显示
1.步骤一：MySQL数据库中创建表并插入数据

2.步骤二：pojo层代码编写

public class Integral {
	//会员账号
   private String account;
   //用户名
   private String userName;
   //性别
   private String sex;
   //会员电话
   private String phone;
   //邮箱
   private String email;
   //地址
   private String address;
   // 加入时间
   private Date addressTime;
   //账户积分
   private int integral;
   
   
public String getAccount() {
	return account;
}
public void setAccount(String account) {
	this.account = account;
}
public String getUserName() {
	return userName;
}
public void setUserName(String userName) {
	this.userName = userName;
}
public String getSex() {
	return sex;
}
public void setSex(String sex) {
	this.sex = sex;
}
public String getPhone() {
	return phone;
}
public void setPhone(String phone) {
	this.phone = phone;
}
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;
}
public Date getAddressTime() {
	return addressTime;
}
public void setAddressTime(Date addressTime) {
	this.addressTime = addressTime;
}
public int getIntegral() {
	return integral;
}
public void setIntegral(int integral) {
	this.integral = integral;
}

功能快捷键

3.步骤三：Dao层代码编写

package com.springboot.education.dao;

import java.util.List;

import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;

import com.springboot.education.pojo.Integral;
@Mapper
public interface IntegralMapper {
	 //查询所有积分列表
	
	public List<Integral> findAllIntegral() throws Exception;

4.步骤四：mapper.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.springboot.education.dao.IntegralMapper">
  
  	<select id="findAllIntegral" resultType="com.springboot.education.pojo.Integral">
  		select account,userName,sex,phone,email,address,addTime,integral from t_integral
  	</select>
    </mapper>

五.步骤五：service层代码编写

package com.springboot.education.service;

import java.util.List;

import org.springframework.stereotype.Service;

import com.springboot.education.pojo.Integral;
@Service
public interface IntegralService {
	//查询所有积分列表
	 public List<Integral> findAllIntegral() throws Exception;
}

六.步骤六：service层实现类代码编写

package com.springboot.education.service.Impl;

import java.util.List;

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

import com.springboot.education.dao.IntegralMapper;
import com.springboot.education.pojo.Integral;
import com.springboot.education.service.IntegralService;
@Service
public class IntegralServiceImpl implements IntegralService {
    @Autowired
    private IntegralMapper integralMapper;
    
	@Override
	public List<Integral> findAllIntegral() throws Exception {
		// TODO Auto-generated method stub
		return integralMapper.findAllIntegral();
	}
}

七.Controller层代码编写

package com.springboot.education.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.springboot.education.pojo.Integral;
import com.springboot.education.service.IntegralService;

/**
 * @积分控制类
 *
 */
@Controller
@RequestMapping(value="Integral")
public class IntegralController {
	
	@Autowired
	private IntegralService integralService;
	
	//查询所有用户积分
	@GetMapping("allUser")
	@ResponseBody
	public List<Integral> findAllIntegral() throws Exception{
		List<Integral> listIntegral = integralService.findAllIntegral();
		for(int i=0;i<listIntegral.size();i++) {
			System.out.println(listIntegral.get(i).getAccount());
		}
		return listIntegral;
	 }
	}
  }

八.前台Ajax代码编写

/*数据显示*/
    	$(document).ready(function(){
    		$.ajax({
    			type:"get",
    			url:"http://localhost:8090/Integral/allUser",
    			async:false,
    			success:function(data){
    				for(var i = 0;i<data.length;i++){
    					$("#allmember").append(
    						"<tr>"+
	    						"<td>"+"<div class=\"layui-unselect layui-form-checkbox\" lay-skin=\"primary\" data-id=\"2\">"+
	    						"<i class=\"layui-icon\">&#xe605;</i>"+"</div>"+
	    						"</td>"+
	    						"<td>"+data[i].account+"</td>"+
	    						"<td>"+data[i].userName+"</td>"+
	    						"<td>"+data[i].sex+"</td>"+
	    						"<td>"+data[i].phone+"</td>"+
	    						"<td>"+data[i].email+"</td>"+
	    						"<td>"+data[i].address+"</td>"+
	    						"<td>"+data[i].addTime+"</td>"+
	    						"<td>"+data[i].integral+"</td>"+
	    						"<td class=\"td-manage\">\n"
	    						+"<a οnclick=\"member_stop(this,'10001')\" class=\"layui-btn layui-btn-normal layui-btn-sm\" href=\"javascript:;\" title=\"启用\">启用</a>\n"
	    						+"<a title=\"删除\" id = \"deleteUser\" class=\"layui-btn layui-btn-sm layui-btn-danger\" οnclick=\"member_del(this,'要删除的id')\" href=\"javascript:;\">删除</a>\n"
	    						+"</td>"
    						+"</tr>");
    				}
    			}
    		})
    	})

九.结果