使用Gradle整合SpringBoot+Vue.js-开发调试与打包

最新推荐文章于 2024-04-28 16:16:36 发布
最新推荐文章于 2024-04-28 16:16:36 发布
阅读量686 收藏
点赞数

原文：https://segmentfault.com/a/1190000008968295

首先非常感谢kevinz分享的文章《springboot+gradle+vue+webpack 组合使用》，这文章对我的帮助非常大。

我是做Java后台开发的，一般做Java的要做网页都是用jsp，但我并不喜欢在jsp代码中使用jstl标签，我一直想找一个Java能用的前后端分离的解决方案。目前确定比较好的组合是：前台页面用Vue.js，后台用SpringBoot。但是Vue.js在网上能找到的都是需要Node.js环境进行打包的，这使得不懂Node.js的Java程序员望而却步。

在此之前，为了能用上Vue.js快速开发网页，我利用Vue.js的异步组件的特性来加载组件，并配合vue-router来实现组件的视图切换。这样子就能用传统的JavaScript写法在网页端用上Vue.js。对于小型的项目是能适用的，但是对于大型的项目组织起来比较麻烦，而且没有代码压缩、混淆的功能。

在看到kevinz的文章后，我认真研究了，并稍作修改，在这里记下学习的笔记。

我的开发环境如下：

  1. IDE：Intellij IDEA
  2. JDK：Java8
  3. Gradle：3.3
  4. Node.js：6.10.1
  5. Vue-CLI：2.8.1

1.Node.js安装与配置

  1. 到官网下载最新的Node.js安装
  2. 由于Node.js安装后，默认的node_modules和缓存文件是存在C盘的，最好是修改成其它盘。

  3. 在其它盘创建Node.js缓存文件夹,如：

    1. E: \_development \nodejs \g lobal 存放例如用`npm install -g express`命令安装的模块文件
    2. E: \_development \nodejs \cache 存放下载缓存

  4. 找到【nodejs安装目录】/node_modules/npm/npmrc 文件，用txt打开，修改配置：

    1. prefix= E:\_development\nodejs\global 指定全局安装的 node 模块的目录
    2. cache= E:\_development\nodejs\cache 指定缓存目录
    3. registry=https: //registry.npm.taobao.org 指定使用国内的淘宝的 Node . js 镜像
  5. 为了测试配置是否成功，运行一下命令npm install -g express安装一个express试试，Java程序员可能不知道，express是Node.js的后端mvc框架，类似Java中的SpringMVC。如果安装成功，会生成一个E:_developmentnodejsglobalnode_modules目录，express的文件就在该目录下。

  6. 新增环境变量：

    NODE_PATH=E:\_development\nodejs\global\node_modules

  7. Path环境变量加入路径：

    E:\_development\nodejs\global 加入该路径，才能使用后面安装vue-cli后的vue命令

2.vue-cli安装

vue-cli中cli是command line interface的缩写，安装很简单：npm install -g vue-cli，-g是全局安装的意思。安装过程可能比较久。安装完可以通过vue -V查看是否安装成功。如下图：

