1. Python技术站首页
  2. 其他
  3. Vue

SpringBoot+VUE实现前后端分离的实战记录

• Vue

下面是“SpringBoot+VUE实现前后端分离的实战记录”的完整攻略：

1. 前后端分离理念

前后端分离（Front-end and back-end separation）是指前端页面和后端数据完成分离，前端专注于数据的呈现，后端专注于数据的处理、存取。

2. 技术栈介绍

  • 前端技术：Vue、Vue-router、Vuex、Axios、Element UI等
  • 后端技术：SpringBoot、MyBatis、MySQL、Maven等

3. 前端项目搭建

3.1 安装Vue-cli3

首先安装Vue-cli3，可参考官网或下列示例命令生成基于webpack的模板项目：

vue create my-project

3.2 安装必要依赖

然后我们安装一些必要的依赖：

npm install vue-router vuex axios element-ui --save
  • vue-router：路由管理
  • vuex：全局状态管理
  • axios：基于Promise的HTTP库
  • element-ui：基于Vue2.0的UI组件库

3.3 创建页面和组件

接下来我们创建Vue页面和组件。

示例一：创建一个简单的登录页面

<!-- Login.vue -->
<template>
  <div>
    <h1>用户登录</h1>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      // 处理登录逻辑
    }
  }
}
</script>

示例二：创建一个通用的分页组件

<!-- Pagination.vue -->
<template>
  <el-pagination layout="total, prev, pager, next, jumper"
                  :total="total"
                  :page-size="pageSize"
                  :current-page="currentPage"
                  @current-change="handleCurrentChange">
  </el-pagination>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 10
    },
    currentPage: {
      type: Number,
      default: 1
    }
  },
  methods: {
    handleCurrentChange(currentPage) {
      // 处理当前页码改变逻辑
    }
  }
}
</script>

4. 后端项目搭建

4.1 创建SpringBoot项目

最简单的方式是使用Spring Initializr创建一个SpringBoot项目，包含必要依赖：Spring Web、MyBatis等。

4.2 数据库设计和建表

示例一：用户表

CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `username` varchar(50) NOT NULL COMMENT '用户名',
  `password` varchar(50) NOT NULL COMMENT '密码',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT='用户表'

示例二：文章表

CREATE TABLE `article` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `title` varchar(200) NOT NULL COMMENT '标题',
  `content` text NOT NULL COMMENT '内容',
  `gmt_create` datetime NOT NULL COMMENT '创建时间',
  `gmt_modified` datetime NOT NULL COMMENT '修改时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT='文章表'

4.3 数据库配置和MyBatis映射

根据不同的数据库类型和数据库连接方式对/resources文件夹下的application.properties和MyBatis相关XML进行配置。

示例一：application.properties

spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8&autoReconnect=true&useSSL=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=root

示例二：Mapper示例

<!-- UserMapper -->
@Mapper
public interface UserMapper {
  @Select("SELECT * FROM user WHERE username=#{username} AND password=#{password}")
  User selectByUsernameAndPassword(@Param("username") String username, @Param("password") String password);
}

<!-- ArticleMapper -->
@Mapper
public interface ArticleMapper {
  @Select("SELECT COUNT(*) FROM article")
  int selectTotalCount();

  @Select("SELECT * FROM article ORDER BY gmt_modified DESC LIMIT #{offset},#{limit}")
  List<Article> selectPage(@Param("offset") int offset, @Param("limit") int limit);
}

4.4 编写Controller和Service

示例一：登录逻辑Controller

// UserController
@RestController
@RequestMapping("/api")
public class UserController {
  @Autowired
  private UserService userService;

  @PostMapping("/login")
  public Result login(@RequestBody LoginForm form) {
    User user = userService.login(form.getUsername(), form.getPassword());
    if (user == null) {
      return Result.error("用户名或密码错误");
    }
    return Result.success(user, "登录成功");
  }
}

// UserService
@Service
@Transactional
public class UserService {
  @Autowired
  private UserMapper userMapper;

  public User login(String username, String password) {
    return userMapper.selectByUsernameAndPassword(username, password);
  }
}

示例二：分页查询逻辑Controller

// ArticleController
@RestController
@RequestMapping("/api")
public class ArticleController {
  @Autowired
  private ArticleService articleService;

  @GetMapping("/articles")
  public Result getArticlePage(@RequestParam(defaultValue="1") int page) {
    int totalCount = articleService.getTotalCount();
    int limit = 10;
    int offset = (page - 1) * limit;
    List<Article> articles = articleService.getPage(offset, limit);

    return Result.success(new Page<Article>(totalCount, articles), "查询成功");
  }
}

// ArticleService
@Service
@Transactional
public class ArticleService {
  @Autowired
  private ArticleMapper articleMapper;

  public int getTotalCount() {
    return articleMapper.selectTotalCount();
  }

  public List<Article> getPage(int offset, int limit) {
    return articleMapper.selectPage(offset, limit);
  }
}

5. 前后端联调

前后端联调分为两部分：

  1. 前端调用后端接口
  2. 后端提供数据供前端使用

5.1 前端调用后端接口

在前端项目中使用axios调用后端接口。

示例一：登录接口调用

// api.js
import axios from 'axios';

const baseUrl = 'http://localhost:8080/api';

export function login(username, password) {
  const url = `${baseUrl}/login`;
  const data = {
    username: username,
    password: password
  };
  return axios.post(url, data);
}

// LoginPage.vue
import { login } from '@/api';

export default {
  methods: {
    handleSubmit() {
      login(this.form.username, this.form.password).then(res => {
        // 成功回调
      }).catch(err => {
        // 失败回调
      });
    }
  }
}

