小白学习 spring boot 与 web开发实验（根据尚硅谷视频教程，防遗忘）

最新推荐文章于 2022-04-29 08:29:52 发布
最新推荐文章于 2022-04-29 08:29:52 发布
阅读量504 收藏 3
点赞数
分类专栏： spring boot学习 文章标签： java web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39602487/article/details/107214514
版权

1.

在这里插入图片描述

2.

在这里插入图片描述

3.

在这里插入图片描述

4.打开pom文件引入webjars依赖

        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.3.1</version>
        </dependency>

5.在（当前目录）静态资源resources文件夹下创建两个文件夹：public，resources

在这里插入图片描述

6.将实验路径下的asserts文件夹放入static文件夹下

在这里插入图片描述
在这里插入图片描述
如上图放入后界面显示

7. （默认）首页访问

在静态资源文件夹下的public里面创建index.html
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<link rel="icon" href="/resources/favicon.ico" >
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
  <h1>首页</h1>
</body>
</html>

spring boot默认会访问静态资源文件夹下的所有index.html页面。
输入 http://localhost:8080/ 网页显示如下
在这里插入图片描述

8.图标修改

将静态资源目录下的resources文件夹里加入favicon.ico文件（见实验文件）
在这里插入图片描述
图标显示如图
在这里插入图片描述

9.导入网页模板引擎Thymeleaf

引入依赖

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

若引入依赖右键pom文件界面Reimport后
在这里插入图片描述
仍然出现spring-boot-starter-thymeleaf报错红标。
则需要打开idea的settings界面搜索maven
在这里插入图片描述
找到该路径下的settings.xml文件将源改为阿里源。
重新关闭打开工程。

10.Thymeleaf的使用

（1）success.html的显示

在HellorController下添加如下代码：

package com.example.demo.Controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.Arrays;
import java.util.Map;

@Controller //@Controller配置后当前网页根路径 为thymeleaf 配置的html文件路径 （默认是在templates）
public class HelloController {

    @ResponseBody
    @RequestMapping("/hello")
    public String hello(){
        return "hello wdsssss";
    }

    @RequestMapping("/success") //success.html文件在网页显示的路径
    public String success(Map<String,Object> map){
        map.put("hello","你好啊");
        map.put("users", Arrays.asList("zhangsan","lisi","wangwu"));
        return "success"; //返回到success.html文件
    }
}

success.html代码如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF‐8">
    <title>Title</title>
</head>
<body>
<h1>成功！</h1>
<!--th:text 中text的内容替换"这是显示欢迎信息"-->
<!--<div th:text="${hello}">这是显示欢迎信息</div>-->
<div id="div01" class="myDiv" th:id="${hello}" th:class="${hello}" th:text="${hello}">huanas</div>
<hr/>
<div th:text="${hello}"></div>
<div th:utext="${hello}"></div>
<hr/>

<h4 th:text="${user}" th:each="user:${users}" ></h4>
<hr/>

<h4>
   <span th:each="user:${users}" > [[${user}]] </span>
</h4>


</body>
</html>

在这里插入图片描述

11.引入资源

将实验文件里的dao和entities复制加入工程
在这里插入图片描述
在这里插入图片描述

1.访问crud首页

将实验文件里的四个html文件加入工程的静态资源路径的templates下
（Thymeleaf默认路径），才能首使用Thymeleaf引擎。

将index.html重命名为login.html

在这里插入图片描述
修改HelloController文件加入login（）方法，设置login.html为首页
完整代码如下：

package com.example.demo.Controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.Arrays;
import java.util.Map;

@Controller //@Controller配置后当前网页根路径 为thymeleaf 配置的html文件路径 （默认是在templates）
public class HelloController {

    @RequestMapping({"/","/login.html"})//{"/","/index.html"}
    public String login(){
        return "login";
    }

    @ResponseBody
    @RequestMapping("/hello")
    public String hello(){
        return "hello wdsssss";
    }

