前端最根底的就是 HTML+CSS+Javascript
。把握了这三门技术就算入门,但也仅仅是入门,当初前端开发的定义曾经远远不止这些。前端小课堂(HTML/CSS/JS
),本着晋升技术水平,打牢基础知识的中心思想,咱们开课啦(每周四)。
后面咱们根本学会了 Vue 的根本应用,那么明天咱们来尝试实现一个 库存管理系统,因为没有学服务端(放前面 express 外面做接口),咱们临时就不思考服务端的实现了,间接存本地。
demo 地址:https://www.lilnong.top/static/html/vue-erp-test.html。
demo 地址,批改为 vue@2.6.11,反对新的插槽语法:https://www.lilnong.top/static/html/vue-erp-test-vue@2.6.11.html
需要
- 部门治理
- 人员治理,人员须要和部门关联。
-
库存治理,须要关联人员
- 能够补货
- 能够被领用,须要有领用人和数量
- 须要有操作记录
需要大略就是这样,上面说一下咱们的实现计划:
- 因为没有服务端,所以数据寄存在 localStroage 中。
-
基本上就是 table + dialog
- table 负责展现数据
- dialog 负责新增批改数据
- 初始化从 localStroage 读取数据,每次操作完保留 localStroage。
实现
table 列表
代码如下,咱们来看一下外面都用到了那些货色
-
v-if 用来判断以后应该显示那个标签的内容
- 来个面试题 v-if 和 v-show 区别是什么?前端培训 - 中级阶段(35)- Vue 语法 之 Vue 自带的指令
-
v-bind,缩写为
:
size="mini"
用来传入了一个字符串,其实等价于:size="'mini'"
-
v-on,缩写为
@
@click="insertGroup"
用来实现单击时触发函数。
-
插槽,用于父组件给子组件传递 DOM
<el-button> 新增部门 </el-button>
,el-button
是一个组件,外部接管到了一个<slot name="default">
的内容。<template slot-scope="scope">
这里是一个作用域插槽,DOM 应用父级的,然而作用域应用子级的。当然slot-scope
被废除了,应该用 2.6.0 减少的v-slot
<div v-if="navIdx == 1">
<div class="header"> 部门治理 </div>
<div class="search-box">
<el-button
size="mini"
type="primary"
@click="insertGroup"> 新增部门 </el-button>
</div>
<el-table
:data="list1"
style="width: 100%;padding-left: 10px;">
<el-table-column
prop="id"
label="编号"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="名称"
width="auto">
</el-table-column>
<el-table-column
label="操作"
width="200">
<template slot-scope="scope">
<el-button
size="mini"
type="warning"
@click="updateGroup(scope.row)"> 批改部门信息 </el-button>
</template>
</el-table-column>
</el-table>
</div>
dialog
代码如下,咱们来看一下外面都用到了那些货色
- 首先咱们把一个
dialog
的状态,全副集成到一个memberInfo
变量中。
这样其实是不便咱们开发的,如果是多个 dialog 的场景,咱们就能够很不便的分辨出作用域。 -
.sync
(vue 2.3.0+ 新增)能够了解是对组件间数据双向绑定的一个扩大。之前只能用v-model
来做(:value
和@input
)。:visible.sync="memberInfo.dialogVisible"
子组件能够通过this.$emit('update:visible', newVisible)
来批改父组件的memberInfo.dialogVisible
的值。
-
插槽
- 具名插槽
<span slot="footer" class="dialog-footer">
,当然slot
被废除了,应该用 2.6.0 减少的v-slot
- 具名插槽
<el-dialog
:title="memberInfo.id?' 批改 ':' 新增 '":visible.sync="memberInfo.dialogVisible"width="30%">
<div>
<div>
<el-input v-model="memberInfo.name" placeholder="人员名称"></el-input>
</div>
<div>
<el-select v-model="memberInfo.groupid" placeholder="请抉择所属部门">
<el-option
v-for="item in list1"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="mini" @click="memberInfoHandler(0)"> 取 消 </el-button>
<el-button size="mini" type="primary" @click="memberInfoHandler(1)"> 确 定 </el-button>
</span>
</el-dialog>
初始化数据 & 操作之后保留数据
初始化数据
created
时从 localStorage
读取数据。因为 Storage 只能保留字符串,所以还须要 JSON.parse
一下。
created(){this.list1 = JSON.parse(localStorage.getItem('list1')) || []
this.list2 = JSON.parse(localStorage.getItem('list2')) || []
this.list3 = JSON.parse(localStorage.getItem('list3')) || []
this.list4 = JSON.parse(localStorage.getItem('list4')) || []},
操作 & 保留数据
groupInfoHandler(type){
// 0 勾销 1 确认
console.log('groupInfoHandler', arguments)
if(!type){ }else{if(this.groupInfo.id){var item = this.groupHash[this.groupInfo.id];
this.saveLog(2, ` 更新部门:${item.name} => ${this.groupInfo.name}`)
item.name = this.groupInfo.name
}else{if(this.groupInfo.name.trim().length == ''){return this.$message.error("请输出名称")
}
this.list1.push({id: (this.list1.length+1),
name: this.groupInfo.name
})
this.saveLog(2, ` 新增部门:${this.groupInfo.name}`)
}
localStorage.setItem('list1',JSON.stringify(this.list1))
}
this.groupInfo.dialogVisible = false;
},
微信公众号:前端 linong
参考文献
- 前端培训目录、前端培训布局、前端培训打算