html整合vue elementui,vue2.0结合Element-ui实战案例

前言

我们将会选择使用一些 vue 周边的库vue-cli, vue-router,axios,moment,Element-ui搭建一个前端项目案例,后端数据接口,会使用json-server快速搭建一个本地的服务,方便对数据的增删改查,

利用以上技术我们会搭建一个vue案例,效果展示图:

d328d783847a5c14cd6996984682b60d.gif

以上就是我们最终要实现的全部效果,我会一块一块的讲解,关于脚手架安装和json-server搭建,在本次博客中,不会讲解,如果想看的话,在小编的博客中,也有讲解关于脚手架搭建和json-server搭建,如果想学习的话,可以看一下。

1.项目结构展示

8aabe6bf7ebf46a55ab82c4ad5348785.png

96829930e1cbaa7513a1dfd80ea94931.png

左边第一个是前端项目结构,第二个为json-server服务端

2.页面搭建

在本次案例中,小编采用Element-ui快速搭建前端页面,以提高效率。如果不了解的话,可以去官网看一下

2.1安装element-ui

通过npm install element-ui -S 安装前端ul框架,安装完之后,并在main.js引入

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

2.2页面布局UserInfo.vue

直接通过element-ui中table布局,把整体建构页面布局完成,

用户信息管理界面

添加

:data="searchUserinfo(keyUser)"

border

style="width: 100%">

type="index"

label="序号"

align="center"

width="60">

label="日期"

align="center"

width="120">

{{ scope.row.date | moment}}

label="姓名"

align="center"

width="100">

{{ scope.row.name }}

label="邮箱"

align="center"

width="160">

{{ scope.row.email }}

label="标题"

align="center"

width="160">

{{ scope.row.title }}

label="评价"

align="center"

width="200">

{{ scope.row.evaluate }}

label="状态"

align="center"

width="160">

{{ scope.row.state }}

size="mini"

@click="handleEdit(scope.$index, scope.row)">编辑

size="mini"

type="danger"

@click="handleDelete(scope.$index, scope.row)">删除

2.3页面数据获取并展示

通过axios请求本地搭建的服务数据,把得到的数据展示到页面当中。

也是通过cnpm install axios --save安装并在main.js中引入

import axios from 'axios'

Vue.prototype.$axios = axios

我们需要在方法methods中定义一个getUserInfo方法,用于请求数据

data () {

return {

tableData: [], 用于存放数据

}

}

getUserInfo() {

this.$axios.get('http://localhost:3000/data').then(res => {

this.tableData = res.data

})

},

这是时候,数据是请求到了,但是页面并为展示,这就关系到vue的生命周期。如果对vue生命周期不是很了解的话,可以官网仔细看一遍,

e02bcffc1afc1f4377318005e0ef8a46.png

我们只需要在created这个生命周期钩子中,调用我们请求数据的方法就可以把数据展示到页面中。这样我们就完成第一步了,页面数据请求展示created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。

3.添加数据

刚才我们已经完成第一步,把后台的数据展示到前端页面中,接下来我们对数据进行添加,页面全部都是用element搭建

3.1页面结构搭建,把AddUserInfo.vue组件当成一个子组件,在父组件中引入这个子组件,点击添加按钮,弹出这个添加对话框

v-model="formDate.date"

type="date"

placeholder="选择日期">

3.2我们在父组件UserInfo中引入子组件AddUserInfo.vue,

//使用这个组件,

import AddUser from './AddUserInfo.vue' //引入组件

components:{ //注册

AddUser,

}

3.3通过点击父组件的添加按钮触发子组件弹出框

dialogAdd是我们在父组件定义的的,需要传递给子组件,

添加

在data定义用于是否弹出添加弹出框,默认false不弹出,只有点击添加按钮的时候才弹出弹出框

dialogAdd:{

show:false

},

methods方法中

hanldeAdd(){ //添加

this.dialogAdd.show = true; //弹出对话框

},

3.4子组件需要接受父组件传递的方法.并请求数据。实现添加

