将api中获得数据存放到自己的数据中

已于 2022-11-18 12:36:00 修改
阅读量2.1k 收藏 2
点赞数
分类专栏： TypeScript学习 # Vue3 文章标签： 数据库 vue.js node.js mysql
于 2022-05-13 17:05:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yasinawolaopo/article/details/124734612
版权

继上一篇后我打算存储进本地与本地的MySQL数据库中(用nodejs)

我们使用的是node中的fs模块来存储还要进行模块化设计

目前为止是通过uid来进行主要的逻辑

创建数据库和表

#创建数据库
CREATE DATABASE node_mysql;

USE `node_mysql`;

#如果表存在则删除
DROP TABLE IF EXISTS `bilibiliUserInfo_data`;
#目前的逻辑，按需修改(因为mid不是我们定的所以不是自增,但唯一可以确定的是，不能重复)
CREATE TABLE `bilibiliUserInfo_data`(`mid` INT NOT NULL UNIQUE PRIMARY KEY,
`name` VARCHAR(255) NOT NULL,
`sex` VARCHAR(25) NOT NULL,
`face` VARCHAR(255) NOT NULL
);

INSERT INTO `bilibiliUserInfo_data` VALUES(1,'admin','男','https://..');#测试添加

SELECT * FROM `bilibiliUserInfo_data`;

DELETE FROM `bilibiliUserInfo_data`;

后端(nodejs)的模块化代码(耦合度高一点)

linkMySql.js(链接数据库)

const mysql = require('mysql')


var connection = mysql.createConnection({
    host: '主机地址',//端口默认是3306
    user: 'root',//用户名
    password: '密码',
    database: 'node_mysql'//链接数据库,按自己的数据库来
});

connection.connect();

//这只是测试是否可以访问
connection.query('select * from bilibiliUserInfo_data',function(error, results, fields){
    if(error) throw error
    console.log('The solution is: ', results);
})

//暴露connection模块
module.exports = {
    connection
}

getUserInfo.js(目前的https请求,fs存放)(主要逻辑)

const https = require('https')
const http = require('http')

const fs = require('fs')

const express = require('express')
const app = express()

//导入并解构linkMySql.js
const {connection} = require('./linkMySql')

function getUserInfo(uid){
    https.get(`https://api.bilibili.com/x/space/acc/info?mid=${uid}&jsonp=jsonp`,(res)=>{
        let data = ''
        res.on('data',(chunk)=>{
            data += chunk
        })
        res.on('end',()=>{
            // console.log(JSON.parse(data))

            console.log(JSON.parse(data))
            
            fileSave(data)
            
			//获取到传递过来的uid作为uri去创建地址
            app.get(`/${uid}`,(req,res)=>{
                console.log(`/${uid} 响应了`)
                res.send(JSON.parse(data))
            })
        })
    }).on('error',(err)=>{
        console.log("Erorr:",err.message)
    })

}

function fileSave(data){
    var da1 = JSON.parse(data)
    fs.stat(`./userInfo/${da1.data.mid}.txt`,function (err,stat){
        if(stat&&stat.isFile()){
            //文件存在
            fs.readFile(`./userInfo/${da1.data.mid}.txt`,(err,data)=>{
                if(err) throw err
                console.log(data)
                // console.log(data.toString())
                // console.log(JSON.parse(data.toString()))
                var da = JSON.parse(data.toString())//buffer转数组后转json格式数据
                // console.log(da.data.name)//陈天羽----OK
                console.log(da.data)
            })
        }else{
            //文件不存在
            // const data1 = new Uint8Array(Buffer.from(JSON.parse(data)))
            fs.writeFile(`./userInfo/${da1.data.mid}.txt`/*动态获取mid来创建txt文本*/,data,(err)=>{
                if(err) throw err
                console.log('写入完成')
                insertMysql_bilibiliUserInfo_data(da1.data.mid,da1.data.name,da1.data.sex,da1.data.face)
            })
        }
    })
}

