【Java测开】使用idea初始化创建springboot+vue项目

已于 2022-11-17 17:32:47 修改
阅读量888 收藏 10
点赞数
分类专栏： Java测开 文章标签： java
于 2022-11-14 15:08:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39335999/article/details/127843777
版权

目录

前言

本文介绍如何使用idea创建springboot+vue项目。

 

创建父项目

创建spring项目

在这里插入图片描述
 

项目初始化配置

由于本父工程是用来组织前端代码和后端代码模块，因此不选择依赖
在这里插入图片描述
 

整理父工程pom文件

在这里插入图片描述

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.aegis</groupId>
    <artifactId>springboot-vue-demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>pom</packaging>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.6.7</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <name>springboot-vue-project</name>
    <modules>
        <module>frontend</module>
        <module>backend</module>
    </modules>

    <!-- 集中定义依赖版本号 -->
    <properties>
        <spring-boot.version>2.6.7</spring-boot.version>
        <fastjson.version>1.2.72</fastjson.version>
        <mybatis-plus.version>3.4.1</mybatis-plus.version>
        <druid.version>1.1.10</druid.version>
        <mysql.version>8.0.28</mysql.version>
        <lombok.version>1.18.24</lombok.version>
    </properties>

    <!-- 依赖管理标签  必须加 -->
    <dependencyManagement>
        <dependencies>
            <!--spring-boot包-->
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
                <version>${spring-boot.version}</version>
<!--                <exclusions>-->
<!--                    <exclusion>-->
<!--                        <groupId>org.springframework.boot</groupId>-->
<!--                        <artifactId>spring-boot-starter-tomcat</artifactId>-->
<!--                    </exclusion>-->
<!--                </exclusions>-->
            </dependency>

            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <version>${spring-boot.version}</version>
                <scope>test</scope>
            </dependency>

            <!--  TODO lombok配置,简化POJO实体类开发和日志Slf4j-->
            <dependency>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
                <version>${lombok.version}</version>
<!--                <optional>true</optional>-->
            </dependency>


            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>fastjson</artifactId>
                <version>${fastjson.version}</version>
            </dependency>

            <!--TODO mybatis-plus的springboot支持-->
            <dependency>
                <groupId>com.baomidou</groupId>
                <artifactId>mybatis-plus-boot-starter</artifactId>
                <version>${mybatis-plus.version}</version>
            </dependency>

            <!--mysql驱动-->
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <version>${mysql.version}</version>
                <scope>runtime</scope>
            </dependency>

            <!--  TODO druid连接池配置-->
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>druid</artifactId>
                <version>${druid.version}</version>
            </dependency>
        </dependencies>

    </dependencyManagement>

</project>

 

初始项目架构

删除父工程除了pom文件外的所有文件和目录
在这里插入图片描述

 

创建前端工程

准备工作

安装npm并配置镜像源

# 清空代理
npm config set proxy null
# 清理缓存
npm cache clean --force
# 重新设置镜像源，如国内淘宝镜像，加速安装依赖
npm config set registry https://registry.npm.taobao.org

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

 

创建vue项目

父工程下创建前端模块
在这里插入图片描述
 

项目初始化配置

设置前端项目名和路径
在这里插入图片描述
 

初始项目架构

确认项目初始化配置后，开始自动编译，生成前端项目结构如下
在这里插入图片描述

├── node_modules           // 依赖包文件夹
├── public	       
├── src	                  
│   └── routes	          // 前端路由
│   └── assets            // css、image、svg等资源
│   └── components	      // 编写vue代码的文件夹
├── package.json	  	// npm配置；参考 https://juejin.cn/post/6870426598605062152
├── package-lock.json	// 在npm install时候生成一份文件，用来记录当前状态下实际安装的各个npm package的具体来源和版本号
├── babel.config.js	  	// babel配置；Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中 ，可以参考label的介绍 https://www.babeljs.cn/docs/
├── jsconfig.json	    // 目录中出现jsconfig.json 文件表明该目录是 JavaScript 项目的根目录 文件目录检索做智能提示
├──index.html	  	   // 入口页面	  	
├──README.md	  	  //项目介绍

 

