配合node+MongoDB后台+vue-cli用API接口获取数据库数据

已于 2023-10-08 17:58:13 修改
阅读量721 收藏 2
点赞数 1
分类专栏： web前端 Npm 文章标签： mongodb node.js vue.js npm javascript
于 2020-08-02 00:09:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45491473/article/details/107732216
版权

前端:Node.js+MongoDB模拟后台数据并通过api在Vue中获取数据(以vivo官网顶部栏为例)

话不多说，上操作…………编程萌新，欢迎大家在评论区提建议！😊😊

一、Node+MongoDB后台服务

  1. 第一步，我们先简单搭建一个后台服务，创建一个sever文件夹，里面创建model文件夹、api.js、index.js，model文件夹下有connect.js和homeInfo.js
    效果图：
    本人创建文件介绍:
文件(名字随便)介绍
connect.js用于连接MongoDB数据库
homeInfo.js用于创建数据集合以及其规则，也可在此向数据库添加数据
api.js用于定制查询数据的api接口
index.js后台服务的入口文件，用于启动数据库和本地服务器
  1. 下来放文件代码，看注释很重要
  • connect.js

注意：需要先下载依赖 npm install mongoose

//引入mongoose
const mongoose = require("mongoose");
//连接数据库，自动创建名为vivodemo的数据库
mongoose
.connect("mongodb://localhost:27017/vivodemo", {
  useUnifiedTopology: true,
  useNewUrlParser: true,
})
 .then(() => console.log("数据库连接成功"))
.catch(() => console.log("数据库连接失败"));
//链式调用，返回查看结果
  • homeInfo.js
const mongoose = require("mongoose");
//创建种类的集合规则
const speciesSchema = new mongoose.Schema({
  name: [String],
});
//创建关于手机的集合规则
const phoneSchema = new mongoose.Schema({
  desc: [
    {
      img: [{ imgclass: String, imgUrl: String }],
      tit: String,
      con: String,
    },
  ],
});
//创建集合对象
const vivoIndex = {
  Specie: mongoose.model("Specie", speciesSchema),
  Phone: mongoose.model("Phone", phoneSchema),
};
//这里也能添加数据，不过我放到了api.js里，效果是一样的

//将集合对象开放出去
module.exports = vivoIndex;
  • api.js

  • 注意：需要先下载依赖 npm install express

