这里没有详细项目搭建流程，只附关键性代码，如需要源码文章末尾会附有代码下载链接。代码只为测试vue+SSM整合，其中还有很多问题，希望大佬轻喷

如需vue+ssm项目详细搭建流程，此链接有详细步骤
链接: https://www.cnblogs.com/supwang-learn-enjoy-success/p/11277420.html.

环境说明

1. 后端使用 SSM+maven 搭建
2. 前端使用 vue-cli 创建 vue 的项目

项目目录结构

1.前端----------------------------------------------------------------------------2.后台

关键性代码

一、vue 环境配置 /config/index.js

完成如上配置，下面两个路径调用相同的后台接口
前台访问 http://localhost:8090/api/user/allUser
后台访问 http://localhost:4444/ktvManage_war/user/allUser
二、axios配置两种不同的方式，用哪种都可以
①将接口 API 接口剥离出来，单独放在一个文件夹里
ajax.js 配置 axios

import axios from 'axios'
import qs from 'qs'

export default function ajax (url, data = {}, type = 'GET') {
 return new Promise((resolve, reject) => {
   let promise
   if (type === 'GET') {
     data = qs.stringify(data);
     if(data !== ''){
       url = url + '?' + data;
     }
     promise = axios.get(url)
   } else {
     promise = axios.post(url, data)
   }
   promise.then(function (response) {
     resolve(response.data)
   }).catch(function (error) {
     reject(error)
   })
 })
}

index.js api接口文件

import ajax from './ajax'

// 1.登录接口
export const LoginIn = (user_name, password) => ajax('/api/user/userLogin', {user_name, password}, 'POST')

// 2.查询当前账号下的所有账户
export const getAllUser= () => ajax('/api/user/allUser', {})

// 3.修改用户信息
export const updateUser= (id) => ajax('/api/user/updateUser', {id})

使用方法（代码不全，只有导入和使用）
post方法
前端

import {LoginIn} from '../api/index'
await LoginIn(this.user_name, this.password).then(res=>{
          console.log(res)
           // 这块不用 res.data 是因为 ajax.js 配置中返回的是 response.data
          if(res===1){
            console.log('登录成功')
            this.$router.push({name: 'success'})
          }
          else{
            console.log('登录失败')
            this.$router.push({name: 'fail'})
          }

后台

请求与响应


get 方法
前端

import {updateUser} from '../api/index'
updateUser(row.id).then(
          (res) =>{
            console.log(res);
          }
        );

后台

请求与响应


②接口不单独剥离，定义在vue中
request.js 配置 axios

import axios from 'axios' // 引入axios
/* 创建axios实例 */
const service = axios.create({
  // 这个process.env.BASE_URL在config/dev.evn.js、prod.evn.js里面进行配置
  baseURL: process.env.BASE_URL, // api的base_url
  timeout: 5000 // 请求超时时间
});
/* response拦截器，进行错误处理 */
service.interceptors.response.use(response => {
    return response
  },
  error => {
    return Promise.reject(error)
  }
);
/* reuqest拦截器 */
service.interceptors.request.use(config => {
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
export default service

commonAPI.js 配置api公共入口 （注意，get 方法为 params，post 方法为 data）因为我传过来是个对象，所以需要这样写，当然你也可以用 qs.stringify(data) 方法将其转换为 xx=xx&xx=xx 这种格式

import request from '@/api/request'

export default function commonAPI(api, data = {}, method = 'get') {
  if (method === 'get') {
    return request({
      url: api,
      params: data
      method: "get"
    })
  } else {
    return request({
      url: api,
      data: data,
      method: method
    })
  }
}

使用方法（代码不全，只有导入和使用，后台代码以及效果图和上面相同）
post方法

import common from '../api/commonAPI'
 common('/api/user/userLogin', {user_name: this.user_name, password: this.password},"post").then(res=>{
          console.log(res)
          //此处需要 res.data 是因为 request.js 配置返回的 response
          if(res.data===1){
            console.log('登录成功')
            this.$router.push({name: 'success'})
          }
      else{
            this.$router.push({name: 'fail'})
          }
        })

get方法

import common from '../api/commonAPI'
common('/api/user/updateUser',{id: row.id}).then(
          (res) =>{
            console.log(res);
            console.log(res.data);
          }

get post请求区别分析链接
链接: https://www.cnblogs.com/logsharing/p/8448446.html.
代码链接
链接: https://pan.baidu.com/s/1l-k4S6fa5DKuZXaeQi2WRA.
提取码: wxvi