Node.js使用express和mysql创建一个api接口，并且连接、查询数据库，Vue3中简单使用api接口

话不多说，直接看代码，有注释

1. 手动新建数据库：test
2. 新建数据表：game
3. 使用 ApiPost 软件进行测试接口，测试接口成功
   

// 引入 express 框架
var express = require('express');
// 使用express框架
var app = express()
// 引入mysql
var sql = require('mysql')
// 创建连接mysql数据库
var con = sql.createConnection({
    host: 'localhost', // 主机
    user: 'root', //用户名
    password: '', //密码
    database: 'test', //数据库名
    port: '3306', //端口
})
// 打开数据库
con.connect()

// 跨域
app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", '3.2.1');
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});


// 查询所有的数据接口
app.get('/login',function(res,req){
    // sql语句 game为数据表
    var sql = 'select * from game'
    // 执行一条sql语句：查询表
    con.query(sql,function(err,result){
        // 发生错误
        if(err){
            req.send(err.message)
            return;
        }
        // 如果空就打印
        if(result === ''){
            console.log('空空如也');
        }
        // 返回数据
        req.send(result)
    })
})

// 启动服务器监听端口
var server = app.listen(8080,'127.0.0.1',function(){
    var host = server.address().address
    var port = server.address().port
    console.log('端口为：http://%s:%s',host,port);
})

Vue3使用

<template>
   <div>
      <!-- 直接用table使用也可以 -->
      <!-- <table>
         <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
            <th>Keceng</th>
         </tr>
         <tr v-for="(item,index) in list" :key="index">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.keceng}}</td>
         </tr>
      </table> -->
      <!-- 我这里引入了 elementUI框架的表格 -->
      <el-table :data="list" id="box" stripe border height="280">
         <el-table-column prop="id" label="id"/>
         <el-table-column prop="name" label="Name"/>
         <el-table-column prop="age" label="Age"/>
         <el-table-column prop="keceng" label="Keceng"/>
      </el-table>
   </div>
</template>
<script>
import axios from 'axios'
import { reactive, ref, toRefs } from 'vue'
export default {
   setup(){
      // 创建一个对象，对象中有list数组
      const obj = reactive({
         list:[]
      })
      // 使用axios接口api
      axios.get('http://127.0.0.1:8080/login')
         .then((res)=>{
            // const {data} = res
            // 进行赋值
            obj.list = res.data
         })
      return{
         ...toRefs(obj)
      }
   }
}
</script>
<style lang="less" scoped>
   #box{
      width: 70%;
      margin: 50px auto;
   }
</style>

效果图