目录

 

基本概念

代码实例

---

 

基本概念

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

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

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

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

相关的Nginx代理如下：

这里Vue application是192.168.164.1:8081

而Spring Boot为192.168.164.1:8080

在后期，这Spring Boot可以放到内网里面，这样外网就不能直接访问他了，

这里前端和后端是2个服务，但通过Nginx，这种方式，用户一般是体会不到的。

这里是vue中的请求代码：

  methods: {
    handleSubmit(){
       this.$axios({
         type: 'get',
         url: '/gra/list'
       }).then(res => {
 
         console.log(res)
       }).catch(err=>{
 
         alert(err)
       })
    }
  }

 

 

代码实例

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

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 {
 
    @Autowired
    private 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 {
 
    @Id
    private 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 {
 
    @Autowired
    private BarInfoRepository repository;
 
 
    @Override
    public BarInfo findOne(Integer id) {
 
        return repository.findOne(id);
    }
 
    @Override
    public 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>