项目结尾部分

最新推荐文章于 2022-11-19 20:10:34 发布
最新推荐文章于 2022-11-19 20:10:34 发布
阅读量227 收藏 2
点赞数 1
文章标签： java 数据库 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53324833/article/details/120646479
版权

前言

这差不多应该是这个项目的完结篇啦，加油！！！

完善项目

现在我们已经实现了用户的新增功能，数据库中也有了数据的写入，那么现在我们就要实现从数据库中拿出数据展现在前端了。
怎么拿？同样是在后端服务器中的控制器中写上findPage接口，我们定义的是用户可以通过昵称来查找对应的用户：

//查询用户，用Get命令,且是分页查询
    /**
     * 分页查询，需要前台传过来三个参数，@RequestParm注解就是解析参数用的，如果不加后面的defaultValue设置
     * 默认的话，则请求时必须携带三个参数，不然就会报404错误
     * 第一个参数pageNum就是当前页的页码
     * 第二个参数pageSize就是每页多少条数据
     * 第三个参数search就是查询的关键字
     * @param pageNum
     * @param pageSize
     * @param search
     * @return
     */
    @GetMapping
    public Result<?> findPage(@RequestParam(defaultValue = "1") Integer pageNum,
                              @RequestParam(defaultValue = "10") Integer pageSize,
                              @RequestParam(defaultValue = "") String search){
        //下面这些操作都是Mp提供的，不懂的就需要自己去了解学习了
        //分页模糊查询,结果放在Result里面直接返回出去
        return Result.success(userMapper.selectPage(new Page<>(pageNum, pageSize),Wrappers.<User>lambdaQuery().like(User::getNickName,search)));
    }

测试访问：
在这里插入图片描述

查询成功。
现在我们要做的就是把从后端传过来的数据放到前端去经过渲染后呈现出来就行了，所以现在去前端的Home.vue文件进行代码的编写。
可以看见我们前端表单数据的呈现全部放在了一个叫“tableData”的变量里面：
在这里插入图片描述
我们只要将我们后端传送过来的值放在这个变量里面就可以完成渲染。
先在methods内部定义一个load方法，即查询方法：
在这里插入图片描述
然后让其在页面被加载时就启动，在与methods的同级位置写上created就可以了：
在这里插入图片描述

注意前面有个地方需要改动，就是下面这里，原来的total和pageSize得改成对应的变量，然后变量要在下面的组件中进行声明。
改为变量：
在这里插入图片描述
声明变量：
在这里插入图片描述
这一阶段完整的代码：

<template>
  <!--padding设置一点内边距-->
  <div style="padding: 10px">
    <!--功能区域-->
    <div style="margin: 10px 0">
      <el-button type="primary" @click="add">新增</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
    </div>

    <!--搜索区域-->
    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%"/>
      <el-button type="primary" style="margin-left: 5px">搜索</el-button>
    </div>


    <!--后面的width可以不写，浏览器会自适应
    stripe是斑马纹效果-->
    <el-table :data="tableData" border stripe style="width: 100%">
      <!--sortable让日期排序-->
      <el-table-column prop="id" label="ID" sortable/>
      <el-table-column prop="username" label="用户名"/>
      <el-table-column prop="nickName" label="昵称" />
      <el-table-column prop="age" label="年龄"/>
      <el-table-column prop="sex" label="性别"/>
      <el-table-column prop="address" label="地址"/>

      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>

          <!--弹出消息确认框-->
          <el-popconfirm
                  confirm-button-text="是的，没错"
                  cancel-button-text="妈的，我再想想"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除吗？">
            <template #reference>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
            </template>
          </el-popconfirm>
      </template>
    </el-table-column>
    </el-table>

    <!--分页功能区域-->
    <div style="margin: 10px 0">
      <el-pagination
              v-model:currentPage="currentPage4"
              :page-sizes="[5,10,20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
      </el-pagination>
    </div>

    <!--弹窗输入用户信息-->
    <el-dialog v-model="dialogVisible" title="提示" width="30%">
      <!--定义表单在这个弹出框内以收集新增的用户信息-->
      <el-form :model="form" label="用户名">
        <el-form-item label="用户名">
          <el-input v-model="form.username" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="form.nickName" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="form.sex" label="男">男</el-radio>
          <el-radio v-model="form.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address" style="width: 80%"></el-input>
        </el-form-item>

      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>


