Vue之功能全面的表格（二）创建表格

数据准备

1、启动mongodb数据库，创建数据库test和表todos,在表格中插入几条测试数据(author一列为数组)

mongodb的安装过程

后台服务器

2、创建工程vue-table-server
1）创建一个空白文件夹vue-table-server，先在文件夹下输入以下命令创建package.json，输入后会提示输入一系列项目参数，可全部按回车采用默认项
npm init
npm i -s express
2）引入mongodb和mongoose
npm i mongodb mongoose --save
3、新建models/todos.js用于创建Model

var mongoose = require('mongoose')

var todos = new mongoose.Schema({
    name: String,
    author: Array,
    content: String,
    status: Number,
    completeDate: Date
})

module.exports = mongoose.model('Todos', todos)

4、新建router.js用于创建路由

var router = require("express").Router()
var Todo = require('../models/todos')

router.route('/').get((req, res) => {
    Todo.find((err, todos) => {
        if (err) {
            console.log(err)
        }
        res.json(todos)
    })
})

module.exports = router

5、新建server.js启动服务

var express = require('express')
var app = express()
var mongoose = require('mongoose')
var url = 'mongodb://127.0.0.1:27017/test'

bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*")
    res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type")
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS")
    next()
})

app.use('/todos', require('./router/router'))

mongoose.connect(url, (err) => {
    if (err) {
        console.log(err)
    } else {
        console.log("db connect success")
    }
})

app.listen(3000, () => {
    console.log('server start')
})

6、用测试工具向http://localhost:3000/todos发送GET请求：

引入axios

7、回到项目vue-table-client中，在main.js中添加引用

import axios from 'axios'

axios.defaults.baseURL = 'http://127.0.0.1:3000/'
Vue.prototype.$ajax = axios

显示数据

8、修改DataTable.vue

<script>
import ViewPage from './ViewPage'
export default {
  components: {
    ViewPage
  },
  data () {
    return {
      data: [],
      filterType: '',
      status: ['未开始', '进行中', '搁置', '完成']
    }
  },
  mounted () {
    this.update()
  },
  methods: {
    update () {
      this.$ajax.get('todos').then((res) => {
        if (res.data) {
          this.data = res.data
        }
      }).catch(err => this.$notify({
        type: 'error',
        message: err
      }))
    }
  }
}
</script>

<!-- 表格区 -->
    <el-table :data="data">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-card header="书籍内容简介">
            {{ scope.row.content }}
          </el-card>
        </template>
      </el-table-column>

      <el-table-column label="学习书籍" prop="name"></el-table-column>
      <el-table-column label="作者">
        <template slot-scope="scope">
          {{ scope.row.author.join(',') }}
        </template>
      </el-table-column>

      <el-table-column label="学习计划状态">
        <template slot-scope="scope">
          {{ status[scope.row.status ]}}
        </template>
      </el-table-column>
      
	  <el-table-column label="学习完成时间">
        <template slot-scope="scope">
          {{ new Date(scope.row.completeDate).toLocaleString()}}
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="warning" icon="el-icon-edit"></el-button>
          <el-button size="small" type="danger" icon="el-icon-delete"></el-button>
        </template>
      </el-table-column>
    </el-table>

显示结果

小结

本阶段实现了从数据库中获取数据并显示到表格中，下个阶段将实现数据的搜索过滤功能