    @RequestMapping("/success") //success.html文件在网页显示的路径
    public String success(Map<String,Object> map){
        map.put("hello","你好啊");
        map.put("users", Arrays.asList("zhangsan","lisi","wangwu"));
        return "success"; //返回到success.html文件
    }


}

在浏览器输入 http://localhost:8080/，显示如下
在这里插入图片描述

2.引入webjars下的bootstrap资源

根据之前引入的webjars路径来修改login.html的路径
在这里插入图片描述

		<!-- Bootstrap core CSS -->
		<link href="asserts/css/bootstrap.min.css"  th:href="@{/webjars/bootstrap/4.5.0/css/bootstrap.css}" rel="stylesheet">
		<!-- Custom styles for this template -->
		<link href="asserts/css/signin.css"  th:href="@{asserts/css/signin.css}" rel="stylesheet">
	</head>

	<body class="text-center">
		<form class="form-signin" action="dashboard.html">
			<img class="mb-4"   th:src="@{asserts/img/bootstrap-solid.svg}"  src="asserts/img/bootstrap-solid.svg" alt="" width="72" height="72">

通过 th： 这样修改路径的好处是通过THymeleaf改写路径能够在修改项目的访问名后自动加载修改的项目路径。如：

直接在项目配置文件中修改访问名（改为/crud）
在这里插入图片描述
输入http://localhost:8080/crud/ 直接访问首页
在这里插入图片描述

12.登录页面的国际化

1.编写国际化配置文件

在静态资源（resources）下新建i18n文件夹，并在里面创建需要国际化页面的配置文件login.properties（默认）和 login_zh_CN.properties（具体语言）
之后idea 会自动添加国际化视图。
在这里插入图片描述
在该路径下创建英文配置文件
在这里插入图片描述
在这里插入图片描述
编辑配置文件
在这里插入图片描述

在这里插入图片描述
点击加号配置如下文件
在这里插入图片描述
分别对应login页面的五处
在这里插入图片描述

2.SpringBoot自动配置管理国际化资源文件的组件；

在login.html里修改：
在这里插入图片描述
login页面就会根据浏览器环境语言切换语言
在这里插入图片描述

3.手动切换国际化语言

修改login.html
在这里插入图片描述

在demo下新建文件夹component，并在里面创建MyLocaleResolver
在这里插入图片描述
在该文件中加入如下代码：

/**
 * 可以在连接上携带区域信息
 */
public class MyLocaleResolver implements LocaleResolver {
    @Override
    public Locale resolveLocale(HttpServletRequest request) {
        String l = request.getParameter("l");
        Locale locale = Locale.getDefault();
        if(!StringUtils.isEmpty(l)){
            String[] split = l.split("_");
            locale = new Locale(split[0],split[1]);
        }
        return locale;
    }
    @Override
    public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale
            locale) {
    }


}

在MyMvConfig的类中添加如下代码：

    @Bean
    public LocaleResolver localeResolver(){
        return new MyLocaleResolver();
    }

运行工程，刷新网页，就可根据手动点击切换语言
在这里插入图片描述
在这里插入图片描述

13.登录和拦截操作

1.登录

在login.html文件下修改加入如下：
在这里插入图片描述
创建loginController 加入如下代码：

@Controller
public class LoginController {

    @PostMapping(value = "/user/login")
    public  String login(@RequestParam("username") String username,
                         @RequestParam("password") String password,
                         Map<String,Object> map){
        if(!StringUtils.isEmpty(username) && "123456".equals(password)){
            //登录成功
            return "dashboard";
        }
        else{
            //登陆失败
            map.put("msg","用户密码错误");
            return "login";
        }
    }
}

此时我们输入任意账号，密码：123456登录页面 ，提示如下错误：
在这里插入图片描述
这时需要在login.html文件中加入代码，图中框处：
在这里插入图片描述
修改完好在该页面 按 ctrl+F9 重新编译
进入网页重新登录，可以看到页面加载成功（但格式不对）
在这里插入图片描述

