springboot+vue结合，后端学习前端（一）

浅浅的花香味﹌ 2023-09-24 19:52 53阅读 0赞

正所谓，后端工程师终究变成全栈工程师……

### 构建前端项目 ###

新构建一个vue项目，具体可看 [链接][Link 1]

![在这里插入图片描述][3dc85d422d76492d8d2824d768a349d4.png]

![在这里插入图片描述][4a3f7d5ad32a45479a66a054224f8ae1.png]  
![在这里插入图片描述][3bea11d81dd747429437c217e0ce45c1.png]

## 构建后端项目 ##

![在这里插入图片描述][39e31650d613422793ae6eb24ad07035.png]  
这里出了一点错误，怎么也连不上spring网站，后来发现，连这个网站是时断时续的……更换了url如图所示……  
等了大概10min

还有一个问题就是，spring3.0以上版本，默认依赖jdk是17  
![在这里插入图片描述][23726f80e48945549df6a6998c989bf2.png]

## 登录界面开发 ##

### 前端方向 ###

![在这里插入图片描述][c37b32f723cb45a6a262d7a0cdc332a8.png]

#### Appindex ####

![在这里插入图片描述][d8fe4660581f439b8c28dc81b00c254a.png]

<template>
      <div>
        Hello World! 进入成功！
      </div>
    </template>
    
    <script>
    export default {
        
      name: 'Appindex'
    }
    </script>
    
    <style scoped>
    
    </style>

#### login ####

<template>
      <div>
        用户名:<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/>
        <br><br>
        密码： <input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
        <br><br>
        <button v-on:click="login">登录</button>
      </div>
    </template>
    
    <script>
    export default {
        
      name: 'Login',
      data () {
        
        return {
        
          loginForm: {
        
            username: '',
            password: ''
          },
          responseResult: []
        }
      },
      // 定义了登录按钮的点击方法,即向后端 /login 接口发送数据，获得成功的响应后，页面跳转到 /index。
      methods: {
        
        login () {
        
          this.$axios
            .post('/login', {
        
              username: this.loginForm.username,
              password: this.loginForm.password
            })
            .then(successResponse => {
        
              if (successResponse.data.code === 200) {
        
                this.$router.replace({
        path: '/index'})
              }
            })
            .catch(failResponse => {
        
            })
        }
      }
    
    }
    </script>
    
    <style scoped>
    
    </style>

#### 前端反向代理 ####

![在这里插入图片描述][3dad94c5b59f46d9808995bf1868bfa6.png]

import Vue from 'vue'
    import App from './App'
    import router from './router'
    // 设置反向代理，前端请求默认发送到 http://localhost:8443/api
    var axios = require('axios')
    axios.defaults.baseURL = 'http://localhost:8443/api'
    // 全局注册，之后可在其他组件中通过 this.$axios 发送数据
    Vue.prototype.$axios = axios
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
        
      el: '#app',
      router,
      components: {
         App },
      template: '<App/>'
    })

因为使用了新的模块 axios，所以需要进入到项目文件夹中，执行 npm install --save axios，以安装这个模块  
![在这里插入图片描述][4fd446a8b1e340599fb1aa6cab80bdb5.png]

#### 配置页面路由 ####

src\\router\\index.js  
![在这里插入图片描述][5a752e64a3cc4c56bf3df08d97a2d853.png]

import Vue from 'vue'
    import Router from 'vue-router'
    // 导入刚才编写的组件
    import AppIndex from '@/components/home/AppIndex'
    import Login from '@/components/Login'
    
    Vue.use(Router)
    
    export default new Router({
        
      routes: [
      // 下面都是固定的写法
        {
        
          path: '/login',
          name: 'Login',
          component: Login
        },
        {
        
          path: '/index',
          name: 'AppIndex',
          component: AppIndex
        }
      ]
    })

#### 跨域支持 ####

![在这里插入图片描述][1735417fa88344c089607b8199529d4e.png]  
修改为  
![在这里插入图片描述][5508b2cb32dd425e8258a2d82a8d067f.png]

proxyTable: {
        
          '/api': {
        
            target: 'http://localhost:8443',
            changeOrigin: true,
            pathRewrite: {
        
              '^/api': ''
            }
          }
        }

### 启动项目 ###

出问题，白板  
F12查看原因Uncaught TypeError: Cannot set properties of undefined (setting ‘baseURL’)  
使用 [vue3中使用axios报错][vue3_axios]的方法，最终解决

第二种解决方法  
![在这里插入图片描述][d29ee1970b98422989783eb72ffbe2a3.png]

![在这里插入图片描述][a2d50318677d48b680842415ac80ea21.png]  
![在这里插入图片描述][06ae82dde5c14111bceb27d0d6c4b285.png]  
注意地址是 localhost:8081/\#/login ，中间有这个 \# 是因为 Vue 的路由使用了 Hash 模式，是单页面应用的经典用法，可在后端解决