export default {

name: 'AddUser',

props:{

dialogAdd:Object

},

data () {

return {

formDate:{

date:'',

name:'',

email:'',

title:'',

evaluate:'',

state:''

},

formrules:{

date:[{required:true,message:"日期不能为空",trigger:"blur"}],

name:[{required:true,message:"用户名不能为空",trigger:"blur"}],

email:[{required:true,message:"邮箱不能为空",trigger:"blur"}],

}

}

},

methods:{

dialogFormAdd(formdong) {

this.$refs[formdong].validate((valid) => {

if (valid) {

this.$axios.post('http://localhost:3000/data',this.formDate).then(res => {

this.$message({

type:"success",

message:"添加信息成功"

})

this.dialogAdd.show = false;

this.$emit('update');

})

this.formDate = ""

} else {

console.log('error submit!!');

return false;

}

})

}

}

}

this.$emit('update'); 子组件数据发生改变了,父组件视图却没有更新,这时候通过子创父,this.$emit,想父组件发送子组件传递的方法,

@update="getUserInfo" //接受子组件传递过来的方法去更新视图

4.实现删除

size="mini"

type="danger"

@click="handleDelete(scope.$index, scope.row)">删除

删除数据需要根据id去删除,使用es6模板字符串进行拼接

handleDelete(index,row) {

// 删除用户信息

this.$axios.delete(`http://localhost:3000/data/${row.id}`).then(res =>{

this.$message({

type:"success",

message:"删除信息成功"

})

this.getUserInfo() //删除数据,更新视图

})

},

5.实现编辑功能

在这里添加弹出框内容和编辑弹出框内容一模一样,可以选择进行封装,封装成一个组件,添加和编辑共同使用这一个组件,根据自定义一个字段来判断点击 的是添加还是编辑按钮。在本次案例中,没有封装,如果想封装的话,可以自己尝试封装组件,来提高效率。

5.1页面搭建EditUser.vue组件,也是当做一个子组件,在父组件中去引入这个子组件,并把获取的数据展示到页面中。

v-model="form.date"

type="date"

placeholder="选择日期">

在父组件中定义好需要传递的数据字段

dialogAdd:{ //编辑弹出框,默认是false

show:false

},

form:{ //编辑信息

date:'',

name:'',

email:'',

title:'',

evaluate:'',

state:''

},

5.2也是在方法中点击编辑按钮,在编辑中,点击拿一行,需要获取那一行的字段数据,并把获取的数据传递给子组件显示到弹出框中,需要肯据row,来获取每一行的数据。

size="mini"

@click="handleEdit(scope.$index, scope.row)">编辑

handleEdit(index,row){ //编辑

this.dialogEdit.show = true; //显示弹

this.form = {

date:row.date,

name:row.name,

email:row.email,

title:row.title,

evaluate:row.evaluate,

state:row.state,

id:row.id

}

},

当我门打印row的是,就是点击哪一行的编辑按钮,对应的数据就好打印出来,这时候我们只需要把得到的数据传递给子组件就行

b2dff989bc89bd10384aaffacf7da2d3.png

5.3父组件得到的数据,子组件通过props接受,和添加数据几乎一样

export default {

name: 'HelloWorld',

props:{

dialogEdit:Object,

form:Object

},

data () {

return {

formrules:{

date:[{required:true,message:"日期不能为空",trigger:"blur"}],

name:[{required:true,message:"用户名不能为空",trigger:"blur"}],

email:[{required:true,message:"邮箱不能为空",trigger:"blur"}],

}

}

},

methods:{

dialogFormEdit(formEdit) {

this.$refs[formEdit].validate((valid) => {

if (valid) {

this.$axios.put(`http://localhost:3000/data/${this.form.id}`,this.form).then(res => {

this.$message({

type:"success",

message:"编辑信息成功"

})

console.log(res)

this.dialogEdit.show = false;

this.$emit('updateEdit') //更新父组件数据视图

})

} else {

console.log('error submit!!');

return false;

}

})

}

}

}

6查询数据

6.1需要定义一个查询方法,通过filter对数组进行过滤,并返回一个新的数据,最后通过es6中includes方法,判断查询的条件是否包含,includes如果包含就返回true,如果不包含就返回false

searchUserinfo(keyUser) {

return this.tableData.filter((user) => {

if(user.name.includes(keyUser)) {

return user

}

})

}

把定义好的方法,绑定到data,因为这个方法会返回一个新的数组

3973d7311fb732ac483b9ac539c80ed7.png

7.时间格式化

