? ? ? ? 如今晓褪，springboot和vue作為最熱門的前后臺(tái)框架技術(shù)盟劫，最近公司的項(xiàng)目只要是java實(shí)現(xiàn)饰迹，均以此兩種框架+iview前端技術(shù)進(jìn)行實(shí)現(xiàn)，因此本菜鳥特用以下兩個(gè)框架編寫的前后臺(tái)代碼進(jìn)行前后端調(diào)用說明醉锅，其中包含跨域等關(guān)鍵代碼兔簇，以及后臺(tái)返回值的封裝。希望能對廣大技術(shù)開發(fā)朋友有所幫助硬耍，提供靈感垄琐，也請各位大佬能夠提出好的意見或建議以求精益求精。在此先謝謝各位看官经柴。
先貼出前端頁面顯示效果狸窘，因?yàn)槟壳爸皇俏覀€(gè)人寫的demo，所以是最簡陋的版本坯认，各位輕噴翻擒。
好了氓涣，準(zhǔn)備好了就讓我們一起接著往下看吧。
前后端涉及技術(shù)內(nèi)容：
前端：vue+iview
后端：springboot+activiti
功能需求：無差別獲取列表數(shù)據(jù)陋气，并放在Table組件中展示劳吠。
先看一下界面效果吧：
下面貼出關(guān)鍵代碼實(shí)現(xiàn)：
前端（Vue+iview）
<template>
? <Table border :columns="columns12" :data="data6">
? ? <template slot-scope="{ row }" slot="name">
? ? ? <strong>{{ row.name }}</strong>
? ? </template>
? ? <template slot-scope="{ row, index }" slot="action">
? ? ? <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">查看</Button>
? ? ? <Button type="error" size="small" @click="remove(index)">刪除</Button>
? ? </template>
? </Table>
</template>
<script>
? import {getTableData} from '../api/activityManagement'
? import {getDate} from '../libs/tools'
? export default {
? ? name: 'TableData',
? ? data () {
? ? ? return {
? ? ? ? columns12: [
? ? ? ? ? { title: '序號(hào)', type: 'index', key:'index'},
? ? ? ? ? { title: '版本號(hào)', key: 'version'},
? ? ? ? ? { title: '流程名稱', key: 'name'},
? ? ? ? ? { title: '流程Key', key: 'flowKey'},
? ? ? ? ? { title: '定義主鍵', key: 'defId'},
? ? ? ? ? { title: '實(shí)例數(shù)量', key: 'instanceQuantity'},
? ? ? ? ? { title: '創(chuàng)建時(shí)間', key: 'createDate',
? ? ? ? ? ? render: (h, params) => {
? ? ? ? ? ? ? // 這里要求h中的第一個(gè)參數(shù)是注冊成功的組件
? ? ? ? ? ? ? if(params.row.createDate !== null){
? ? ? ? ? ? ? ? return h('div',getDate(new Date(params.row.createDate),'year')
? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? },
? ? ? ? ? { title: '發(fā)布時(shí)間', key: 'publishDate',
? ? ? ? ? ? render: (h, params) => {
? ? ? ? ? ? ? if(params.row.publishDate !== null){
? ? ? ? ? ? ? ? return h('div',getDate(new Date(params.row.publishDate),'year')
? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? title: 'Action',
? ? ? ? ? ? slot: 'action',
? ? ? ? ? ? width: 150,
? ? ? ? ? ? align: 'center'
? ? ? ? ? }
? ? ? ? ],
? ? ? ? data6: []
? ? ? }
? ? },
? ? mounted(){
? //在鉤子函數(shù)中調(diào)用此方法
? ? ? this.getTableData()
? ? },
? ? methods: {
//在methods中定義此方法
? ? ? getTableData(){
? //根據(jù)ES6語法進(jìn)行調(diào)用
? ? ? ? getTableData({}).then(res =>{
? ? ? ? ? console.log(res)
? ? ? ? ? if(res.data.responseCode === 1){
? ? ? ? ? ? this.data6 = res.data.responseData.data
? ? ? ? ? }
? ? ? ? })
? ? ? },
? ? ? show (index) {
? ? ? ? alert(index)
? ? ? },
? ? ? remove (index) {
? ? ? ? this.data6.splice(index, 1);
? ? ? }
? ? }
? }
</script>
????????以上均以iview3.0版本的官方文檔的Table組件為原型，并根據(jù)自己的需求稍加修改巩趁。（PS：官網(wǎng)demo真心好用痒玩，建議各位在實(shí)際開發(fā)過程中遇到困難先嘗試仔細(xì)查看官方API，大部分的問題都可以得到有效解決）
其中在以上代碼中议慰，用到了兩個(gè)自己封裝的API凰荚，下面貼出關(guān)鍵代碼。
關(guān)鍵方法說明：
①getTableData()：以axios工具請求后臺(tái)褒脯，獲取列表中的數(shù)據(jù)。
import axios from 'axios'
axios.defaults.baseURL = 'http://ip:port/project_name/';
/**獲取table的數(shù)據(jù)**/
export const getTableData = params => {
? return axios.request({
? ? url: 'flowDef/list', //配置的映射路徑
? ? params: params,? //請求參數(shù)
? ? method: 'get' //請求方式（以get請求為例）
? })
}
②getDate()：格式化時(shí)間為 yyyy-mm-dd hh:mm:ss
const getValue= num => {
? return num < 10 ? '0' + num : num
}
/**
* @param {Number} timeStamp 傳入的時(shí)間戳
* @param {Number} startType 要返回的時(shí)間字符串的格式類型缆毁，傳入'year'則返回年開頭的完整時(shí)間
*/
export const getDate = (timeStamp, startType) => {
? const d = new Date(timeStamp)
? const year = d.getFullYear()
? const month = getValue(d.getMonth() + 1)
? const date = getValue(d.getDate())
? const hours = getValue(d.getHours())
? const minutes = getValue(d.getMinutes())
? const second = getValue(d.getSeconds())
? let resStr = ''
? if (startType === 'year') resStr = year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + second
? else resStr = month + '-' + date + ' ' + hours + ':' + minutes
? return resStr
}
以上為demo中前端所涉及的全部代碼，是不是十分容易呢脊框。下面請看后端的關(guān)鍵代碼：
先說一下解決跨域問題：
跨域：當(dāng)一個(gè)請求的協(xié)議（例如：http）颁督、域名（www.xxx.xxx）、端口（8080）三者之間任意一個(gè)與當(dāng)前頁面url（xxx://localhost:8081）不同即為跨域浇雹。
解決方案沉御，網(wǎng)上有很多朋友都已經(jīng)研究出了很成熟的解決方案，即使用以下代碼即可：
@Component
public class OriginFilter implements Filter {
? ? @Override
? ? public void init(FilterConfig filterConfig) throws ServletException {
? ? }
? ? @Override
? ? public void doFilter(ServletRequest req, ServletResponse res,
? ? ? ? ? ? FilterChain chain) throws IOException, ServletException {
? ? ? ? HttpServletResponse response = (HttpServletResponse) res;
? ? ? ? HttpServletRequest request = (HttpServletRequest) req;
? ? ? ? response.setHeader("Access-Control-Allow-Origin", "*");
? ? ? ? response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE,PUT");
? ? ? ? response.setHeader("Access-Control-Max-Age", "3600");
? ? ? ? response.setHeader("Access-Control-Allow-Headers", "Content-Type,XFILENAME,XFILECATEGORY,XFILESIZE");
? ? ? ? if (request.getMethod().equals("OPTIONS")) {
? ? ? ? response.setStatus(200) ;
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? chain.doFilter(req, res);
? ? }
? ? @Override
? ? public void destroy() {
? ? }
}
后臺(tái)實(shí)際接口代碼：
/**
? ? * 分頁獲取流程定義列表
? ? * @return
? ? */
? ? @RequestMapping("/list")
? ? @Transactional
? ? public JsonResult list(){
? ? ? ? JsonResult jr = new JsonResult() ;
? ? ? ? resultMap = new HashMap<String,Object>() ;
? ? ? ? try {
? ? ? ? ? ? List<FlowDef> list = flowDefService.list();
? ? ? ? ? ? jr.setResponseCode(1);
? ? ? ? ? ? resultMap.put("data",list) ;
? ? ? ? ? ? jr.setResponseData(resultMap);
? ? ? ? ? ? jr.setResponseMessage(ResultEnum.SUCCESS);
? ? ? ? }catch (Exception e){
? ? ? ? ? ? e.printStackTrace();
? ? ? ? ? ? jr.setResponseMessage(ResultEnum.EXCEPTION);
? ? ? ? ? ? jr.setResponseCode(1);
? ? ? ? }
? ? ? ? return jr;
? ? }
代碼說明：JsonResult這是本人自己封裝好的前后端交互數(shù)據(jù)昭灵，由三個(gè)屬性構(gòu)成吠裆，分別為Code（調(diào)用相應(yīng)碼），Message（調(diào)用結(jié)果信息烂完，一般情況下Message和Code對應(yīng)且成對出現(xiàn)）和Data（實(shí)際需要返回前臺(tái)的數(shù)據(jù)）试疙。這是為了將結(jié)果封裝成Json格式，使得前后端傳參結(jié)構(gòu)更加統(tǒng)一便捷抠蚣，以及使代碼清晰明了祝旷。
這樣返回前端的數(shù)據(jù)就變成了以下JSON格式：
{
? ? "responseCode": 1,
? ? "responseMessage": "SUCCESS",
? ? "responseData": {
? ? ? ? "data": [
? ? ? ? ? ? {
? ? ? ? ? ? ? ? key:value,
????????????????...
????????????????...
????????????????...
? ? ? ? ? ? }
? ? ? ? ]
? ? }
}
????????總結(jié)：以上就是前后端調(diào)用的全部關(guān)鍵代碼，因?yàn)楸疚闹唤榻B前后端調(diào)用的基本方案嘶窄，因此后臺(tái)邏輯（Service層,Mapper層）具體實(shí)現(xiàn)并未詳細(xì)列出怀跛，需要各位根據(jù)自己的實(shí)際業(yè)務(wù)需求進(jìn)行封裝和實(shí)現(xiàn)。
????????大致思路就是：前端使用axios工具柄冲，根據(jù)配置好的映射路徑對后臺(tái)進(jìn)行請求吻谋，后臺(tái)獲取指定的數(shù)據(jù)后，封裝為JSON格式的數(shù)據(jù)并返回給前端现横，前端解析完成后再顯示到Table組件中滨溉。
????????好了什湘，以上的代碼demo是否能為各位看官帶來一些前后端調(diào)用的思路呢，此文章內(nèi)容比較淺顯晦攒，對于各路好手也只是希望能盡綿薄之力闽撤，并有拋磚引玉之意。本菜鳥將抱著學(xué)習(xí)的態(tài)度脯颜，歡迎各位指教哟旗，最后
希望大家都能在技術(shù)的道路上漸行漸遠(yuǎn)，早日實(shí)現(xiàn)自己的理想栋操。謝謝各位闸餐！
PS：由于最近工作需要，本文關(guān)鍵性源碼均搭建在activiti工作流框架中矾芙，基于activiti工作流進(jìn)行業(yè)務(wù)實(shí)現(xiàn)舍沙。如果有在這方面有經(jīng)驗(yàn)或興趣的小伙伴歡迎共同交流指正。