var express = require("express");
//创建路由
var router = express.Router();
//引入查询数据库的文件
var vivoIndex = require("./model/homeInfo");
//这里根据homeInfo.js创建的规则来添加种类的相关数据
vivoIndex.Specie.create({
  name: [
    "NEX系列",
    "X系列",
    "S系列",
    "Y系列",
    "Z系列",
    "U系列",
    "IQOO手机",
    "智能硬件",
    "商城",
    "服务",
  ],
})
.then((doc) => console.log(doc))
.catch((err) => console.log(err));
//种类的api接口
router.get("/specie", function(request, reponse) {
  //数据库查询find()
  vivoIndex.Specie.find((err, data) => {
    if (err) {
      reponse.send(err);
    } else {
    //如果查询成功发送数据库的数据
      reponse.send(data);
    }
  });
});
//这里根据homeInfo.js创建的规则来添加手机的相关数据
//******不过我这里先添加两组对象，实际有八个对象
vivoIndex.Phone.create(
  {
    desc: [
      {
        img: [
          {
            imgclass: "pro_img4-4",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200309/cf75ca3c1f32edae16ad1cc8c6f1cdb3.png",
          },
          {
            imgclass: "pro_img4-3",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200310/2c8dead61bac575c7bcc2589554d5980.png",
          },
          {
            imgclass: "pro_img4-2",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200309/66ba1ed31ef2894e61d0348cfa0ee4a6.png",
          },
          {
            imgclass: "pro_img4-1",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200309/eae574e3ea241a2e2a7a28bc4da4f333.png",
          },
        ],
        tit: "3NEX S",
        con: "新款",
      },
      {
        img: [
          {
            imgclass: "pro_img3-3",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190916/6a4923aa7aaa5ea86e7b8b85a4a7c459.png",
          },
          {
            imgclass: "pro_img3-2",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190916/80346a86a96a3fd75e69e1102a4360ac.png",
          },
          {
            imgclass: "pro_img3-1",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190916/be6bfe12e68c9970c921195c1ed2f564.png",
          },
        ],
        tit: "NEX 3&NEX 3 5G",
        con: "",
      },
      {
        img: [
          {
            imgclass: "pro_img3-3",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190315/a58a4ec2f519099c14d0fcd73f1d8aec.png",
          },
          {
            imgclass: "pro_img3-2",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190315/1838c95336b30043fa2981faa32937a1.png",
          },
          {
            imgclass: "pro_img3-1",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190315/8cc9d05106aff4a3e8748730c96687d6.png",
          },
        ],
        tit: "NEX双屏版",
        con: "",
      },
      {
        img: [
          {
            imgclass: "pro_img4-4",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190315/826f33355eb36456c1cf48ef952b2603.png",
          },
          {
            imgclass: "pro_img4-3",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190315/99ed1d51eb06cca2e8c37faa87007e14.png",
          },
          {
            imgclass: "pro_img4-2",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190315/8a43ea78785ce40d57549cd4e55ee472.png",
          },
          {
            imgclass: "pro_img4-1",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190315/578e59296927cdaa2d0496e3ae4649ba.png",
          },
        ],
        tit: "NEX旗舰版",
        con: "",
      },
      {
        img: [
          {
            imgclass: "pro_img3-3",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190315/d89018a178a5c9c511aece362ff85e8e.png",
          },
          {
            imgclass: "pro_img3-2",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190315/17c824d969c1c5cc53c003247ffa70a5.png",
          },
          {
            imgclass: "pro_img3-1",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190315/a58140a62b1189f49ea4f3a0abedb664.png",
          },
        ],
        tit: "NEX&NEX屏幕指纹版",
        con: "",
      },
    ],
  },
  {
    desc: [
      {
        img: [
          {
            imgclass: "pro_img3-3",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200704/9e58f7ed9ff190b5aa7ab1c260465aa4.png",
          },
          {
            imgclass: "pro_img3-2",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200704/ef4d010c36a4ef40989aa0c01e862463.png",
          },
          {
            imgclass: "pro_img3-1",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200704/5567c65bfa0e814c61c1b02498366882.png",
          },
        ],
        tit: "X50 Pro+",
        con: "新款",
      },
      {
        img: [
          {
            imgclass: "pro_img3-3",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200601/0ee86b896e2597201dbd04c6de3cf2dc.png",
          },
          {
            imgclass: "pro_img3-2",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200601/c9633947410ba081f04570c8b0c877ba.png",
          },
          {
            imgclass: "pro_img3-1",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200601/19f610d8b34d7563ddedf9068dd855a6.png",
          },
        ],
        tit: "X50 Pro",
        con: "新款",
      },
      {
        img: [
          {
            imgclass: "pro_img5-5",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200316/49d4b2ceb28bb84bffcb318ab20b6ab1.png",
          },
          {
            imgclass: "pro_img5-4",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20191216/6560449af9125aa00b3661bf2e739e71.png",
          },
          {
            imgclass: "pro_img5-3",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20191216/790161d318cca6829935b55fa2b63cc8.png",
          },
          {
            imgclass: "pro_img5-2",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20191216/73c20764cac33957881360f4e58a496b.png",
          },
          {
            imgclass: "pro_img5-1",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20191216/babde62dada18b25290d5bb2310f8b04.png",
          },
        ],
        tit: "X50",
        con: "",
      },
      {
        img: [
          {
            imgclass: "pro_img5-5",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200331/8d2b166140578773896cf177285ef0b9.png",
          },
          {
            imgclass: "pro_img5-4",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200331/cb2f9fdbbd087c83b233e8477b8b6007.png",
          },
          {
            imgclass: "pro_img5-3",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200331/cad63fadca1dbbe064141de9f2b8855d.png",
          },
          {
            imgclass: "pro_img5-2",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200413/3309745741bef037e38c93c0e29e19fd.png",
          },
          {
            imgclass: "pro_img5-1",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200413/580f251fe87d7cb19010bb449e28cb0c.png",
          },
        ],
        tit: "X30 Pro",
        con: "",
      },
      {
        img: [
          {
            imgclass: "pro_img5-5",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200331/8d2b166140578773896cf177285ef0b9.png",
          },
          {
            imgclass: "pro_img5-4",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200331/cb2f9fdbbd087c83b233e8477b8b6007.png",
          },
          {
            imgclass: "pro_img5-3",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200331/cad63fadca1dbbe064141de9f2b8855d.png",
          },
          {
            imgclass: "pro_img5-2",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200413/3309745741bef037e38c93c0e29e19fd.png",
          },
          {
            imgclass: "pro_img5-1",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200413/580f251fe87d7cb19010bb449e28cb0c.png",
          },
        ],
        tit: "X30",
        con: "",
      },
    ],
  }
 ).then((doc) => console.log(doc))
  .catch((err) => console.log(err));
 //种类的api接口