写到这个案例已经基本写完了,还是一些细节需要修改,比如我我们添加日期,页面显示并不是我们想要的。我门只想要右边的效果.

febbbe8319e62e5d58c7723cc146fc08.png

f0dcd3653cfc8c2bc3fe53288c2434ba.png

这时候推荐一个日期格式化插件moment.js,可以快速帮我们解决这个问题

7.1通过npm install moment --save下载

在main.js引入

import moment from 'moment'

我们定义一个全局过滤的filter,无论在那个组件都可以使用,主要调用moment

//获取年份

Vue.filter('moment', function (value, formatString) {

formatString = formatString || 'YYYY-MM-DD HH:mm:ss';

return moment(value).format("YYYY-MM-DD"); // value可以是普通日期 20170723

});

8.全部代码

8.1UserInfo.vue组件代码

用户信息管理界面

添加

:data="searchUserinfo(keyUser)"

border

style="width: 100%">

type="index"

label="序号"

align="center"

width="60">

label="日期"

align="center"

width="120">

{{ scope.row.date | moment}}

label="姓名"

align="center"

width="100">

{{ scope.row.name }}

label="邮箱"

align="center"

width="160">

{{ scope.row.email }}

label="标题"

align="center"

width="160">

{{ scope.row.title }}

label="评价"

align="center"

width="200">

{{ scope.row.evaluate }}

label="状态"

align="center"

width="160">

{{ scope.row.state }}

size="mini"

@click="handleEdit(scope.$index, scope.row)">编辑

size="mini"

type="danger"

@click="handleDelete(scope.$index, scope.row)">删除

import AddUser from './AddUser.vue'

import EditUser from './EditUser.vue'

export default {

name: 'info',

data () {

return {

tableData:[],

dialogEdit:{

show:false,

},

dialogAdd:{

show:false

},

keyUser:"",

form:{ //编辑信息

date:'',

name:'',

email:'',

title:'',

evaluate:'',

state:''

},

}

},

methods:{

getUserInfo() {

this.$axios.get('http://localhost:3000/data').then(res => {

console.log(res)

this.tableData = res.data

})

},

hanldeAdd(){ //添加

this.dialogAdd.show = true;

},

handleEdit(index,row){ //编辑

this.dialogEdit.show = true; //显示弹

this.form = {

date:row.date,

name:row.name,

email:row.email,

title:row.title,

evaluate:row.evaluate,

state:row.state,

id:row.id

}

console.log(row)

},

handleDelete(index,row) {

// 删除用户信息

this.$axios.delete(`http://localhost:3000/data/${row.id}`).then(res =>{

this.$message({

type:"success",

message:"删除信息成功"

})

this.getUserInfo() //删除数据,更新视图

})

},

searchUserinfo(keyUser) {

return this.tableData.filter((user) => {

if(user.name.includes(keyUser)) {

return user

}

})

}

},

created(){

this.getUserInfo()

},

components:{

AddUser,

EditUser

}

}

h1{

font-size: 30px;

color: #333;

text-align: center;

margin: 0 auto;

padding-bottom: 5px;

border-bottom: 2px solid #409EFF;

width: 300px

}

8.2AddUserInfo.vue组件

v-model="formDate.date"

type="date"

placeholder="选择日期">

export default {

name: 'AddUser',

props:{

dialogAdd:Object

},

data () {

return {

formDate:{

date:'',

name:'',

email:'',

title:'',

evaluate:'',

state:''

},

formrules:{

date:[{required:true,message:"日期不能为空",trigger:"blur"}],

name:[{required:true,message:"用户名不能为空",trigger:"blur"}],

email:[{required:true,message:"邮箱不能为空",trigger:"blur"}],

}

}

},

methods:{

dialogFormAdd(formdong) {

this.$refs[formdong].validate((valid) => {

if (valid) {

this.$axios.post('http://localhost:3000/data',this.formDate).then(res => {

this.$message({

type:"success",

message:"添加信息成功"

})

this.dialogAdd.show = false;

this.$emit('update');

})

this.formDate = ""

} else {

console.log('error submit!!');

return false;

}

})

}

}

}

8.3EditUser.vue编辑组件

v-model="form.date"

type="date"

placeholder="选择日期">