import request from "../utils/request";

export default {
  name: 'Home',
  components: {

  },
    data() {
        return {
            form: {},
            dialogVisible: false,
            search: '',
            //当前页
            currentPage4: 1,
            pageSize: 10,
            total: 0,
            tableData: [

            ],
        }
    },
    //表示在页面被加载的时候，在这个方法里面的方法就全部调用
    created() {
      this.load()
    },
    methods: {
      //查询方法
      load(){
          request.get("/api/user",{
              pageNum: this.currentPage4,
              pageSize: this.pageSize,
              search: this.search
          }).then(res => {
              console.log(res)
              this.tableData = res.data.records
              this.total = res.data.total
          })
      },
        add(){
          this.dialogVisible = true;
          //清空表单域
          this.form = {};
        },
        save(){
          //这里我们就需要将保存起来的数据传入到后台中，运用Axios
            request.post("/api/user",this.form).then(res => {
                console.log(res)
            })
        },
        handleEdit(){

        },
        handleDelete(){

        },
        handleSizeChange(){
        //    改变页码时触发函数

        },
        handleCurrentChange(){
        //  当前页改变时触发代码
        }
    }
}
</script>

访问可以看到已经查询出来了：
在这里插入图片描述
点击查询发现查不出东西，这是因为我们还没有对查询进行单击事件绑定，接下里我们就去做这件事情，给搜索按钮增加单击绑定事件：
在这里插入图片描述
让该按钮被单击时自动调用load方法，然后为了让其携带参数，我们还需要在下面的load方法中写上：
在这里插入图片描述
访问搜索：
在这里插入图片描述
可以看到张三已经被查出来了，这里有一个作用在搜索框中的一键清除内容的小技巧，就是在搜索框内加一句话：
在这里插入图片描述
现在点击下图中的叉叉，即可以一键清除：
在这里插入图片描述
然后增删改查中还有更新和删除操作，感觉都差不多，我就不详细说了，而且因为中间对前端页面的样式调节过于繁杂，一步一步说太繁琐了，所以直接贴源码了，里面都有写对应的注释，有兴趣的话可以自己钻研一下：
控制层源码：

package com.why.demo.controller;

import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.why.demo.common.Result;
import com.why.demo.entity.User;
import com.why.demo.mapper.UserMapper;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;

@RestController //返回json格式字符串的注解
@RequestMapping("/user")
public class UserController {

    //理论上应该用三层架构，controller调用service，service调用dao的，这里图方便就直接在controller调了
    @Resource
    UserMapper userMapper;


    //新增用户，即访问/user即可
    @PostMapping
    //@RequestBody就是把前台传过来的json数据转换成Java对象
    public Result save(@RequestBody User user){
        if(user.getPassword() == null){
            user.setPassword("123456");
        }
        userMapper.insert(user);
        return Result.success();
    }

    //删除用户，根据id删除
    @DeleteMapping("/{id}")
    //@PathVariable就是把前台通过{id}占位符传过来的数据解析成Long类型的id值
    public Result delete(@PathVariable Long id){
        userMapper.deleteById(id);
        return Result.success();
    }

    //更新用户，即访问/user即可
    @PutMapping
    //@RequestBody就是把前台传过来的json数据转换成Java对象
    public Result update(@RequestBody User user){
        userMapper.updateById(user);
        return Result.success();
    }

    //查询用户，用Get命令,且是分页查询
    /**
     * 分页查询，需要前台传过来三个参数，@RequestParm注解就是解析参数用的，如果不加后面的defaultValue设置
     * 默认的话，则请求时必须携带三个参数，不然就会报404错误
     * 第一个参数pageNum就是当前页的页码
     * 第二个参数pageSize就是每页多少条数据
     * 第三个参数search就是查询的关键字
     * @param pageNum
     * @param pageSize
     * @param search
     * @return
     */
    @GetMapping
    public Result<?> findPage(@RequestParam(defaultValue = "1") Integer pageNum,
                              @RequestParam(defaultValue = "10") Integer pageSize,
                              @RequestParam(defaultValue = "") String search){
        //下面这些操作都是Mp提供的，不懂的就需要自己去了解学习了
        //分页模糊查询,结果放在Result里面直接返回出去
        return Result.success(userMapper.selectPage(new Page<>(pageNum, pageSize),Wrappers.<User>lambdaQuery().like(User::getNickName,search)));
    }

}