### 后端页面 ###

![在这里插入图片描述][e0f88a5277d34de4a5d4a4209c7b2258.png]

![在这里插入图片描述][affa3f19785b42749a517b9f1d859de3.png]  
![这里插入图片描述\](https://img-blog.csdnimg.cn/3d91c76803434a80a72016d74e2ce48c.png)][https_img-blog.csdnimg.cn_3d91c76803434a80a72016d74e2ce48c.png]

![在这里插入图片描述][09c4f167c58244608ed01eecaee3ef3d.png]

## 测试登录 ##

![在这里插入图片描述][63a6ccf2a917475e9f0943f40fb010ae.png]

![在这里插入图片描述][abd472bb73ac44149d38f416cbb854df.png]

[Link 1]: https://learner.blog.csdn.net/article/details/88926242
[3dc85d422d76492d8d2824d768a349d4.png]: https://img-blog.csdnimg.cn/3dc85d422d76492d8d2824d768a349d4.png
[4a3f7d5ad32a45479a66a054224f8ae1.png]: https://img-blog.csdnimg.cn/4a3f7d5ad32a45479a66a054224f8ae1.png
[3bea11d81dd747429437c217e0ce45c1.png]: https://img-blog.csdnimg.cn/3bea11d81dd747429437c217e0ce45c1.png
[39e31650d613422793ae6eb24ad07035.png]: https://img-blog.csdnimg.cn/39e31650d613422793ae6eb24ad07035.png
[23726f80e48945549df6a6998c989bf2.png]: https://img-blog.csdnimg.cn/23726f80e48945549df6a6998c989bf2.png
[c37b32f723cb45a6a262d7a0cdc332a8.png]: https://img-blog.csdnimg.cn/c37b32f723cb45a6a262d7a0cdc332a8.png
[d8fe4660581f439b8c28dc81b00c254a.png]: https://img-blog.csdnimg.cn/d8fe4660581f439b8c28dc81b00c254a.png
[3dad94c5b59f46d9808995bf1868bfa6.png]: https://img-blog.csdnimg.cn/3dad94c5b59f46d9808995bf1868bfa6.png
[4fd446a8b1e340599fb1aa6cab80bdb5.png]: https://img-blog.csdnimg.cn/4fd446a8b1e340599fb1aa6cab80bdb5.png
[5a752e64a3cc4c56bf3df08d97a2d853.png]: https://img-blog.csdnimg.cn/5a752e64a3cc4c56bf3df08d97a2d853.png
[1735417fa88344c089607b8199529d4e.png]: https://img-blog.csdnimg.cn/1735417fa88344c089607b8199529d4e.png
[5508b2cb32dd425e8258a2d82a8d067f.png]: https://img-blog.csdnimg.cn/5508b2cb32dd425e8258a2d82a8d067f.png
[vue3_axios]: https://ask.csdn.net/questions/7537350?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167705453616782428698848%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=167705453616782428698848&biz_id=4&utm_medium=distribute.pc_search_result.none-task-ask_topic-2~all~first_rank_ecpm_v1~rank_v31_ecpm-1-7537350-null-null.142%5Ev73%5Einsert_down1,201%5Ev4%5Eadd_ask,239%5Ev2%5Einsert_chatgpt&utm_term=Cannot%20set%20property%20baseURL%20of%20undefined&spm=1018.2226.3001.4187
[d29ee1970b98422989783eb72ffbe2a3.png]: https://img-blog.csdnimg.cn/d29ee1970b98422989783eb72ffbe2a3.png
[a2d50318677d48b680842415ac80ea21.png]: https://img-blog.csdnimg.cn/a2d50318677d48b680842415ac80ea21.png
[06ae82dde5c14111bceb27d0d6c4b285.png]: https://img-blog.csdnimg.cn/06ae82dde5c14111bceb27d0d6c4b285.png
[e0f88a5277d34de4a5d4a4209c7b2258.png]: https://img-blog.csdnimg.cn/e0f88a5277d34de4a5d4a4209c7b2258.png
[affa3f19785b42749a517b9f1d859de3.png]: https://img-blog.csdnimg.cn/affa3f19785b42749a517b9f1d859de3.png
[https_img-blog.csdnimg.cn_3d91c76803434a80a72016d74e2ce48c.png]: https://img-blog.csdnimg.cn/108297b823d64caabbc36d70b2ba70da.png
[09c4f167c58244608ed01eecaee3ef3d.png]: https://img-blog.csdnimg.cn/09c4f167c58244608ed01eecaee3ef3d.png
[63a6ccf2a917475e9f0943f40fb010ae.png]: https://img-blog.csdnimg.cn/63a6ccf2a917475e9f0943f40fb010ae.png
[abd472bb73ac44149d38f416cbb854df.png]: https://img-blog.csdnimg.cn/abd472bb73ac44149d38f416cbb854df.png