Maven+SSM+vue整合含源码，前后端分离，springMvc获取vue get,post方法传递的参数

小鱼儿 2023-10-06 08:26 5阅读 0赞

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

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

### 环境说明 ###

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

### 项目目录结构 ###

1.前端----------------------------------------------------------------------------2.后台  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3_size_16_color_FFFFFF_t_70 1]

### 关键性代码 ###

**一、vue 环境配置 /config/index.js**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3_size_16_color_FFFFFF_t_70 2]  
完成如上配置，下面两个路径调用相同的后台接口  
**前台访问** 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'})
              }

后台  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3_size_16_color_FFFFFF_t_70 3]  
请求与响应  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3_size_16_color_FFFFFF_t_70 5]  
**get 方法**  
前端

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

后台  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3_size_16_color_FFFFFF_t_70 6]  
请求与响应  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3_size_16_color_FFFFFF_t_70 8]  
②接口不单独剥离，定义在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_www.cnblogs.com_logsharing_p_8448446.html].  
代码链接  
链接: [https://pan.baidu.com/s/1l-k4S6fa5DKuZXaeQi2WRA][https_pan.baidu.com_s_1l-k4S6fa5DKuZXaeQi2WRA].  
提取码: wxvi

[https_www.cnblogs.com_supwang-learn-enjoy-success_p_11277420.html]: https://www.cnblogs.com/supwang-learn-enjoy-success/p/11277420.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200509105546259.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200509105437640.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200509110904662.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200509155721781.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200509160337873.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020050916014290.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200509160531370.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200509160631508.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200509160802766.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3,size_16,color_FFFFFF,t_70
[https_www.cnblogs.com_logsharing_p_8448446.html]: https://www.cnblogs.com/logsharing/p/8448446.html
[https_pan.baidu.com_s_1l-k4S6fa5DKuZXaeQi2WRA]: https://pan.baidu.com/s/1l-k4S6fa5DKuZXaeQi2WRA