3.在IDEA搭建项目框架

  1. 创建整体工程的结构是，先创建一个总工程，叫show，再创建两个子模块，一个叫server，一个叫web。
  2. 打开IDEA，File-->New-->Project-->Gradle-->取消勾选Java-->Next。如下图：

  3. 输入父工程的信息，如下图：

  4. 设置Gradle相关配置，由于网络特殊原因，最好用本地的Gradle库，配置如下图：

  5. 设置项目存放路径，如下图：

  6. 项目创建出来就除了Gradle的配置文件，其它什么都没有，接下来要创建两个子工程server和web。show项目创建后如下图：

  7. 创建server子项目，对着show项目：

    1. 右键-->New--> Module-->Gradle-->勾选Java
    2. --> Next-->ArtifactId填 "server"
    3. --> Next-->Finished

  8. 创建web子项目，对着show项目：

    1. 右键-->New--> Module-->Gradle-->勾选Javaweb
    2. --> Next-->ArtifactId填 "web"
    3. --> Next-->Finished

  9. 将show总项目的build.gradle文件修改成如下配置：

    1. group 'com .gongshi'
    2. version ' 1.0 '

  10. 将show总项目的setting.gradle文件修改成如下配置：

    1. rootProject.name = 'show'
    2. include 'server'
    3. include 'web'

  11. 将web子项目的build.gradle文件修改成如下配置：

    1. plugins {
    2. id "com.moowork.node" version "1.1.1"
    3. id 'java'
    4. }
    5. //调用npm run build命令的Gradle任务
    6. task npmBuild(type: NpmTask, dependsOn: npmInstall) {
    7. group = 'node'
    8. args = [ 'run', 'build']
    9. }
    11. //Gradle的java插件的jar任务，依赖npmBuild,即web子模块打jar包前必须运行npm run build
    12. jar.dependsOn npmBuild
    14. //调用npm run dev
    15. task npmDev(type: NpmTask, dependsOn: npmInstall) {
    16. group = 'node'
    17. args = [ 'run', 'dev']
    18. }

    在上面的代码中， id "com.moowork.node" version "1.1.1" 一行是加入了一个Gradle插件，叫gradle-node-plugin,该插件可以通过调用Gradle命令来调用node.js的命令或npm的命令。插件自带了一些内容的命令，如：gradle npmInstall用于运行npm install命名，另外还有：

    1. $ gradle npm_install
    2. $ gradle npm_update
    3. $ gradle npm_list
    4. $ gradle npm_cache_clean
    5. ...

  12. 将server子项目的build.gradle文件修改成如下配置：

    1. plugins {
    2. id 'org.springframework.boot' version '1.5.2.RELEASE'
    3. id 'java'
    4. }
    6. jar {
    7. baseName = 'server'
    8. version = '1.0'
    9. }
    11. repositories {
    12. //使用淘宝的maven镜像
    13. maven{ url 'http://maven.aliyun.com/nexus/content/groups/public'}
    14. }
    16. dependencies {
    17. compile project ( ':web' ) //server模块依赖web模块
    18. compile ( "org.springframework.boot:spring-boot-starter-web" )
    19. compile ( "org.springframework.boot:spring-boot-devtools" )
    20. testCompile ( "org.springframework.boot:spring-boot-starter-test" )
    21. }

    在上面的代码中，需要特别注意的是compile project(':web')，这个设置能在server打包时把web的资源先打包，并作为依赖，加入到server项目生成的jar包中。

13.在IDEA右侧找到Gradle的栏目，点击Refresh All Gradle Projects, IDEA会按找各个build.gradle文件的配置，下载依赖的jar。


到这里为止，项目的结构搭建好了，下一步是先编写一下SpringBoot的代码，把一个简单Java后台跑起来。

4.编写SpringBoot的后台

1.创建包com.gongshi，创建类：Application.java。如下：

Application.java:

  1. package com.gongshi;
  3. import org.slf4j.Logger;
  4. import org.slf4j.LoggerFactory;
  5. import org.springframework.boot.SpringApplication;
  6. import org.springframework.boot.autoconfigure.SpringBootApplication;
  7. import org.springframework.boot.web.servlet.ServletRegistrationBean;
  8. import org.springframework.context.annotation.Bean;
  9. import org.springframework.web.context.WebApplicationContext;
  10. import org.springframework.web.servlet.DispatcherServlet;
  12. @ SpringBootApplication
  13. public class Application {
  15. private static final Logger logger = LoggerFactory.getLogger( Application. class);
  17. public static void main( String[] args) {
  18. SpringApplication.run( Application. class);
  19. logger.info( "SpringBoot server stated on port: 8080");
  20. }
  22. //增加一个SpringMVC的DispatcherServlet，接收前台/api开头的请求
  23. @ Bean
  24. public ServletRegistrationBean apiV1ServletBean( WebApplicationContext wac) {
  25. DispatcherServlet servlet = new DispatcherServlet(wac);
  26. ServletRegistrationBean bean = new ServletRegistrationBean(servlet, "/api/*");
  27. bean.setName( "ApiServlet");
  28. return bean;
  29. }
  31. }

3.创建包com.gongshi.controller，创建类：AppController.java。如下：