export default {

name: 'HelloWorld',

props:{

dialogEdit:Object,

form:Object

},

data () {

return {

formrules:{

date:[{required:true,message:"日期不能为空",trigger:"blur"}],

name:[{required:true,message:"用户名不能为空",trigger:"blur"}],

email:[{required:true,message:"邮箱不能为空",trigger:"blur"}],

}

}

},

methods:{

dialogFormEdit(formEdit) {

this.$refs[formEdit].validate((valid) => {

if (valid) {

this.$axios.put(`http://localhost:3000/data/${this.form.id}`,this.form).then(res => {

this.$message({

type:"success",

message:"编辑信息成功"

})

console.log(res)

this.dialogEdit.show = false;

this.$emit('updateEdit')

})

} else {

console.log('error submit!!');

return false;

}

})

}

}

}

以上这次全部的案例deom,在过程中有些说的不是很好,请见谅,如果喜欢,请多多关注

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/504987.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机二级考试模拟表单答题,2016年计算机二级考试《VFP》模拟简答试题

1[简答题]1.建立一个表单文件myform,将employee表添加到表单的数据环境中,然后在表单中添加表格控件gridl,指定其记录源类型为“别名”、记录源为employee表文件,最后添加一个“退出”命令按钮控件Commandl,程序运行时…

中兴新支点操作系统_中兴新支点国产操作系统体验报告:使用流畅,性能稳定!...

笔者早就有听闻中兴新支点国产操作系统挺好用的,对配置要求不高,软件不少又没广告,一直想安装尝尝鲜,看看国产操作系统现在发展得怎样了。但是我又怕用不习惯要重装系统太麻烦,最后在朋友的建议下,我在虚拟…

tensorflowgpu利用率为0_直流电压利用率的提高方法-梯形波调制法

接上篇(直流(母线)电压利用率的提高方式-三次谐波注入法):Payton Sun:直流电压利用率的提高方法-三次谐波注入法​zhuanlan.zhihu.com,本篇介绍下另一种经典的提高方式-梯形波调制法 &#xff0…

python开发信息系统权限设置_利用Python实现权限设置的详细教程

一、私有化的实现 在Python中想定义一个类是比较简单的,比如要定义一个Person类,如下代码即可:当然我们也可以给类添加相应的属性,比如Person的姓名,年龄,性别等,并且在new一个Person对象后可以…

ifamre 大小随页面变_SEO优化中如何让你的页面访问速度更快

页面访问速度对于SEO优化来说是极为关键的一环。我们试想一下,如果某个访客花了几十秒才能打开你网站的首页,先不说这个访客抱着什么访问目的和什么渠道来的,一般正常的访客大概率都会放弃访问这个页面。由此可见,页面的访问速度是…

计算机三级数据库上机怎么考,最新计算机三级数据库上机考试试题

最新计算机三级数据库上机考试试题数据库指的是以一定方式储存在一起、能为多个用户共享、具有尽可能小的冗余度的特点、是与应用程序彼此独立的数据集合。下文为大家搜集整理的是计算机三级数据库技术考试题,希望能帮助大家好好复习,早日通过考试!第一题…

用户表如何区分普通用户和管理员_Gate.io 比特百科:什么是ETH 2.0及普通用户如何参与ETH 2.0质押挖矿...

ETH 2.0是什么ETH 2.0是ETH发展四阶段(1、前沿Frontier 2、家园Homestead 3、大都会Homestead 4、宁静Serenity)中的最后一个阶段。前三个阶段是ETH 1.0时期,而第四阶段ETH1.0正式升级为ETH 2.0,将从PoW工作量证明共识机制升级为P…

南充一中计算机机房被盗,成都理工大学与南充市第一中学共建优质生源基地

春秋代序立冬过,西河欢歌扬碧波;魅力一中呈诗韵,银杏绽黄迎嘉客。2019年11月14日上午10时,成都理工大学与南充市第一中学共建优质生涯基地的签约授牌仪式在南充一中新区隆重举行。南充一中副校长王洪秀在致辞中对关注南充一中发展…

list循环赋值_Python基础 | 0xd 条件判断与循环

条件判断所谓的条件判断就是根据一条或多条语句的执行结果(True/False)来决定执行那一块的代码。// 条件判断的三个关键字 //Python 使用if、else、elif 三个关键字的搭配来实现判断语句,使用示例如下:# 单分支(只有一个if),如果代码块只有一…

