springboot+vue模板

项目概述

目标:
快速掌握前后端分离项目
开发模式:
前端项目 后端项目 数据库
技术栈:
前端技术 说明
Vue 前端框架
Vuex全局状态管理框架
Elementui 前端ui框架
Axios 前端http框架
vue-element-admin 项目脚手架

后端技术 说明
SpringBoot 容器+mvc框架
Mybatis ORM框架
Mybatis-plus mybatis增强工具
Redis 非关系型数据库

数据库xdb

rbsc模型

前端环境准备

node环境
官网:https://nodejs.org
在这里插入图片描述
在这里插入图片描述
下载vue-admin-template

模板链接:https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/

项目初始化

在这里插入图片描述

登录页面修改下

在这里插入图片描述
在这里插入图片描述

用户界面

<el-card>
插入el-ui找到的代码段
</el-card>
  • 9
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
SpringBoot是一个基于Java的开发框架,而Vue是一个基于JavaScript的前端框架。SpringBootVue可以搭配使用,形成一个简单的前后端分离的开发模板。 首先,我们需要搭建一个SpringBoot的后端项目。可以通过Spring Initializr(https://start.spring.io/)来快速创建一个SpringBoot项目。在创建项目时,选择合适的依赖,如Spring Web等,以满足后端开发需要。 接着,我们需要搭建一个Vue前端项目。可以通过Vue CLI(https://cli.vuejs.org/zh/)来快速创建一个Vue项目。在创建项目时,选择合适的配置,如Babel、Vuex等,以满足前端开发需要。 在创建好后端和前端项目后,我们需要进行一些简单的配置。首先,在后端项目中配置跨域访问,以便前后端的交互。可以通过添加CorsFilter或者使用Spring的@CrossOrigin注解来实现跨域配置。其次,我们可以在后端项目中编写接口,用于处理前端的请求,并返回相应的数据。可以使用Spring的@RestController注解来标记接口类,并使用@RequestMapping注解来指定接口的URL路径。 然后,我们可以在前端项目中编写Vue组件,用于展示数据并发送请求给后端接口。可以使用Vue的axios库来发送HTTP请求,并使用Vue的生命周期钩子函数来处理数据的获取和展示。 最后,我们需要将前端项目打包,并将打包后的静态文件(如HTML、CSS、JavaScript)放置到后端项目中的资源目录下。可以使用Vue CLI提供的打包命令进行打包,并将打包后的文件拷贝到后端项目的资源目录。 通过以上步骤,我们就可以得到一个简单的SpringBootVue模板。在模板中,我们可以通过后端接口获取数据,并在前端页面展示和处理这些数据。同时,前后端的交互也能够得到良好的支持。希望以上回答能够帮到你。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奶茶精Gaaa

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值