Spring Boot (Vue3+ElementPlus+Axios+MyBatisPlus +Spring Boot 前后端分离)

最新推荐文章于 2024-06-04 12:00:55 发布
最新推荐文章于 2024-06-04 12:00:55 发布
阅读量777 收藏 5
点赞数 3
分类专栏： Spring Boot 文章标签： spring boot mybatis vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60766221/article/details/126441041
版权

文章目录

1 项目介绍

1.1 项目功能/界面

● 项目操作界面

在这里插入图片描述

● 技术栈

前后端分离开发，前端主体框架 Vue3 + 后端基础框架 Spring-Boot

  1. 前端技术栈：Vue3+Axios+ElementPlus
  2. 后端技术栈：Spring Boot + MyBatis Plus
  3. 数据库-MySQL
  4. 项目的依赖管理-Maven
  5. 分页-MyBatis Plus 的分页插件

2 实现功能 01-搭建 Vue 前端工程

2.1 需求分析/图解

2.2 思路分析

● 使用 Vue3+Element-Plus 技术

2.3 代码实现

  1. 先下载 node.js LTS 并安装：node.js 的 npm，用于管理前端项目包依赖

    • 前面我们在学习 SSM_VUE 项目时，已经安装了 node.js
    • 文章链接

  2. 创建 Vue 项目

  • 创建 springboot_vue 项目，指令 vue create springboot_vue

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  • 选择你需要的插件

在这里插入图片描述

在这里插入图片描述

  • 选择路由模式

在这里插入图片描述

  • 选择项目依赖包管理方式

在这里插入图片描述

  • 选择是否保存本次设置

在这里插入图片描述

在这里插入图片描述

  • 回车开始创建项目，成功会提示如下界面

在这里插入图片描述

  • 启动项目-按给出指令执行即可

在这里插入图片描述

  • 启动项目成功， 会提示如下界面

在这里插入图片描述

  • 完成测试，浏览器访问

在这里插入图片描述

  1. 使用 idea 打开 springboot_vue 项目，并配置项目启动

    ① 直接将 springboot_vue 项目拖到 idea
    ② 配置 springboot_vue 使用 npm 方式启动

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  • 配置项目以 npm 启动时，自动打开首页

在这里插入图片描述

  1. 我们会使用到 element-plus ，停止项目，安装 element-plus 插件，element-plus 官方文档 https://element-plus.gitee.io/#/zh-CN/component/layout ，在该项目下执行安装指令

在这里插入图片描述

在这里插入图片描述

2.4 配置 Vue 服务端口

  1. 修改 D:\xjs_springboot_vue\springboot_vue\vue.config.js

在这里插入图片描述

const {
    defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
   
  transpileDependencies: true
})

module.exports = {
   
  devServer: {
   
    port: 9090 // 启动端口
  }
}
  1. 启动测试，可以看到现在是 9090 端口

在这里插入图片描述

3 实现功能 02-创建项目基础界面

3.1 需求分析/图解

3.2 思路分析

  1. 使用 Vue3+ElementPlus 完成

3.3 代码实现

  1. 修改 src/App.vue 成如下形式，会删除部分用不上的代码，增加<div></div>
<template>
  <div>
  </div>
</template>

<style>
</style>
  1. 修改 src/views/HomeView.vue
<template>
  <!--去掉 class="home"-->
  <div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
   
  name: 'HomeView',
  components: {
   
    // HelloWorld
  }
}
</script>
  1. 删除 src/components/HelloWorld.vue
  2. 创建 src/components/Header.vue
<template>
<!--  这里做了一些样式设置-->
  <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display:flex">
    <div style="width: 200px; padding-left: 30px; font-weight: bold; color: dodgerblue">后台管理</div>
    <div style="flex: 1"></div>
    <div style="width: 100px">下拉框</div>
  </div>
</template>

<script>
export default {
   
  name: "Header"
}
</script>

<style scoped>

</style>
  1. 修改 src/App.vue ，引入 Header 组件
<template>
  <div>
<!--引用组件-->
    <Header/>
  </div>
</template>

<style>
</style>

