ssm+vue前后端不分离的实现流程

下面是SSM+Vue前后端不分离的实现流程：

1. 搭建SSM项目

首先需要搭建一个SSM项目，包括Spring、SpringMVC和MyBatis三个框架。可以使用Maven或Gradle进行依赖管理。

2. 引入Vue相关文件

将Vue相关的js、css等文件下载到本地，然后将这些文件复制到SSM项目的WebRoot目录下的vue文件夹中。

3. 在后端页面中引入Vue

在后端页面中引入Vue的js文件，如：

<script src="vue/vue.js"></script>

然后在页面中定义Vue实例，如：

<div id="app">
  {{ message }}
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

4. 通过ajax请求获取数据

在Vue实例中通过ajax请求后端数据，获取数据后在页面中进行渲染，如：

<div id="app">
  <ul>
    <li v-for="item in items">
      {{ item.name }} - {{ item.age }}
    </li>
  </ul>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      items: []
    },
    mounted: function () {
      var that = this;
      $.ajax({
        url: 'http://localhost:8080/getData',
        type: 'GET',
        success: function (data) {
          that.items = data;
        }
      })
    }
  })
</script>

5. 后端Controller中接收ajax请求

在后端Controller中定义相关的RequestMapping来接收Vue页面中的ajax请求，并返回相应的数据，如：

@RequestMapping(value = "getData", method = RequestMethod.GET)
@ResponseBody
public List<Item> getData() {
  List<Item> items = itemService.getItems();
  return items;
}

通过以上步骤，我们就可以实现SSM+Vue前后端不分离的应用。需要注意的是，Vue是通过ajax请求后端数据来实现页面渲染的，因此需要在后端Controller中定义相关的RequestMapping来接收这些请求。