IDEA项目-搭建快速开发的前后端连通环境

最新推荐文章于 2024-04-23 11:44:00 发布
最新推荐文章于 2024-04-23 11:44:00 发布
阅读量4.6k 收藏 28
点赞数 3
文章标签： idea vscode docker spring cloud alibaba
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57213913/article/details/120070569
版权

搭建列表

获取前后端快速开发模板

gitee官网：https://gitee.com/renrenio

  • renren-fast：是一个轻量级的后端快速开发模板
  • renren-fast-vue： 是实现renren-fast后台管理的前端功能模板
  • renren-generator：代码生成器
git clone https://gitee.com/renrenio/renren-fast.git
git clone https://gitee.com/renrenio/renren-fast-vue.git
git clone https://gitee.com/renrenio/renren-generator.git

整合renren-fast-vue到vscode中

  1. 下载Nodejs : https://nodejs.org/download/release/v10.22.1/
    下载完成，打开控制台输入node -v 查看是否安装成功
    配置npm使用淘宝镜像npm config set registry http://registry.npm.taobao.org/

  2. 将renren-fast-vue拖到vscode中，在vscode终端输入npm install开始安装
    在这里插入图片描述

  3. 运行项目npm run dev

  4. 如果安装失败，输入npm cache clean --force,删除node_modules

整合renren-fast、renren-generator到IDEA中

1. 整合renren-fast

  1. 将renren-fast添加到项目中
    在这里插入图片描述

  2. 复制sql里的语句，创建对应的数据库和表
    在这里插入图片描述
    在这里插入图片描述

  3. 修改application-dev.yml的配置数据库信息
    在这里插入图片描述

  4. 搭建成功，启动服务

2. 整合renren-generator

  1. 将renren-generator添加到项目中
    在这里插入图片描述
  2. 修改配置文件
    在这里插入图片描述
    在这里插入图片描述
  3. 开启服务，访问80端口，利用代码生成器生成代码，将main文件放入对应的微服务
    在这里插入图片描述
  4. 创建一个maven模块作为各个微服务的公共部分
    在这里插入图片描述
  5. 配置guliamll-common下的pom.xml公共依赖
<?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>gulimall</artifactId>
        <groupId>com.rock.gulimall</groupId>
        <version>0.0.1-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>gulimall-common</artifactId>
    <description>每一个微服务的公共依赖，bean，工具类等</description>
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>7</source>
                    <target>7</target>
                </configuration>
            </plugin>
        </plugins>
    </build>

    <dependencies>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.20</version>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.3.1</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.4</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/org.apache.httpcomponents/httpcore -->
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpcore</artifactId>
            <version>4.4.14</version>
        </dependency>

        <dependency>
            <groupId>commons-lang</groupId>
            <artifactId>commons-lang</artifactId>
            <version>2.6</version>
        </dependency>

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>
</project>
  1. 从renren-fast模块中，引入相关公共文件
    在这里插入图片描述
  2. 在gulimall-product的pom.xml中先引入gulimall-common
    在这里插入图片描述
  3. 在resource中添加application.yml,配置数据库相关数据和端口号
    在这里插入图片描述
spring:
  datasource:
    username: root
    password: 102866
    url: jdbc:mysql://192.168.10.88/gulimall_sms?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai
    driver-class-name: com.mysql.cj.jdbc.Driver

mybatis-plus:
  mapper-locations: classpath:/mapper/**/*.xml
  global-config:
    db-config:
      id-type: auto

server:
  port: 7000
  1. 在主类上添加扫描包
    在这里插入图片描述

整合SpringCould微服务

1. 在gulimall-common公共模块中添加依赖管理

<dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>com.alibaba.cloud</groupId>
                <artifactId>spring-cloud-alibaba-dependencies</artifactId>
                <version>2.2.0.RELEASE</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
 </dependencyManagement>

2. 搭建Nacos注册中心

在docker中安装nacos/nacos-server

docker pull nacos/nacos-server

mkdir -p /mydata/nacos/init.d /docker/nacos/logs

touch /mydata/nacos/init.d/custom.properties

vim /mydata/nacos/init.d/custom.properties
management.endpoints.web.exposure.include=*

docker run -d -p 8848:8848 -e MODE=standalone -v /mydata/nacos/init.d/custom.properties:/home/nacos/init.d/custom.properties -v /mydata/nacos/logs:/home/nacos/logs --restart always --name nacos nacos/nacos-server

