如今，springboot和vue作为最热门的前后台框架技术，最近公司的项目只要是java实现，均以此两种框架+iview前端技术进行实现，因此本菜鸟特用以下两个框架编写的前后台代码进行前后端调用说明，其中包含跨域等关键代码，以及后台返回值的封装。希望能对广大技术开发朋友有所帮助，提供灵感，也请各位大佬能够提出好的意见或建议以求精益求精。在此先谢谢各位看官。
先贴出前端页面显示效果，因为目前只是我个人写的demo，所以是最简陋的版本，各位轻喷。
好了，准备好了就让我们一起接着往下看吧。
前后端涉及技术内容：
前端：vue+iview
后端：springboot+activiti
功能需求：无差别获取列表数据，并放在Table组件中展示。
先看一下界面效果吧：
下面贴出关键代码实现：
前端（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: '序号', type: 'index', key:'index'},
{ title: '版本号', key: 'version'},
{ title: '流程名称', key: 'name'},
{ title: '流程Key', key: 'flowKey'},
{ title: '定义主键', key: 'defId'},
{ title: '实例数量', key: 'instanceQuantity'},
{ title: '创建时间', key: 'createDate',
render: (h, params) => {
// 这里要求h中的第一个参数是注册成功的组件
if(params.row.createDate !== null){
return h('div',getDate(new Date(params.row.createDate),'year')
)
}
}
},
{ title: '发布时间', 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(){
//在钩子函数中调用此方法
this.getTableData()
},
methods: {
//在methods中定义此方法
getTableData(){
//根据ES6语法进行调用
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组件为原型，并根据自己的需求稍加修改。（PS：官网demo真心好用，建议各位在实际开发过程中遇到困难先尝试仔细查看官方API，大部分的问题都可以得到有效解决）
其中在以上代码中，用到了两个自己封装的API，下面贴出关键代码。
关键方法说明：
①getTableData()：以axios工具请求后台，获取列表中的数据。
import axios from 'axios'
axios.defaults.baseURL = 'http://ip:port/project_name/';
/**获取table的数据**/
export const getTableData = params => {
return axios.request({
url: 'flowDef/list', //配置的映射路径
params: params, //请求参数
method: 'get' //请求方式（以get请求为例）
})
}
②getDate()：格式化时间为 yyyy-mm-dd hh:mm:ss
const getValue= num => {
return num < 10 ? '0' + num : num
}
/**
* @param {Number} timeStamp 传入的时间戳
* @param {Number} startType 要返回的时间字符串的格式类型，传入'year'则返回年开头的完整时间
*/
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中前端所涉及的全部代码，是不是十分容易呢。下面请看后端的关键代码：
先说一下解决跨域问题：
跨域：当一个请求的协议（例如：http）、域名（www.xxx.xxx）、端口（8080）三者之间任意一个与当前页面url（xxx://localhost:8081）不同即为跨域。
解决方案，网上有很多朋友都已经研究出了很成熟的解决方案，即使用以下代码即可：
@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() {
}
}
后台实际接口代码：
/**
* 分页获取流程定义列表
* @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这是本人自己封装好的前后端交互数据，由三个属性构成，分别为Code（调用相应码），Message（调用结果信息，一般情况下Message和Code对应且成对出现）和Data（实际需要返回前台的数据）。这是为了将结果封装成Json格式，使得前后端传参结构更加统一便捷，以及使代码清晰明了。
这样返回前端的数据就变成了以下JSON格式：
{
"responseCode": 1,
"responseMessage": "SUCCESS",
"responseData": {
"data": [
{
key:value,
...
...
...
}
]
}
}
总结：以上就是前后端调用的全部关键代码，因为本文只介绍前后端调用的基本方案，因此后台逻辑（Service层,Mapper层）具体实现并未详细列出，需要各位根据自己的实际业务需求进行封装和实现。
大致思路就是：前端使用axios工具，根据配置好的映射路径对后台进行请求，后台获取指定的数据后，封装为JSON格式的数据并返回给前端，前端解析完成后再显示到Table组件中。
好了，以上的代码demo是否能为各位看官带来一些前后端调用的思路呢，此文章内容比较浅显，对于各路好手也只是希望能尽绵薄之力，并有抛砖引玉之意。本菜鸟将抱着学习的态度，欢迎各位指教，最后
希望大家都能在技术的道路上渐行渐远，早日实现自己的理想。谢谢各位！
PS：由于最近工作需要，本文关键性源码均搭建在activiti工作流框架中，基于activiti工作流进行业务实现。如果有在这方面有经验或兴趣的小伙伴欢迎共同交流指正。