添加前端pom文件

使用maven插件 frontend-maven-plugin ， 可直接打包前端项目。具体方式是在前端工程下，配置pom.xml（参考下方模板），使用maven打包项目时，就会将前端后端模块一起全部打包。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">


  <parent>
    <artifactId>springboot-vue-demo</artifactId>
    <groupId>com.aegis</groupId>
    <version>0.0.1-SNAPSHOT</version>
  </parent>

  <modelVersion>4.0.0</modelVersion>
  <artifactId>frontend</artifactId>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <frontend-maven-plugin.version>1.9.1</frontend-maven-plugin.version>
    <build.node.version>v16.10.0</build.node.version>
    <build.npm.version>6.14.15</build.npm.version>
  </properties>

  <build>
    <plugins>
      <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>${frontend-maven-plugin.version}</version>
        <executions>
          <execution>
            <!-- optional: you don't really need execution ids, but it looks nice in your build log. -->
            <id>install node and npm</id>
            <goals>
              <goal>install-node-and-npm</goal>
            </goals>
            <!-- optional: default phase is "generate-resources" -->
            <phase>generate-resources</phase>
          </execution>
          <!-- Install all project dependencies -->
          <execution>
            <id>npm install</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <!-- optional: The default argument is actually
              "install", so unless you need to run some other yarn command,
              you can remove this whole <configuration> section.
              -->
              <arguments>install</arguments>
            </configuration>
          </execution>
          <!-- Build and minify static files -->
          <execution>
            <id>npm run build</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <arguments>run build</arguments>
            </configuration>
          </execution>
        </executions>
        <configuration>
          <nodeVersion>${build.node.version}</nodeVersion>
          <npmVersion>${build.npm.version}</npmVersion>

          <!-- 若不方便访问官网，可使用国内淘宝镜像-->
          <nodeDownloadRoot>https://npm.taobao.org/mirrors/node/</nodeDownloadRoot>
          <npmDownloadRoot>https://registry.npm.taobao.org/npm/-/</npmDownloadRoot>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>

若pom文件为灰色带有横线
在settings里面找到 Ignore Files，勾选掉为灰色的pom文件即可，如下图：
在这里插入图片描述

 

创建后端项目

创建spring项目

在这里插入图片描述

 

项目初始化配置

保持与父工程的springboot版本一致，依赖可以不导入，后期pom文件手动配置在这里插入图片描述
 

整理pom文件

在这里插入图片描述

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">


    <parent>
        <artifactId>springboot-vue-demo</artifactId>
        <groupId>com.aegis</groupId>
        <version>0.0.1-SNAPSHOT</version>
    </parent>

    <modelVersion>4.0.0</modelVersion>
    <artifactId>backend</artifactId>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <java.version>1.8</java.version>
    </properties>


    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
        </dependency>

        <!--mybatis-plus的springboot支持-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>


        <!-- 连接池 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
        </dependency>
    </dependencies>


    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <!--TODO 测试方法存在问题，打包时需要设置跳过测试忽略问题，直接打包（不影响jar包的部署使用）-->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
                <configuration>
                    <testFailureIgnore>true</testFailureIgnore>
                </configuration>
            </plugin>
        </plugins>
    </build>


</project>

 

初始项目架构

删除除了pom文件和src目录外的所有文件和目录
在这里插入图片描述

 

整体项目结构

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

整体项目打包

打包验证，至此初始化创建springboot+vue项目成功
在这里插入图片描述
在这里插入图片描述

 

启动前端项目

配置

在这里插入图片描述

新增npm配置，修改配置如下，等同于命令npm run serve

在这里插入图片描述

点击运行

在这里插入图片描述

 

效果

控制台显示
在这里插入图片描述

浏览器自动跳转

在这里插入图片描述

 

