微涉全栈(react,axios,node,mysql)

纯小白从前端跨域发起axios get请求获取数据

如果有兴趣欢迎往下看:

//nodejs部分

javascript 复制代码
const express = require('express')
const app = express()
const mysql = require('mysql2')
// 创建一个数据库连接
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    database: 'users',
    password: '203827'
});
connection.connect((err) => {
    if (err) {
        console.error('Error connecting to the database:', err.message);
        return;
    }
    console.log('Connected to the MySQL database.');
});
app.get('/user', (req, res) => {
    const query = 'SELECT * FROM inf';
    connection.query(query, (err, results) => {
        if (err) {
            console.error('Error fetching posts:', err);
            return res.status(500).json({ message: 'Error fetching posts' });
        }
        res.json(results);
    });
    // res.send('test')
})
app.listen('8000', () => {
    console.log('8000启动')
})
//关闭数据库
// connection.end((err) => {
//     if (err) {
//         console.error('Error closing the connection:', err.message);
//         return;
//     }
//     console.log('Database connection closed.');
// });

//前端部分

javascript 复制代码
import './App.css'
import axios from 'axios'
function App() {
const test=()=>{
axios({
  method:'get',
  url:'api/user/'
}).then(res=>{
  console.log(res)
})
}
  return (
    <>
    <button onClick={test}>测试</button>
    </>
  )
}

export default App
相关推荐
开开心心_Every几秒前
免费AI图片生成工具:输入文字直接出图
服务器·前端·python·学习·edge·django·powerpoint
全栈前端老曹3 分钟前
【前端】Hammer.js 快速上手入门教程
开发语言·前端·javascript·vue·react·移动端开发·hammer.js
慧一居士5 分钟前
vue中 export default 和<script setup> 区别对比
前端·vue.js
do better myself6 分钟前
php导入关键词的脚本 300条分批导入
java·服务器·前端
亮子AI7 分钟前
【NestJS】为什么return不返回客户端?
前端·javascript·git·nestjs
DEMO派9 分钟前
前端如何防止接口重复请求方案解析
前端·vue.js·react.js·前端框架·angular
宁然也10 分钟前
浏览器的多进程架构
react.js
大风起兮云飞扬丶10 分钟前
web前端缓存命中监控方案
前端·缓存
恋爱绝缘体114 分钟前
CSS3 多媒体查询实例【1】
前端·css·css3
五阿哥永琪17 分钟前
MySQL 核心机制精讲:B+树查询、Buffer Pool、COUNT 优化与 CHAR/VARCHAR 实战指南
数据库·b树·mysql