Vue製作前後端分離項目，Vue跨域訪問springboot (一)

在上一篇結束後的基礎上

1.在vue默認文件夾上的src/components/下新建一個login.vue

可以直接在components上右鍵選擇Vue Component創建，沒有該選項，就直接新建file，後綴名爲vue即可

新建出的Login.vue內容爲：

修改爲

<template>
    <div>
      賬號:<input type="text" v-model="loginForm.username"/>
    </div>
    <div>
      密碼:<input type="text" v-model="loginForm.password"/>
    </div>
    <div>
      <button type="button" v-on:click="login">登錄</button>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
          return{
            loginForm: {
              username: '',
              password: ''
            },
            responseResult: []
          }
        },
      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>

設置反向代理

設置之後，需要安裝一下axios模塊

設置頁面路由，確保能夠訪問：

默認路由設置如下;

添加路由映射

好了，此時我們可以重新啓動訪問