5 Star 109 Fork 36

fighter3/springboot-vue-demo

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
README.md 4.52 KB
一键复制 编辑 原始数据 按行查看 历史
fighter3 提交于 4年前 . 📕 redeme

springboot-vue-demo

介绍

SpringBoot+Vue前后端分离入门示例,本示例实现了登录功能和用户管理功能。

通过这个示例,可以快速入门 SpringBoot+Vue前后端分离开发。

基本功能如下:

  • 登录

    image-20210126102510637

  • 首页

image-20210126102546973

  • 用户列表

image-20210126102632136

  • 添加用户

image-20210126102718506

  • 修改用户

image-20210126102754527

  • 删除用户

image-20210126102904907

  • 批量删除

image-20210126102948616

技术选型

简单说明一下本示例中所用到的技术,如图所示:

前后端分离Demo

安装教程

1、克隆项目

使用命令克隆项目

git clone https://gitee.com/fighter3/springboot-vue-demo.git

image-20210126104100719

demo-java 是后端项目

demo-vue 是前端项目

doc 目录下存放了数据库文件

image-20210126104552101

2、数据库导入

本示例数据库采用MySQL5.7。

  • 新建数据库 demo

image-20210126104223136

  • 运行doc目录下的sql文件

image-20210126104338769

  • 导入数据库成功

image-20210126104418329

3、后端开发部署

后端开发工具使用Idea。

  • Idea 中 File --> Open 打开新demo-java

    image-20210126104812587

image-20210126104729099

  • 加载依赖(这里配置了自动导入,没有配置的手动导入也可)

image-20210126104952359

  • 点击运行按钮,运行项目

    image-20210126105242781

image-20210126105217071

4、前端开发部署

前端采用VS Code开发。

  • 打开 demo-vue

image-20210126105449915

image-20210126105538321

  • 打开终端,运行命令 npm install 加载依赖

image-20210126105750698

  • 在终端里运行命令 npm run dev 启动前端项目

image-20210126105919673

5、系统访问

访问地址 http://localhost:8080 ,就会跳转到登录页面,使用账号 zhagnsan/123 即可登录

image-20210126110232003

教程

本示例提供了完整的开发教程,教程地址:一步步使用SpringBoot结合Vue实现登录和用户管理功能

参与贡献

  1. Fork 本仓库
  2. 新建 Feat_xxx 分支
  3. 提交代码
  4. 新建 Pull Request

特技

  1. 使用 Readme_XXX.md 来支持不同的语言,例如 Readme_en.md, Readme_zh.md
  2. Gitee 官方博客 blog.gitee.com
  3. 你可以 https://gitee.com/explore 这个地址来了解 Gitee 上的优秀开源项目
  4. GVP 全称是 Gitee 最有价值开源项目,是综合评定出的优秀开源项目
  5. Gitee 官方提供的使用手册 https://gitee.com/help
  6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 https://gitee.com/gitee-stars/
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
Java
1
https://gitee.com/fighter3/springboot-vue-demo.git
git@gitee.com:fighter3/springboot-vue-demo.git
fighter3
springboot-vue-demo
springboot-vue-demo
master

搜索帮助