Home.vue中的源码：

<template>
  <!--padding设置一点内边距-->
  <div style="padding: 10px">
    <!--功能区域-->
    <div style="margin: 10px 0">
      <el-button type="primary" @click="add">新增</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
    </div>

    <!--搜索区域-->
    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%" clearable/>
      <el-button type="primary" style="margin-left: 5px" @click="load">搜索</el-button>
    </div>


    <!--后面的width可以不写，浏览器会自适应
    stripe是斑马纹效果-->
    <el-table :data="tableData" border stripe style="width: 100%">
      <!--sortable让日期排序-->
      <el-table-column prop="id" label="ID" sortable/>
      <el-table-column prop="username" label="用户名"/>
      <el-table-column prop="nickName" label="昵称" />
      <el-table-column prop="age" label="年龄"/>
      <el-table-column prop="sex" label="性别"/>
      <el-table-column prop="address" label="地址"/>

      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>

          <!--弹出消息确认框-->
          <el-popconfirm
                  confirm-button-text="是的，没错"
                  cancel-button-text="妈的，我再想想"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
      </template>
    </el-table-column>
    </el-table>

    <!--分页功能区域-->
    <div style="margin: 10px 0">
      <el-pagination
              v-model:currentPage="currentPage4"
              :page-sizes="[5,10,20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
      </el-pagination>
    </div>

    <!--弹窗输入用户信息-->
    <el-dialog v-model="dialogVisible" title="提示" width="30%">
      <!--定义表单在这个弹出框内以收集新增的用户信息-->
      <el-form :model="form" label="用户名">
        <el-form-item label="用户名">
          <el-input v-model="form.username" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="form.nickName" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="form.sex" label="男">男</el-radio>
          <el-radio v-model="form.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address" style="width: 80%"></el-input>
        </el-form-item>

      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>


import request from "../utils/request";

export default {
  name: 'Home',
  components: {

  },
    data() {
        return {
            form: {},
            dialogVisible: false,
            search: '',
            //当前页
            currentPage4: 1,
            pageSize: 10,
            total: 0,
            tableData: [

            ],
        }
    },
    //表示在页面被加载的时候，在这个方法里面的方法就全部调用
    created() {
      this.load()
    },
    methods: {
      //查询方法
      load(){
          request.get("/api/user",{
              params: {
                  pageNum: this.currentPage4,
                  pageSize: this.pageSize,
                  search: this.search
              }
          }).then(res => {
              console.log(res)
              this.tableData = res.data.records
              this.total = res.data.total
          })
      },
        add(){
          this.dialogVisible = true;
          //清空表单域
          this.form = {};
        },
        save(){
          if(this.form.id){  //更新操作
              request.put("/api/user",this.form).then(res => {
                  console.log(res)
                  if(res.code == '0'){
                      //element给我们提供了一个可以供显示的结果的东西，如下
                      this.$messageBox({
                          type: "success",
                          message: "更新成功"
                      })
                  }else{
                      //element给我们提供了一个可以供显示的结果的东西，如下
                      this.$messageBox({
                          type: "error",
                          message: res.msg
                      })
                  }
              })
              this.load() //每一次更新后都自动刷新表格
              this.dialogVisible = false //关闭弹窗
          }else{ //新增操作
              request.post("/api/user",this.form).then(res => {
                      console.log(res)
                      if (res.code == '0') {
                          //element给我们提供了一个可以供显示的结果的东西，如下
                          this.$messageBox({
                              type: "success",
                              message: "新增成功"
                          })
                      } else {
                          //element给我们提供了一个可以供显示的结果的东西，如下
                          this.$messageBox({
                              type: "error",
                              message: res.msg
                          })
                      }
                      this.load() //每次新增完都自动刷新表格
                      this.dialogVisible = false //关闭弹窗
                  }
              )}
        },
        handleEdit(row){
            this.form = JSON.parse(JSON.stringify(row))
            this.dialogVisible = true
        },
        handleDelete(id){
            console.log(id)
            request.delete("/api/user/"+id).then(res =>{

                if (res.code == '0') {
                    //element给我们提供了一个可以供显示的结果的东西，如下
                    this.$messageBox({
                        type: "success",
                        message: "删除成功"
                    })
                } else {
                    //element给我们提供了一个可以供显示的结果的东西，如下
                    this.$messageBox({
                        type: "error",
                        message: res.msg
                    })
                }
                this.load() //删除之后重新加载表格的数据
            })
        },
        handleSizeChange(pageSize){
        //    改变当前每页的数据条数时触发
            this.pageSize = pageSize
            this.load()
        },
        handleCurrentChange(pageNum){
        //  改变当前页码时触发
            this.currentPage4 = pageNum
            this.load()
        }
    }
}
</script>

