java入门-springboot+mybatis+vue实现简单的后台管理系统
源码地址:https://codechina.csdn.net/wwwzhouzy/vueadmin
注意:前后端在一个地址，vueClient是vue前端，zhouzyServer是后端
一、效果图
1、列表
2、图表
二、代码
此处贴核心代码
后端
代码结构：
1、pom引包
因为我用的是mysql5.0，所以springboot使用2.0.5版本
4.0.0
org.springframework.boot
spring-boot-starter-parent
2.0.5.RELEASE
com.wzhi
zhouzyServer
0.0.1-SNAPSHOT
tableserver
实现数据表格的前后台交互
1.8
org.springframework.boot
spring-boot-starter-web
org.mybatis.spring.boot
mybatis-spring-boot-starter
1.3.2
mysql
mysql-connector-java
runtime
org.projectlombok
lombok
true
org.springframework.boot
spring-boot-starter-test
test
org.springframework.boot
spring-boot-maven-plugin
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', '[email protected]', '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', '[email protected]', '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', '[email protected]', '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', '[email protected]', '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', '[email protected]', '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', '[email protected]', '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', '[email protected]', '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', '[email protected]', '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', '[email protected]', '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', '[email protected]', '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', '[email protected]', '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', '[email protected]', '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', '[email protected]', '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', '[email protected]', '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', '[email protected]', '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);
}
}
前端
代码拉下来后，直接进入目录
1、运行命令 npm install安装
2、cnpm run dev
本案例采用easy-table-vue组件