![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
Wilson Tsai
这个作者很懒,什么都没留下…
展开
-
Vue之功能全面的表格(十)表格数据的Excel导入
文章目录上传文件对话框后台部分完善前端测试小结上传文件对话框1、上传对话框显示属性,上传成功方法,上传路径data() { return { ... uploadShow: false, }},methods: { ... uploadSuccess(res) { alert(res) }},computed: { ... uploadUrl() { return `${th转载 2020-08-04 18:20:13 · 624 阅读 · 0 评论 -
Vue之功能全面的表格(九)表格数据的Excel导出
文章目录服务器端客户端运行结果小结服务器端1、使用officegen来生成excel文件先安装 npm install officegenvar officegen = require('officegen')var fs = require('fs')const status = ['未开始', '进行中', '搁置', '完成']...router.route('/download').post((req, res) => { var todos = req.bo转载 2020-08-04 17:45:26 · 259 阅读 · 0 评论 -
Vue之功能全面的表格(八)表格数据的更新和删除
文章目录传递Todo对象添加路由异步请求更新Todo状态删除数据小结传递Todo对象1、在打开对话框时,将选中的todo对象复制后设置为currentTodo<el-table-column label="操作"> <template slot-scope="scope"> <el-button size="small" type="warning" icon="el-icon-edit" @click="editTodo(scope.row)"><转载 2020-08-04 17:24:24 · 1528 阅读 · 0 评论 -
Vue之功能全面的表格(七)通过POST请求添加数据
文章目录路由与数据库访问提交POST请求效果展示小结路由与数据库访问1、打开server项目的router.js,在路由中添加post方法var router = require("express").Router()var Todo = require('../models/todos')router.route('/').get((req, res) => { Todo.find((err, todos) => { if (err) {转载 2020-08-04 16:21:08 · 1492 阅读 · 0 评论 -
Vue之功能全面的表格(六)实现带有数组输入的表单
文章目录输入表单添加作者删除作者小结输入表单1、编辑DataTable.vue,在对话框中加入表单,包含除添加作者以外的所有输入框 <!-- 对话框 --> <edit-dialog :show="editShow" title="编辑学习计划" @close="closeEditDialog" @save="saveTodo"> <!-- 学习内容表单 --> <el-form :model="currentTodo"转载 2020-08-04 16:04:05 · 2402 阅读 · 1 评论 -
Vue之功能全面的表格(五)对话框的弹出和关闭
文章目录对话框组件小结对话框组件1、创建一个对话框组件,具备传递close和save事件的能力,需要注意的是:当组件使用父组件传入的prop参数作为对话框的visible属性时,需要将其转化为组件自己的data属性或computed属性,不然可以正常运行,但后台会报错,如果使用data属性,需要添加watch监视器,使用computed属性,需要同时具备get和set方法。其次,需要在before-close函数中修改visible属性。2、直接在父组件中使用对话框而不创建子组件的话,可以不用考转载 2020-08-04 15:17:14 · 1801 阅读 · 0 评论 -
Vue之功能全面的表格(四)表格数据的排序和分页
文章目录数据排序表格分页小结数据排序1、为表格设置排序情况变化的监听事件,修改表格数据源为排序后的数据<!-- 表格区 --><el-table :data="sortedData" @sort-change="sortChange">...</el-table> data () { return { ... sortProp: '', // 新增 sortOrder: '' // 新增 } }转载 2020-08-04 14:52:54 · 2396 阅读 · 0 评论 -
Vue之功能全面的表格(三)筛选表格中的数据
文章目录学习计划状态过滤学习完成时间过滤搜索框过滤小结学习计划状态过滤1、对学习计划状态列进行美化data () { return { data: [], filterType: '', statuses: ['未开始', '进行中', '搁置', '完成'], // 修改 statusColors: ['info', 'primary', 'warning', 'success'] // 新增 }}<el-table-转载 2020-08-04 12:18:00 · 6692 阅读 · 2 评论 -
Vue之功能全面的表格(二)创建表格
文章目录数据准备后台服务器引入axios显示数据显示结果小结数据准备1、启动mongodb数据库,创建数据库test和表todos,在表格中插入几条测试数据(author一列为数组)mongodb的安装过程后台服务器2、创建工程vue-table-server1)创建一个空白文件夹vue-table-server,先在文件夹下输入以下命令创建package.json,输入后会提示输入一系列项目参数,可全部按回车采用默认项npm initnpm i -s express2)引入mongod转载 2020-08-04 11:18:02 · 4081 阅读 · 2 评论 -
Vue之功能全面的表格(一)用Element创建基本页面布局
文章目录引入Element基本页面查看效果引入Element1、用vue脚手架创建工程npm i -g vue-clivue init webpack vue-table-client2、安装element-uinpm i -s element-ui3、引入elementimport Vue from 'vue'import Element from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(El转载 2020-08-04 09:39:52 · 1489 阅读 · 0 评论 -
Vue之用户登录功能(六)使用axios解决‘Access-Control-Allow-Origin’跨域
文章目录引入axios发送Ajax请求解决’Access-Control-Allow-Origin’跨域问题总结引入axios1、回到vue脚手架工程,输入命令npm i axios2、在src/axios/目录下创建index.jsimport Vue from 'vue'import axios from 'axios'axios.defaults.baseURL = 'http://127.0.0.1:3000'Vue.prototype.$ajax = axios3、在mai转载 2020-08-03 09:02:41 · 12485 阅读 · 2 评论 -
Vue之用户登录功能(五)连接MongoDB数据库
文章目录安装MongoDB连接数据库测试连接小结安装MongoDB1、参考安装,启动MongoDB,并注册为Windows服务2、创建test数据库和users表3、在users表中插入一条数据连接数据库4、回到之前创建的login-server项目,引入mongodb和mongoosenpm i mongodb mongoose --save5、在目录models/下创建user.js文件var mongoose = require('mongoose')var userSche转载 2020-07-31 17:34:21 · 2966 阅读 · 0 评论 -
Vue之用户登录功能(四)用Express创建后台服务器
创建项目1、首先创建一个空白文件夹login-server,先在文件夹下输入以下命令创建package.json,输入后会提示输入一系列项目参数,可全部按回车采用默认项npm init2、在该文件目录下引入express(会自动安装所需依赖)npm i express --save3、最后在项目目录下创建app.js作为启动文件,整个目录结构如下创建路由4、编辑app.js文件,创建一条路径为/validate,的POST路由var express = require('express')转载 2020-07-31 16:27:12 · 588 阅读 · 0 评论 -
Vue之用户登录功能(三)使用Vuex管理全局数据
引入Vuex1、首先用npm安装Vuexnpm i vuex2、在目录src/vuex/下创建index.js文件import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ // 全局变量 state: { user: undefined }, // 修改全局变量必须通过mutations中的方法 // mutations只能采用同步方法 m转载 2020-07-31 14:54:10 · 1210 阅读 · 1 评论 -
Vue之用户登录功能(二)使用Element美化网站和实现验证
引入Element1、首先进入项目目录下,用npm安装Element npm i element-ui -S2、在目录src/element/下创建文件index.jsimport Vue from 'vue'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)3、然后在main.js中添加以下代码进行引入import './element'转载 2020-07-31 14:11:53 · 1108 阅读 · 0 评论 -
Vue之用户登录功能(一)工程创建和路由配置
生成项目1、前往node.js官网下载安装node。安装完成,控制台任意路径输入node -v命令,如果显示版本号,说明安装成功。(现在安装node.js会自动安装npm命令,所以不用再单独安装npm。)2、全局安装vue脚手架工具。npm i vue-cli -g3、切换到工程目录,生成vue脚手架工程。vue init webpack login4、此时出现如下提示,则执行命令npm install -g @vue/cli-init5、安装完成6、再次执行vue init webpac转载 2020-07-31 14:03:30 · 2102 阅读 · 0 评论