【javaweb】学习日记Day3 - Ajax 前后端分离开发 入门

最新推荐文章于 2024-05-22 19:36:03 发布
最新推荐文章于 2024-05-22 19:36:03 发布
阅读量1.3k 收藏
点赞数
分类专栏： Javaweb 文章标签： 学习 vue elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61639349/article/details/132280872
版权

目录

一、Ajax

1、简介

2、Axios （没懂 暂留）

（1）请求方式别名

（2）发送get请求

（3）发送post请求

（4）案例

二、前端工程化

1、Vue项目-目录结构

2、Vue项目-启动

（1）vscode页面启动

（2）cmd命令框启动

3、配置Vue端口号

4、Vue项目开发流程

三、Vue组件库 - Element 

1、快速入门

（1）在main.js引入ElementUI组件库

（2）根据文档选择想要的皮肤 复制代码 

2、常用组件介绍

（1）Table 表格标签

（2）Pagination 分页标签

（3）Dialog  对话框

（4）Form  表单

（5）案例

四、Vue路由

1、概念

2、案例

① 配置路由路径

② 给侧栏标签添加标签

③ 在APP.vue添加 

五、打包部署

一、Ajax

1、简介

  • 概念：异步的JavaScript和XML
  • 作用：
    • 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应数据
    • 异步交互：可以在不重新加载整个页面情况下，与服务器交换数据并更新部分网页端技术，如：搜索框联想功能，校验用户名

2、Axios （没懂 暂留）

（1）请求方式别名

  • axios.get(url[，config])
  • axios.delete(url[，config])
  • axios.post(url[，data，config])
  • axios.put(url[，data，config])

（2）发送get请求

axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{
        console.log(request.data);
})

（3）发送post请求

axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/list","id=1").then(result=>{
            console.log(request.data);
})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios</title>
    <script src="axios-0.18.0.js"></script>
</head>
<body>
    
    <input type="button" value="获取数据GET" onclick="get()">

    <input type="button" value="删除数据POST" onclick="post()">

</body>

<script>
    function get(){
        //通过axios发送异步请求-get

        axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{
            console.log(request.data);
        })

        // axios(
        //     {
        //         method:"get",
        //         url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"
        //     }).then(result=>{
        //         console.log(request.data);
        //     })
    }

    function post(){
        //通过axios发送异步请求-post

        axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/list","id=1").then(result=>{
            console.log(request.data);
        })

        // axios(
        //     {
        //         method:post,
        //         url:"http://yapi.smart-xwork.cn/mock/169327/emp/list",
        //         data:"id=1"
        //     }).then(result=>{
        //         console.log(request.data);
        //     })
    }
</script>
</html>

（4）案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios-案例</title>

    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
    
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>

            <tr align="center" v-for="(emp,index) in emps">
                <td>{{index + 1}}</td>
                <td>{{emp.name}}</td>
                <td>
                    <img :src="emp.image" width="70px" height="50px">
                </td>
                <td>
                    <span v-if="emp.gender == 1">男</span>
                    <span v-if="emp.gender == 2">女</span>
                </td>
                <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
       el: "#app",
       data: {
         emps:[]
       },
       mounted () {
          //发送异步请求,加载数据
          axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            this.emps = result.data.data;
          })
       }
    });
</script>
</html>

二、前端工程化

1、Vue项目-目录结构

2、Vue项目-启动

（1）vscode页面启动

（2）cmd命令框启动

npm run serve

3、配置Vue端口号

4、Vue项目开发流程

 Vue组件文件以.vue结尾，每个组件由三部分组成

  • <template>    模板部分，生成HTML代码
  • <script> 控制模板的数据来源和行为
  • <style> css样式部分
<template>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</template>

<script>
export default{   //设置导出模块 可以在别处用import导入
  data()
  {
    return {
      message:"坚持不懈哇哇！"
    }
  },
  methods:
  {

  }
}
</script>

<style>
  #app{
    text-align: center;
    color: cadetblue;
  }
</style>

三、Vue组件库 - Element 

Element 是优化版组件库（也就是炫彩ui组件皮肤）

1、快速入门

（1）在main.js引入ElementUI组件库

//引入Element ui组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

（2）根据文档选择想要的皮肤 复制代码 

Element官方文档入口！Element - The world's most popular Vue UI framework

2、常用组件介绍

Alt+Shift+F 自动格式化！！！

（1）Table 表格标签