2.密码错误提示

根据logincontroller里预先设置的
在这里插入图片描述
我们在login.html文件中添加p标签。
注：Thymefeaf中 th:if 的优先级高于 th:text ，th:if判断条件成立以后该标签内的所有th: 才会生效（msg值不为null才会返回提示）。
在这里插入图片描述

<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}" ></p>

在这里插入图片描述
重定向。
我们在HelloController中添加：
在这里插入图片描述
在loginController中修改：
在这里插入图片描述
刷新页面能重定向到 main.html 路径的页面能避免表单重复提交。
在这里插入图片描述

3.拦截器

在LoginController修改代码：

在这里插入图片描述

@Controller
public class LoginController {

    @PostMapping(value = "/user/login")
    public  String login(@RequestParam("username") String username,
                         @RequestParam("password") String password,
                         Map<String,Object> map, HttpSession session){
        if(!StringUtils.isEmpty(username) && "123".equals(password)){
            //登录成功,防止表单重复提交，可以重定向到主页
            session.setAttribute("loginUser",username);
            return "redirect:/main.html";
        }
        else{
            //登陆失败
            map.put("msg","用户密码错误");
            return "login";
        }
    }
}

在component下创建LoginHandlerinterceptor

/*
  登录状态检查
 */

public class LoginHandlerInterceptor implements HandlerInterceptor {
        //目标方法执行之前
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        Object user = request.getSession().getAttribute("loginUser");
        if (user == null) {
            //未登陆，返回登陆页面
            request.setAttribute("msg", "没有权限请先登陆");
            request.getRequestDispatcher("/login.html").forward(request, response);
            return false;
        } else {
            //已登陆，放行请求
            return true;
        }
    }

    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, @Nullable ModelAndView modelAndView) throws Exception {
    }

    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, @Nullable Exception ex) throws Exception {
    }

}

在MyMvcConfig中配置如下：

@Configuration
public class MyMvcConfig implements WebMvcConfigurer {