AppController.java:

  1. package com.gongshi.controller;
  3. import org.springframework.web.bind. annotation.RequestMapping;
  4. import org.springframework.web.bind. annotation.RestController;
  5. import java.util.HashMap;
  6. import java.util.Map;
  8. @RestController
  9. @RequestMapping("/app")
  10. public class AppController {
  12. //简单的后台接口，用于测试
  13. @RequestMapping("/info")
  14. public Object info(){
  15. Map<String,Object> map = new HashMap<>();
  16. map.put( "info", "hello hello hello");
  17. return map;
  18. }
  20. }

3.在server/src/main/resources目录下，创建一个staic目录，创建一个html页面，用于测试，如下：
index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title </title>
  6. </head>
  7. <body>
  8. <h1>Hello Spring Boot </h1>
  9. </body>
  10. </html>

4.暂时注释掉server/builde.gradle中的compile project(':web')配置（因为web子项目未配置好vue.js相的内容），在IDEA右侧Gradle栏目，点击运行server的bootRun任务，bootRun任务会运行Application.java下的main方法。启动Spring Boot，如下图：

为了测试后台是否正常运行，分别访问一下：

  1. http://localhost:8080，结果如下：

  2. http://localhost:8080/index.html，结果如下：

  3. http://localhost:8080/app/info，结果如下：

以上三个结果中，需要注意下第1个和第2个。Spring Boot默认会将server/src/main/resources/static下的文件作为静态资源，提供给外部访问。当访问http://localhost:8080时，发现static有index.html文件，默认会显示到浏览器端。这就是为什么1和2的结果是一样的。

5.编写Vue.js的前台

  1. 在这里前台使用vue-cli生成前台的模板。随便打开一个文件夹，比如：D:demo,按住shift+右键-->在此处打开命令窗口，即可打开一个命令行，输入命令vue init webpack web,其中webpack是用webpack做vue.js的打包工具，web是生成的模板名称。依次做以下的选择：
  1. P roject name --> web
  2. P roject description --> A Vue.js project
  3. A uthor --> Hello
  4. V ue build --> 回车
  5. I nstall vue-router ? --> y
  6. U se ESlint to lint your code? --> n
  7. S etup unit tests with Karma + Mocha? --> n
  8. S etup e2e tests with Nightwatch? --> n

2.执行以上步骤后，vue-cli工具就会将项目模板生成到D:demoweb目录，此时把web目录下所有文件拷贝到IDEA的show/web子项目中。如下图：

3.IDEA下方打开Terminal命令行终端，执行命令：cd web ，npm install，这样子npm就会根据package.js中的信息下载依赖的模块。安装后show/web/目录下会出现node_modules目录。如下图：


4.此时需要测试一下vue-cli搭建的web子项目是否正确，打开IDEA右侧Gradle栏目，找到npmDev任务，双击运行一下，任务运行成功会自动打开浏览器，显示localhost:8080，显示Vue的模板页面。如下图：

6.修改Vue.js的前台配置

  1. 因为gradle构建输出目录是build，vue-cli生成的模板的构建脚本的目录也是build，因此这里要把构建脚本的build目录修改成script：点选show/web/build目录，shift+F6重命名，将show/web/build目录改成script目录,避免与gradle的构建输出目录冲突。
  2. 修改show/web/package.json中与build目录相关的配置：
  1. "scripts": {
  2. "dev": "node build/dev-server.js",
  3. "build": "node build/build.js"
  4. },
  5. 改成：
  6. "scripts": {
  7. "dev": "node script/dev-server.js",
  8. "build": "node script/build.js"
  9. },

3.修改show/web/script/webpack.dev.conf.js中与build目录相关的配置：

  1. Object.keys(baseWebpackConfig. entry).forEach( function ( name ) {
  2. baseWebpackConfig. entry[ name] = [ './build/dev-client'].concat(baseWebpackConfig. entry[ name])
  3. })
  4. 改成：
  5. Object.keys(baseWebpackConfig. entry).forEach( function ( name ) {
  6. baseWebpackConfig. entry[ name] = [ './script/dev-client'].concat(baseWebpackConfig. entry[ name])
  7. })

4.修改show/web/config/index.js中的配置,包括webpack打包输出位置，以及配置代理避免跨域问题，具体修改项看下面注释：

