Vue+SpringBoot实践(七):前后端分离项目结合开发

前言

前面几个章节主要介绍了后端开发的一些基础内容,本节开始将着手前端开发,并根据实际情况调整后端代码。
在开发过程中,我会把前端的请求通过前端服务器转发给后端(称为反向代理)。

一、前端开发

这次前端项目我们用到vue脚架进行开发,项目搭建完毕后,一般情况下,我们只需要关注src\components 文件夹、src\main.js 、src\router\index.js 这几个部分即可。

前端登录页面开发

在src\components 文件夹新建Login.vue组件:

<template>
    <div>
      用户名:<input type="text" v-model="loginForm.name" placeholder="请输入用户名">
      <br>
      <br>
      密码:<input type="password" v-model="loginForm.passwd" placeholder="请输入密码">
      <br>
      <br>
      <button v-on:click="login">登录</button>
    </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      loginForm: {
        name: '',
        passwd: ''
      },
      responseResult: []
    }
  },
  methods: {
    login () {
      this.$axios
        .post('/login', {
          name: this.loginForm.name,
          passwd: this.loginForm.passwd
        })
        .then(successResponse => {
          if (successResponse.data.code === 200) {
            this.$router.replace({path: '/index'})
          }
        })
        .catch(failResponse => {
        })
    }
  }
}
</script>

methods 中定义登录按钮的点击方法,即向后端 /login 接口发送数据,获得成功的响应后,页面跳转到 /index。

主页页面

在src\components 文件夹新建AppIndex.vue组件:

template>
  <div>
    Hello
  </div>
</template>

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

暂时先什么都不做

设置反向代理

修改 src\main.js:

Vue.config.productionTip = false

// 设置反向代理
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8663/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\router\index.js:

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/index',
      name: 'AppIndex',
      component: AppIndex
    }
  ]
})

跨域支持

修改 config\index.js 中 proxyTable 位置:

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

成果显示

运行后显示如下:
在这里插入图片描述
后续在美化界面

二、 坑点

由于忘了前后端分离项目是采用json格式进行数据交互,后端LoginController在开发时候使用int返回,导致页面一直无法跳转,需要单独建一个结果类转换为json数据在发送给前端:

public class Result {
    private  int code;
    public Result(int code) {
        this.code = code;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }
}

返回对应响应代码 return new Result(200);至前端。

适用人群 Java开发人员,Vue开发人员,前后分离开发人员,权限管理和配置开发人员 课程概述 【讲师介绍】 讲师职称:               现某知名大型互联网公司资深架构师,技术总监,职业规划师,首席面试官,曾在某上市培训机构,高校任教多年。             Array(Array老师)10多年互联网公司实战经验,知名的大型互联网公司的架构师,高管等职,在企业长期从事于技术的源码阅读和新技术的研究;擅长于职业规划,面试辅导,从事面试官多年;擅长于JAVA,人工智能AI应用,Xmind等等,曾服役于国内某上市培训机构数年,独特的培训思路,培训体系,培训方式,实践的职场技能,职场现状,职场晋升等让你快速适应企业职场的所需。  【课程介绍】 技术选型 开发环境:Eclipse/Idea ,JDK 1.8以上  后技术 核心框架:SpringBoot2.x框架系列(同样适用Springcloud F版本以后的版本),如下(节选):     持久层框架:MyBatis 3.x + Mybatis-plus 3.x 日志管理:SLF4J 1.7 + Log4j2 2.7 工具类:Apache Commons、Jackson 、fastjson、Gson 权限验证 前技术   Vue   Vue-cli ElementUI ---https://element.eleme.io/ JSX (JavaScript Xml) 前台的权限验证和路由设置 开发模式        前后分离开发 数据库        Mysql5 IDE     Intellij Idea
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页