表格戳这→Element - The world's most popular Vue UI framework

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

<script>
export default {
  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>

<style>
</style>

（2）Pagination 分页标签

分页戳这→Element - The world's most popular Vue UI framework

<template>
  <div>
    <el-pagination layout="sizes,prev, pager, next,jumper,total" 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    :total="1000"> 
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      
    };
  },
  methods: {
    handleSizeChange(x){
        alert("每页记录数变化"+x)
    },
    handleCurrentChange(x)
    {
        alert("页码发生变化"+x)
    }
  }
};
</script>

<style>
</style>

（3）Dialog  对话框

对话框戳这→Element - The world's most popular Vue UI framework

<template>
  <div>
    <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column
          property="date"
          label="日期"
          width="150"
        ></el-table-column>
        <el-table-column
          property="name"
          label="姓名"
          width="200"
        ></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      dialogTableVisible: false,
    };
  },
  methods: {
    handleSizeChange(x) {
      alert("每页记录数变化" + x);
    },
    handleCurrentChange(x) {
      alert("页码发生变化" + x);
    },
  },
};
</script>

<style>
</style>

（4）Form  表单

 表单戳这→Element - The world's most popular Vue UI framework

<template>
  <div>
    <el-button type="text" @click="dialogTableVisible = true">打开嵌套表单的Dialog</el-button>

    <el-dialog title="填写详情" :visible.sync="dialogTableVisible">
        <el-form ref="form" :model="form" label-width="80px">

            <el-form-item label="活动名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>

            <el-form-item label="活动区域">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="活动时间">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
              </el-col>
            </el-form-item>

            <el-form-item label="即时配送">
              <el-switch v-model="form.delivery"></el-switch>
            </el-form-item>

            <el-form-item label="活动性质">
              <el-checkbox-group v-model="form.type">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="特殊资源">
              <el-radio-group v-model="form.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="活动形式">
              <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
              <el-button>取消</el-button>
            </el-form-item>

          </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        dialogTableVisible:false,
        dialogFormVisible:false,
    };
  },
  methods: {
    onSubmit(){
        alert(JSON.stringify(this.form))
    }
  },
};
</script>

<style>
</style>

（5）案例

<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #f6bcbc">
      <el-header style="font-size: 40px; background-color: #f8d7d7"
        >智能容宝学习辅助系统</el-header
      >
      <el-container>
        <!-- 边框 -->
        <el-aside width="200px">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-message"></i>学员信息管理</template
              >
              <el-menu-item-group>
                <el-menu-item index="1-1">2020届</el-menu-item>
                <el-menu-item index="1-2">2021届</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>

        <!-- 主页面 -->
        <el-main>
          <el-main>
            <!-- 表单 -->
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="姓名">
                  <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
                </el-form-item>

                <el-form-item label="性别">
                  <el-select v-model="searchForm.sex" placeholder="性别">
                    <el-option label="男" value="boy"></el-option>
                    <el-option label="女" value="girl"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>

                <!-- 日期选择器 -->
                <el-form-item>
                    <el-date-picker v-model="searchForm.date"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>                  
                </el-form-item>
              </el-form>
<br>
            <!-- 表格 -->
            <el-table :data="tableData" border>
              <el-table-column prop="name" label="姓名" width="160">
              </el-table-column>
              <el-table-column prop="sex" label="性别" width="120">
              </el-table-column>
              <el-table-column prop="class" label="班级" width="200">
              </el-table-column>
              <el-table-column prop="job" label="职务" width="220">
              </el-table-column>
              <el-table-column prop="school" label="学校" width="250">
              </el-table-column>
              <el-table-column prop="date" label="入学日期" width="220">
            </el-table-column>
              <el-button type="primary" round size="mini">编辑</el-button>
              <el-button type="danger" round size="mini">删除</el-button>
            </el-table>
<br>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage1"
                :page-size="1000"
                layout="sizes,prev, pager, next,jumper,total"
                :total="100">
          </el-pagination>
          </el-main>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tableData: [],
      searchForm:{
        name:"",
        sex:"",
        data:[]
      }
    };
  },
  methods:{
    onSubmit()
    {
        alert(JSON.stringify(this.searchForm))
    },
    handleSizeChange(x){
        alert("每页记录数变化"+x)
    },
    handleCurrentChange(x)
    {
        alert("页码发生变化"+x)
    }
  },
  mounted()  //发送异步请求，获取数据
  {
    axios.get("").then((result)=>{
        this.tableData=result.data.data;
    });
   }
};
</script>

