VUE3连接SQLServer绑定到ElementPlus el-table上

1. 安装axios

  npm install axios --save

2. 安装mssql

npm install mssql

3. 安装express

npm install express --save

4. 安装cors

npm install cors 

5. 创建db.js

var mssql = require('mssql');

var db = {};
var config = {
  user: 'sa',
  password: 'wuq',
  server: 'Lenovo131845', 
  database: 'Address',
  port:1433,
  options: {
    encrypt: false // Use this if you're on Windows Azure
  },
  pool: {
    min: 0,
    max: 10,
    idleTimeoutMillis: 3000
  }
};
 
//执行sql,返回数据.
db.sql = function (sql, callBack) {
  console.log("sql", sql)
  var connection = new mssql.ConnectionPool(config, function (err) {
    if (err) {
      console.log(err);
      return;
    }
    var ps = new mssql.PreparedStatement(connection);
    ps.prepare(sql, function (err) {
      if (err){
        console.log(err);
        return;
      }
      ps.execute('', function (err, result) {
        if (err){
          console.log(err);
          return;
        }
 
        ps.unprepare(function (err) {
          if (err){
            console.log(err);
            callback(err,null);
            return;
          }
            callBack(err, result);
        });
      });
    });
  });
};
 
module.exports = db;

6. 使用express创建user.js

var express = require('express');
var router = express.Router();
var db = require('./db');
/* GET user listing. */
/*router.get('/', function(req, res, next) {
    db.sql('select * from student', function(err, result) {
        if(err) {
            console.log("sql错误", err);
            return;
        }
        res.send(result);
    });
});*/
router.get('/info', function (req, res, next) {
    // console.log('hello world');
    // res.send('hello world');

    db.sql('select *  from student', function(err, result) {
        if(err) {
            console.log("sql错误", err);
            return;
        }
        res.send(result);
    });

});

module.exports = router; 

7. 创建server.js

//1.导入模块
const express = require('express')
 
//2.创建服务器
let server = express()
server.use(express.urlencoded()) //中间件要写在启动文件里面
 
const cors = require('cors')
server.use(cors())
 
const user = require('./user.js')
 
server.use('/', user)
 
//3.开启服务器
server.listen(8002, () => {
    console.log('服务器已启动,端口号8002')
})

8. 模拟开启api
   cd 进去server.js 所在的文件夹，运行 node server.js
   
9. 页面调用

import axios from "axios"
export default {
    name: 'New',
    props: {
      msg: String
    },
    methods:{
    PrintInfo() {
      var that=this;
      axios.get('http://localhost:8002/info')
      .then(res => {
        that.list=res.data.recordset;

      });
    }
  },
    data() {
      return {
        list:tableData
      }
    },
  mounted(){
    this.PrintInfo();
  }
}

10. 前端引用

<el-table :data="list"
        height="400px" border="true"  style="width: 100%">
        <el-table-column prop="id" width="180" label="id"></el-table-column>
        <el-table-column prop="name" width="180" label="name"></el-table-column>
</el-table>

11. 实现效果
    
    连接数据库有可能会提示连接失败，请查看TCP/IP是否已启用