show/web/config/index.js：

  1. // see http://vuejs-templates.github.io/webpack for documentation.
  2. var path = require( 'path')
  4. var assetsRoot = path. resolve(__dirname, '../build/resources/main/static') // <----- 1 . add
  5. module.exports = {
  6. build: {
  7. en v: require( './prod.env'),
  8. index: path. resolve(assetsRoot, 'index.html'), // <----- 2 . change
  9. assetsRoo t: assetsRoot, // <----- 3 . change
  10. assetsSubDirectory: 'assets', // <----- 4 . change
  11. assetsPublicPath: '/',
  12. productionSourceMap: true,
  13. // Gzip off by default as many popular static hosts such as
  14. // Surge or Netlify already gzip all static assets for you.
  15. // Before setting to `true`, make sure to :
  16. // npm install --save-dev compression-webpack-plugin
  17. productionGzip: false,
  18. productionGzipExtension s: [ 'js', 'css'],
  19. // Run the build command with an extra argument to
  20. // View the bundle analyzer report after build finishe s:
  21. // `npm run build --report`
  22. // Set to `true` or `false` to always turn it on or off
  23. bundleAnalyzerRepor t: process.env.npm_config_report
  24. },
  25. de v: {
  26. en v: require( './dev.env'),
  27. por t: 3000, // <----- 5 . change
  28. autoOpenBrowser: true,
  29. assetsSubDirectory: 'assets', // <----- 6 . change
  30. assetsPublicPath: '/',
  31. proxyTable: { // <----- 7 . change
  32. '/api/**': 'http://localhost:8080' //代理前台/api开头的请求，代理到 8080 端口，spring boot的访问端口
  33. },
  34. // CSS Sourcemaps off by default because relative paths are "buggy"
  35. // with this option, according to the CSS-Loader README
  36. // (http s: //github. com /webpack/css-loader#sourcemaps)
  37. // In our experience, they generally work as expected,
  38. // just be aware of this issue when enabling this option.
  39. cssSourceMap: false
  40. }
  41. }

5.测试show/web子项目的开发环境。关闭spring boot后台，在IDEA右侧Gradle栏目找到npmDev任务并运行。如果运行成功，会自动打开浏览器显示http://localhost:3000，并显示Vue.js的模板页面，此时找到show/web/src/components/Hello.vue，修改一点内容：

  1. <script>
  2. export default {
  3. name: 'hello',
  4. data () {
  5. return {
  6. msg : ' Welcome to Your Vue . js App 333333333'//< -----change
  7. }
  8. }
  9. }
  10. </script>

打开浏览器查看http://localhost:3000，如果对应的内容更新了，则表明web子项目的开发环境正确。

如果运行npmDev报错，有可能是多次运行npmDev命令，有其它Node.js进程占用了端口，打开任务管理器关闭即可，如下图：

5.测试show/web子项目的打包。在IDEA右侧Gradle栏目找到npmBuild任务并运行。如果运行成功，webpack打包的前端资源会输出到show/web/build目录下，如下图：

注意：

我把webpack的打包输出路径故意设置成build/resources/main/static，这样子，web子项目打成jar包后，在classpath中的路径就是/static目录了，即跟spring boot默认的静态资源查找路径是一样的。

再者，server子项目依赖web项目（show/server/build.gradle中的compile project(':web')配置），所以server子项目打jar包前会先将web子项目打成jar包，web子项目的jar包中已经包含了webpack输出的静态资源。

所以，当server子项目打包后，访问http://localhost:8080/index.html就能访问到web子项目webpack打包的输出的index.html文件。

注意：
server子项目打包前，请先删除show/server/src/main/resources/static目录，避免与web子项目打包过来的文件重复。

7.开发调试

  1. 先运行show/server子项目的bootRun任务，启动Spring Boot
  2. 再运行show/web子项目的npmDev任务，启动node的开发服务器
  3. 当show/web子项目有请求需要调用Spring Boot后台，加上/api前缀，请求即可代理从node的开发服务器http://localhost:3000/api/xxxx代理到http://localhost:8080/api/xxxx
  4. 而在开发前台页面时候（对show/web/src目录下的文件修改），应该访问http://localhost:3000/，而不是8080端口，访问3000端口，即可看到页面修改的即时效果。

8.打包

