基于Vue+SpringBoot+MySQL实现个人博客系统

已于 2023-08-02 22:16:37 修改
阅读量465 收藏 3
点赞数 3
分类专栏： vue 文章标签： vue.js spring boot mysql
于 2023-07-17 18:56:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53325717/article/details/131772850
版权

基于Vue+SpringBoot+MySQL实现个人博客系统

实现前后端完全分离:

前端

  • 使用Vue等技术构建单页应用
  • 通过Axios或Fetch调用后端提供的API
  • 关注交互逻辑和UI展现

后端

  • 提供基于RESTful的JSON API
  • 只关注数据与业务逻辑
  • 不关心前端技术

交互

  • 前端通过Axios等调用后端API
  • 后端返回JSON数据
  • 前端根据JSON数据更新UI

优点

  • 前后端解耦
  • 独立开发、部署
  • 更易于维护
  • 前端可替换
  • 后端可扩展

例如:

// 前端
axios.get('/api/articles').then(response => {
  this.articles = response.data
})

// 后端
@GetMapping("/api/articles")
public List<Article> getArticles() {
  return articleService.findAll();
}

上述代码实现了:

  • 前端调用/api/articles接口获取文章列表数据
  • 后端提供基于RESTful的JSON API接口
  • 通过JSON数据交互

实现前后端分离。

前端只关注使用JSON数据更新UI,后端只关注提供JSON数据。

部署方面,前端可以部署到任何webapp上,后端可以部署到任何Java应用服务器。

通过这种方式,我们可以:

  • 独立开发前后端
  • 独立部署前后端
  • 通过JSON数据进行通信

前端(Vue):

创建Vue项目,包含路由、状态管理等

根据你提供的需求,可按以下步骤创建Vue项目:

  1. 创建项目
vue create my-blog

选择默认配置(请选择Manually select features)

  1. 安装依赖
npm install vue-router vuex axios
  • vue-router:路由
  • vuex:状态管理
  • axios:请求库
  1. 定义路由(router/index.js)
import VueRouter from 'vue-router'

const router = new VueRouter({
  routes: [
    { path: '/', component: ArticleList }
  ]
})

export default router
  1. 创建状态管理器(store/index.js)
import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    
  },
  mutations: {
      
  },
  actions: { 
      
  }
})

export default store
  1. 定义接口服务(api/article.js)
import axios from 'axios'

export default {
  getArticles() {
    return axios.get('/api/articles')  
  }
}

通过这种方式,我们基本搭建好路由、状态管理和接口调用功能,后续再根据需求完善组件、actions等内容。

定义ArticleList组件,获取文章列表

ArticleList组件获取文章列表的代码如下:

<template>
  <ul>
    <li v-for="article in articles">
     {{ article.title }}   
    </li>    
  </ul>
</template>

<script>
export default {  
  data() {
    return {
      articles: []
    }   
  },
  created() {
    this.getArticles()    
  },   
  methods: {
    async getArticles() {
      let { data } = await axios.get('/api/articles')    
      this.articles = data    
    }    
  }    
}   
</script>

  • 在data函数中定义articles数组保存文章数据

  • 在created生命周期钩子中,调用getArticles方法获取文章列表

  • getArticles方法异步调用接口请求文章列表

  • 接口请求成功后,将响应数据data赋值给articles,从而渲染文章列表

主要功能包括:

  1. 定义articles数据
  2. 在created钩子中调用接口
  3. 通过await执行异步接口请求
  4. 接口成功后设置articles渲染列表

上述代码实现了:

  • 定义ArticleList组件渲染文章列表
  • 在创建时调用接口获取文章数据
  • 设置数据后渲染列表

重复定义ArticleEdit、TagList等组件

根据你提供的需求,可按以下步骤定义其他组件:

  1. ArticleEdit组件
<template>
  <form @submit.prevent="saveArticle">
    <input v-model="article.title" /> 
    <textarea v-model="article.content"></textarea>
    <button type="submit">保存文章</button>   
  </form>  
</template>

