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

设置页面路由，确保能够访问：

默认路由设置如下;

添加路由映射

好了，此时我们可以重新启动访问