目錄

?

基本概念

代碼實(shí)例

---

?

基本概念

這是一個很6的模式，以目前本人C++ Qt的技術(shù)，是做不出的，但Java已經(jīng)有雛形了。

后端采用Spring Boot主要是回json數(shù)據(jù)，如下所示：

這里的數(shù)據(jù)都是來自數(shù)據(jù)庫：

前端通過點(diǎn)擊按鈕向后端發(fā)送請求，從而獲取數(shù)據(jù)：

相關(guān)的Nginx代理如下：

這里Vue application是192.168.164.1:8081

而Spring Boot為192.168.164.1:8080

在后期，這Spring Boot可以放到內(nèi)網(wǎng)里面，這樣外網(wǎng)就不能直接訪問他了，

這里前端和后端是2個服務(wù)，但通過Nginx，這種方式，用戶一般是體會不到的。

這里是vue中的請求代碼：

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

?

?

代碼實(shí)例

因為目前還是半成品，就不發(fā)項目了，等實(shí)例完成，將會在其他的博文中給去全部的鏈接下載

Spring Boot結(jié)構(gòu)

源碼如下：

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前端關(guān)鍵代碼：

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>

?

總結(jié)

以上是生活随笔為你收集整理的Java前端笔记-后端Springboot，前端vue，Nginx使前后端分离的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。