router.get("/phone", function(request, reponse) {
  //数据库查询
  vivoIndex.Phone.find((err, data) => {
    if (err) {
      reponse.send(err);
    } else {
    //查询成功发送数据库数据
      reponse.send(data);
    }
  });
});

//导出路由
module.exports = router;
  • index.js(入口文件)
//引入框架
var express = require("express");
//建立服务
var app = express();
//引入路由文件
var router = require("./api");
//拦截所有请求，解决跨域问题，由于前端的地址是localhost:3000，有跨域问题
app.use((req, res, next) => {
  //1.允许哪些客户端访问我
  //*代表允许所有的客户端访问我
  res.header("Access-Control-Allow-Origin", "*");
  // 2.允许客户端使用哪些请求方式访问我
  res.header("Access-Control-Allow-Methods", "get,post");
  next();
});
//挂载路由
app.use(router);
//运行连接数据库文件
require("./model/connect");
//启用端口
app.listen("8090", function() {
  console.log("服务器启动..");
});
  1. 启动后台服务，去index.js在的文件夹输入node .\index.js
    效果图：
  2. 最后查看数据库里有没有数据,有的话证明后台服务已经有了
    种类的数据已经有了
    效果图：
    关于手机的数据
    效果图：

二、vue-cli的前台

  1. 前台就不细说了，直接说获取数据
  • 我们在vue-cli生成的main.js里设置axios请求的基地址,记得下载npm install axios
import Vue from 'vue'
import App from './App.vue'
import router from './route/index'
import '../src/assets/style/reset.css'
import '../src/assets/icon/iconfont.css'


//引入axios模块
import axios from 'axios'
//设置请求的基地址，和上面后台服务监听的地址一致
axios.defaults.baseURL = 'http://localhost:8090'


Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
  1. 在vue文件里获取后台数据
//在vue文件中先引入axios
import axios from "axios";
export default {
  data() {
    return {
    //定义种类的数组
      specieInfo: [],
      //定义手机的数组
      hidePhone: [],
    };
  },
  //周期函数初始
  created() {
    this.getSpecie();
    this.getPhone();
  },
  
  methods: {
    getSpecie() {
    //通过后台定义好的api获取数据，并给到相应的数组
      axios
        .get("/specie")
        .then((res) => (this.specieInfo = res.data[0].name))
        .catch((err) => console.log(err));
    },
    getPhone() {
       //通过后台定义好的api获取数据，并给到相应的数组
      axios
        .get("/phone")
        .then((res) => {
          this.hidePhone = res.data;
        })
        .catch((err) => console.log(err));
    },
  }
};

下面是vue遍历种类的数据

  <!-- 导航 -->
        <div class="nav">
          <ul>
            <li class="nav_series" v-for="(specie,index) in specieInfo" :key="index">
              <a href="javascript:;">{{specie}}</a>
            </li>
          </ul>
        </div>

下面是vue遍历手机的数据

  <div class="head_series_wrap">
          <ul class="menu_list" v-for="(hidePhones,index) in hidePhone" :key="index">
            <li v-for="(hidePhonesdesc,index2) in hidePhones.desc" :key="index2">
              <a href="#">
                <div class="menu_pro_img">
                  <div
                    :class="hidePhonesdescimg.imgclass"
                    v-for="(hidePhonesdescimg,index3) in hidePhonesdesc.img"
                    :key="index3"
                  >
                    <img :src="hidePhonesdescimg.imgUrl" alt />
                  </div>
                </div>
                <p class="menu_pro_name">{{hidePhonesdesc.tit}}</p>
                <p class="menu_pro_icon">{{hidePhonesdesc.con}}</p>
              </a>
            </li>
          </ul>
  </div>

