从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建

最新推荐文章于 2024-08-31 14:27:17 发布
最新推荐文章于 2024-08-31 14:27:17 发布
阅读量2.6k 收藏 8
点赞数 2
分类专栏： vue+Springboot 文章标签： spring boot vue.js intellij-idea
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45556441/article/details/121713573
版权

在这里插入图片描述

把(一)里面创建好的项目文件夹拖入到IDEA里面

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述进行完上步操作后就可以快捷的启动项目了
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这里稍微修改一下可以让我们启动项目后,自动地打开页面

页面搭建和改造

请添加图片描述
对此项目文件进行改造,改造成最终我们需要的页面的样子,目标是做一个后台管理系统如上图;

首先做一个页面的header,把没用的代码去掉

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
删除Home.vue里的HelloWorld部分和图片部分以及HelloWorld.vue组件

创建编辑Header.vue 组件

在这里插入图片描述
在这里插入图片描述
在APP.vue里引入Header组件.

在这里插入图片描述
创建CSS文件去除一些默认的样式(去掉外边距)
.
在main.js 来引入
在这里插入图片描述
基础头部和主题就修建完了.

半岛铁盒@
关注
专栏目录
基于SpringBoot+SpringCloud+Vue前后端分离项目实战 --开篇
天罡gg的专栏
03-07 1万+
如何高效学习Java? 毕业设计项目应该怎么做？入门实战项目应该怎么做？ 做Java开发都应该学习哪些框架技术？ 我想来跟你聊聊为什么要学习此专栏？我们经常说，看一个事儿千万不要直接陷入细节里，你应该先鸟瞰其全貌，这样能够帮助你从高维度理解问题。同样，当你迷茫想努力没有方向时，最事半功倍的方法是：找人带你! 因为过来人，更懂得如何学、如何做、如何少走弯路！ 那今天就给大家带来一门专栏课程，由 天罡gg 和 经海路大白狗 两位实力大牛合力打造的一款专栏，可以让你从0到1快速拥有企业级规范的项目实战经验！
springboot+vue前后端分离智慧校园管理系统
07-19
01_智慧校园_课程简介 02_智慧校园_项目简介 03_智慧校园_安装mysql服务 04_智慧校园_安装数据库客户端程序 05_智慧校园_安装JDK和IDEA 06_智慧校园_安装Maven和Tomcat 07_智慧校园_项目搭建之创建项目 08_智慧校园_项目搭建之准备目录结构和启动测试 09_智慧校园_项目搭建之准备工具类 10_智慧校园_项目搭建之准备pojo 11_智慧校园_项目搭建之准备mapper和service 12_智慧校园_项目搭建之准备Controller 13_智慧校园_业务开发之获得验证码 14_智慧校园_业务开发之登录校验流程分析 15_智慧校园_业务开发之登录验证 16_智慧校园_业务开发之跳转至首页 17_智慧校园_业务开发之业务展示和swagger功能展示 18_智慧校园_业务开发之年级管理带条件分页查询 19_智慧校园_业务开发之年级添加和修改 20_智慧校园_业务开发之年级单个和批量删除 21_智慧校园_业务开发之swagger功能开发 22_智慧校园_业务开发之班级管理带条件分页才查询 23_智慧校园_业务开发之班级增加和修改......
【从头开始做项目Springboot+vue前后端分离（上）】
qq_41961383的博客
04-20 380
从头开始做项目Springboot+vue前后端分离（上）项目使用工具创建新项目项目文件项目开始第一天（搭建页面框架）Header组件Aside组件HomeView表格内容组件写入App 项目使用工具 公众号“Java学习指南”回复999可获得项目相关资料,使用的软件是webstorm, mysql5.7、jdk1.8、navicat、node以及element-plus、vue-cli，webstorm需要下载一些插件，可以直接百度。主要任务是完成一个管理系统 css部分直接使用elements-plus
SpringBoot + Vue 项目创建详细步骤
最新发布
weixin_54851039的博客
08-31 1031
我这里是主要是展示如何创建项目（这里前后端是没有分离的，主要就我一个人练练，放一起好看），实现了简单的前后端交互（查询功能）
创建springboot项目 （idea版vue-springboot）超详细 超完整
宾宾宝宝的博客
03-11 6906
1.新建项目 2.如图 3.如图 4.选依赖 5.finish 6.配置阿里云仓库 <repositories> <repository> <id>nexus-aliyun</id> <name>nexus-aliyun</name> <url>http://maven.aliyun.com/nexus/content/groups/public/&lt
IDEA快速搭建Vue+SpringBoot前后端分离项目
y2736375642的博客
08-04 994
开发环境：IDEA，MySQL，Navicat(数据库可视化)
idea创建springboot前后端分离项目图解
guoyp2126的博客
04-28 3093
前言 在spring、mybatis的使用中，配置文件很复杂，springboot就是简化Spring应用中的初始化配置的。 创建springboot项目 选择依赖包 下一步，选择目录；点击finsh，完成项目创建（此处要等待几分钟） ...
IDEA快速搭建前后端分离springboot项目综合篇
qq_41604890的博客
03-27 9481
创建基础项目 1.创建项目 一路next，选择项目存放路径后点击finish完成，等待依赖下载完成 删除没必要的文件（选中的红色） 项目结构 导入web依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> yml配置 删
从0开始手把手教学实现SpringBoot+Vue前后端分离后台管理系统
11-21
在本教程中，我们将深入探讨如何使用Spring Boot和Vue.js构建一个完整的前后端分离的后台管理系统。Spring Boot是Java领域的一个热门框架，以其简洁、快速的起步特性深受开发者喜爱，而Vue.js则是一款轻量级的前端...
纯学习，开发一个SpringBoot+vue前后端分离markhub博客项目(附代码)
04-01
在本项目中，我们主要探讨的是如何利用SpringBoot和Vue.js技术栈开发一个前后端分离的博客系统，名为"markhub"。这是一个非常适合初学者和进阶者实践的项目，旨在提升对现代Web开发的理解和技能。以下是项目的核心...
Linux下宝塔部署 SpringBoot + Vue 前后端分离项目
weixin_53835008的博客
07-25 1122
配置入口类根据自己项目指定，即启动类全路径在启动类 右键 Copy Path.. ->Copy Reference 复制idea插件打包，在IDEA右侧Maven Projects栏双击package等待Build Success即可，打包前双击clean清理旧缓存和配置的影响。打包完成后jar包会生成到项目里的target目录下，命名一般是 项目名+版本号.jar可以在本地命令先运行一下jar包，看有无问题。
前后端分离之springboot+idea写后端接口
03-25
现在项目开发都是前后端分离,该代码主要是教初学者使用springboot开发接口,其中包括数据返回的包装类,自定义异常,返回码的枚举等,并进行简单的测试,达到抛砖引玉的作用,初学者能更容易地接受,共同进步.
快速创建一个SpringBoot + Vue的前后端分离项目
qq_40616887的博客
03-21 513
首先，本项目是模仿的B站的Up主MarkHub的博客系统，视频中详细得对每一个文件的作用都做了解释。在本篇文章中不会进行过多赘述，只是专注于项目的搭建。 视频链接请戳下方 https://www.bilibili.com/video/BV1PQ4y1P7hZ?from=search&seid=1550841645384365421 项目演示效果：www.markerhub.com:8084/blogs 后端SpringBoot服务器搭建 后端使用的技术栈有： 技术栈： SpringBoot myb
基于SSM+SpringBoot+VUE前后端分离的停车场管理系统
code51博客
09-19 383
基于SSM+SpringBoot+VUE前后端分离的停车场管理系统,包含普通用户和超级管理员，整体功能包含个人信息管理，车位管理，费用管理，收费信息，用户登录注册，系统管理，车位信息管理，费用管理，车辆信息管，车辆进出管理等。后端框架： Spring+SpringMVC+Mybatis+SpringBoot。后端框架： Spring+SpringMVC+Mybatis+SpringBoot。前段框架： vue/ElementUI/echart。前段框架： vue/ElementUI/echart。
基于SSM+SpringBoot+Vue前后端分离高校博客论坛
code51博客
09-20 232
分类信息详细信息评论信息详细内容归档内容数据统计写文章写动态文章管理标签管理评论管理友链信息访问日志仪表统计图后台登陆分类分类信息开发工具： Idea/Eclipse 数据库： mysql Jar包仓库： Maven 前段框架： vue/ElementUI/echart 后端框架： Spring+SpringMVC+Mybatis+SpringBoot评论信息详细内容归档内容数据统计写文章写动态文章管理标签管理评论管理友链信息访问日志仪表统计图。
IntelliJ IDEA 下利用springboot框架进行jsp+web前端开发
u012855454的博客
10-01 9502
大家好，通常进行服务端开发，首选工具Myeclipse/eclipse,最近看到IntelliJ IDEA受到高度关注和广大程序员的喜爱， 好奇心驱使我一探究竟，使用后被它强大的功能所震撼，因此写这篇文章，简单介绍一下Spring boot + jsp 的搭建流程，希望给跟我一样尝试用IDEA工具进行Spring boot框架下开发程序的读者一点儿启发。 开发环境：win10x64，Intel...
idea启动springboot项目_SpringBoot+VUE 前后端分离部署（一）--使用idea创建SpringBoot后端项目...
weixin_39793813的博客
12-01 2488
一、使用idea工具创建SpringBoot项目，开发后端接口服务。（idea版本是2018.2.3）二、选择Spring Initializr，点击next。三、修改Group、Artifact、Name，java版本选择8，点击Next。四、然后点击Next，Finish。等待下载对应的依赖包完成。五、编写controller类（TestSpringBoot.java）。六、编写跨域配置类Co...
idea 构建并运行前端vue
fdallen的博客
07-03 4391
idea 构建并运行前端vue一、在IDEA中配置vue插件二、搭建node.js环境三、安装cnpm（注意都是管理员方式运行）四、安装vue-cli脚手架构建工具（注意都是管理员方式运行）构建运行项目安装项目依赖资源七、运行项目 刚来公司实习发现公司的前端使用的是vue，之前根本就没有听说过。然后一上来就需要看代码，but but 就是没有文档什么的东西， 就需要自己去研读，我就想去运行其中的前端和后端联调起来方便理解，结果在配置和运行中出现了很多挫折，我就想写一下方便 大家不去采坑，直接运行好 一、在I
在IDEA中用Springboot构建后台项目(前后端分离)--------自用勿扰
csdn_shilin的博客
11-04 1861
一.技术栈 SpringBoot(自带Tomcat) Spring SpringMvc Vue ElementUI Axios Mybatis 二.步骤 1.创建一个普通Maven项目 2.导包 ：省 3.配置yml文件—application.yml 内容: ----3.1 数据库端口 ----3.2 JDBC四大金刚 ----3.3 Mybatis配置domain别名 ----3.4 开启日志 server: port: 80 spring: datasource: username:
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

半岛铁盒@

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

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

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

打赏作者

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

抵扣说明：

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

余额充值