//mysql的四个值(按自己需求)
function insertMysql_bilibiliUserInfo_data(mid,name,sex,face){
    var insertOne = "insert into bilibiliUserInfo_data values(?,?,?,?)"
    var addInsertOne = [mid,name,sex,face]
    connection.query(insertOne,addInsertOne,function (err, result) {
        if(err){
        console.log('[INSERT ERROR] - ',err.message);
        return;
        }        

        console.log('--------------------------INSERT----------------------------');
        //console.log('INSERT ID:',result.insertId);        
        console.log('INSERT ID:',result);        
        console.log('-----------------------------------------------------------------\n\n');  
    })
}

module.exports = {
    getUserInfo,
    fileSave,
    insertMysql_bilibiliUserInfo_data
}

mian.js(主要程序，程序入口)

const express = require('express')

const app = express()

const cors = require('cors')
app.use(cors(

))

const fs = require('fs')
const buffer = require('node:buffer')

const http = require('http')
const https = require('https')

//导入getUserInfo.js,并解构暴露的方法
const {getUserInfo,fileSave,insertMysql_bilibiliUserInfo_data} = require('./getUserInfo')

app.get('/filesave',(req,res)=>{
	//获取请求的数据
    res.send(req.query)
    //查看数据，并为下面的赋值做准备
    console.log(req.query)
    //getUserInfo.js中的getUserInfo方法，传递uid
    getUserInfo(req.query.mid)
})




app.get('/hello',(req,res)=>{
    res.send("hello Vue")
})

app.listen(5000,()=>{
    console.log('5000端口已经监视')
})

前端的请求

还是vite + vue3 + typescript

import {ref} from 'vue';
let uid = ref<number>()
function submitUid(){
	//get请求数据的一种方式
  axios.get(`/myInter/filesave?mid=${uid.value}`).then(res=>{
    console.log(res)
  }).catch(err=>{
    console.log(err)
  })
}

import {ref} from 'vue';
let uid = ref<number>()
function submitUid(){
	//post请求数据的一种方式
  axios.post(`/myInter/filesave?mid`,{
	data:{
		mid: uid.value
	}
  }).then(res=>{
    console.log(res)
  }).catch(err=>{
    console.log(err)
  })
}

我们要的是get请求，其余的方式可以去找网上大佬的文章

<template>
  <div>
  <!--v-model:双向数据绑定,input输入类的用的最多-->
    <input name="uid" placeholder="查询添加的B站uid" v-model="uid"/>
    <input type="submit" value="提交" @click="submitUid()"/>
  </div>
</template>

我们就找bilibili的原神账号来测试
bilibili原神账号截图
请求的图片请求的图片没有css美化
点击提交时查看data数据里面有没有传递过去的数据
点击提交时查看data数据里面有没有传递过去的数据
nodejs后端响应的数据
nodejs后端响应的数据
能看到成功拿到了数据并保存到了自己的数据库中

SELECT * FROM `bilibiliUserInfo_data`;

就能查看到数据库中的数据

再次提交数据，后端则会看到
在这里插入图片描述
设计的只有文件不存在的时候，才会写入数据库，其他都是读取数据

添加axiosFun3()方法(查看)(关键就是你的uid必须要存在)

function axiosFun3(uid:string){
  axios.get(`/myInter/${uid}`).then(res=>{
    console.log(res)
    userInfo.mid = res.data.data.mid
    userInfo.name = res.data.data.name
    userInfo.sex = res.data.data.sex
    userInfo.face = res.data.data.face
  }).catch(err=>{
    console.log("Error:",err)
  })
}

<button @click="axiosFun3(uid)">点击获取自己的服务器数据2</button>
  <p>mid: {{userInfo.mid}}</p>
  <p>昵称: {{userInfo.name}}</p>
  <p>性别:{{userInfo.sex}}</p>
  <!--按照我的访问，img会403报错(亲测,没有权限访问)-->
  <img :src="userInfo.face" alt="用户头像" />

vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    proxy:{
      "/api":{
        target: "https://api.bilibili.com/x",
        changeOrigin:true,
        // /api/relation/stat?vmid=13805897&jsonp=jsonp ===  https://api.bilibili.com/x/relation/stat?vmid=13805897&jsonp=jsonp
        rewrite: (path)=> path.replace(/^\/api/,"")
      },
      "/myInter":{
        target: "http://localhost:5000",
        changeOrigin:true,
        // /api/relation/stat?vmid=13805897&jsonp=jsonp ===  https://api.bilibili.com/x/relation/stat?vmid=13805897&jsonp=jsonp
        rewrite: (path)=> path.replace(/^\/myInter/,"")
      }
    }
  }
})

会有bug: 你获取不到值，虽然你传递了参数，但是无济于事(重点)

所以我嵌套的get的同时，使用异步去做
说到异步方法就要提到async和await了，还有就是我们把https请求封装为Promise对象(抛去存储不管)

Promise的返回值

var a = new Promise((resovle,reject)=>{
    resovle('成功了')
})
console.log(a)

得到的结果是:
node promiesTest.js

然后你可以参考这篇文章,从中提到
文章的promies的then描述

我们接着尝试:

var a = new Promise((resovle,reject)=>{
    resovle('成功了')
}).then(res=>{
    console.log(res)
})
console.log(a)

得到的结果是:
node promiesTest.js(加了then)

由此可得出了可以套用promies的then来获取

function getUserInfo(uid){
    var dataMsg;
    var dataMsg1 = new Promise((resolve,reject)=>{
        https.get(`https://api.bilibili.com/x/space/acc/info?mid=${uid}&jsonp=jsonp`,(res)=>{
            let data = ''
            res.on('data',(chunk)=>{
                data += chunk
            })
            res.on('end',()=>{
                console.log(JSON.parse(data))
                // console.log('dataMsg:',dataMsg)//var dataMsg = "我";  :我
                resolve(data)
                
            })
        }).on('error',(err)=>{
            console.log("Erorr:",err.message)
            reject(err.message)
        })
    }).then(res=>{
        console.log('promise then-res:',res)
        dataMsg = JSON.parse(res)
    })
    console.log('dataMsg:',dataMsg)
    return dataMsg
}

虽然可以得到数据，但是显示的还是dataMsg:undefined所以我们这时候可以想到异步

用异步方法来解决以上问题

异步方法就要提到async和await了

async function getUserInfo(uid){
    var dataMsg;
    var dataMsg1 = await new Promise((resolve,reject)=>{
        https.get(`https://api.bilibili.com/x/space/acc/info?mid=${uid}&jsonp=jsonp`,(res)=>{
            let data = ''
            res.on('data',(chunk)=>{
                data += chunk
            })
            res.on('end',()=>{
                console.log(JSON.parse(data))
                // console.log('dataMsg:',dataMsg)//var dataMsg = "我";  :我
                resolve(data)
                
            })
        }).on('error',(err)=>{
            console.log("Erorr:",err.message)
            reject(err.message)
        })
    }).then(res=>{
        console.log('promise then-res:',res)
        dataMsg = JSON.parse(res)
    })
    console.log('dataMsg:',dataMsg)
    return dataMsg
}

这样我们就只要请求一个get请求就可以获取到值了(为什么使用get，是因为在公开安全的数据中get是安全的(不会轻易改变数据库的值),但是涉及到隐私就要使用post请求了)

const express = require('express')

const app = express()

const cors = require('cors')
app.use(cors(

))

const fs = require('fs')
const buffer = require('node:buffer')

const http = require('http')
const https = require('https')


const {getUserInfo,fileSave,insertMysql_bilibiliUserInfo_data} = require('./getUserInfo')