访问地址：http://192.168.10.88:8848/nacos
在这里插入图片描述

在gulimall-common公共模块中添加nacos注册中心的依赖

<dependency>
    <groupId>com.alibaba.cloud</groupId>
    <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
    <exclusions>
        <exclusion>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-netflix-ribbon</artifactId>
        </exclusion>
    </exclusions>
</dependency>

<dependency>
    <groupId>org.springframework.cloud</groupId>
    <artifactId>spring-cloud-starter-loadbalancer</artifactId>
    <version>3.0.3</version>
</dependency>

在微服务模块中的配置注册中心地址和模块名
在这里插入图片描述
添加openfeign请求超时配置

ribbon:
  ReadTimeout: 120000  #请求处理的超时时间
  ConnectTimeout: 30000  #请求连接的超时时间
### 配置网关反向代理
zuul:

  host:
    connect-timeout-millis: 60000  #HTTP连接超时大于Hystrix的超时时间------自己新增的------》
    socket-timeout-millis: 60000   #socket超时

在这里插入图片描述

开启注册中心服务
在这里插入图片描述

3. 测试OpenFeign远程调用微服务

在gulimall-coupon微服务模块创建远程服务
在这里插入图片描述
在gulimall-member微服务模块创建接口接收远程服务
在这里插入图片描述
调用远程服务
在这里插入图片描述
开启OpenFeign
在这里插入图片描述

4. 搭建Nacos配置中心

在gulimall-common公共模块中，导入配置中心相关依赖

<dependency>
    <groupId>com.alibaba.cloud</groupId>
    <artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId>
</dependency>

<dependency>
    <groupId>org.springframework.cloud</groupId>
    <artifactId>spring-cloud-starter-bootstrap</artifactId>
    <version>3.0.1</version>
</dependency>

在gulimall-coupon微服务模块中创建bootstrap.properties

# 微服务模块名
spring.application.name=gulimall-coupon
# nacos的服务地址
spring.cloud.nacos.config.server-addr=192.168.10.88:8848

开启自动刷新

@RefreshScope
@RestController
@RequestMapping("coupon/coupon")
public class CouponController {}

测试配置中心是否可用

  • 在gulimall-coupon微服务模块中的application.properties，添加配置参数
coupon.user.name=yan
coupon.user.age=21
  • 在CouponController中添加测试方法
@RefreshScope
@RestController
@RequestMapping("coupon/coupon")
public class CouponController {

    @Value("${coupon.user.name}")
    private String name;

    @Value("${coupon.user.age}")
    private Integer age;

    /**
     * 测试配置中心是否可用
     * @return
     */
    @RequestMapping("/config")
    public R ConfigurationCenter(){
        return R.ok().put("name", name).put("age", age);
    }
}
  • 在nacos服务端添加配置列表（Data ID：模块名.properties）
    在这里插入图片描述
    在这里插入图片描述

5. 配置命名空间

作用：设置隔离

  • 以开发环境进行隔离（开发prop、测试test、发布dev）
  • 以微服务进行隔离

创建命名空间
在这里插入图片描述
在boostrap.properties中指定命名空间ID
spring.cloud.nacos.config.namespace=8dde4393-1ee0-4e1e-b57a-e1701d6cb3b2

6. 配置分组

在这里插入图片描述
在boostrap.properties中指定分组
spring.cloud.nacos.config.group=dev

7. 加载配置集

在nacos中创建配置集
在这里插入图片描述
在bootstrap.properties中绑定配置集
在这里插入图片描述

spring.cloud.nacos.config.extension-configs[0].data-id=datasource.yml
spring.cloud.nacos.config.extension-configs[0].group=dev
spring.cloud.nacos.config.extension-configs[0].refresh=true

spring.cloud.nacos.config.extension-configs[1].data-id=mybatis-plus.yml
spring.cloud.nacos.config.extension-configs[1].group=dev
spring.cloud.nacos.config.extension-configs[1].refresh=true

spring.cloud.nacos.config.extension-configs[2].data-id=other.yml
spring.cloud.nacos.config.extension-configs[2].group=dev
spring.cloud.nacos.config.extension-configs[2].refresh=true

8. 搭建API网关Gateway

  • 创建gulimall-gateway模块
    在这里插入图片描述
    在这里插入图片描述
  • 引入公共依赖，并排除数据库相关依赖
