一、效果图

1、列表

2、图表

二、代码

此处贴核心代码

后端

代码结构：

1、pom引包

因为我用的是mysql5.0，所以springboot使用2.0.5版本

<?xml version="1.0" encoding="UTF-8"?>

<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>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.0.5.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.wzhi</groupId>
	<artifactId>zhouzyServer</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>tableserver</name>
	<description>实现数据表格的前后台交互</description>

	<properties>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.mybatis.spring.boot</groupId>
			<artifactId>mybatis-spring-boot-starter</artifactId>
			<version>1.3.2</version>
		</dependency>

		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

2、配置文件

application.yml

mybatis:
    config-location: classpath:mybatis/mybatis.cfg.xml
    mapper-locations: classpath:mybatis/mapper/*.xml
    type-aliases-package: com.wzhi.tableserver.pojo
server:
    port: 8888
spring:
    application:
        name: vueAdmin
    datasource:
        driver-class-name: com.mysql.jdbc.Driver
        username: root
        password: 123456
        url: jdbc:mysql://127.0.0.1:3306/zhouzy?characterEncoding=utf8&useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC

3、sql建表

CREATE TABLE `persons` (
  `id` int(11) NOT NULL auto_increment,
  `create_datetime` datetime default NULL,
  `email` varchar(255) default NULL,
  `phone` varchar(255) default NULL,
  `sex` varchar(255) default NULL,
  `username` varchar(255) default NULL,
  `zone` blob,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=16 DEFAULT CHARSET=utf8;

INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('1', '2021-08-05 21:26:25', 'gubaoer@hotmail.com', '8613000001111', 'male', 'gubaoer', 'HongKou District');
INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('2', '2021-08-05 21:27:04', 'gubaoer@hotmail.com', '8613000001111', 'male', 'gubaoer', 'HongKou District');
INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('3', '2021-08-05 21:27:04', 'boyle.gu@hotmail.com', '8613000001112', 'male', 'baoer.gu', 'JingAn District');
INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('4', '2021-08-05 21:27:04', 'yoyo.wu@gmail.com', '8613000001113', 'female', 'yoyo.wu', 'JingAn District');
INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('5', '2021-08-05 21:27:04', 'stacy.gao@126.com', '8613000001114', 'female', 'stacy.gao', 'MinHang District');
INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('6', '2021-08-05 21:27:04', 'yomiko.zhu@qq.com', '8613000001115', 'female', 'yomiko.zhu', 'PuDong District');
INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('7', '2021-08-05 21:27:04', 'hong.zhu@163.com', '8613000001116', 'male', 'hong.zhu', 'YangPu District');
INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('8', '2021-08-05 21:27:04', 'leon.lai@qq.com', '8613000001117', 'male', 'leon.lai', 'JinShan District');
INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('9', '2021-08-05 21:27:04', 'mark.lei@sohu.com', '8613000001118', 'male', 'mark.lei', 'HuangPu District');
INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('10', '2021-08-05 21:27:04', 'wen.liu@360.com', '8613000001119', 'male', 'wen.liu', 'ChongMing District');
INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('11', '2021-08-05 21:27:04', 'cai.lu@baidu.com', '8613000001120', 'female', 'cai.lu', 'BaoShan District');
INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('12', '2021-08-05 21:27:04', 'alex.li@icee.com', '8613000001121', 'male', 'alex.li', 'ChangNing District');
INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('13', '2021-08-05 21:27:04', 'sofia.xu@qq.com', '8613000001122', 'female', 'sofia.xu', 'ZhaBei District');
INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('14', '2021-08-05 21:27:04', 'cora.zhang@qq.com', '8613000001123', 'female', 'cora.zhang', 'XuHui District');
INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('15', '2021-08-05 21:27:04', 'tom.gao@hotmail.com', '8613000001124', 'female', 'tom.gao', 'HuangPu District');

4、根据sql生成javaweb代码包括mybatis映射文件

在线生成地址:http://java.bejson.com/generator

dao层、service层、controller层及mybatis代码就不贴了，自动生成就好

5、配置跨域信息

package com.zhouzy.server.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
/**
 * @author 不若为止
 * @version 1.0
 * @class CorsConfig
 * @package com.wzhi.tableserver.config
 * @desc 因为Vue使用的是axios进行后台交互，所以需要配置一个过滤
 * @copyright weizhi
 * @date 2018/09/04
 */
@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig(){
        CorsConfiguration corsConfiguration =new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter(){
        //System.out.println("进入跨域处理");
        UrlBasedCorsConfigurationSource source=new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**",buildConfig());
        return new CorsFilter(source);
    }
}