<script>
export default {
  data() {
    return {
      article: {
        title: '',
        content: ''  
      }
    }
  },
  methods: {    
    async saveArticle() {
      await axios.post('/api/article', this.article)
      this.$router.push('/')     
    }    
  }    
}
</script>
  1. TagList组件
<template>
 <ul>
   <li v-for="tag in tags">
    {{ tag.name }}
   </li>
 </ul>  
</template>

<script>
export default {    
  data() {
    return {
      tags: []
    }      
  },  
  async created() {
    let { data } = await axios.get('/api/tags')
    this.tags = data    
  }   
}
</script>
  1. CommentList组件
<template>
  <ul>  
   <li v-for="comment in comments">
     <p>{{ comment.content }}</p>   
   </li>      
  </ul>
</template>

<script>
export default {
  data() {
    return {
      comments: []
    }
  },
  async created() {
    let { data } = await axios.get('/api/comments')
    this.comments = data      
  }        
}
</script>

通过定义不同的组件,对应处理不同的数据和业务逻辑,我们就可以完整展现页面所需功能。

后端(Spring Boot):

创建Spring Boot项目,配置JPA和MySQL依赖

根据需求,可以按照以下步骤搭建Spring Boot项目:

  1. 使用IDE(IDEA、STS)创建 Spring Initialzr 项目

选择:

  • Group: com.example

  • Artifact: demo

  • Java: 1.8

  • Packaging: Jar

  • Dependencies:

    • Web
    • MySQL
    • JPA
  1. 添加MySQL连接信息

在application.properties添加:

spring.datasource.url= jdbc:mysql://localhost:3306/demo  
spring.datasource.username= root
spring.datasource.password= 123456
  1. 定义Article实体类
@Entity
public class Article {
  
  @Id  
  @GeneratedValue
  private Long id;
  
  private String title;
  private String content;
  
  // getters and setters
}
  1. 定义ArticleRepository
public interface ArticleRepository extends JpaRepository<Article, Long> {
}
  1. 定义ArticleService
@Service
public class ArticleService {
  
  @Autowired
  ArticleRepository articleRepository;
  
  public List<Article> findAll() {
    return articleRepository.findAll();
  }
}
  1. 定义ArticleController提供API
@GetMapping("/articles")
public List<Article> findAll() {
  return articleService.findAll();
}

通过这种方式,我们基于Spring Boot + JPA 就能快速搭建一个连接MySQL的示例项目。

定义Article实体类映射到数据库表

,Article实体类可以如下定义:

@Entity
@Table(name = "articles")
public class Article {

  @Id  
  @GeneratedValue  
  private Long id;
  
  @Column(name = "title")  
  private String title;  
  
  @Column(name = "content")  
  private String content;  
  
  // getters and setters  
}

主要特征有:

  1. 使用@Entity注解声明这是一个实体类

  2. 使用@Table指定数据库表名为articles

  3. id字段使用@Id和@GeneratedValue注解,指定为主键和自动增长

  4. 其他字段使用@Column注解指定数据库列名

  5. 为字段提供对应的getter和setter方法

当我们运行项目时,Spring Data JPA 会根据此对象对应的表的结构:

CREATE TABLE articles (
  id bigint AUTO_INCREMENT,   
  title VARCHAR(255),
  content TEXT,
  PRIMARY KEY (id)
)

所以通过在实体类上使用JPA注解,我们就实现了:

  • 定义一个映射到数据库表的实体类
  • 指定主键和列名映射
  • 将Java属性映射到数据库列

JPA在后续进行持久化时,就会根据此对象操作对应的数据库表。

定义ArticleRepository接口,继承JpaRepository

根据需求,ArticleRepository可以如下定义:

public interface ArticleRepository extends JpaRepository<Article, Long> {

}
  • 继承JpaRepository类
  • 参数一:管理的实体类Article
  • 参数二:实体类主键类型Long

通过继承JpaRepository,我们即声明了一个操作Article实体类与数据库表对应的仓库接口。
Spring Data JPA会自动为我们实现该接口,提供如下方法:

save()   // 保存实体
findAll() //查询全部
findById() // 根据id查询
...

比如findAll()方法实现为:

public List<Article> findAll() {
  return em.createQuery("from Article").getResultList();
}