<script>
import Header from "@/components/Header";

export default {
   
  name: "layout",
  components: {
   
    Header
  }
}
</script>
  1. 创建全局的 global.css (先准备着, 后面有用) ，以后有全局样式就可以写在这里写，src/assets/css/global.css
* {
   
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  1. 修改 src/main.js ，引入 global.css
import {
    createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引入css
import css from '@/assets/css/global.css'

createApp(App).use(store).use(router).mount('#app')
  1. 修改 src/main.js ，引入 Element Plus ，并测试 , 如何引入，文档 https://element-plus.gitee.io/zh-CN/guide/quickstart.html

在这里插入图片描述

import {
    createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引入css
import css from '@/assets/css/global.css'

// 引入ElementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' //相关样式

createApp(App).use(store).use(router).use(ElementPlus).mount('#app')
  1. 修改 src/App.vue ，引入一个 el-button ，看看 ElementPlus 是否生效
<template>
  <div>
<!--引用组件-->
    <Header/>
    <el-button type="success">Success</el-button>
  </div>
</template>

<style>
</style>

<script>
import Header from "@/components/Header";

export default {
   
  name: "layout",
  components: {
   
    Header
  }
}
</script>

在这里插入图片描述

  1. 修改 src/components/Header.vue ，引入下拉框 参考文档
<template>
  <!--  这里做了一些样式设置-->
  <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display:flex">
    <div style="width: 200px; padding-left: 30px; font-weight: bold; color: dodgerblue">后台管理</div>
    <div style="flex: 1"></div>
    <div style="width: 100px">
      <el-dropdown>
    <span class="el-dropdown-link">
      tom
      <el-icon class="el-icon--right">
        <arrow-down/>
      </el-icon>
    </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
   
  name: "Header"
}
</script>

<style scoped>

</style>

在这里插入图片描述

  1. 创建侧边栏组件，并引入导航菜单组件，src/components/Aside.vue ，参考文档

在这里插入图片描述

在这里插入图片描述

<template>
  <div>
    <!--说明：先去掉这两个方法，否则会报错-->
    <!--        @open="handleOpen"-->
    <!--        @close="handleClose"-->
    <el-menu
        default-active="2"
        class="el-menu-vertical-demo">
      <el-sub-menu index="1">
        <template #title>
          <el-icon>
            <location/>
          </el-icon>
          <span>导航一</span>
        </template>
        <el-menu-item-group title="组一">
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="组二">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-sub-menu index="1-4">
          <template #title>选项4</template>
          <el-menu-item index="1-4-1">选项4-1</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <el-menu-item index="2">
        <el-icon>
          <icon-menu/>
        </el-icon>
        <span>导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <el-icon>
          <document/>
        </el-icon>
        <span>导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <el-icon>
          <setting/>
        </el-icon>
        <span>导航四</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
   
  name: "Aside"
}
</script>

<style scoped>

</style>
  1. 修改 src/App.vue ，将页面分成三个部分
<template>
  <div>
<!--引用组件 头部-->
    <Header/>
<!--引入组件 主体-->
    <div style="display: flex">
      <!--引入组件 侧边栏-->
      <Aside/>
      <!--内容区域 这个部分的内容是从HomeView.vue这个组件来的-->
      <router-view style="flex: 1"/>
    </div>

  </div>
</template>

<style>
</style>

<script>
import Header from "@/components/Header";
import Aside from "@/components/Aside";

export default {
   
  name: "layout",
  components: {
   
    Header,
    Aside
  }
}
</script>
  1. 修改 src/views/HomeView.vue ，加入一个 el-button，进行测试
<template>
  <!--去掉 class="home"-->
  <div>
    <el-button type="primary">Primary</el-button>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
   
  name: 'HomeView',
  components: {
   
    // HelloWorld
  }
}
</script>
  1. 看看主页面的效果，基本结构已经出来了

在这里插入图片描述

  1. 对主页面进行一个完善，比如导航栏的宽度，去掉不必要的子菜单等，修改 src/components/Aside.vue

在这里插入图片描述

