Springboot Vue前后端分离实现基础的后台管理系统

       最近在利用空闲的时间学习springboot+Vue前后端分离相关知识，然后动手写了个后台管理系统，实现登录验证、学生模块、英雄联盟模块、数据可视化（暂未开发，准备使用echarts进行）；这边先以英雄联盟模块为例介绍，完整的代码上传至GitHub上，地址：https://github.com/evanZhangYiFeng/SpringBoot/tree/master/SpringBoot%2BVue

简单的后台管理系统如下截图所示(以英雄联盟模块为例，学生管理模块增删改查功能已实现):

欢迎大家下载参考，如有什么不对的地方还请多多指教了

1. 使用Maven创建一个SpringBoot后端项目，目录结构如下，同时在src/main/java文件夹下创建如下几个包：

2. 创建英雄属性实体类：

package com.Springboot.Vue.entity;

public class heroProperty {
	private Integer id;
	private String name;
	private Integer money;
	private Integer attack;    //攻击力
	private Integer magic;     //法强
	private Integer suck_blood;    //物理吸血
	private Integer magic_blood;    //法术吸血
	private Integer physical_penetration;    //物穿
	private Integer magic_penetration;       //法穿
	private Integer crit;                    //暴击
	private Integer blood;                   //生命值
	private Integer armor;                   //护甲
	private Integer spell;                   //魔抗
	private String equip1;                   //装备1-6
	private String equip2;
	private String equip3;
	private String equip4;
	private String equip5;
	private String equip6;
	private String skill1;                  //技能1名称
	private Integer damage1;                //技能1伤害
	private String skill2;
	private Integer damage2;
	private String skill3;
	private Integer damage3;
//省略getter和setter方法
}

3.创建mybatis映射接口

package com.Springboot.Vue.Mapper;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;

import com.Springboot.Vue.entity.heroProperty;

@Mapper
public interface heroPropertyMapper {
	public List getAllHero();
	
	//public heroProperty getHeroByName();
	
	//添加英雄
	public Integer addHero(heroProperty hero);
	
	//更新属性
	public Integer updateHeroInfo(heroProperty hero);
	
}	

4.controller层数据解析返回前端

package com.Springboot.Vue.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.Springboot.Vue.Mapper.heroPropertyMapper;
import com.Springboot.Vue.entity.heroProperty;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

@Controller
public class heroController {
	@Autowired
	heroPropertyMapper heroMapper;
	
	//获得所有英雄列表
	@ResponseBody
	@CrossOrigin
	@GetMapping("/getAllHero")
	public List getAllHero() {
		/*
		 * JSONArray array = new JSONArray(); JSONObject object = new JSONObject();
		 */
		List list = heroMapper.getAllHero();
		/*
		 * for(int i=0;i

 

二：前端Vue使用npm生成脚手架进行开发，如有对Vue安装有不清楚的同学，我在Gitub上上传了自己整理的安装手册，或者在CSDN搜索参考其他人的安装文档

Vue项目结构如下（没有在组件目录下进行分类，显得比较臃肿难看，下次注意）：

这边暂时一个英雄属性界面为例，代码如下：

最后在eclipse和webstorm分别启动前后端，系统正常运行；（如果需要部署到环境上，可以下载Nginx（无需配置，运行即可）作为反向代理服务；打包Vue项目，运行: npm run build Vue项目生成dist文件夹，将文件夹下的static文件夹和index.js复制到Nginx解压目录 下的html文件夹下，并且将SpringBoot项目导出jar包，以 java -jar 命令启动Springboot服务即可）；

更多详情介绍请点击GitHub链接：https://github.com/evanZhangYiFeng/SpringBoot/tree/master/SpringBoot%2BVue

最后祝愿每位开发者开心健康每一天！