Vue+SpringBoot实践（七）：前后端分离项目结合开发

最新推荐文章于 2024-08-27 13:44:35 发布

yzli_dev

最新推荐文章于 2024-08-27 13:44:35 发布

阅读量421

点赞数

分类专栏： Springboot Vue 文章标签： vue

本文链接：https://blog.csdn.net/u010768911/article/details/109264981

版权

本文介绍了使用Vue和SpringBoot进行前后端分离项目的开发过程，包括前端登录页面开发、反向代理设置、路由配置、跨域支持等。在开发中，前端通过Vue脚手架创建组件并利用axios发送请求，后端则需要注意返回JSON格式的数据以支持数据交互。此外，文章还分享了开发中遇到的坑点，如登录接口返回类型需调整为JSON。

摘要由CSDN通过智能技术生成

CarmenSystem

前言

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

一、前端开发

这次前端项目我们用到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