所以通过继承JpaRepository,我们只需要定义接口即可:

  • 不需要编写任何实现
  • Spring Data JPA会自动实现
  • 提供CRUD和复杂查询的方法

在后续ArticleService中,我们可以通过自动装配的方式使用此仓库:

@Autowired
ArticleRepository articleRepository;

通过调用其方法实现与数据库的交互。

定义ArticleService服务,调用Repository

根据需求,ArticleService可以如下定义:

@Service
public class ArticleService {

  @Autowired 
  ArticleRepository articleRepository;
  
  public List<Article> findAll() {
    return articleRepository.findAll();
  }
  
  // 定义其他方法 
}

  • 使用@Service注解声明这是一个服务类

  • 通过@Autowired自动装配ArticleRepository

  • 定义findAll()方法调用仓库的findAll()方法获取全部文章

  • 可以定义其他业务方法,调用Repository

所以在服务类中:

  1. 通过@Autowired注入对应的仓库
  2. 定义业务方法,调用仓库方法
  3. 提供业务逻辑

同时我们:

  • 解耦了Service和Repository
  • 服务可以支持多种数据持久层
  • Repository专注于数据访问

在Controller中,我们可以注入此服务类使用:

@Autowired
ArticleService articleService;

// ...
articleService.findAll();

通过这种设计:

  • Service调用Repository访问数据
  • Controller调用Service提供业务

实现了清晰的分层结构。

定义ArticleController控制器,提供RESTful API

根据你的需求,ArticleController可以如下定义:

@RestController
@RequestMapping("/api/articles")
public class ArticleController {

  @Autowired
  ArticleService articleService;
  
  @GetMapping
  public List<Article> findAll() {
    return articleService.findAll();  
  }
  
  @GetMapping("/{id}")  
  public Article findById(@PathVariable Long id) {
    ...  
  }
  
  // 其它API
}

主要特征:

  1. 使用@RestController注解,代表一个RESTful的控制器

  2. 使用@RequestMapping指定基础URL为/api/articles

  3. 通过@Autowired注入ArticleService

  4. 使用@GetMapping标注GET请求路由,映射到方法

  5. 在方法中调用服务进行业务逻辑

  6. 使用@PathVariable绑定URL模板变量,如id

  7. 返回对应实体类的JSON数据

通过这种方式,我们定义了与Article相关的所有RESTful API:

  • GET /api/articles 获取全部文章
  • GET /api/articles/{id} 根据id获取文章
  • 其他获取、新增、修改、删除文章的API

客户端(前端)通过这些接口与后端交互,获取JSON格式的数据。

重复定义Tag、Comment等实体类

根据需求,可以按照以下方式定义Tag、Comment等实体类:

Tag

@Entity
public class Tag {
  
  @Id  
  @GeneratedValue  
  private Long id;
  
  @Column(name = "name")
  private String name;
  
  @ManyToMany  
  @JoinTable(
	   name = "article_tag", 
	   joinColumns = @JoinColumn(name = "tag_id"),
	   inverseJoinColumns = @JoinColumn(name = "article_id"))       
  private Set<Article> articles;
  
  // getters and setters  
}

Comment

@Entity
public class Comment {

  @Id  
  @GeneratedValue  
  private Long id;  
  
  @Column(name = "content")     
  private String content;  
  
  @ManyToOne
  @JoinColumn(name = "article_id")  
  private Article article;
  
  // getters and setters
}

主要特征:

  • 使用JPA注解定义实体类
  • 指定ID生成策略
  • 映射数据库表字段
  • 定义关系:
    • @ManyToMany 一个标签对应多个文章
    • @ManyToOne 一个评论对应一个文章
  • 使用@JoinTable指定关系表article_tag
  • 为属性提供getter和setter方法

通过这种方式,我们可以:

  • 定义多个实体类映射到不同数据库表
  • 定义实体类间的关系映射
  • 搭建完整的ORM框架

部署:

分别构建并部署Vue项目和Spring Boot项目

根据你的需求,可以按以下步骤分别构建和部署Vue前端项目和Spring Boot后端项目:

