よく言われるように、バックエンドエンジニアは最終的にはフルスタックエンジニアになります...

フロントエンドプロジェクトを構築する

新しい vue プロジェクトをビルドします。詳細についてはリンクを参照してください。

ここに画像の説明を挿入

バックエンドプロジェクトをビルドする

ここに画像の説明を挿入
ここでちょっとしたミスがあり、Springのサイトに接続できなくなってしまいましたが、後からこのサイトでも途切れ途切れになっていることに気付き…写真のようにURLを変更して…10分ほど待ちまし
た

もう 1 つの問題は、spring3.0 より上のバージョンではデフォルトの依存関係 jdk が 17 であることです。
ここに画像の説明を挿入

ログインインターフェースの開発

正面方向

ここに画像の説明を挿入

付録

ここに画像の説明を挿入

<template>
  <div>
    Hello World! 进入成功！
  </div>
</template>

<script>
export default {
    
    
  name: 'Appindex'
}
</script>

<style scoped>

</style>

<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>

フロントエンドリバースプロキシ

ここに画像の説明を挿入

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 を実行する必要があります。
ここに画像の説明を挿入

ページルーティングを構成する

src\ルーター\index.js
ここに画像の説明を挿入

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
    }
  ]
})

クロスドメインのサポート

ここに画像の説明を挿入
着替える

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