使用SpringBoot和Vue开发的一个简单前后端分离项目

最新推荐文章于 2025-07-09 15:11:34 发布

Y_lx

最新推荐文章于 2025-07-09 15:11:34 发布

阅读量1.1w

点赞数 11

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_29797697/article/details/99414383

更多内容可以访问我的个人博客。

0. 技术栈

主要功能：登录后跳转到书籍管理页面，能够对书籍信息进行增删改查。

在这里插入图片描述

后端：

Spring Boot

Mybatis Plus

MySQL

前端：

Vue

Axios

Element-UI

1. 前端

关于怎么安装Vue以及构建Vue脚手架的部分，可见我的另一篇博客Vue的简单使用；

为了使开发的结构更加清晰，我们将Vue文件的显示部分即html部分和JavaScript部分分开写于两个文件中；本项目没有用到css文件，但css文件也可以同样方式包含进来。

在这里插入图片描述

1.1 Element-UI

文档在这里：Element-UI文档

搭建好Vue项目之后，首先加入Element-UI组件用以美化页面样式。

在命令行安装后，再在main.js中添加配置即可

npm i element-ui -S

/*main.js文件*/
/*...*/
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
/*...*/

比如在首页，用Element-UI写一个简单的登录框，用以输入账号和密码；验证成功则跳转至书籍管理页面

el开头的标签就是由Element-UI提供的。

<template>
<div>
<el-row type="flex" justify="center">
<el-col :span="6">
  <el-form label-position="left" lable-width="10px">
    <el-form-item prop="username">
      <el-row :gutter="20">
        <el-col :span="6">
          <label> 用户名：</label>
        </el