源码地址:/wwwzhouzy/vueadmin
注意:前后端在一个地址，vueClient是vue前端，zhouzyServer是后端
一、效果图
1、列表
2、图表
二、代码
此处贴核心代码
后端
代码结构：
1、pom引包
因为我用的是mysql5.0，所以springboot使用2.0.5版本
<?xml version="1.0" encoding="UTF-8"?><project xmlns="/POM/4.0.0" xmlns:xsi="/2001/XMLSchema-instance"xsi:schemaLocation="/POM/4.0.0 /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.xmlmapper-locations: classpath:mybatis/mapper/*.xmltype-aliases-package: com.wzhi.tableserver.pojoserver:port: 8888spring:application:name: vueAdmindatasource:driver-class-name: com.mysql.jdbc.Driverusername: rootpassword: 123456url: 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', '-08-05 21:26:25', 'gubaoer@', '8613000001111', 'male', 'gubaoer', 'HongKou District');INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('2', '-08-05 21:27:04', 'gubaoer@', '8613000001111', 'male', 'gubaoer', 'HongKou District');INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('3', '-08-05 21:27:04', 'boyle.gu@', '8613000001112', 'male', 'baoer.gu', 'JingAn District');INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('4', '-08-05 21:27:04', 'yoyo.wu@', '8613000001113', 'female', 'yoyo.wu', 'JingAn District');INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('5', '-08-05 21:27:04', 'stacy.gao@', '8613000001114', 'female', 'stacy.gao', 'MinHang District');INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('6', '-08-05 21:27:04', 'yomiko.zhu@', '8613000001115', 'female', 'yomiko.zhu', 'PuDong District');INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('7', '-08-05 21:27:04', 'hong.zhu@', '8613000001116', 'male', 'hong.zhu', 'YangPu District');INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('8', '-08-05 21:27:04', 'leon.lai@', '8613000001117', 'male', 'leon.lai', 'JinShan District');INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('9', '-08-05 21:27:04', 'mark.lei@', '8613000001118', 'male', 'mark.lei', 'HuangPu District');INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('10', '-08-05 21:27:04', 'wen.liu@', '8613000001119', 'male', 'wen.liu', 'ChongMing District');INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('11', '-08-05 21:27:04', 'cai.lu@', '8613000001120', 'female', 'cai.lu', 'BaoShan District');INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('12', '-08-05 21:27:04', 'alex.li@', '8613000001121', 'male', 'alex.li', 'ChangNing District');INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('13', '-08-05 21:27:04', 'sofia.xu@', '8613000001122', 'female', 'sofia.xu', 'ZhaBei District');INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('14', '-08-05 21:27:04', 'cora.zhang@', '8613000001123', 'female', 'cora.zhang', 'XuHui District');INSERT INTO `zhouzy`.`persons` (`id`, `create_datetime`, `email`, `phone`, `sex`, `username`, `zone`) VALUES ('15', '-08-05 21:27:04', 'tom.gao@', '8613000001124', 'female', 'tom.gao', 'HuangPu District');
4、根据sql生成javaweb代码包括mybatis映射文件
在线生成地址:/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 /09/04*/@Configurationpublic class CorsConfig {private CorsConfiguration buildConfig(){CorsConfiguration corsConfiguration =new CorsConfiguration();corsConfiguration.addAllowedOrigin("*");corsConfiguration.addAllowedHeader("*");corsConfiguration.addAllowedMethod("*");return corsConfiguration;}@Beanpublic CorsFilter corsFilter(){//System.out.println("进入跨域处理");UrlBasedCorsConfigurationSource source=new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**",buildConfig());return new CorsFilter(source);}}
前端
代码拉下来后，直接进入目录
1、运行命令 npm install安装
2、cnpm run dev
本案例采用easy-table-vue组件
