前端vue+后端 spring boot +mybatis 前后端交互项目搭建总结

旧城等待， 2023-06-07 03:27 13阅读 0赞

该文章是根据上面文章[https://blog.csdn.net/Sun\_of\_Rainy/article/details/102523659][https_blog.csdn.net_Sun_of_Rainy_article_details_102523659]搭建过程遇到问题的总结

首先说明一下，我刚开始接触spring boot ,vue以前做项目看过别人写的改过几个bug,所以很感谢原贴写了那么详细的步骤

搭建完成了，太激动了，一定要记录一下这个历史性时刻，跨域问题搞了我4个多小时，幸亏中途还想要不要问别人，最后坚持在网上找，终于解决了，感谢这个帖子[https://blog.csdn.net/qq\_22194659/article/details/94637809][https_blog.csdn.net_qq_22194659_article_details_94637809]

前端静态展示没啥问题，主要是连上后台之后

### 1、通过原作者给的sql在数据库执行时，创建表没问题，插入数据时，因为id没有设置为自增，所以出现报错，将id设置为自增模式之后，数据库数据准备成功 ###

### 2、tableMain.vue里面出现 ###

![2019101217311952.png][]

因为我前段用的是vs code工具，这里的改法是 文件-》首选项-》设置

先找![20191012173737633.png][]，然后在里面找vetur.validation.template将其设置为false

![20191012173724838.png][]

### 3、重点来了，出现了跨域问题，原贴没有提到，我以为是我搞错了 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70][]

因为我的前后端端口不一样，前端8080，后端8388

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 1][]

更多关于跨域可以戳这里[https://blog.csdn.net/weixin\_43240792/article/details/92667358][https_blog.csdn.net_weixin_43240792_article_details_92667358]

找了4个小时，试了n种方法，包括@CrossOrigin注解，人家都成功了，我就是不成功，都怀疑我自己了，皇天不负有心人，找到了解决办法

1）修改main.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 2][]

/* 设置全局axios */
    Vue.prototype.$axios = axios
    /* 设置基本的默认路径 */
    axios.defaults.baseURL = '/api'
    /* 设置post请求的内容类型，不发送post请求可以不用设置 */
    axios.defaults.headers.post['Content-Type'] = 'application/json'

2)修改index.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 3][]

proxyTable: { //代理请求路径
          '/api': {  //这里的api就是main.js里面设置的axios.default.baseURL = '/api'
            /* 设置对象路径 */
            target: 'http://127.0.0.1:8388',   //后台的访问地址
            // secure: false,      // 如果是https接口，需要配置这个参数
            changeOrigin: true, //改变源 如果接口跨域，需要进行这个参数配置
            pathRewrite: {
              '^/api': '' //路径重写
            }
          }
        },

3)修改tableMain.vue

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 4][]

created () {
        // 在created函数中使用axios的get请求向后台获取用户信息数据
        this.$axios.get('/findAll').then(res => {
          this.tableData = res.data
          // alert(123);
        }).catch(function (error) {
          console.log(error)
        })
      }

耶，跨域问题终于解决了，也可以参考该贴[https://blog.csdn.net/qq\_22194659/article/details/94637809][https_blog.csdn.net_qq_22194659_article_details_94637809]

又出现了新的问题，不过是小问题、

### 4、访问不到我的controller ###

原因：spring boot工程的启动类位置有问题，controller类应该位于引导类的同级包或者子级包中

最终我的项目结构改为，而且修改了启动类中扫描包的路径和mapping文件的路径

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 5][]

需要注意的是，dao,pojo，service等目录结构也在启动类的子包

### 5、数据库驱动问题 ###

将数据库驱动版本改为自己本地可用的，修改application.yml中的driver-class-name: com.mysql.jdbc.Driver，原贴子驱动名中间有个cj.

### 6、最后一步了报错，没有该属性username![20191012180828411.png][] ###

原因如下（也是因为我懒，resultMap里面的是复制粘贴过来的）![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 6][]

改成userName就好了

到这里就结束了,页面终于出来了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 7][]

--------------------

都到这里了，再来个什么吧

我后台工具用的idea,嫌改了之后，一直要重启比较麻烦，所以采用了热部署

1、pom文件加上

<dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-devtools</artifactId>
                <optional>true</optional>
            </dependency>

2、file->setting![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 8][]

好了，收工

我搭建的整个项目已上传至我的资源

[https_blog.csdn.net_Sun_of_Rainy_article_details_102523659]: https://blog.csdn.net/Sun_of_Rainy/article/details/102523659
[https_blog.csdn.net_qq_22194659_article_details_94637809]: https://blog.csdn.net/qq_22194659/article/details/94637809
[2019101217311952.png]: /images/20230601/571c7a07a9fb4d71aad7be75815bf866.png
[20191012173737633.png]: /images/20230601/5c8e18cf4c644798ad2e6e49721669f5.png
[20191012173724838.png]: /images/20230601/78428c96b9c140568778b972d031bb69.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70]: /images/20230601/a955edf9ba7f467e871c52ead7853ca1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 1]: /images/20230601/7fb579f9feac497caed4115179ad85e8.png
[https_blog.csdn.net_weixin_43240792_article_details_92667358]: https://blog.csdn.net/weixin_43240792/article/details/92667358
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 2]: /images/20230601/30855c084ae7436eb220157d0afbf2ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 3]: /images/20230601/f74a9d9884ad4c5baba199fb62ddd37a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 4]: /images/20230601/46b0627354d14a528aac3757b719a47f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 5]: /images/20230601/c8c19eeee93542cf8b55041afec534aa.png
[20191012180828411.png]: /images/20230601/edfe519d4182400bb8eaead631def28a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 6]: /images/20230601/cae535572e614a5d9e4a8cce3c05b94e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 7]: /images/20230601/edb089bf663347d990ddc433fe39bcd8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 8]: /images/20230601/39c56ab8393e4aed985c262f63d3034d.png