目录

基本概念

代码实例

基本概念

这是一个很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>

最后

以上就是可靠超短裙为你收集整理的Java&前端笔记-后端Springboot，前端vue，Nginx使前后端分离基本概念代码实例的全部内容，希望文章能够帮你解决Java&前端笔记-后端Springboot，前端vue，Nginx使前后端分离基本概念代码实例所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。