<dependencies>
        <dependency>
            <groupId>com.rock.gulimall</groupId>
            <artifactId>gulimall-common</artifactId>
            <version>0.0.1-SNAPSHOT</version>
            <exclusions>
                <exclusion>
                    <groupId>com.baomidou</groupId>
                    <artifactId>mybatis-plus-boot-starter</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>mysql</groupId>
                    <artifactId>mysql-connector-java</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
<dependencies>

  • 创建gulimll-gateway的命名空间
    在这里插入图片描述

  • 搭建注册中心
    在这里插入图片描述

# 注册中心
spring.cloud.nacos.discovery.server-addr=192.168.10.88:8848
spring.application.name=gulimall-gateway
spring.cloud.nacos.discovery.namespace=90b0a7b4-7618-489a-85f4-aa87775da06a
server.port=88

开启注册服务
在这里插入图片描述

  • 搭建配置中心
    在这里插入图片描述
# 配置中心
spring.cloud.nacos.config.server-addr=192.168.10.88:8848
spring.application.name=gulimall-gateway
spring.cloud.nacos.config.namespace=90b0a7b4-7618-489a-85f4-aa87775da06a

开启实时刷新
在这里插入图片描述

  • 配置路由规则
    在这里插入图片描述
spring:
  cloud:
    gateway:
      routes:
        - id: test_route
          uri: https://www.baidu.com
          predicates:
            - Query=url,baidu