运行show/server子项目的build任务，即可完成打包。打包的jar包已经包含show/web子项目的输出内容。

MakeGreatEffort
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
SpringBoot + Vue.JS前后端分离架构项目实战
04-15
SpringBoot与Vue.JS整合开发是现在较为常见的技术整合形式，当读者已经学习完成了《SpringBoot就业编程实战》一书以及课程视频之后，相信对于SpringBoot的实际应用有着莫大的需要，我们本着技术为主的精神，通过一套完整的人事管理系统，为大家完整的演示了一套项目的技术开发，合理的使用了IDEA + Gradle + SpringBoot + MyBatis + MyBatisPlus + Starter + Druid + JWT进行了后端代码的编写，并利用Vue.JS + ElementUI + Axios + VueX实现了前端开发。
SpringBoot Gradle和Vue 两个项目结构进行解释，说明其作用
最新发布
L0g1c的博客
06-18 951
在使用Gradle构建的Spring Boot项目中，项目的目录结构和各个文件的作用如下：项目根目录：src/main/java/:src/main/resources/:src/test/java/:src/test/resources/:build/:build.gradle:src/main/java/:src/main/resources/:src/test/java/:src/test/resources/:通过这种结构，项目的代码和资源文件都被清晰地组织和管理，使得项目的开发、维护和部署变得更加
springboot基于gradle整合vue
12-05
基于gradle整合springboot,vue,自动打包编译vue项目至springboot中，后续直接运行springboot程序即可
spring boot + gradle + mybatis + vue（eclipse-STS）前后端分离入门教程（第一部分：后端）
weixin_42142057的博客
03-27 2029
在做springboot项目时，公司要求是springboot+gradle+mybatis+vue，同时，我又习惯了用ecplise来开发， 在网上找了许多资料都不是很全， 于是自己经过磕磕碰碰的尝试整合，终于基于要求做了一个简单的用户管理系统。
Gradle介绍2-进阶(Task、插件及部署等)
BASK2311的博客
11-17 1261
任务定义方式，总体分为两大类:一种是通过 Project 中的task()方法,另一种是通过tasks 对象的 create 或者register 方法。task( 'A' , { //任务名称,闭包都作为参数})task( 'B' ) { //闭包作为最后一个参数可以直接从括号中拿出来}task C { //groovy语法支持省略方法括号:上面三种本质是一种}
SpringBoot+vue.zip
06-04
标题 "SpringBoot+vue.zip" 暗示了这是一个整合了Spring Boot和Vue.js的项目压缩包，旨在创建一个基于Java后端和JavaScript前端的现代Web应用。让我们深入探讨这两个技术及其结合点。 **Spring Boot** Spring Boot...
Springboot+Vue.zip
03-17
《Springboot+Vue整合开发详解》 在现代Web开发领域，Spring Boot和Vue.js的结合已经成为了一种流行的选择。Spring Boot作为Java领域的轻量级框架，以其强大的后端处理能力和开箱即用的特性深受开发者喜爱；而Vue....
功能：学生信息管理系统，包含学生信息，教师信息管理，学生课程管理等... （使用springboot+vue).zip
02-04
后台使用SpringBoot的数据访问层（JPA或MyBatis）与数据库交互，前端Vue.js通过组件实现表格展示和表单编辑。 2. 教师信息管理：与学生信息管理类似，包括教师基本信息的录入、修改和查询。同时，可能涉及权限控制...
基于springboot+vue+阿里云的短信服务实现的短信群发系统源代码+数据库
05-08
这是一个基于Spring Boot、Vue....通过学习和理解这个项目的源代码，开发者可以深入理解Spring Boot与Vue.js的结合应用，以及如何对接阿里云服务，对于提升后端和前端开发技能、熟悉企业级项目开发流程都有很大的帮助。
SpringBoot整合Vue源码
12-11
在整合SpringBoot和Vue的过程中，需要注意以下几点： - **跨域配置**：由于前后端分离，可能会遇到跨域问题，需要在SpringBoot的`WebSecurityConfigurerAdapter`中配置允许跨域请求。 - **JSON序列化与反序列化**：...
【Gradle-7】Gradle构建核心之Task指南
yechaoa
06-25 2567
从Task是什么、写在哪、怎么写、怎么运行、怎么写好等方面为切入点，由浅入深、依次递进的介绍了Task Action执行顺序、自定义Task、Task依赖、Task增量构建等相关知识，总的来说，涉及的知识点还是不少的，更需要在实践中去理解并应用。
使用 gradle 整合 vuejs 项目与 java 项目
weixin_30387339的博客
07-12 370
使用 gradle 整合 vuejs 项目与 java 项目 前后端分离是个大趋势了，用 vuejs 去做前端比起 jsp 方式或其它模板方式做起来方便多了，这种隔离更加彻底。把后台做成一个纯 API 方式，只管理业务逻辑和数据，前端管 UI ，使用数据驱动的 mvvm vuejs 。 前端的测试也非常方便，在后台还没有完成的情况下，使用 vue-test-suit 做测试，后台和前端、测试职责更...
npm清理缓存
m0_54853146的博客
02-28 1万+
npm清理缓存 最近在做项目的时候网很差，下大型插件的时候会安装失败，所以清缓存是必须的，因为不是很常用但是有得用就很麻烦，所以记个笔记。 $ npm cache clean --force 如果要查看npm缓存的位置可以用下面的命令 $ npm cache dir 有人的npm可能没有这个命令，可以改用这个命令去查看 $ npm config list --json 上面的命令可以看到npm的相关信息 当然也有人可能使用的是yarn 如果是yarn就可以用下面的命令查看缓存位置 $ yarn ca
springboot集成graaljs +sandbox
小虫子编程课
04-27 2851
<dependency> <groupId>org.javadelight</groupId> <artifactId>delight-nashorn-sandbox</artifactId> <version>0.1.31</version> <exclusions> <exclusion> <groupId>org
Springboot项目与vue项目整合打包
热门推荐
James_liPeng的博客
08-18 1万+
后端： 准备工作： 安装JDK 配置环境变量 安装IDEA 一. 在IDEA中新建SpringBoot项目 点击File -> new -> Project 然后选择Spring initializr， 之后选择自己的JDK， 我测试安装的是12.0版本， 一般开发使用的是1.8稳定版 选择好相应的JDK之后点击next， 根据个人需求进行相应的修改， 然后next 然后选择...
gradle安装
tysforwork的博客
02-23 221
需要设置环境变量 添加一个 GRADLE_HOME 环境变量来指明 Gradle 的安装路径 添加 GRADLE_HOME/bin 到您的 PATH 环境变量中. 通常, 这样已经足够运行Gradle了vi /etc/profile 追加两行（注意【=】前后不留空） export GRADLE_HOME=/soft/gradle export PATH=PATH:PATH:GRADLE_HO
Android Studio 清理缓存clean project与invalidate caches
2401_84538474的博客
04-28 567
那我们该怎么做才能做到年薪60万+呢，对于程序员来说，只有不断学习，不断提升自己的实力。我之前有篇文章提到过，感兴趣的可以看看，到底要学习哪些知识才能达到年薪60万+。通过职友集数据可以查看，以北京 Android 相关岗位为例，其中 【20k-30k】 薪酬的 Android 工程师，占到了整体从业者的 30.8%！北京 Android 工程师「工资收入水平 」今天重点内容是怎么去学，怎么提高自己的技术。1.合理安排时间2.找对好的系统的学习资料3.有老师带，可以随时解决问题。
Spring boot + gradle + vue 前后端分离项目在linux服务器上部署运行
我真的超可爱的博客
05-18 754
1. spring-boot后台项目生成可执行jar文件 >> 首先确保springboot后台项目在本地环境中是可以正常跑起来的, buildscript { // 添加maven仓库 repositories { mavenLocal() // 阿里云的maven仓库 maven {url "http://maven.aliyun.com/nexus/content/groups/public/"} mavenCentral()//依赖Maven仓库 } ..
SpringBoot+Vue 论坛系统设计与实现
"该资源是一个关于计算机毕业设计的答辩PPT，主要介绍了一个使用SpringBoot和Vue.js技术栈构建的论坛系统。系统旨在提升信息处理和管理效率，满足现代社会对信息处理的需求。" 本文将详细阐述SpringBoot和Vue.js在...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值