启动后端项目

在这里插入图片描述

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

 

夜空下的小星星
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
idea创建vue项目+vue与springboot连接（包含常见报错解决办法）
Hairless_hui的博客
11-20 549
IDEA springboot下的vue创建及一些常见问题
Idea实现springboot+vue项目整合
qq_46017272的博客
04-02 6390
1.首先在Idea中分别创建一个vue项目一个springboot项目（前面文章说过），右键uve项目，新创建一个子项目，New->Module 2.选择Maven->Next 3.填写项目名称，选择Finish 这样就创建好了一个springboot项目 但是由于这样的springboot项目缺少组件，pom文件中缺少很多依赖，所以最好将我们之前创建好的springboot项目导入进来 4.删除springboot项目的src和pom.xml 5.将最初创建完成
IDEA初始化spring-boot项目
achandy的博客
05-21 176
IDEA, spring boot, IDEA初始化spring-boot项目
springboot第四章：使用idea创建vue项目
zhwx0537的博客
04-24 6617
运行npm install。4、配置启动和编译选项。
idea里有vue项目有springboot项目，怎样把vue和项目同时启动能使vue前端项目访问到后端举例说明
qq_33192454的博客
10-15 2511
在 IntelliJ IDEA 中同时启动 Vue.js 前端项目和 Spring Boot 后端项目需要采取多模块方式，以确保两个项目可以协同工作。首先，创建一个 Maven 父项目，该父项目将包含两个子模块，一个用于 Vue.js 前端，另一个用于 Spring Boot 后端。在父项目下创建一个子模块，该子模块用于托管 Vue.js 项目。同样，在父项目下创建另一个子模块，用于托管 Spring Boot 项目。将前端和后端两个子模块拖拽到父项目中，形成父子关系。打开前端 Vue.js 项目，找到。
2023最新版IDEA创建一个SpringBoot项目 (详细教程)
热门推荐
weixin_46721191的博客
04-25 6万+
Spring Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。话不多说直接上教程！以上就是今天要讲的内容，本文简单介绍了创建一个简单的springboot项目的一个方法！希望对大家有所帮助！有问题可以私信我！或者在公众号留言 “俊俊同学的笔记”。
使用Idea初始化一个spring boot 项目
weixin_34321977的博客
02-19 185
配置环境 Idea配置jdk8.0 1.打开Idea，点击右上角file，找到Other Settings选项，点击下方的Default Project Structure，如下所示 2.点击下图中所示的倒三角，选择java version "1.8.0_131" 3.如果下方没有显示jdk 8.0的版本，点击下图中的New按钮，添加本地jdk（如果本地没有jdk请至Oracle官...
115.【SpringBoot(IDEA)+Vue(Vscode)前后端交互】
qq_69683957的博客
05-14 1万+
在SpringBoot+Vue的整合项目中我们使用的编译软件分别有: Vscode来编写Vue脚手架和IDEA来编写SpringBoot。vue脚手架是3.0以上的。
SpringBoot+Vue学生成绩管理系统
11-12
在开发过程中，开发者通常会利用IDEA或Eclipse等集成开发环境进行后端开发，使用Vue CLI或者手动配置Webpack进行前端开发。数据库层面，可能使用MySQL、Oracle等关系型数据库存储学生成绩数据。开发完成后，可以通过...
java基于Springboot+vue的零食销售商城网站（csdn）————程序.pdf
12-01
本项目是一个基于Java技术栈，使用SpringBoot框架和前端Vue.js构建的零食销售电商网站。以下是该项目的关键知识点和实现细节： 1. **技术选型**： - **Java**: 后端开发语言，用于实现业务逻辑和服务接口。 - **...
springboot+vue之java学习平台（java项目源码+文档）
最新发布
06-20
标题中的“springboot+vue之java学习平台”指的是一个基于Spring Boot后端技术和Vue.js前端框架构建的在线学习系统。这个平台可能集成了教学资源管理、用户交互、课程学习等功能，旨在提供一个全面的Java学习环境。...
纯学习，开发一个SpringBoot+vue前后端分离markhub博客项目(附代码)
04-01
- SpringBoot是Spring框架的一个子项目，它简化了Java Web应用的初始化和配置过程。在本项目中，SpringBoot用于搭建后端服务，提供RESTful API接口。 - 配置管理：Spring Boot通过自动配置和@Conditional注解，...
java基于springboot+vue的前后端分离项目（带报告）.zip
05-31
本项目“java基于springboot+vue的前后端分离项目（带报告）”就充分体现了这一趋势。该项目包含了完整的源代码和详细的课程设计报告，为学习者提供了宝贵的参考资料。 首先，我们来探讨SpringBoot框架。SpringBoot...
SpringBoot+Vue.js 实现前后端分离搭建 复制可用
qq_42597706的博客
09-19 675
1. 项目所需环境 Java: JDK1.8以上版本 Maven: apache-maven-3.5.4 服务器端框架：Spring-boot+Mybatis 前端框架：Vue.js v2.6 服务器端开发工具：IntelliJ IDEA 2019.1 x64 前端开发工具：JetBrains WebStorm 2019.1 x64 2. 后台环境搭建（IntelliJ IDEA）...
新版idea(2023)创建spring boot3项目
蒾酒的博客
01-24 8957
本教程对新手小白友好。若根据教程创建出现问题导致失败可下载我提供的源码，在文章最后。本教程较新本文使用的工具以及搭建的springboot版本都是很新版本:idea版本如下spring boot 版本如下：本教程使用的是汉化后的idea。
Springboot+vue项目的搭建，自用
weixin_45208256的博客
05-24 2487
Springboot+vue整合 先安装Node.js 使用npm安装node.js 在cmd中输入 $ npm install vue 对vue.js进行安装 之后用vue create Gaokao-demo创建vue项目 之后再文件夹下用npm run serve 对vue项目进行启动 访问localhost:8080访问到vue界面 再直接将项目拖动到IDEA上进行打开 之后再进行配置 核心是src文件夹下内容，assets是静态资源、components是组件，router中的index.j
使用idea创建第一个springboot项目 及 如何启动springboot项目 及 如何指点端口和上下文
wudinaniya的博客
04-12 8387
一 使用idea创建第一个springboot项目 1. File --> New --> Project... --> Spring Initializr ，如下图所示 指定jdk，Choolse Initializr Service URL 保持默认即可。然后，next. 2. 在弹出的 Project Metadata 窗口中，Version: 默认是0.0.1...
Intellij IDEA创建第一个Spring Boot项目
wangmeixi的博客
08-22 1284
我使用的IDEA版本：2019.2 1.点击File->New->Project 2.选择左侧栏的Spring Initializr，配置好JDK，其他选项默认即可，然后点击Next 3.这里均为默认，不做任何修改，直接点击Next 4.选择左侧栏的Web，中间栏选择Spring Web Starter（同之前版本的Web），点击Next 5.给工程命名，我命名为demo01，之...
使用idea创建第一个springboot项目
m0_67390788的博客
04-28 618
前言： 如今springboot越来越火，越来越多的公司选择使用springboot作为项目的开发框架，其设计目的就是用来简化spring项目的搭建和开发过程，省略了传统spring、springmvc项目繁琐的配置，可以让开发人员快速上手。 下面详细说明下如何使用idea创建我们的第一个springboot项目： 首先打开idea主界面选择 Create New Project 在弹出的页面中我们选择左侧的Spring Initializr，jdk版本选择自己安装的版本，我这里选择1.8，URL选择默认
SpringBoot+Vue 论坛系统设计与实现
首先，SpringBoot是Java开发中的一个轻量级框架，它简化了Spring应用的初始搭建以及开发过程。SpringBoot的特点在于其内置的Tomcat服务器和自动配置机制，使得开发者可以快速创建可运行的应用程序，无需进行大量的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值