matlab 等高线_MATLAB作图实例:39:更改等高线图的填充颜色

本示例说明如何更改在填充等高线图中使用的颜色。更改颜色模板通过更改颜色图设置填充等高线图的颜色。将预定义的颜色图名称hot传递给colormap函数。[X,Y,Z] peaks;figurecontourf(X,Y,Z,20)colormap(hot)title(Hot Colormap)控制数据值到颜色模板的映射仅使用hot模板中心的颜…

git保存账号密码_Altium Designer 通过Git实现版本控制

为了解决每次对PCB工程进行修改时不能回溯的问题,以及为日后团队协作完成某项工程提供方便,所以我研究了一下如何在AD中实现版本控制。所幸的是,AD本身自带VCS功能(Version Control System),并支持SVN和Git两种VCS方式前提条件&am…

计算机字体原理,字体图标生成原理(1)

浏览器根据font-family解析渲染为不同图形的过程:1:读取文字内容转换成对应的 unicode码()计算机操作系统里面每个字符都有一个unicode编码,比如我们在web上输入\u6211跟输入“我”是一样的,因为「我」的unicode是\u6211(16进制)&#xff0…

asp 取菜单的名字_这样的奶茶店菜单设计,店面营业额能提高30%!

菜单是顾客了解奶茶店饮品品类、满足期待的一个载体,起着向顾客传递产品信息结构、激起购买欲望的重要作用。那么到底该怎么设计菜单才能吸引顾客呢?一、菜单风格要与品牌相符奶茶店的菜单设计风格一定要与品牌定位保持一致,着重突出店铺的风…

python ui自动化测试框架_Python自动化测试框架

PythonunittestrequestsHTMLTestRunner框架1 目录说明common:公共文档,存放包含HTMLTestRunner.py,logUtils.py等公用文件data:数据文档,存放测试数据;接口数据使用excel存储log:存放日志文件re…

计算机键盘怎么换键,笔记本电脑如何切换键盘_笔记本切换键盘的步骤-win7之家...

键盘是我们使用电脑必不可少的输入设备,在使用过程中,有时候需要进行键盘切换,比如数字和字母之间的切换,台式电脑切换比较简单,因为它字母跟数字键盘会分开,但是如果是笔记本电脑的话,要如何切…

geojson地图_Geojson地图pandas数据帧

geojson数据结构geojson作图方法geojson与pandashttps://blog.exploratory.io/visualizing-geospatial-data-with-your-own-geojson-f96dde0f6296​blog.exploratory.io数据结构GeoJSON是用于表示地理对象的格式。 它与常规JSON不同,因为它支持几何类型,…

views 多个文件夹 netcore_.NET Core 分发打包

由于 .NET Core 现已可用于更多平台,因此了解如何为其打包、命名并进行版本控制将很有用。 这样,无论用户选择在哪里运行 .NET,包维护人员均可以帮助确保获得一致的体验。 本文对以下用户非常有用:尝试从源生成 .NET Core。想要更…

erlang安装_消息中间件(八)- RabbitMQ - 安装

步骤1:erlang步骤2:erlang 安装程序步骤3:配置路径步骤4:运行测试步骤5:安装 rabbitMQ步骤6:配置插件步骤7:重启 rabbitmq步骤8:管理员身份步骤9:重启 rabbitmq步骤10:访问管理界面步骤11:管理界面步骤 1 : erlangrabbitMQ 是基于 erlang 语言开发的,就如同 activem…

ihtml2document能不能根据id获取dom_使用DOM进行XML文件的解析

1. 什么是XML?xml是格式化的纯文本,用于存储数据和格式。2. DOM是什么?DOM是xml的一种解析方法(此外还包括SAX等,此处不提),它将xml文件抽象成为一个树型结构,这棵树个各个树叶就是节…

青茶什么时候拆_为什么日本绿茶那么绿?比中国的高级绿茶还要绿

我们经常可以从电影、电视、动画片、日式抹茶看到日本绿茶所呈现出来的样子,绿的,鲜脆欲滴的绿。到了日本,待客之道泡煎茶,可以更直观的看到煎茶的绿,这种绿是我们在国内不曾见到的绿,中国的高级绿茶也呈现…