Vue项目

  1. 使用vue create命令创建Vue项目

  2. 安装依赖:npm install

  3. 开发前端组件,定义接口调用等

  4. 构建产物:

npm run build

此命令会构建出一个dist文件夹,包含静态文件

  1. 部署:
  • 直接上传dist文件夹到任意web服务器即可提供服务
  • 也可以使用:npm install -g serve安装serve,使用serve -s dist本地部署
Spring Boot项目

  1. 使用IDE创建Spring Initializr项目

  2. 连接MySQL数据库,编写实体、服务、接口等代码

  3. 构建产物:

./mvnw package

生成一个可执行的jar文件

  1. 部署:
  • 直接运行jar文件:java -jar demo.jar
  • 也可部署到任意Java服务器上
交互
  • Vue项目中,通过Axios调用Spring Boot提供的RESTful API接口
  • 获取JSON数据后,渲染到相应组件
  • 实现前后端完全分离

通过这种方式,我们可以:

  • 分别开发和部署前后端
  • 前端使用Vue等技术
  • 后端提供RESTful API服务
  • 前后端通过JSON交互

实现前后端完全分离的个人博客系统。

Vue通过Axios调用Spring Boot提供的JSON API

前端Vue项目通过Axios调用Spring Boot提供的JSON API的过程如下:

在Vue项目中,需要:

  1. 安装Axios库:
npm install axios
  1. 定义接口服务:
import axios from 'axios'

export default {  
  getArticles() {
    return axios.get('http://localhost:8080/api/articles')  
  }
}
  1. 在组件中使用接口:
import ArticleApi from './api/article'

export default {
  methods: {
    async loadArticles() {
      let { data } = await ArticleApi.getArticles()
      this.articles = data    
    }
  } 
}
  1. 调用方法加载数据:
created() {
  this.loadArticles()
}

在Spring Boot后端,需要定义:

  1. ArticleController:
@GetMapping("/api/articles")
public List<Article> getArticles() {
  return articleService.findAll();  
}

  1. ArticleService,ArticleRepository

    在Spring Boot后端,需要定义:

    ArticleService

    @Service
public class ArticleService {
  
  @Autowired
  ArticleRepository articleRepository;

  public List<Article> findAll() {
    return articleRepository.findAll();  
  }
}

    ArticleService中的方法:

    • 调用ArticleRepository进行数据访问
    • 提供业务逻辑,如新增、删除文章

    ArticleRepository

    public interface ArticleRepository extends JpaRepository<Article, Long> {

}

    ArticleRepository:

    • 继承JpaRepository,定义对Article操作的方法
    • Spring Data JPA会自动实现接口,提供基本CRUD方法

    ArticleController

    @RestController
public class ArticleController {
  
  @Autowired
  ArticleService articleService;
  
  @GetMapping("/api/articles")  
  public List<Article> getArticles() {
    return articleService.findAll();  
  }  
}

    ArticleController:

    • 定义JSON API端点
    • 通过@Autowired注入ArticleService
    • 实现HTTP请求处理方法,调用ArticleService

    三者组合结构:

    • ArticleRepository提供数据访问
    • ArticleService封装业务逻辑,调用Repository
    • ArticleController提供API,调用Service

    分层设计:

    • 解耦了数据访问和业务逻辑
    • Repository只负责数据,Service只负责业务
    • Controller只关注API定义

    所以在Spring后端,需要定义三个部分:Repository(数据)、Service(业务)和Controller(API)。

上述接口会返回:

[ 
  {
    "id": 1,
    "title": "Introduction to Spring Boot",
    "content": "..."   
  },
  ...
]

Vue项目通过Axios调用该接口,获取JSON数据,再设置给articles 用来渲染。

通过这种方式,我们实现了:

  • 前端通过Axios调用后端提供的JSON API接口
  • 后端使用Spring MVC定义Restful JSON API
  • 通过JSON交互实现前后端分离
  • 实现前后端完全分离

通过以上步骤,我们就可以实现一个基于Vue、Spring Boot和MySQL的简单个人博客系统,实现前后端分离