总结

到这一个简单的后台管理系统的页面就基本全部完成啦，增删改查四个功能全部拥有，好累，不过还是成就感满满！！！还要继续努力，离成为一名合格的开发人员还任重道远呐…干就完事儿了！

在地球迷路的怪兽
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
第七讲 项目的收尾代码
uiopmn1的博客
08-04 481
本系列使用一个实际的案例，教你如何使用C#联合halcon。
项目结尾
Slamande的博客
08-30 144
今天我们开学了！ 来到了久违的小组。 几天前，我们的项目到了尾声，25号晚上一起把自己写的内容，欠缺的部分开会讨论了一下，还是找出了很多细节的不足，让我头疼的按照时间搜索一直被落到了最后，现在也是…我知道困难的更应该放在前面，我以后一定要改变这个陋习，敢于先去解决困难才是正道。 还有一个小问题困扰着，感觉应该几行代码可以解决的，而我却还是未能完成，当img里的src是unknown时，如何替换成另外的图片，有onerror直接进行改变，有遍历img当它为空后进行改变，但是都未能完成。onerror会一直获取
java findpage 方法_Hibernate 自定义查询卡死情况解决
weixin_34641420的博客
02-27 619
1.在Question类中这样配置： @OneToMany(fetch=FetchType.LAZY) @JoinColumn(name="question_id") @OrderBy(value="create_time desc") private SetHibernate 自定义查询卡死情况解决我们使用hibernate查询的时候经常会遇到多查询几次卡死的问题，其实这里主要是sessi...
java findpage 方法_hibernate下SQLQuery返回BigInteger而不是Long的问题
weixin_36313293的博客
03-04 560
使用数据库为mysql5.1.6，hibernate版本为4.3.11.Final。遇到问题：在使用hibernate的SQLQuery执行sql查询时，执行count语句或者查询数据库中的bigint(20)类型数据，返回的BigInteger类型，不是Long类型。然而在使用hibernate的Query执行hql查询时，返回的都是Long类型。甚至于使用原生的JDBC方法，获取的结果类型也是...
分页查询数据说明
qq_41849780的博客
09-24 266
分页查询 sql： <select id="findPageData" resultType="user"> select * from t_user limit #{pageIndexes},#{pageCount} </select> dao： ```java List<User> findPageData(Map<String ,Integer> hashMap) ; test： UserDao userDao = sqlSessi.
IT项目验收报告模板
12-07
在本模板中，验收报告部分包括验收报告标题、验收报告正文和结尾部分等内容。 项目移交清单 项目移交清单是项目经理或项目团队成员在项目完成后，移交给客户或甲方的清单。项目移交清单应该包括系统、工具移交清单...
Sensool:第22组研究项目的结尾-Sensool（ECE巴黎）
05-25
第22组研究项目的结尾-Sensool（ECE巴黎） 该团队由以下人员组成： Gaultier JOUSSELIN（项目经理） 杰罗姆·德尔图 巴蒂斯特·彼勒（Baptiste PILLET） 路易斯·格曼尼库斯 皮埃尔·巴尔兰德 保罗·巴赞 项目...
unitTesting:这是 Taskbook 项目的一部分
06-20
这是测试系统的核心部分。 主要方法可以在“sitelogic”包中找到。 名称以“.TaskRunner”结尾的类。 在工作版本中，它们将与从网页中以 JSON 格式获取信息并将其转换为 HashMap<Param> 的类一起删除。 HashMap...
PMC项目管理.ppt
02-11
项目管理过程是指项目管理的步骤和方法，包括项目的计划、执行、控制和结尾等。项目管理技术是指项目管理的工具和方法，包括项目管理软件、项目管理模板、项目管理指南等。 PMC项目管理是一种系统化和标准化的项目...
crowdhome:可康项目
04-11
电子商务Complate App-Flutter UI 在我们完整的电子商务应用程序的第一部分中，我们将向您展示如何为您的电子商务应用程序创建一个漂亮的，干净的入门屏幕，该屏幕可以同时运行Andriod和iOS设备，因为它的构建过程...
screenshot and find pageTag-crx插件
04-04
语言:中文 (简体) make work easily 1、快速学习掌握业务 可快速搜索出应用有几个页面，每个页面下的功能点，点击功能点可以查看开发、测试对该功能点的说明； 同时可以快速查看网站上受其影响的其他应用的功能点。2、提高沟通效率 点击pagetag插件中“查询标签”按钮，可以看到他人对该页面的标注信息。让你的文档在需要的地方被需要的人看到。3、提高PD、开发、测试协同工作效率 pd可以更加精简的编写需求，同时项目做完之后自动沉淀项目文档。
JPA分页查询
weixin_38708854的博客
05-19 723
1、Dao层自定义函数 2、service层获取分页参数
Element UI库的入门使用
wewewe14的博客
07-16 841
Element UI 有的 ul 库在 style 上添加 scoped 后可能会导致自定义样式失效。element ui 可以支持 scoped 多用于管理系统的开发，有明确设计稿的情况下一般不方便使用 ui 库。 官方文档 开始一个 element 项目 安装 基于@vue/cli 3+ 安装 一定要选择按需安装。 命令行安装： vue add element vue ui 安装：vue-cli-plugin-element （在安装了插件后需要重启项目） (强烈推荐使用 vue ui 安装，一定要选择
基于Vue3 setup单文件组件实例
Zhouyuding_yyds的博客
06-13 2026
Springboot-Vue-Data Jpa实现简单的CURD
m0_70274918的博客
05-03 246
// 修改用户 @PutMapping public Result update(@RequestBody User user) { userService.save(user); return Result.success(); } // 删除用户 @DeleteMapping(“/{id}”) public void delete(@PathVariable(“id”) Long id) { userService.delete(id); } // 根据id查询用户 @GetMapping(“/{id}
vue入门
m0_51634541的博客
02-13 573
Vue从入门到深度学习 Vue入门 项目结构 后端 前端 项目结构码) MybatisPlusConfig.java package com.example.demo.common; import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor; import org.mybatis.spring.annotation.MapperScan; import org.springframework.context.anno
springboot+vue
qq_48602526的博客
11-19 8644
用springboot+vue做的一个简单的练手项目
品优购分页显示品牌
看不懂的人的博客
08-19 694
效果图 品牌列表分页的实现 3.1需求分析 在品牌管理下方放置分页栏，实现分页功能 3.2后端代码 3.2.1 分页结果封装实体 在pinyougou-pojo工程中创建entity包，用于存放通用实体类，创建类PageResult package com.pinyougou.entity; import java.io.Serializable; import java.u...
python项目源代码
最新发布
01-18
Python项目源代码通常是用Python编程语言编写的程序代码文件的集合。这些源代码文件包括Python文件（以.py结尾）和其他相关文件，如配置文件、数据文件等。 Python项目的源代码通常包括以下内容： 1. 源代码文件：主要是以.py为扩展名的Python程序文件，其中包括项目的主要代码逻辑和功能实现。这些文件通常包括模块、类、函数、变量等代码实现。 2. 配置文件：项目可能会包括一些配置文件，用于设置项目运行时的环境变量、参数等。这些配置文件可以是文本文件、JSON文件、YAML文件等。 3. 数据文件：项目可能需要用到一些数据文件，例如CSV文件、文本文件、数据库文件等。这些数据文件通常包含程序运行所需的数据信息。 4. 文档文件：Python项目通常包括一些文档文件，用于描述项目的功能、使用方法、API接口等内容。这些文档文件可以是README文件、文档网页、API文档等。 Python项目的源代码通常遵循一定的代码规范和风格，以保证代码的可读性和可维护性。源代码文件通常包括注释、命名规范、代码缩进、代码结构等内容。 总的来说，Python项目的源代码是项目的核心部分，包含了项目的主要功能实现和逻辑代码，是项目运行的基础。通过阅读和理解源代码，可以深入了解项目的实现原理和功能特性，是学习和使用Python项目的重要途径之一。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

在地球迷路的怪兽

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

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

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

打赏作者

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

抵扣说明：

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

余额充值