app开发网站建设哪家好/seo搜索引擎优化方式

文章目录

• • • 上传文件对话框
    • 后台部分
    • 完善前端
    • 测试
    • 小结

上传文件对话框

1、上传对话框显示属性，上传成功方法，上传路径

data() {return {...uploadShow: false,}
},
methods: {...uploadSuccess(res) {alert(res)}
},
computed: {...uploadUrl() {return `${this.$ajax.defaults.baseURL}todos/upload`}
}

2、上传文件对话框

 上传关闭

3、给导入按钮绑定点击事件

导入

uploadTodo () {this.uploadShow = true
},

后台部分

4、用npm安装formidable和node-xlsx两个包

npm i -s formidable node-xlsx

5、编辑server项目中router.js

// 引入
var formidable = require('formidable')
var node_xlsx = require('node-xlsx')// 将字符串转化为日期
function convertDate(s) {console.log(s)let data = s.split('/')let year = parseInt(data[0])let month = parseInt(data[1])-1let day = parseInt(data[2])return new Date(year, month, day)
}router.route('/upload').post((req, res) => {let form = new formidable.IncomingForm()form.encoding = 'utf-8'form.parse(req, (err, fields, files) => {let workbook = node_xlsx.parse(files.file.path)// workbook[0] 即 sheet1 中的数据， 再用slice去掉表头let data = workbook[0].data.slice(1)for(let item of data){let tmp = {}tmp.name = item[0]tmp.author = item[1].split(',')tmp.status = 0tmp.completeDate = convertDate(item[2])let todo = Todo.create(tmp)}res.send('导入完成')})
})

完善前端

6、回到client项目，在接受到成功消息后更新数据，关闭对话框

uploadSuccess(res) {this.$notify({type: 'success',message: res})this.update()this.uploadShow = false
}

测试

7、创建一个Excel文件，输入测试数据（可输入多条）

日期需要转换成字符串类型哦

8、导入后效果

小结

表格实现了增删改查，excel导入导出等功能，源代码下载地址
github地址
我的git地址