示例二：分页查询接口调用

// api.js
import axios from 'axios';

const baseUrl = 'http://localhost:8080/api';

export function getArticlePage(page = 1) {
  const url = `${baseUrl}/articles?page=${page}`;
  return axios.get(url);
}

// ArticleListPage.vue
import Pagination from '@/components/Pagination';
import { getArticlePage } from '@/api';

export default {
  data() {
    return {
      articles: [],
      total: 0,
      currentPage: 1
    }
  },
  components: {
    Pagination
  },
  methods: {
    handleCurrentPageChange(currentPage) {
      this.currentPage = currentPage;
      this.refreshArticles();
    },
    refreshArticles() {
      getArticlePage(this.currentPage).then(res => {
        this.articles = res.data.data.list;
        this.total = res.data.data.total;
      });
    }
  },
  created() {
    this.refreshArticles();
  }
}

5.2 后端提供数据

后端通过Controller提供JSON格式的数据。

示例一：成功返回示例

{
  "code": 200,
  "data": {
    "id": 1,
    "username": "guest",
    "password": "123456"
  },
  "message": "登录成功"
}

示例二：失败返回示例

{
  "code": 500,
  "message": "用户名或密码错误"
}

6. 总结

以上就是本文介绍的基于SpringBoot和Vue的前后端分离开发实践。前端专注于数据的呈现，后端则专注于数据的处理和存储。总的来说，前后端分离的开发模式能够提高开发效率，提升网站性能，体验也更佳。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：SpringBoot+VUE实现前后端分离的实战记录 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • Vue的Eslint配置文件eslintrc.js说明与规则介绍

    Vue的Eslint配置文件(eslintrc.js)是用来规范Vue项目代码风格和优化代码质量的重要配置文件。本文将详细讲解该配置文件的说明和规则介绍，包括ESLint的安装、配置文件的基本配置、插件的安装和规则的介绍。 ESLint安装 要使用ESLint，首先需要在项目中安装ESLint模块，可以使用npm或yarn进行安装。 npm install …

    Vue 2023年5月28日
    00

  • vue实现横向时间轴

    下面是Vue实现横向时间轴的完整攻略。 实现思路 实现横向时间轴的关键在于CSS部分的设计。我们需要定义好每个时间点的样式以及它们之间的间隔。 在Vue中，我们可以采用循环遍历的方式，动态生成时间点列表。同时，为了实现滚动效果，我们需要监听鼠标事件，并且动态计算容器滚动的距离。 具体实现 第一步：HTML结构 我们需要先定义好HTML结构。 <div …

    Vue 2023年5月28日
    00

  • Vue+elementUI实现动态展示列表的数据

    下面是我对“Vue+elementUI实现动态展示列表的数据”的完整攻略。 1. 确定需求 在开始实现之前，我们需要确定需求。首先需要明确要展示的列表数据是什么，包含哪些字段，每个字段对应表格中的哪一列。 例如，我们需要展示一个用户列表，包含了用户名、年龄、性别、地址等字段，需要在表格中展示这些字段内容，并提供排序、过滤等功能。 2. 安装依赖 确定需求之后…

    Vue 2023年5月29日
    00

  • vue 中Virtual Dom被创建的方法

    Vue 中 Virtual DOM 的创建过程非常重要，它是 Vue 对于前端工程化方案的核心支持，下面将详细讲解 Vue 中 Virtual DOM 被创建的方法。 创建 Virtual DOM 的主要方法 Vue 中创建 Virtual DOM 的过程主要通过以下两个步骤： 通过 render 函数生成 VNode 树 在 Vue 中，通过 render…

    Vue 2023年5月28日
    00

  • Vue Element前端应用开发之Vuex中的API Store View的使用

    Vue Element前端应用开发之Vuex中的API Store View的使用 Vue Element是一套基于Vue.js的桌面端组件库。其中，Vuex是Vue.js的官方状态管理工具，在前端应用开发中起着至关重要的作用。在Vuex中，API Store View是常用的一种状态存储方式，对于数据多层级的情况，非常实用。 API Store View是…

    Vue 2023年5月27日
    00

  • 深入了解vue-router原理并实现一个小demo

    介绍 Vue-Router 是 Vue.js 官方的路由管理器，它和 Vue.js 核心深度集成，让构建单页面应用变得易如反掌。Vue-Router 提供了两种模式：Hash 模式和 History 模式。Hash 模式下，URL 中的 Hash 值（#）用来模拟传统意义上的路由，而在 History 模式下，使用了 HTML5 History API 中新…

    Vue 2023年5月28日
    00

  • 详解微信小程序框架wepy踩坑记录（与vue对比）

    接下来我将详细讲解一下“详解微信小程序框架wepy踩坑记录（与vue对比）”这篇文章的完整攻略。 标题 首先，文章的标题应该清晰、明确、准确地概括文章的主题内容，能够体现文章的重点和亮点。 引言 在引言中，应该简要介绍wepy框架和vue框架，并指出其优缺点。 体 在主要内容的部分，应该详细讲解wepy框架的使用、踩坑记录和与vue框架的对比。需要突出wep…

    Vue 2023年5月27日
    00

  • vue项目中 jsconfig.json概念及使用步骤

    下面是关于“vue项目中 jsconfig.json概念及使用步骤”的完整攻略，它包含以下内容： 了解jsconfig.json概念 使用步骤 示例说明 1. 了解jsconfig.json概念 jsconfig.json是用于指定JavaScript项目编译选项的文件。它可以帮助我们在VSCode中编写JavaScript代码时提供更好的智能提示和代码补全…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部