基本概念

这是一个很6的模式，以目前本人C++ Qt的技术，是做不出的，但Java已经有雏形了。

后端采用Spring Boot主要是回json数据，如下所示：

这里的数据都是来自数据库：

前端通过点击按钮向后端发送请求，从而获取数据：

代码实例

因为目前还是半成品，就不发项目了，等实例完成，将会在其他的博文中给去全部的链接下载

Spring Boot结构

源码如下：

BarController.java

package com.gratestdemo.demo.controller;import com.gratestdemo.demo.dataobject.BarInfo;
import com.gratestdemo.demo.service.BarInfoService;
import com.gratestdemo.demo.vo.BarInfoVO;
import com.gratestdemo.demo.vo.BarVO;
import com.gratestdemo.demo.vo.ResultVO;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.List;@RequestMapping("/")
@RestController
public class BarController {@Autowiredprivate BarInfoService barInfoService;@GetMapping("/list")public ResultVO list(){List<BarInfo> barInfoList = barInfoService.findAll();List<BarInfoVO> barInfoVOList = new ArrayList<>();BarVO barVO = new BarVO();barVO.setName("柱状图");for(BarInfo barInfo : barInfoList){BarInfoVO barInfoVO = new BarInfoVO();barInfoVO.setCount(barInfo.getCount());barInfoVO.setValue1(barInfo.getValue1());barInfoVO.setValue2(barInfo.getValue2());barInfoVO.setValue3(barInfo.getValue3());barInfoVO.setValue4(barInfo.getValue4());barInfoVOList.add(barInfoVO);}barVO.setBarInfoVOList(barInfoVOList);ResultVO resultVO = new ResultVO();resultVO.setCode(0);resultVO.setMsg("成功");resultVO.setData(barVO);return resultVO;}
}

BarInfo.java

package com.gratestdemo.demo.dataobject;import lombok.Data;import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.Table;@Data
@Entity
@Table(name = "gra_bar")
public class BarInfo {@Idprivate Integer id;private Integer count;private float value1;private float value2;private float value3;private float value4;
}

BarInfoRepository.java

package com.gratestdemo.demo.repository;import com.gratestdemo.demo.dataobject.BarInfo;
import org.springframework.data.jpa.repository.JpaRepository;public interface BarInfoRepository extends JpaRepository<BarInfo, Integer> {}

BarInfoServiceImpl

package com.gratestdemo.demo.service.impl;import com.gratestdemo.demo.dataobject.BarInfo;
import com.gratestdemo.demo.repository.BarInfoRepository;
import com.gratestdemo.demo.service.BarInfoService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;@Service
public class BarInfoServiceImpl implements BarInfoService {@Autowiredprivate BarInfoRepository repository;@Overridepublic BarInfo findOne(Integer id) {return repository.findOne(id);}@Overridepublic List<BarInfo> findAll() {return repository.findAll();}
}

BarInfoService.java

package com.gratestdemo.demo.service;import com.gratestdemo.demo.dataobject.BarInfo;import java.util.List;public interface BarInfoService {BarInfo findOne(Integer id);List<BarInfo> findAll();
}

BarInfoVO.java

package com.gratestdemo.demo.vo;import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.Data;@Data
public class BarInfoVO {@JsonProperty("count")private Integer count;@JsonProperty("value1")private float value1;@JsonProperty("value2")private float value2;@JsonProperty("value3")private float value3;@JsonProperty("value4")private float value4;
}

BarVO.java

package com.gratestdemo.demo.vo;import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.Data;import java.util.List;@Data
public class BarVO {@JsonProperty("name")private String name;@JsonProperty("content")private List<BarInfoVO> barInfoVOList;
}

Result.java

package com.gratestdemo.demo.vo;import lombok.Data;@Data
public class ResultVO<T> {private Integer code;private String msg;private T data;
}

Vue前端关键代码：

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Axios from 'axios'
import TodoList from './TodoList'Vue.config.productionTip = false
Vue.prototype.$axios=Axios/* eslint-disable no-new */
new Vue({el: '#app',components: { TodoList },template: '<TodoList/>',
})

TodoList.vue

<template><div><div><button @click="handleSubmit">获取</button></div></div>
</template><script>
export default {methods: {handleSubmit(){this.$axios({type: 'get',url: '/gra/list'}).then(res => {console.log(res)}).catch(err=>{alert(err)})}}
}
</script><style></style>

Java前端笔记-后端Springboot，前端vue，Nginx使前后端分离相关推荐

第十六节 springboot 打包vue代码实现前后端统一部署
svbadmin学习日志本学习日志是使用Springboot和Vue来搭建的后台管理系统: 演示地址:http://118.31.68.110:8081/index.html 账号:root 密码: ...
vue和Java做数据交互_基于vue和springmvc前后端分离，json类接口调用介绍
基于vue和springmvc前后端分离,json类接口调用介绍版本要求:spring-3.2.9.RELEASE.vue-2.9.2.axios-0.17.1,其中axios作为http clie ...
Java工作笔记-类型转换的一种思路（前后端分离、反射）
这里主要是一种思路,前端可能会发送ajax请求.这个内容是json数据.这里面的数据可能全部是以字符串为主. 通常可以通过反射进行改变,如下的代码: 如下要转换成这些类型不然当时候赋值的时候就麻烦了 ...
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）十六（商品排序，Thymeleaf快速入门，商品详情页的展示）
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品详情页的展示) 一.商品排序 1.完善页面信息这是用来做排序的,默认按照综合排序 ...
Nginx实现前后端分离（springboot+vue）+双机互备
背景介绍项目采用springboot+vue开发,之前项目布署时,都是采用pom中配置,把vue打包的dist文件copy到springboot项目中resource/static下做的,这样每次 ...
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）二十二（下单和微信支付）
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)二十(下单) 0.学习目标会调用订单系统接口实现订单结算功能实现微信支付功能 1.订单 ...
（硅谷课堂项目）Java开发笔记4：前端基础知识（二）
文章目录 (硅谷课堂项目)Java开发笔记4:前端基础知识(二) 一.NPM 1.NPM简介 1.1.什么是NPM 1.2.NPM工具的安装位置 2.使用npm管理项目 2.1.创建文件夹npm 2. ...
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）十四（Spring Data Elasticsearch，将数据添加到索引库）
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十四(Spring Data Elasticsearch,将数据添加到索引库) 一.创建El ...
java学习笔记(三)：前端miniUI控件库入门
java学习笔记(三):前端miniUI控件库入门最近在一家公司实习学习,一上来就需要学习了解相关的前端内容--miniUI.而这个内容自己本身并没有了解学习过,上手也是遇到了不少的问题,于是想把自 ...

Java前端笔记-后端Springboot，前端vue，Nginx使前后端分离

基本概念

代码实例

Java前端笔记-后端Springboot，前端vue，Nginx使前后端分离相关推荐

最新文章

热门文章