基于Vue前后端交互

一、前端页面开发

1、Login.vue

发登录页面组件右键 src\components 文件夹New -> Vue Component命名为 Login如果没有 Vue Component 这个选项可以选择新建一个 File命名为 Login.vue 即可。

<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: []
      }
    },
    methods: {
      login () {
        this.$axios
          .post('/login', {
            username: this.loginForm.username,
            password: this.loginForm.password
          })
          .then(successResponse => {
            if (successResponse.data.errorCode === 200) {
              this.$router.replace({path: '/index'})
            }
          })
          .catch(failResponse => {
          })
      }
    }
  }
</script>

template标签中随便写了一个登录的界面 methods 中定义了登录按钮的点击方法即向后端 /login 接口发送数据获得成功的响应后页面跳转到 /index。

2、AppIndex.vue

右键 src\components 文件夹新建一个 directory命名为 home再在 home 下新建一个 Appindex.vue 即首页组件这里暂时不做过多开发先随便写个 Hello World

<template>
    <div>
      Hello World!
    </div>
</template>

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

<style scoped>

</style>

二、前端相关配置

1、设置反向代理

修改 src\main.js 代码如下

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
// 设置反向代理前端请求默认发送到 http://localhost:8099/user
axios.defaults.baseURL = 'http://localhost:8099/user'
// 全局注册之后可在其他组件中通过 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以安装这个模块。

同时使用了vue-axios所以在项目文件夹中执行npm install --save vue-axios安装这个模块。

2、配置页面路由

修改 src\router\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
    }
  ]
})

3、跨域支持

为了让后端能够访问到前端的资源需要配置跨域支持。

在 config\index.js 中找到 proxyTable 位置修改为以下内容

    proxyTable: {
      '/user': {
        target: 'http://localhost:8099',
        changeOrigin: true,
        pathRewrite: {
          '^/user': ''
        }
      }
    },

三、后端接口

1、创建controller接收方法

    @PostMapping("login")
    @CrossOrigin(origins = "*") //解决跨域
    public BaseResult login(@RequestBody LoginRequest request){
        System.out.println("username:" +request.getUsername() + "password is" + request.getPassword() );
        return new BaseResult().setErrorCode(200);
    }

2、返回参数

package com.it520.bookkeeping.web.result;

import com.it520.bookkeeping.common.constant.ErrorCodeEnum;
import lombok.Data;
import lombok.experimental.Accessors;

@Data
@Accessors(chain = true)
public class BaseResult {

    private Integer errorCode = 0;

    private String errorMessage = "success";

    private Object data;

    public BaseResult() {
    }

    //自定义报错信息
    public BaseResult (Integer errorCode , String errorMessage){
        this.errorCode = errorCode;
        this.errorMessage = errorMessage;
    }

    //从枚举中获取报错信息
    public BaseResult (ErrorCodeEnum errorCodeEnum){
        this.errorCode = errorCodeEnum.getErrorCode();
        this.errorMessage = errorCodeEnum.getChErrorMessage();
    }

    public void packageErrorMessage(ErrorCodeEnum errorCodeEnum){
        this.errorCode = errorCodeEnum.getErrorCode();
        this.errorMessage = errorCodeEnum.getChErrorMessage();
    }
}

四、总结

这就是基于Vue的前后端交互注意Vue使用axios的时候安装相关的模块注意解决跨域问题。