app.get('/filesave',async(req,res)=>{
    //req.query.mid:获取传递过来的数据
    // console.log(req.query)
  //这里也要使用异步,注意方法前那个async(异步方法)
    var a = await getUserInfo(req.query.mid)
    console.log('a:',a)
    res.send(a)
})

//测试get请求
app.get('/hello',(req,res)=>{
    res.send("hello Vue")
})

app.listen(5000,()=>{
    console.log('5000端口已经监视')
})

http://localhost:5000/filesave?mid=b站uid就可以请求到了自己服务器去请求B站花玲的信息(地址是自己的服务器地址)
注意:https默认端口号是443可以https://www.bilibili.com:443/去访问B站

按照之前的文档写的前端，也要进行修改了

结城明日奈是我老婆
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
2019_数据中台架构实践.pdf
03-30
根据提供的文件信息，本文将围绕“2019_数据中台架构实践”这一主题进行深入探讨，并结合描述中的“数据中台架构实践”以及标签中的“数据中台 大数据”来展开相关知识点。 ### 数据中台的概念 数据中台是一种集成...
使用python 将post接口数据导入到MySQL中
zibo_CXY的博客
11-14 348
使用python 将post接口数据导入到MySQL中
API低代码平台介绍4-数据库记录插入功能
最新发布
aiyo92的专栏
06-03 1112
API低代码平台介绍-数据库记录插入功能
第三方接口获取数据存入本地数据库（SQLSERVER）方法
qq_43466012的博客
09-06 1万+
从第三方获取数据存入本地数据库的方法，采用的是SSM框架+定时器 Quartz完成，该实例没有前端操作，用Quartz每天定时触发获取数据存入本地数据库，代码包含了解决SQLSERVER大批量插入数据库时会报该服务器仅支持传入2100个参数的错误解决代码
python2获取接口内容存入Mysql数据库
r12345q__的博客
04-16 833
python2获取接口内容存入Mysql数据库欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与...
数据中台之数据服务
GIS摆渡人
04-13 2496
一. 简介 DataWorks数据服务旨在为企业搭建统一的数据服务总线，帮助企业统一管理对内对外的API服务。数据服务为您提供快速将数据表生成API的能力，同时支持您快速注册现有的API至数据服务平台，进行统一的管理和发布。 二. 核心 数据服务采用Serverless架构，您只需要关注API本身的查询逻辑，无需关心运行环境等基础设施，数据服务会为您准备好计算资源，并支持弹性扩展，零运维成本。 数据中台 数据服务 架构 1. 生成API 数据服务支持通过可视化配置的向导模式，快速将关系型数据库和NoSQL
苏宁数据中台架构实践.pdf
06-17
苏宁作为中国领先的零售服务企业集团，在数字化转型过程中积累了丰富的经验，并在实践中形成了自己的数据中台架构体系。本文将基于“苏宁数据中台架构实践”这一主题，深入探讨苏宁数据中台的演进过程、系统架构等...
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
10-17
它的主要优势是快速和简洁，适用于开发过程中需要快速模拟API数据的场景。 在Vue-CLI项目中引入simple-mock并配置数据模拟的步骤可以概括为以下几个部分： 1. 在项目中引入simple-mock依赖 要在Vue-CLI项目中使用...
java1.8-api-中文.zip
11-17
前者是CHM（Compiled Help Manual）格式的文件，通常用于存放帮助文档，这里应该是Java 1.8 API的中文解释；后者可能是一个二维码图片，可能是用于提供更多的学习资源或者社区链接。 在Java 1.8 API中，有很多关键...
Keras自动下载的数据集/模型存放位置介绍
09-16
下面我们将详细介绍Keras自动下载的数据集/模型的存放位置，以及一个简单的示例来展示如何使用Keras进行模型训练。 #### 一、Keras数据集与模型的默认存放位置 1. **Mac和Linux系统**： - 数据集存放路径为：`~/....
Java调用第三方接口获取数据并存储，思路加代码
热门推荐
m0_55627541的博客
04-26 1万+
1.根据接口返回的字段创建数据库表 2.创建对应这个表的controller，service，mapper，pojo 3.在controller层调用Impl实现类。具体业务：接收数据并保存在数据库， mapper层写插入sql 方法一：URL 建立连接进行接收数据 首先模拟一个接口，返回数据 controller层 用的mybatic-plus package com.zsp.chaoshi.controller; import com.zsp.chaoshi.pojo.Jiushu
Nest.js进阶系列四：Node.js中使用Redis原来这么简单！
程序员成长指北
12-07 1945
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言大家好，我是 koala，一个有趣且乐于分享的人，这是 Nest.js 实战系列第四篇，我要用真实的场景让你学会使用 Node 主流框架。回顾一下【Nest入门系列文章】Nest.js 手把手带你实战-项目创建&数据库操作Nest.js 手把手带你实战-实现注册、扫码登陆、jwt认证等...
通过Kettle工具解析Json接口数据并且保存到数据库中的详细操作
xuguoxing123的博客
06-05 1万+
最近接到一个业务需求，就是要把一个Json接口数据获取下来并且保存到数据库中，考虑到应用代码实现功能需要耗费一定时间和精力，效率不高，于是就选择利用Kettle工具来实现这个业务功能，具体操作如下： （一）首先 ...
kettle实现从api接口全量抽取数据到数据库中
Yuyuyu666dhdh的博客
12-02 5829
kettle实现从api接口全量抽取数据到数据库中
Python采集api接口数据导入Mysql
weixin_46177696的博客
09-21 2245
使用Python获取Api接口存入Mysql
Api 数据自动入库
weixin_44723724的博客
07-04 1578
目前我们需要将各渠道的数据进行入库然后进行分析，当前 api 返回的数据都是通过定制化代码开发来解析、建表、数据入库的。这种方式可复用性不高，因为每种渠道提供的接口数据格式是不一样的，每次都需要去修改代码，不能做到零代码通用方案入库。所以我们需要一个可以自动来根据 api 返回的 json 数据格式，来完成建表、自动入库的一种通用方案。......
编写一个API读取数据后写入数据库的程序框架
weixin_42581003的博客
02-14 485
读取数据API： 首先需要定义读取数据的API接口，并且根据需求确定接口的请求方式(如GET或POST)，请求参数以及响应格式。 使用编程语言实现API接口，通过读取请求中的参数，对数据源进行读取操作，并将读取到的数据封装成响应格式返回。 写入数据库： 选择一个数据库管理系统(如MySQL，MongoDB等)，并连接到数据库。 定义数据的存储结构(如表格)，创建表。 将读取到的数据插入数据库...
java 将一个list集合数据存放到两个set集合中
05-27
假设需要将一个List集合中的数据存放到两个Set集合中，可以使用Java 8中的Stream API和Lambda表达式来实现。下面是一个例子： ```java List<Integer> list = Arrays.asList(1, 2, 3, 4, 5, 6); Set<Integer> set1 = new HashSet<>(); Set<Integer> set2 = new HashSet<>(); list.stream().forEach(i -> { if (i % 2 == 0) { set1.add(i); } else { set2.add(i); } }); System.out.println("set1: " + set1); // 输出: set1: [2, 4, 6] System.out.println("set2: " + set2); // 输出: set2: [1, 3, 5] ``` 这段代码中，通过`list.stream()`将List集合转换为一个Stream流，然后通过`forEach()`方法遍历Stream中的每个元素。在Lambda表达式中，判断元素的奇偶性，将偶数放到`set1`中，将奇数放到`set2`中。最后输出两个Set集合中的元素。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

结城明日奈是我老婆

支持一下一直热爱程序的菜鸟吧

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

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

打赏作者

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

抵扣说明：

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

余额充值