<template>
  <div>
    <!--说明：先去掉这两个方法，否则会报错-->
    <!--        @open="handleOpen"-->
    <!--        @close="handleClose"-->
    <el-menu
        style="width: 200px"
        default-active="2"
        class="el-menu-vertical-demo">

        <el-sub-menu index="1-4">
          <template #title>选项4</template>
          <el-menu-item index="1-4-1">选项4-1</el-menu-item>
        </el-sub-menu>
      <el-menu-item index="2">
        <el-icon>
          <icon-menu/>
        </el-icon>
        <span>导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <el-icon>
          <document/>
        </el-icon>
        <span>导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <el-icon>
          <setting/>
        </el-icon>
        <span>导航四</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
   
  name: "Aside"
}
</script>

<style scoped>

</style>
  1. 修改 src/views/HomeView.vue ，引入表格，后面来显示数据，参考文档

在这里插入图片描述

<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"/>
      <el-table-column prop="name" label="姓名" width="180"/>
      <el-table-column prop="address" label="地址"/>
    </el-table>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
   
  name: 'HomeView',
  components: {
   },
  data() {
    //数据池
    return {
   
      tableData: []
    }
  }
}
</script>

在这里插入图片描述

  1. 可以发现，element-plus 默认是英文的，我们将其国际化一下，修改 src/main.js ，参考文档

在这里插入图片描述