王科淞
关注
  • 3
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
115.【SpringBoot(IDEA)+Vue(Vscode)前后端交互】
qq_69683957的博客
05-14 1万+
在SpringBoot+Vue的整合项目中我们使用的编译软件分别有: Vscode来编写Vue脚手架和IDEA来编写SpringBoot。vue脚手架是3.0以上的。
idea里有vue项目有springboot项目，怎样把vue和项目同时启动能使vue前端项目访问到后端举例说明
qq_33192454的博客
10-15 2502
在 IntelliJ IDEA 中同时启动 Vue.js 前端项目和 Spring Boot 后端项目需要采取多模块方式，以确保两个项目可以协同工作。首先，创建一个 Maven 父项目，该父项目将包含两个子模块，一个用于 Vue.js 前端，另一个用于 Spring Boot 后端。在父项目下创建一个子模块，该子模块用于托管 Vue.js 项目。同样，在父项目下创建另一个子模块，用于托管 Spring Boot 项目。将前端和后端两个子模块拖拽到父项目中，形成父子关系。打开前端 Vue.js 项目，找到。
idea中Endpoins工具的是使用
最新发布
qq_44227326的博客
04-23 676
去掉图四红框部分，点击convert,接口就导入成功了，接下来运行就OK。idea中Endpoins工具的是使用。2、右键点击选择要导入的接口复制。1、浏览器打开要赋值的接口。
Idea+springboot+vue 前后端交互实现
热门推荐
qq_46574738的博客
06-21 1万+
Idea+springboot+vue 前后端交互实现
springboot+vue前后端连接（基于idea+vscode）
wyfdavid的博客
11-10 925
注：本文前提是您已分别顺利跑通springboot和vue框架。
本地windows在idea中搭建了前端vue后端springboot前后端一体的项目，想在本地启动起来怎样操作
qq_33192454的博客
10-15 1843
要在本地启动前后端一体的项目，包括前端 Vue 应用和后端 Spring Boot 应用，您需要分别启动两个应用，前端和后端。在实际项目中，前端和后端的启动方式可能会有所不同，具体要根据您的项目结构和构建配置来确定启动方式。确保前端应用可以正确地发起请求到后端，通常需要在前端代码中配置后端的 API 地址。现在，您的前端和后端应用都应该在本地运行了。通常，前端应用会运行在。上，而后端应用会运行在另一个端口（如。
IDEA快速搭建Java开发环境的教程图解
08-25
"IDEA快速搭建Java开发环境的教程图解" 本文主要介绍了IDEA如何快速搭建Java开发环境，通过图文并茂的形式给大家介绍的非常详细，具有一定的参考借鉴价值。下面是本文的知识点总结： 一、IDEA快速搭建Java开发环境...
驾校分期-众筹项目java前后端分离项目vue
06-14
可以idea直接打开，mysql数据库项目，前后端分离项目vue，分期可自动设置，自动换算金额
图文手把手教程--JAVA后端开发环境搭建(IntelliJ IDEA 2020)及HelloWorld工程
01-10
非常详细，一步一步教你搭环境
IDEA插件开发之环境搭建过程图文详解
08-19
IDEA插件开发环境搭建过程是指基于IntelliJ Platform Plugin搭建环境的步骤，在本文中我们将通过图文并茂实例代码相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值。 一、基于IntelliJ ...
前后端分离项目-雕塑设计网站
07-27
适合人群：前端vue项目开发人员初学者，需要前后端分离项目的人员。 能学到什么：能够更加深刻的理解Vue3的语法，理解前后端分离的项目过程。 阅读建议：此资源以开发简化版Spring学习其原理和内核，不仅是代码编写...
IDEA快速搭建前后端分离springboot项目综合篇
qq_41604890的博客
03-27 9020
创建基础项目 1.创建项目 一路next，选择项目存放路径后点击finish完成，等待依赖下载完成 删除没必要的文件（选中的红色） 项目结构 导入web依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> yml配置 删
idea+SpringBoot后端搭建
weixin_42294340的博客
09-07 511
初学SpringBoot环境搭建
从头来第五步正常使用服务器（Tomcat）使用IDEA开发前后端
joey_ro的博客
06-20 2485
1.Apache Tomcat 简单的说tomcat就是一个小型的本地的服务器，便于程序员调试程序，观察网站。 简介 环境 重要目录 Tomcat是由Apache软件基金会属下Jakarta项目开发的Servlet容器，按照Sun Microsystems提供的技术规范，实现了对Servlet和JavaServer Page（JSP）的支持，并提供了作为Web服务器的一些特有功能，如Tomcat管理和控制平台、安全局管理和Tomcat阀等。由于Tomcat本身也内含了HTTP服务器，因此也可
人人开源框架的使用
weixin_57869541的博客
09-09 5235
人人开源框架的使用
使用IDEA进行创建后台项目
qq_51357960的博客
11-01 3377
前后端分离项目——后端项目的实现
前后端框架搭建之IDEA SpringBoot框架搭建&VSCODE VUE前端框架搭建(一)
qq_42306286的博客
03-25 3099
SpringBoot框架搭建 初始化搭建 ① file->new->project->spring Initializr ②next-> （修改name为自己想要的名字name） （我之前有个模就直接创建了，没有模型的） Web 选个 web TemPlateEngines 选个 thymeleaf Sql 选个 mysql jdbc mybatis ...
IDEA配置Tomcat并部署
qq_45979254的博客
05-09 380
配置Tomcat并部署 一、可从两个入口配置Tomcat 二、点击+号，选择Tomcat Server中的Local 三、重命名Name 四、点击【Configure】按钮，配置Tomcat 找到Tomcat所在的文件位置，之后点击【OK】 五、转到【Deployment】页面，点击【+】号，选择项目 此时会出现你所创建的java-web项目，选中你要配置的模块，点击【OK】 六、以下的Application context是项目的根路径，可手动配置 七、选择JRE 八、这里都选择热部署
IDEA的WEB前后端交互的地址配置
qq_53805716的博客
09-17 970
IDEA的WEB前后端交互的地址配置
idea+mybatis-plus快速开发web服务
09-29
要使用Idea进行MyBatis-Plus快速开发Web服务，首先需要按照以下步骤进行操作： 1. 打开Idea，点击“File”菜单，选择“New” - “Project”。 2. 在左侧选择“Spring Initializr”，然后点击“Next”。 3. 输入项目的基本信息，如项目名称、项目位置等，并选择所需的依赖，包括Spring Boot、MyBatis-Plus和MySQL等。 4. 点击“Next”，选择项目的存储位置，并点击“Finish”完成项目的创建。 5. 等待Idea自动下载所需的依赖库，并构建项目。 6. 在项目中创建数据库连接，配置数据库相关信息，包括数据库地址、用户名和密码等。 7. 创建实体类，用于映射数据库表结构。 8. 创建Mapper接口和对应的Mapper XML文件，用于定义数据库操作的SQL语句。 9. 创建Service接口和对应的实现类，用于定义业务逻辑。 10. 创建Controller类，处理HTTP请求并调用相应的Service方法。 11. 运行项目，并通过浏览器或其他工具测试Web服务的功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值