<style>
</style>

四、Vue路由

1、概念

  • <router-link to>    请求链接组件，浏览器会传递到该链接
  • <router-view>   动态视图组件，渲染展示对应路由路径

2、案例

通过Vue路由完成左侧菜单栏点击切换效果

① 配置路由路径

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/emp',
    name: 'emp',
    component: () => import('../views/item 2/EmpView.vue')  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/item 2/DeptView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

② 给侧栏标签添加<router-link to>标签

<el-aside width="230px" style="border: 1px solid #eee">
   <el-menu :default-openeds="['1', '3']">
        <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>

               <el-menu-item index="1-1">
                    <router-link to="/dept">部门管理</router-link>
               </el-menu-item>

               <el-menu-item index="1-2">
                    <router-link to="/emp">员工管理</router-link>
               </el-menu-item>

        </el-submenu>
    </el-menu>
</el-aside>

③ 在APP.vue添加 <router-view>

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

五、打包部署

Day03-16. 打包部署_哔哩哔哩_bilibili

step1：点击允许build，进行打包

step2：此时目录出现dist文件，右键

step3：将dist文件内容复制，粘贴到nginx安装目录下的html目录下

 step4：双击nginx.exe即可，在页面输入localhost：80（端口号）回车即可

Roye_ack
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaWeb前后端分离
yezi_seven的博客
09-30 1740
JavaWeb前后端分离 web早期的架构: 将前端与后端写在同一个项目中，配置在同一个服务器上，访问该服务器时，直接访问整个项目也就是jsp（html+java）。 前后端分离： ​ 将去前端html，css，js，等视图显示与java后端数据支撑各自抽取出来。 ​ 也就是前端HTML页面通过ajax调用后端的RESTFUL API接口并使用json数据进行交互。 前后端分离的优势： 1、可以实现真正的前后端解耦。 ​ 前端/WEB 服务器放的是 css，js，图片等等一系列静态资源，前端服务器负
【JavaWeb】基于前后端分离的JavaWeb小项目---新生报道案例的详细实现过程（上）
weixin_43760020的博客
04-03 3816
前言 本次案例的前端代码我已经打包好，可以下载到本地打开即可直接使用。 下载地址： 前端代码的使用： 一、案例分析和设计 本节主要有案例分析和案例设计。 1、案例介绍 这是一个前后端分离的小项目，主要用来检验自己这段时间学习JavaWeb的成果。 该案例包含的JavaWeb知识点如下： 基于MVC的三层架构的实现（项目搭建） 数据库连接（通过JDBC） JavaWeb...
Javaweb之Vue组件库Element案例异步数据加载的详细解析
qq_69748833的博客
12-03 619
需要使用axios时，导入axios: import axios 'axios'我们最后要做的就是异步加载数据，所以我们需要使用axios发送ajax请求。但是很明显，性别和图片的内容显示不正确，所以我们需要修复。slot-scope: 通过属性的row获取当前行的数据。安装axios: npm install axios。此时打开浏览器，效果如下图所示：性别一列的值修复成功。此时回到浏览器，效果如下图所示：图片展示修复成功。 : 用于自定义列的内容。
JavaWeb开发 —— Ajax
hdakj22的博客
04-12 1549
Ajax介绍、原生Ajax、Axios以及综合案例分析练习
黑马JavaWeb开发跟学(三)Web前端开发Vue-Element
心向阳光的天域的博客
03-02 960
黑马JavaWeb开发跟学(三)Web前端开发Vue-Element
B站---【狂神说Java】JavaWeb入门到实战---笔记
热门推荐
bell_love的博客
04-23 17万+
JavaWebJava Web 1、基本概念web开发： ·web，网页的意思，www.baidu.com· 静态web 。html,sss 。提供给所有人看的数据始终不会发生变化！ 动态web 。淘宝，几乎是所有的网站； 。提供给所有人看的数据始终会发生变化，每个人在不同的时间，不同的地点看到的信息各不相同！ 。技术栈：Servlet/ISP，ASP，PHP ...
JavaWeb项目前后端分离
生而为人我很抱歉
06-19 7837
前戏 前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦， 并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。 这个步骤是系统架构从猿进化成人的必经之路。 核心思想是前端html页面通过ajax调用后端的restuful ...
JavaWeb前后端分离使用ajax实现批量删除和显示数据
weixin_51229463的博客
11-26 5314
1.创建一个html页面，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>批量删除</title> <!--jq在线路径，需要联网--> <script src= "http://libs.baidu.com/jquery/2.0.
前后端分离的项目部署到tomcat_如何部署前后端分离的JavaWeb项目
weixin_39714763的博客
12-21 4868
在开发中大型的JavaEE项目时，前后端分离的框架逐渐成为业界的主流，传统的单机部署前后端在同一个项目中的工程项目越来越少。这类JavaWeb项目的后端通常都采用微服务的架构，后端会被分解为诸多个小项目，然后使用dubbo+zookeeper或者springCloud来构建微服务，前端则会是一个单独的项目，前台的请求通过微服务来调用。但是，不同与传统的web项目，这类前后端分离的项目如何在开发中部...
Javaweb 项目前后端分离跨域问题
qq_34297563的博客
05-29 2484
一、什么是跨域： 从一个网站请求另一个网站，请求的地址中 ip，端口，协议三个任意一个有变化都属于跨域请求。 二、跨域请求在Javaweb项目中会出现什么问题 前后端分离项目中，前端和后台服务可能不部署在一台服务器上，当然也有可能部署在一台服务器，但无论怎么部署，只要前端的项目没有和后台服务在一个Javaweb项目中，那么都是跨域，首先部署不再同一台服务器，那么...
web前后端分离开发——后端SpringMVC java开发
06-04
web前后端分离开发，后端SpringMVC java开发内含spirngMVC代码以及java-json处理包 详细内容可以参考我的博客https://blog.csdn.net/weixin_38879056/article/details/90758420 以及配套的前端vue项目...
Javaweb-实训项目开发-ider前后端数据分离+数据库操作+md5加密
12-22
Javaweb-实训项目开发-ider前后端数据分离+数据库操作+md5加密 前端：7张html,包括注册，登录，主页，列表修改，后端数据查看删除 后端：数据库连接+Dao模型数据分离，使用Java类和接口实现 注意：本项目未使用jsp...
JavaWeb学习资料---PDF格式.zip
02-05
JavaWeb学习资料---PDF格式，希望能够学习者提供帮助，文档中包含多个JavaWeb学习环节，循序渐渐地介绍了JavaWeb的相关知识
javaWeb学习资料部分---图解版.zip
10-18
简单的整理了一些javaWeb关于域对象的学习资料
基于ssm框架前后端分离的简历管理系统源代码+数据库,javaweb课程设计
02-21
基于ssm框架前后端分离的简历管理系统源代码+数据库,javaweb课程设计
CSS浮动（CSS从入门到精通学习第四天）
最新发布
m0_49067926的博客
05-22 1014
圆角边框、盒子阴影、CSS浮动、浮动特性、清除浮动
引用实战学习
qiuzhiuser的博客
05-19 155
【代码】引用实战学习。
JVM学习-执行引擎
丢爸
05-21 1016
当然是否需要启动JIT编译器将字节码直接编译为对应平台的本地机器指令，则需要根据代码被调用。大部分的程序代码转换为物理机的目标代码或虚拟机能执行的指令集之前，都需要经过下图各个步骤。，将其直接编译为对应平台的本地机器指令，以此提升Java程序的执行性能。”，JIT编译器在运行时会针对那些频繁被调用的热点代码做出。Java代码编译是由Java源码编译器来完成，流程图如下。而定，关于那些需要被编译为本地代码的字节码，称为“Java字节码的执行是由JVM执行引擎来完成。
javaweb前后端分离图书管理系统
12-27
基于您提供的引用内容，以下是一个基于JavaWeb的前后端分离图书管理系统的简介： 该图书管理系统采用前后端分离的架构，前端使用HTML/CSS/JavaScript编写，后端使用Java编写。系统具有以下功能： 1. 用户基本借书还书功能。 2. 支持书籍名模糊搜索。 3. 用户可以先添加书籍，然后进行整体借书操作。 该系统的后端技术栈包括Tomcat、Servlet、JSP、Session、Cookie、EL、JSTL、Filter、Ajax、JSON、JDBC、C3P0和DBUtils等。其中，Tomcat是Java开发中最主流的Web应用服务器。 由于您提供的引用内容较为简略，无法提供具体的源码或演示。但您可以参考Java Web学习笔记中的内容，了解更多关于Java Web开发的基础知识和技术细节。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值