D2admin框架：V-charts统计图数据动态显示

(个人笔记，可能有不正确之处，还需修改)

框架&数据库：node.js+D2admin+V-charts+SQL Server

使用Axios

步骤：

1.安装模块express、mssql，建立后端数据操作文件server.js

(写明数据连接信息，数据库查询语句；命名api路由名称；设置启动端口，不能与前端一致。)

var express = require('express');
var app = express();
var sql = require('mssql');
var config = {
server: "数据库IP",//localhost或IP
database: "数据库名称",
user: "数据库用户",
password: "密码",
port: 1433,
pool:{
min: 0,
max: 10,
idleTimeoutMillis:3000
},
options: {
encrypt: true
}
};
app.get('/api/user',function(req,res)
{
//允许跨域请求数据
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,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");
sql.connect(config).then(function()
{ 
var sqlser="数据库查询语句";
new sql.Request()
.input('input_parameter',sql.Int,1002)
.query(sqlser).then(function(recordset){
console.dir(recordset);
res.json(recordset);
sql.close();//每次使用完毕进行关闭，第二次查询时才不会显示有错误
}).catch(function(err){
console.log(err);
res.send(err);
sql.close();//每次使用完毕进行关闭，第二次查询时才不会显示有错误
});
}).catch(function(err){
console.log(err);
res.send(err);
});
});

app.post('api/user',function(req,res){
})
//操作语句
app.delete('api/user/:userId',function(req,res){
})
//操作语句

/**
* 端口设置3000
*/
app.listen(3000,function(){
console.log('app listening on 3000');
});

2.终端启动api文件：node server

3.在浏览器中输入http://localhost:3000/路由名称，查看是否有获取到json数据。

例如http://localhost:3000/api/user

注意：后端端口不能与前端的启动端口相同。

4.获取到json数据后可以根据json数据文件，在前端统计图的页面赋值数据字段

<script>
export default {
  name: '自定义名称',
  data () {
    this.chartSettings = {
……
    }
    return {
      chartData: {
        columns: […],
        rows: [
        …
        ]
      },
      options: [
],
      value: ''
    }
  },
    beforeCreate: function () {
     this.$axios.get('http://localhost:3000/api/user')//server文件的路由
                      .then( res => {
                        console.log("进入了");//可以在页面调试查看是否有输出
                     this.chartData.rows=[
                      { '日期': '2018年', '案件': res.recordset[0].查询字段, '金额': res.recordset[1].查询字段},
                      { '日期': '2017年', '案件': res.recordset[0].查询字段, '金额': res.recordset[1].查询字段},
                      { '日期': '2016年', '案件': res.recordset[0].查询字段, '金额': res.recordset[1].查询字段}
                     ]
                      })
                      .catch(err => {
                      })
   }
}
</script>