最后一步启动后台以及前端。
最后欣赏最终效果图:
效果图：

喜欢的朋友点个赞，收藏一下叭♥

更多推荐：wantLG的《普歌-码上鸿鹄团队：vue实现当年或每年哀悼日网站全站变灰》

wantLG
关注
专栏目录
node + express + mongodb写api接口的简单尝试
naansun的博客
05-28 409
最近尝试了使用node来写一些简单的api接口 下面记录一下我的尝试过程~ 启动mongodb服务 如果没有mongodb的 直接到官网上下载即可。https://www.mongodb.com/ 我的mongodb的安装目录是：C:\Program Files\MongoDB\Server\3.4\bin 版本3.4.0 在mongodb安装的同根目录中 新建data文件夹 在data中新建db文件夹 用来放数据C:\data 打开cmd cd到mongodb的安装路径 mongod...
全栈开发学习(Node+Vue+Mongodb)(三)——后台接口与数据库准备
qiaoqiaobanzqq的博客
02-15 463
1 前端接口（admin）准备 安装axios用于请求接口提交数据： npm i axios 在admin根目录新建http.js文件，在文件中引入axios import axios from 'axios' 在http.js中创建实例 const http=axios.create({ baseURL:'http://localhost:3000/admin/api' ...
vue（ axios ）node mongodb 读取数据库
stj1_的博客
10-30 1601
今天做项目，前端框架用的是vue，需要读取后端数据库，我的后端是用node搭建的服务器，数据库用的是mongodb， 我用的是axios用于读取数据库，首先搭建好后端数据库路由，然后在前端组件中获取数据库，首先需要下载axios插件 例如：order.vue组件里， js代码： import axios from 'axios'; export default{  name:'orde
Vue中使用MongoDB小Demo
weixin_46240162的博客
04-27 1071
Vue中使用MongoDB小Demo Demo虽小，但是需要完成的功能的要点还是比较多的，这个Demo做到的是能够在页面中通过分页的方式来一一获取数据。 HTML部分 像下拉框的选项的这种在C#中称为combobox的标签使用的是select标签，我们在option标签来定义下拉框里面的每个选项，再再select标签上绑定上v-model，这样只要我们选了某个值，v-model就会自动将那个值...
【npm】concurrently同时运行前端和后台服务
weixin_30486037的博客
03-14 675
项目基于vue（前端）+node（后台），需要启动两个服务 0、文件夹结构及package.json内容： 1、客户端 npm run dev 2、服务器 cd server npm run server 　为了调试方便，就是用一条命令跑两个服务，concurrently可以实现： 0、安装concurrently npm insta...
基于vue+vuex+vue-router+vue-cli仿美团M站酒店的项目vue-hotel.zip
最新发布
04-07
【酒店管理系统】 酒店管理系统是一种用于帮助酒店...Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
前端 Vue+Node+MongoDB高级全栈开发
09-11
3. **API 设计**：使用 Node.js 创建 RESTful API，这些 API 用于处理前端请求并交互 MongoDB 数据库。 4. **前端开发**：利用 Vue.js 开发前端界面，通过 Axios 或 Fetch API 与后端 API 进行通信。 5. **状态管理*...
基于vue+node+mongodb开发的仿美团外卖点餐系统源码.zip
01-03
基于vue+node+mongodb开发的仿美团外卖点餐系统源码.zip 【前端功能】 登录/注销 IP定位 搜索地址 后端获取商店(暂未实现计算当前位置和商店的距离) 加购物车 图片懒加载 路由懒加载 动态底部导航 【后台管理功能】 ...
vue-cli3.0-test:基于vue-cli+mongodb+node+ant ui练手项目
05-24
vue-demo Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints and fixes files npm run lint Customize configuration ...
手把手教你用VUE写个例子访问后端WebApi的接口获取数据并显示出来
热门推荐
weixin_43935474的博客
09-05 1万+
​ 本文接着上文《手把手叫你用VS2019写个WebApi（可以供网页、手机、电脑三端连接使用）从网页访问后端并在后端通过EF获取sqlserver中的数据》 https://blog.csdn.net/weixin_43935474/article/details/132497256?spm=1001.2014.3001.5501 上文中介绍了如何创建一个WebApi后端接口的例子，现在来写个网页端访问这个后端接口的例子。 ​
vue+mysql实现前端对接数据库
Daydream的博客
03-13 5427
以上就是整个内容，但要运行起来，除了运行vue项目外，还需要将配置的node后端运行起来，可以cmd或者用vscode的内置终端运行之前配置的server文件，进入到server文件夹位置，运行：node index出现以下内容即运行成功。在src下新建文件夹server,在其中新建db.js文件,index.js文件，其中db是数据库配置，index是node后端服务配置。在新建文件夹api，在api下新建文件SysUser.js文件，这个就是之后需要使用到的接口api。在需要使用的界面调用api接口。
vue+mysql实现登录页面连接数据库（向数据库里存数据）
m0_63861761的博客
09-02 7149
vue+mysql实现登录页面连接数据库（向数据库里存数据）
indexDB在vue项目中的应用
jimjack2013的博客
03-19 5081
ndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然Web Storage在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。 （1）Indexed DB： 索引数据库，操作简便，目前主流浏览器正努力实现对index DB的支持。 Web SQL Database实际上已经被废弃，...
鸿鹄功能架构图：实现一站式异构数据分析
Yhpdata888的博客
12-13 643
鸿鹄是一个一站式的异构数据分析平台，包含了从异构数据的采集、导入、存储、计算分析、可视化和告警等一系列服务。
vue中连接mongodb
The One Who's at the Front
03-21 9476
一、手写服务器 以下文件可以写一起，不过为了方便管理，建议分开写 1、创建api-server文件夹（文件夹名字随意，根据个人喜好） （1）.新建api-servers文件 const path = require("path") const express = require("express") const app = express() const mongoose = require("m...
数据存储最佳实践：鸿鹄中的数据集
Yhpdata888的博客
05-05 237
鸿鹄的数据集内建了对时间戳和元数据字段的索引，通过合理的配置时间戳和元数据字段的信息，可以实现快速高效的数据过滤和分析。
VUE项目，从mongodb后台获取的对象数组，前端对其进行排序
小蜜蜂的博客
09-29 681
methods: {     //升序排序,js中方法     sortRole (pro) {         return function (a,b) {             var value1 = a[pro];             var value2 = b[pro];             return value1 - value2;          }...
Mongo数据库→Node服务器→Vue页面的数据传递
theVicTory的博客
03-21 1677
1、利用Mongoose查询MongoDB 通过mongoose依赖可以简捷地操作mondodb数据库，首先安装mongoose： cnpm install mongoose --save 使用mongoose需要一个模式Schema，它用于定义你从mongodb中查询的每个文档条目的内容，然后通过mongoose.model()生成一个模板model，模板像一个架...
MongoVUE连接上MongoDB 却不显示数据问题
北纬18度
01-31 7824
前言： 这几天一直在折腾mongodb数据库，发现MongoVUE虽然能连上数据库却无法显示集合。一开始以为是权限之类的问题，搞了好久没搞好，最后才发现是存储引擎的问题…… mongodb数据库将WiredTiger存储引擎集成进3.0及以后的版本中（仅在64位版本中提供），这个引擎具有文档级别的并发控制、磁盘数据压缩、存储方式改变和可配置内存使用上限等特性。但是在这种存储
Vue+Node.js+MongoDB项目部署教程：从服务器搭建到环境配置
本篇文档主要介绍了如何使用Vue CLI 2.x（带内置Webpack打包工具）与Node.js、MongoDB构建的前后端分离项目的服务器搭建和上线流程。作者强调这是一个针对特定场景的设计，可能不适用于所有情况，适合对Vue和Node.js...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

wantLG

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

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

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

打赏作者

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

抵扣说明：

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

余额充值