一、效果图

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.xmlmapper-locations: classpath:mybatis/mapper/*.xmltype-aliases-package: com.wzhi.tableserver.pojo
server:port: 8888
spring: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', '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;}@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组件

java入门-springboot+mybatis+vue实现简单的后台管理系统相关推荐

java后台oa项目整套,[VIP源码]【S020】springboot+mybatis+bootstrap开发员工oa后台管理系统项目源码...
java源码项目名称:springboot+mybatis+bootstrap开发员工oa后台管理系统项目源码springboot项目源码0 `" C+ a" `" ~0 ...
基于java+springboot+mybatis+vue+mysql的校园医疗保险管理系统
项目介绍本系统采用java语言开发,后端采用springboot框架,前端采用vue技术,数据库采用mysql进行数据存储. 前端页面: 功能:首页.保险信息.公告信息. 留言反馈.个人中心.后台管 ...
基于JAVA+SpringBoot+Mybatis+Vue+MYSQL的小区物业管理系统
本项目使用前后端分离架构,因此分为两个部分. server 以Springboot为基础的后端项目 ui 以Vue.js为基础的前端项目其中后端项目中的主要技术选型如下: SpringBoot 项目 ...
基于JAVA+SpringBoot+Mybatis+Vue+MYSQL的智慧养老管理系统
功能模块本系统共分为两个角色:家长,养老院和管理员,家属功能:个人信息管理.查看公告.查看自己老人实时信息.留言板. 管理员功能:家属管理.公告管理.留言管理.老人健康管理.基础管理. 页面效果
SpringBoot+MyBatis+Vue+ElementUI项目实战-人事管理系统（免费开源）
一.说明 1.该项目是写给有一定SpringBoot.MyBatis.Vue基础,同时想做做项目的同学看的,不适合一点基础也没有的小白,也不适合高手~~~ 源码下载地址:https://downloa ...
基于JAVA+SpringBoot+Mybatis+MYSQL的物流仓库后台管理系统
项目介绍: 仓库管理系统主要用到的技术有springboot,mybatisplus,shiro.主要角色有超级管理员.基础数据管理员.仓库管理员.销售管理员.系统管理员.不同角色拥有不同的权限,使用 ...
vue项目简单的后台管理系统
车辆的后台管理系统实现对车辆信息的增删改查登录界面, 登录界面我使用了组件的方式将login的路径作为默认跳转路径,用户登录系统,需要与数据库(这里我用的是mongodb数据库)的登录信息进行比照通 ...
基于javaweb的平行志愿管理系统(java+springboot+mybatis+vue+mysql)
基于javaweb的平行志愿管理系统(java+springboot+mybatis+vue+mysql) 运行环境 Java≥8.MySQL≥5.7.Node.js≥10 开发工具后端:eclip ...
基于javaweb的水果生鲜商城系统(java+springboot+mybatis+vue+mysql)
基于javaweb的水果生鲜商城系统(java+springboot+mybatis+vue+mysql) 运行环境 Java≥8.MySQL≥5.7.Node.js≥10 开发工具后端:eclip ...

java入门-springboot+mybatis+vue实现简单的后台管理系统