import {
    createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引入css
import css from '@/assets/css/global.css'

// 引入ElementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' //相关样式

//引入国际化需要的组件
import zhCn from 'element-plus/es/locale/lang/zh-cn'

createApp(App).use(store).use(router).use(ElementPlus, {
   locale: zhCn,}).mount('#app')

在这里插入图片描述

  1. 修改 src/views/HomeView.vue ，从官网设置一些测试数据，并支持日期排序=> 参考文档

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

<template>
  <!--去掉 class="home"-->
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column sortable prop="date" label="日期" width="180"/>
      <el-table-column prop="name" label="姓名" width="180"/>
      <el-table-column prop="address" label="地址"/>
    </el-table>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
   
  name: 'HomeView',
  components: {
   },
  data() {
    //数据池
    return {
   
      tableData: [{
   
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
   
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
   
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
   
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  }
}
</script>
  1. 修改 src/views/HomeView.vue ，增加相关的操作按钮和搜索框，参考 el-input 组件文档， 表格的固定列文档

在这里插入图片描述

在这里插入图片描述

<template>

  <div>
    <!--新增的按钮-->
    <div style="margin: 10px 0">
      <el-button type="primary">新增</el-button>
      <el-button>其他</el-button>
    </div>

    <!--引入搜索框-->
    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder="请输入关键字" style="width: 30%"/>
      <el-button style="margin-left: 10px" type="primary">新增</el-button>
    </div>

    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column sortable prop="date" label="日期" width="180"/>
      <el-table-column prop="name" label="姓名" width="180"/>
      <el-table-column prop="address" label="地址"/>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text">删除</el-button>
        </template>
      </el-table-column>
    </e
最低0.47元/天 解锁文章
要学就学灰太狼
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
SSM (Vue3+ElementPlus+Axios+SSM 前后端分离)
要学就学灰太狼的博客
07-22 595
● SSM 整合项目界面● 技术栈 给项目配置 Tomcat，方式和前面将 javaweb 一样 如果 web.xml 的 报红，选择只是高亮 syntax 即可，本身没有问题，就是 DTD 的约束 配置视图解析器 两个常规配置 完成配置后的 springDispatcherServlet-servlet.xml 如下： 完成测试 创建 D:\xjs_ssm\furn-ssm\src\main\java\com\xjs\furn\controller
Spring boot+vue3+element plus实现后台管理系统
07-04
前后端分离项目，Spring boot作为后端，vue框架实现前端，后端整合swagger3测试工具，jwt实现验证码生成，awt生成图形验证码，整合邮箱验证，使用mybatis-generator自动生成实体类以及mapper，设置有拦截器验证登录状态，设置有跨域访问，MVVM设计模式，前后端联通使用axios（ajax框架），前端使用element plus组件库，统一采用路由方式跳转，设置有拦截器判断登录状态。
vue3+element-plus+springboot 表单多文件上传
最新发布
qq_43414269的博客
06-04 630
在你的场景中，前端发送的multipart/form-data包含了JSON字符串化的djOrderTourDto，这部分数据需要先从multipart/form-data中提取出来，然后才能用Fastjson进行反序列化。从multipart/form-data中提取JSON字符串： 后端需要从请求中获取djOrderTourDto字段，这通常通过@RequestPart注解完成，因为@RequestParam通常用于处理简单的表单字段，而不是multipart/form-data中的部分。
Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【二】
m0_73557631的博客
08-25 2666
前后端分离开发, 前端主体框架Vue3 + 后端基础框架Spring-Boot前端技术栈: Vue3+Axios+ElementPlus后端技术栈: Spring Boot + MyBatis Plus数据库-MySQL项目的依赖管理-Maven分页-MyBatis Plus 的分页插件。
SpringBoot+VUE3+ts+pina+Activiti7工作流+Quartz定时器【企业快速开发框架】
做Java整整10年，目前是教别人写代码，嘿嘿
07-22 788
SpringBoot+VUE3+ts+pina+Activiti7工作流+Quartz定时器【企业快速开发框架】
【6】【vue3+elementplus+springboot+mybatisplus】 管理系统 【前后端实践】
qq_53478650的博客
02-02 3506
代码主要分成四部分，第一部分我们需要放在template里面，第二部分是选择按需部分引入的方式，我们可以不管，第三部分是放在script里的data部分里面也就是提供页面的数据，具体填入形式如下。注意：vue3不支持elementUI，所以选择以下搭配其中之一（这里我选的是2）查看示例的代码，这里选择手动引入（elementplus还支持自动按需引入）点击布局容器可以看到示例，我们选择使用最下面的侧边栏的示例代码。第四部分是页面的样式，不重要，我们可以不使用。点击官网上方菜单栏的组件，点击。
Spring Boot 3 + Vue 3前后端分离保姆级学习型新闻项目
07-12
一套基于时下最新 Java 技术栈 Spring Boot 3 + Vue 3 开发的前后端分离学习型新闻项目，配备保姆级项目开发教程手把手教你从零开始开发上线一个生产级别的 Java 系统。由新闻门户系统、作者后台管理系统、平台后台...
简单的spring boot+vue前后端分离项目
03-30
本项目“简单的spring boot+vue前后端分离项目”旨在帮助初学者理解如何结合Spring Boot和Vue.js实现这一模式。下面，我们将深入探讨这两个关键技术以及它们在项目中的应用。 **Spring Boot** Spring Boot是Java...
登录和注册 前端：vue3+iview plus +axios 后台：spring boot +mybatis
04-26
本项目结合了前沿的前端技术和强大的后端框架，旨在提供一个高效、安全的用户认证系统。以下是基于所给标题、描述和标签的详细知识点讲解： ...同时，良好的前后端分离设计也有利于项目的扩展和维护。
Spring Boot + Vue 前后端分离博客系统源码.zip
05-26
Spring Boot可以轻松地创建RESTful API，Vue则通过axios或其他HTTP客户端库来调用这些API，实现前后端数据交换。 **6. JWT（JSON Web Token）认证** 为了实现用户身份验证，项目可能采用了JWT。JWT是一种轻量级的...
个人博客-SpringBoot+Vue3项目实战（6）- 二次封装Axios
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
05-28 1042
在上文中，我们封装了统一的后端数据返回结果，有了标准化的接口数据，我们就可以针对它，在前端发送接收时，进行预处理。通常在一个企业级或者个人开源的项目中，Axios会被二次封装。二次封装的好处有哪些呢？统一url配置统一api请求request(请求)拦截器，例如：带上token等，设置请求头response(响应)拦截器，例如：统一错误处理，页面重定向等统一处理http错误码code错误码。
vue3+TypeScript+pinia+axios项目配置
m0_64387562的博客
02-20 470
vue3+ts+pinia+px转rem项目搭建
SpringBoot+Vue+axios实现增删改查分页全套代码
lu__lala的博客
05-16 2246
src下创建此目录 api目录下创建js文件引入axios //引入axios的对象 import request from '../utils/request' export function getUser(page,size,name) { return request({ url: '/getUserList', method: 'get', params:{ page, size
基于 SpringBoot + Vue3.2 + Element Plus 的后台管理系统
默存
12-28 8493
简介 TANSCI 基于 SpringBoot + Vue3.2 + Element Plus 的后台管理系统。 包含基础模块：菜单管理、角色管理、组织管理、用户管理、字典管理、日志管理（操作日志、异常日志） Gitee: https://gitee.com/typ1805/tansci GitHup: 架构 技术栈 1、环境要求 名称 版本号 描述 JDK 1.8+ 强制要求 mysql 5.7+ 数据库 node 14.16+ 前端环境要求 npm 6.14+ 前端框架包管理
SSM(Vue3+ElementPlus+Axios+SSM前后端分离)-架子搭建
业精于勤，荒于嬉
05-13 2774
1) 梳理Vue3 最重要的路由机制, 理解后就清晰很多因为我们是前后端分离 tomato需要8080这里我们就更改VUE的端口了。技术栈 说明: 前后端分离开发, 前端框架Vue + 后端框架SSM 前端框架Vue。 后台框架-SSM（SpringMVC+Spring+MyBatis） 数据库-MySQL。使用逆向工程生成Bean、XxxMapper 和XxxMapper.xmlSSM(Vue3+ElementPlus+Axios+SSM前后端分离)--架子搭建 vue3的结构 和介绍以及使用和解决了中文
（一）前端环境搭建---基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建
wdyan297的博客
01-14 8236
这里是为2023届学生完成一个管理系统（主要是后台）的连续更新博客。持续时间为20天，每日练习时间约2-3小时。默认已有系统开发的基础知识，如SpringBoot、数据库、HTML、CSS、JavaScript等，连载过程中，遇到细节问题也可以咨询。QQ群：1140508453。视频将在B站推出。
vue3+element-plus实现动态菜单和动态路由动态按钮的后台权限管理系统（前后端分离）
热门推荐
m0_72618563的博客
08-10 1万+
使用addRoute实现动态路由，使用递归实现动态菜单渲染，使用v-if实现动态按钮
Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】
m0_73557631的博客
08-28 1233
😀前言本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】，希望你能够喜欢🧑个人简介：大家好，我是晨犀，希望我的文章可以帮助到大家，您的满意是我的动力😉😉。
前端vue2+axios后端spring boot+mybatisplus怎么实现分页查询
04-27
在前端使用axios发送分页查询请求时，需要设置请求参数，包括当前页码和每页显示的记录数。假设每页显示10条记录，当前页码为2，请求参数可以设置为： ```javascript { page: 2, limit: 10 } ``` 在后端使用Spring Boot和MyBatis Plus实现分页查询的步骤如下： 1. 在MyBatis Plus的Mapper接口中定义分页查询方法，例如： ```java List<User> selectUserPage(Page<User> page); ``` 2. 在Service层中调用Mapper中的分页查询方法： ```java @Override public IPage<User> getUserPage(int page, int limit) { Page<User> userPage = new Page<>(page, limit); userMapper.selectUserPage(userPage); return userPage; } ``` 3. 在Controller层中接收前端发送的分页查询请求参数，调用Service层中的分页查询方法，将查询结果封装成JSON格式返回给前端： ```java @GetMapping("/user") public Result getUserPage(@RequestParam(name = "page") int page, @RequestParam(name = "limit") int limit) { IPage<User> userPage = userService.getUserPage(page, limit); return Result.success(userPage); } ``` 4. 在前端使用axios发送分页查询请求，接收后端返回的JSON格式数据，渲染分页列表： ```javascript axios.get('/user', { params: { page: 2, limit: 10 } }).then(response => { console.log(response.data); // 渲染分页列表 }).catch(error => { console.log(error); }); ``` 以上就是实现前端Vue2和后端Spring Boot、MyBatis Plus的分页查询的步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

要学就学灰太狼

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

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

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

打赏作者

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

抵扣说明：

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

余额充值