    @Bean
    public LocaleResolver localeResolver(){
        return new MyLocaleResolver();
    }

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/**")
                .excludePathPatterns("/","/user/login","/login.html","/asserts/**","/static/**","/webjars/**");
    }
}

效果如下（有时请登录字样上方图标消失情况不明）：
在这里插入图片描述

14.员工列表

1.公告页抽取

在list.html和dashboard.html文件里按照之前的方法将静态文件路径修改成 th: 形式。dashboard如下图（list修改同理）：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在程中新建EmployeeController类

@Controller
public class EmployeeController {
    @Autowired
    EmployeeDao employeeDao;

    //查询所有员工返回列表页面（list.html显示页面）
    @GetMapping("/emps")
    public String list(Model model){
        Collection<Employee> employees = employeeDao.getAll();

        //放在请求域中
        model.addAttribute("emps",employees);

        //thymeleaf默认会拼串，会将emp/list拼接在/templates/下，即：/templates/../xxxx.html
        return "emp/list";
    }
}

在templates下新建emp文件夹
将list.html拉倒该目录下。
在这里插入图片描述
在http://localhost:8080/crud/emps和http://localhost:8080/crud/main.html页面下右键鼠标，点击 检查 ，可以看到头部栏对应html文件的代码。
在这里插入图片描述
在这里插入图片描述
我们抽取dashboard文件里的topbar来替换list文件里的代码（重复利用）。
首先找到dashboard文件下的nav标签里的代码如下，在里面修改加入代码如下图：
在这里插入图片描述
删除list文件下对应的nav标签代码，加入如下图div标签插入提取的topbar。
在这里插入图片描述
重新打开网页，可以看到顶部栏对应的div替换代码。
在这里插入图片描述
抽取引入的方式有多种。我们用第二种方式抽取侧边栏sidebar。
首先查看侧边栏在大叔board文件中的代码位置。
在这里插入图片描述
我们在dashboard文件下的侧边栏标签添加id 如下图：
在这里插入图片描述
同时删除list文件sidebar相关nav标签代码，加入dashboard引入的侧边栏如下：
在这里插入图片描述
在这里插入图片描述
接下来我们将页面的公共区域整合到一个html文件中。在templates下新建commons文件在里面创建bar.html文件。将顶部栏、侧边栏等公共区域的页面代码移到bar文件中。

在dashboard和list文件里修改引用路径：
在这里插入图片描述

2。链接高亮和列表完成

在bar文件下加入高亮显示的判断语句

在这里插入图片描述
在这里插入图片描述
修改dashboard和list文件中的抽取语句
在这里插入图片描述
在这里插入图片描述
列表
将list中原来的列表数据删除，加入如下tbody标签代码，替换插入employeeDao中的数据。
在这里插入图片描述
可以看到页面的列表显示如下
在这里插入图片描述

15.员工添加功能

1.修改员工生日显示格式和添加编辑按钮

在数据源插入代码出修改生日格式并增加两个按钮。
在这里插入图片描述
在该段代码上方加入 员工添加 按钮
在这里插入图片描述
最后显示如下：
在这里插入图片描述

2.添加超链接

修改list文件
在这里插入图片描述
修改EmployeeController文件，添加员工添加页码方法AddPage：

    //来到员工添加页面
    @GetMapping("/emp")
    public String toAddPage(){
        //来到添加页面
        return "emp/add";
    }

在emp文件夹下添加add.html文件。
复制list.html内容到add.html中。
删除如图所示的内容：
在这里插入图片描述

					<form>
						<div class="form-group">
							<label>LastName</label>
							<input type="text" class="form-control" placeholder="zhangsan">
						</div>
						<div class="form‐group">
							<label>Email</label>
							<input type="email" class="form-control" placeholder="zhangsan@atguigu.com">
						</div>
						<div class="form-group">
							<label>Gender</label><br/>
							<div class="form-check form‐check‐inline">
								<input class="form-check-input" type="radio" name="gender" value="1">
								<label class="form-check-label">男</label>
							</div>
							<div class="form-check form-check-inline">
								<input class="form-check-input" type="radio" name="gender" value="0">
								<label class="form-check-label">女</label>
							</div>
						</div>
						<div class="form-group">
							<label>department</label>
							<select class="form-control">
								<option>1</option>
								<option>2</option>
								<option>3</option>
								<option>4</option>
								<option>5</option>
							</select>
						</div>
						<div class="form-group">
							<label>Birth</label>
							<input type="text" class="form-control" placeholder="zhangsan">
						</div>
						<button type="submit" class="btn btn-primary">添加</button>
					</form>

ps：从笔记文档（pdf格式）里复制过来的form代码，“-”符号是有问题的，会导致到/emp页面显示样式出错，将“-”全部重新写一遍就能恢复。
修改前后如下图。
在这里插入图片描述
在这里插入图片描述
修改EmployeeController文件，修改后如下：

@Controller
public class EmployeeController {
    @Autowired
    EmployeeDao employeeDao;
    @Autowired
    DepartmentDao departmentDao;

    //查询所有员工返回列表页面（list.html显示页面）
    @GetMapping("/emps")
    public String list(Model model){
        Collection<Employee> employees = employeeDao.getAll();

        //放在请求域中
        model.addAttribute("emps",employees);

        //thymeleaf默认会拼串，会将emp/list拼接在/templates/下，即：/templates/../xxxx.html
        return "emp/list";
    }

    //通过list.html文件中的th:href="@{/emp}按钮超链接跳转来到员工添加页面
    @GetMapping("/emp")
    public String toAddPage(Model model){
        //进入方法后跳转来到添加页面
        Collection<Department> departments = departmentDao.getDepartments();
        model.addAttribute("depts",departments);
        return "emp/add";

    }
}

在这里插入图片描述删除add文件中的部分代码：
在这里插入图片描述
加入遍历操作：
在这里插入图片描述
网页界面如下：
在这里插入图片描述
在add文件下修改如下：
在这里插入图片描述
在EmployeeController文件添加新方法：

    @PostMapping("/emp")
    public String addEmp(Employee employee){
        //该方法会跳转到员工列表页面
        employeeDao.save(employee);
        //redirect：表示重定向到一个页面路径
        //forwad：表示转发到一个页面路径
        return "redirect:/emps";
    }

根据employee对象属性在add文件添加 name 属性
在这里插入图片描述
在这里插入图片描述
添加员工后就能在员工列表看到添加的新员工了（日期必须是“/”分割）

16.员工编辑

在list文件修改编辑按钮，添加超链接用于响应EmployeeController。
在这里插入图片描述
在EmployeeController类下添加方法：

    @GetMapping("/emp/{id}")
    public String toEditPage(@PathVariable("id")Integer id,Model model){
        Employee employee = employeeDao.get(id);
        model.addAttribute("emp", employee);
        return "emp/edit";
    }

在emp下复制add创建edit.html文件
修改edit文件，加入如下：
在这里插入图片描述
在这里插入图片描述
运行工程，打开网页
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

17.员工删除功能

方法一

在list文件修改如下：
在这里插入图片描述
在EmployeeController里加入方法：

    //员工删除
    @PostMapping("/emp/{id}")
    public String deleteEmployee(@PathVariable("id") Integer id){
        employeeDao.delete(id);
        return "redirect:/emps";
    }

打开网页，点击删除，功能实现。

方法二
_respect__
关注
专栏目录
Spring Boot 开发入门
qq_51078395的博客
12-29 548
Spring Boot 开发入门一、简单网站 HelloSpringBoot搭建二.RESTful 接口的 Web服务 一、简单网站 HelloSpringBoot搭建 1.创建hellospringboot工程文件 1） 选择Spring Initializr 2) 填写Group和Artifact，并选择Java version为8 3) 选择Web–>spring we 4) 为项目创建名称和项目保存位置 如下为创建完成后的项目文件结构 首次使用springboot创建配置文件时可能
小白救星-SpringBoot最简教程06:web开发实战
java小白翻身
10-07 174
终于到web开发了，激动不？ 彻底搞定静态资源 先找到这个类：WebMvcAutoConfiguration，在这个jar包里面，还是自动配置 WebMvcAutoConfiguration中有一个 addResourceHandlers 方法，这是自动配置静态资源目录的。 public void addResourceHandlers(ResourceHandlerRegistry registry) { if (!this.resourceProperties.isAddMa
尚硅谷学习笔记---SpringBoot的Web开发
青椒盖饭的博客
06-02 266
要使用SpringBoot做web开发,如果使用IDEA开发工具的话,可以在创建SpringBoot项目的时候就选择要添加的模块,这样SpringBoot会自动对项目进行配置. 这其中包括,基本的web应用环境,数据库链接选择,缓存选择等等. SpringBoot主要依靠xxxxAutoConfiguration：帮我们给容器中自动配置组件,并使用xxxxProperties:配置类来封装...
SpringBoot（五）——Web开发实验
weixin_43691723的博客
07-10 805
这篇文章主要介绍了如何使用SpringBoot 编写一个Restful的CRUD项目，没有使用数据库，数据都是写好的。
SpringBoot之Web开发实验
C8WATER
12-13 743
回顾: SpringBoot之基础 SpringBoot之配置 SpringBoot之日志 SpringBoot之Web开发基础 国际化 SpringMVC的步骤: ① 编写国际化配置文件 ② 使用ResourceBundleMessageSource管理国际化资源文件 ③ 在页面使用fmt:message取出国际化内容 SpringBoot的步骤: 页面效果: ① 编...
尚硅谷Spring Boot核心技术篇（上）视频教程
03-05
尚硅谷Spring Boot核心技术篇（上）教程 想学习的朋友抓紧时间下载吧
尚硅谷Java视频教程_Spring Boot视频教程（上下两集）
03-01
《尚硅谷Java视频教程_Spring Boot视频教程》是针对Java开发者和学习者的一份宝贵资源，旨在深入浅出地讲解Spring Boot这一现代化的Java开发框架。Spring Boot以其快速开发、开箱即用的特点，已经成为Java领域中备受...
springboot实验项目源码
02-25
springboot实验项目源码，springboot项目测试和研究源码。
index_14_success.html
04-25
可以在domoticz中添加live2d模型的首页html,我改了好多次才成功,可以替换根目录www中的index.html
SpringBoot实验合集（持续更新中...）
weixin_44337475的博客
11-08 2863
实验一 使用Spring Boot构建应用程序 一、 实验目的 1、 掌握使用IntelliJ IDEA创建Spring Boot应用程序的方法； 2、 了解spring-boot-starter-parent的配置内容； 3、 掌握如何利用Starter扩展Spring Boot应用程序的功能； 4、 掌握如何配置Starter; 5、 掌握如何通过属性文件定制Spring Boot应用程序的初始化参数； 6、 掌握使用Spring Boot编写简单的单元测试； 7、 了解Spring Boot应用程序
spring boot的hello world小实验
微电子学与固体电子学-俞驰
06-07 295
https://www.jianshu.com/p/b84e0e52d4b2
尚硅谷学习笔记---web开发实验
青椒盖饭的博客
06-05 512
导入资源 新建一个SpringBoot项目,导入web模块和thymeleaf模版依赖 初始项目目录 pom.xml文件内容 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3...
37、尚硅谷_SpringBoot_web开发-【实验】-Restful实验要求
八嘎兔
07-01 543
5）、CRUD-员工列表 实验要求： 1）、RestfulCRUD：CRUD满足Rest风格； URI： /资源名称/资源标识 HTTP请求方式区分对资源CRUD操作 普通CRUD（uri来区分操作） RestfulCRUD 查询 getEmp emp—GET 添加 addEmp?xxx emp—POST 修改 updateEmp?id=xxx&xx...
35、尚硅谷_SpringBoot_web开发-【实验】-国际化 1.0 和2.0版本方法
八嘎兔
07-01 489
CRUD-员工列表 实验要求： 1）、RestfulCRUD：CRUD满足Rest风格； URI： /资源名称/资源标识 HTTP请求方式区分对资源CRUD操作 普通CRUD（uri来区分操作） RestfulCRUD 查询 getEmp emp—GET 添加 addEmp?xxx emp—POST 修改 updateEmp?id=xxx&xxx=x...
SpringBoot入门篇 02、SpringBoot Web开发
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
04-29 488
文章目录前言前情回顾以及问题解决一、静态资源第一种：/webjars/**第二种：/**自定义路径(不推荐)总结解决访问不了静态路径下的资源二、自定义首页及favion自定义首页favion图标三、thymeleaf模板引擎模板引擎介绍及引入初体验(测试跳转页面)thymeleaf如何使用？介绍及初级使用语法说明四、SpringMvc自动配置springmvc自动装配介绍自定义mvc配置类(详细说明)详细分析debug分析扩展springmvc参考资料 前言 本篇博客是根据【狂神说Java】SpringBo
html的success模板,success.html
weixin_35253177的博客
06-15 748
注册成功恭喜你，注册成功！您的5个新手体验积分已放入账户！完成认证和邀请好友还能赢得更多积分哦！IOS版下载安卓版下载var ua = navigator.userAgent.toLocaleLowerCase();var isAndroid = /android/i.test(ua);var isiOS = !!ua.match(/\(i[^;]+;( u;)? cpu.+mac os x/);...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值