随风万里无云
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
blogSpringBoot:一个基于Vue+SpringBoot的个人博客项目
05-13
blogSpringBoot项目介绍该项目是个人博客项目，采用Vue + SpringBoot开发。后台管理页面使用Vue编写，其他页面使用Thymeleaf模板。项目演示地址：项目后台地址：0.2 对项目进行了重构使用MybatisPlus简化数据库操作...
blog-vue-springboot:基于Vue+SpringBoot构建的博客项目
07-24
Vue + SpringBoot实现的博客系统 线上地址： ssr 服务端渲染版本 效果图 首页 登录页 注册页 文章分类-标签、详情 文章归档 写文章 文章详情 评论 技术 前端 blog-app Vue Vue-router Vuex ElementUI mavon-editor ...
Springboot和Vue+MYSQL项目（基本介绍+前后端结合初步项目）+maven+mybatis
weixin_45594172的博客
11-20 2502
Springboot和Vue+MYSQL项目（基本介绍+前后端结合初步项目）+maven+mybatis
基于Vue+Springboot+MySQL实验教学管理平台设计
毕业作品网站
05-30 635
文档+系统设计文档+汇报PPT+项目源码及数据库文件。
基于springboot+vue+Mysql的交流互动系统
老卓爱爪哇 的博客
05-15 1094
对于本交流互动系统的设计来说，系统开发主要是采用java语言技术，在整个系统的设计中应用MySQL数据库来完成数据存储，具体根据交流互动系统的现状来进行开发的，具体根据现实的需求来实现交流互动系统网络化的管理，各类信息有序地进行存储，进入交流互动系统页面之后，方可开始操作主控界面，主要功能包括管理员：首页、个人中心、用户管理、帖子分类管理、帖子信息管理、聚会信息管理、报名信息管理、系统管理，用户；首页、个人中心、帖子信息管理、报名信息管理、我的收藏管理，前台首页；首页、帖子信息、聚会信息、个人中心、后台管理
基于Java+SpringBoot+Vue前后端分离仓库管理系统设计实现
java李阳勇的博客
04-04 6万+
仓库管理系统进行了字典管理、公告管理、用户管理、物资管理、物资申请管理、仓库员管理、统计报表等服务。设备采用关联数据库里的MySQL做为全面的数据库，合理存放数据，合理备份数据，确保数据稳定性。除此之外，程序流程还具备程序流程所需要的所有功能，大大提升了实际操作安全度，使库房管理系统软件从概念迈向实际，真真正正提升了信息资源管理效率。
基于Java+SpringBoot+vue+elementui社区疫情防控系统详细设计实现
热门推荐
java李阳勇的博客
08-03 6万+
主要功能设计:查看首页、个人中心、用户管理、返乡报备管理、外出报备管理、投诉信息管理、体温上报管理、商品代买管理、商品配送管理、社区论坛、系统管理等内容进行详细操作。
基于VUE+SpringBoot+MySQL的网上商城购物系统设计与实现
毕业作品网站
05-12 994
系统管理及信息分析的设计对于所使用的计算机没有什么硬性的要求，计算机只要可以正常的使用进行代码的编写及页面设计就可行，主要是对于服务器有些要求，对于平台搭建完成要上传的服务器是有一定的要求的，服务器必须选择安全性比较高的，然后就是在打开网站必须顺畅，不能停顿太长时间；网上商城购物系统主要是为了提高工作人员的工作效率和更方便快捷的满足用户，更好存储所有数据信息及快速方便的检索功能，对系统的各个模块是通过许多今天的发达系统做出合理的分析来确定考虑用户的可操作性，遵循开发的系统优化的原则，经过全面的调查和研究。
Vue+SpringBoot+MySQL项目
qq_51764257的博客
09-15 1531
SpringBoot项目开发到上线完整流程
图书管理系统 毕业设计 JAVA+Vue+SpringBoot+MySQL
Designer 小郑的技术博客
08-25 4233
基于Vue+SpringBoot+MySQL的图书管理系统，拥有图书馆模块、图书类型模块、图书模块、图书借阅模块、公告模块，同学们可以拿着个项目练练手，对 Vue 和 Spring Boot 框架有更清晰的认识。
基于Java+Springboot+Vue+elememt宠物用品商城系统设计实现
java李阳勇的博客
11-08 2万+
宠物用品商城系统的整体架构是在Windows操作系统中进行开发运用的，而且目前PC机的各项性能已经可以胜任普通网站的web服务器。系统开发所使用的技术也都是自身所具有的，也是当下广泛应用的技术之一。主要的操作对象是基于用户和管理员，系统采用经典的MVC三层架构，从上到下分别是，用户交互层--用户对象-应用服务层-应用支撑层-数据库系统--以及底层硬件和软件环境，这样一架构的话可以使得网站运行更具有稳定性和安全性，从而完成实现网站的开发。
基于vue+springboot的学生成绩管理系统
xc9711的博客
12-04 7248
前言 感觉自己对vue和springboot有了更深一层的理解，这几天就决定做一个基于vue+springboot的学生成绩管理系统。 本项目在最后将会在文章最后面发出来 框架 前端vue： vue-router：通过vue-router实现页面的跳转和数据传参 axios: 实现前端和后端数据交互 element-ui：构建页面 后端springboot： 采用了controller、service、mapper、配置文件分层的方式构建项目 数据库： 使用mysql 项目运行图片 登录： 注册：
基于SSM+Vue+SpringBoot+MySQL的旅游景点推荐管理系统
code51博客
09-20 985
首页信息文章详情线路美食推荐详细信息用户登录注册文章发布个人中心全部文章用户管理标签管理分类管理活动报名数据字典角色管理首页统计图表注册活动报名标签管理首页统计图文章列表技术描述开发工具： Idea/Eclipse 数据库： mysql Jar包仓库： Maven 前段框架： vue/ElementUI/echart 后端框架： Spring+SpringMVC+Mybatis+SpringBoot文章详情线路美食推荐详细信息用户登录注册文章发布。
基于vue+springboot+mysql 实现的图书馆管理系统
06-22
【作品名称】：基于vue+springboot+mysql 实现的图书馆管理系统 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】： 图书...
基于Vue+SpringBoot+MySQL的电子元器件管理系统源码+项目说明（包含元器件单位模块、元器件仓库模块）.zip
03-05
基于Vue+SpringBoot+MySQL的电子元器件管理系统源码+项目说明（包含元器件单位模块、元器件仓库模块、元器供应商模块、元器件品类模块、元器件明细模块、元器件采购模块、元器件采购审核模块、元器件领用模块）.zip ...
基于Springboot+Vue+Element-ui的精美个人博客系统
11-24
标题 "基于Springboot+Vue+Element-ui的精美个人博客系统" 涉及到的是一个现代Web应用的开发框架组合，主要包括三个核心技术：Spring Boot、Vue.js和Element UI。 Spring Boot是Spring框架的一个扩展，旨在简化Java...
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 339
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
vue3——利用自定义指令实现下拉框分页懒加载
zmy967131的博客
07-24 417
vue3——利用自定义指令实现下拉框分页懒加载
unplugin-vue-components 的作用是什么
最新发布
前端原创分享，常年坚持记录和分享，全网阅读量超百万
07-25 302
总的来说,unplugin-vue-components 通过自动化组件的导入过程,大大简化了 Vue 项目的开发流程,提高了开发效率和代码质量。自动导入组件:无需手动 import 和注册组件,插件会自动识别并按需导入使用到的组件。支持第三方UI库:内置了多个流行UI库的解析器,可以自动导入第三方组件库的组件。灵活的配置:可以通过配置文件自定义导入行为,如排除某些组件或添加自定义解析器。支持全局组件:可以设置某些组件为全局组件,在所有地方都可以直接使用。支持自定义组件目录:可以配置多个自定义的组件目录。
基于Vue+SpringBoot+MySQL的在线教育系统开发
这篇毕业设计论文主要探讨了基于Vue+SpringBoot+MySQL构建的在线教育系统，该系统充分利用了大数据时代的技术优势，以满足不断增长的在线教育需求。论文详细阐述了系统开发的全过程，包括可行性研究、需求分析、系统...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值