如何利用vue+vue-router+elementUI实现简易通讯录


Posted in Javascript onMay 13, 2019

一个具有基本增删改查功能的通讯录,数据保存在本地的localStorage中。

 demo地址: https://junjunhuahua.github.io

1. 所用技术

js框架: vue2  https://cn.vuejs.org/

ui框架: elementUI  http://element.eleme.io/#/zh-CN

脚手架: vue-cli

单页: vue-router  https://router.vuejs.org/zh-cn/

模块打包: webpack

2. 脚手架搭建

# 全局安装 vue-cli

$ npm install -g vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack contact

$ cd contact

# 安装依赖

$ npm install

$ npm run dev

这是vue官方基于webpack的脚手架,run dev后浏览器会自动打开localhost:8080,也可以使用run build命令,执行build命令后会自动将src目录中的内容进行编译打包压缩,然后在dist目录中可以看到这些文件

3. 目录结构

项目根目录:

如何利用vue+vue-router+elementUI实现简易通讯录 

build为构建项目所用的node代码,config为构建时的一些配置项,dist为打包后(npm run build 用于发布)的代码,node_modules为node模块,src为开发时所用的代码。

src目录:

如何利用vue+vue-router+elementUI实现简易通讯录

assets为全局css,图片,以及一些工具类的js,components为vue的组件,router为路由配置,app.vue为主页面的组件,config.js为目录配置项,main.js为入口js

4. main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import utils from './assets/utils.js'
import 'element-ui/lib/theme-chalk/index.css'
import './assets/normalize.css'

Vue.use(ElementUI)
Vue.use(utils)

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 ElementUI,
 template: '<App/>',
 components: { App }
})

main.js的主要工作是引入一些框架,全局css,以及工具函数,还会处理vue组件的加载,最后实例化vue。

5. App.vue

.vue文件是什么?  https://cn.vuejs.org/v2/guide/single-file-components.html

App.vue可以认为是应用最外层的一个容器。

<template>
 <div id="app">
 <div class="app-left">
  <el-row class="tac">
  <el-col>
   <el-menu :default-active="menuIndex" class="el-menu-vertical-demo"
     background-color="#545c64" text-color="#fff" :unique-opened="menuUniqueOpen" :router="menuRouter"
     active-text-color="#ffd04b">
   <h3>我的应用</h3>
   <template v-for="(item, index) in menuData">
    <!-- 此处的index需显示转换为string,否则会报warn -->
    <el-submenu :index="'' + (index + 1)">
    <template slot="title">{{ item.name }}</template>
    <template v-for="(subItem, i) in item.value">
     <!-- 此处index格式为父级的index加上下划线加上当前的index,index都需加1 -->
     <router-link tag="span" :to="subItem.path">
     <el-menu-item :index="subItem.name">{{ subItem.title }}</el-menu-item>
     </router-link>
    </template>
    </el-submenu>
   </template>
   </el-menu>
  </el-col>
  </el-row>
 </div>
 <div class="app-right">
  <router-view></router-view>
 </div>
 </div>
</template>

<script>
 import menuData from './config'

 export default {
 name: 'app',
 data () {
  return {
  menuData,
  menuIndex: '', // 菜单当前所在位置
  menuUniqueOpen: true, // 菜单项是否唯一开启
  menuRouter: true // 是否开启路由模式
  }
 },
 mounted: function () {
  ...
 },
 watch: {
  '$route' (to) {
  this.menuIndex = to.name
  }
 }
 }
</script>

这边偷了一个懒,没有把左侧的menu单独做成一个vue而是混入App.vue中。

6. 路由

在正式写代码之前,首先要确定要项目的结构,模块如何划分,哪个模块对应哪个路由。

因为整个项目现在就划分出两个大板块,通讯录与记账本,所以路由第一级就只有contact和account两种。

Vue.use(VueRouter)
let myRouter = new VueRouter({
 routes: [
 {
  path: '*',
  component: () => import('../components/NotFoundComponent.vue')
 },
 {
  path: '/',
  redirect: '/contact'
 },
 {
  path: '/contact',
  name: 'Contact',
  component: () => import('../components/contact/List.vue')
 },
 {
  path: '/contact/edit',
  name: 'Contact',
  component: () => import('../components/contact/Edit.vue')
 },
 {
  path: '/account',
  name: 'Account',
  component: () => import('../components/account/list.vue')
 }
 ]
})

可以看到上面/contact和/contact/edit的name是相同的,这是为了让在新增或者编辑联系人页面下,还能让active状态停留在左侧我的联系人上,可以看到App.vue中的代码this.menuIndex = to.name就是进行的该操作,

虽然这样vue会报一个warn告诉我别重名[捂脸],暂时能想到的就是这样的操作方式了,有考虑过依靠判断path来确定是否显示高亮状态,但是当目录层级较深且较复杂的情况下,这样就不是很靠谱了。

component这里为什么是这种形式,而不是直接用一个组件名呢,因为当路由开始多起来的时候,一下把所有的组件都加载进来会非常非常慢且会加载到许多当时并没有用到的组件,通过import这种形式,可以让webpack将路由变换时用到的组件分开打包,网页会根据使用情况再进行

由于router是vue的组件,所以使用时记得要Vue.use一下。

7. 联系人列表页 --- contact/list.vue

<template>
 <div class="contact-list">
 <div class="contact-list-header">
  <el-button @click="goToNew" type="primary">新增联系人</el-button>
 </div>
 <div class="contact-list-content">
  <template>
  <div class="contact-list-wrap">
   <h3>高级检索</h3>
   <el-form ref="contactSearch" :model="searchParams" :inline=true>
   <el-form-item label="姓名">
    <el-input v-model="searchParams.name" placeholder="请输入需要检索的姓名"></el-input>
   </el-form-item>
   </el-form>
   <el-button type="primary" size="mini" round @click="contactSearch('contactSearch')">搜索</el-button>
  </div>
  <div class="contact-list-wrap">
   <h3>联系人列表</h3>
   <el-table
   :data="listNewData"
   style="width: 100%"
   @row-click="viewContact"
   :default-sort="{prop: 'name', order: 'descending'}"
   >
   <el-table-column
    label="姓名"
    prop="name"
    sortable
    width="180">
   </el-table-column>



...
   <el-table-column
    label="功能">
    <template scope="scope">
    <el-button size="mini" type="primary" @click.stop="editContact(scope)">编辑</el-button>
    <el-button size="mini" @click.stop="deleteContact(scope)">删除</el-button>
    </template>
   </el-table-column>
   </el-table>
  </div>
  </template>
 </div>
 <contact-view ref="contactView" :viewData="curData" :viewShow.sync="viewShow"></contact-view>
 </div>
</template>

<script>
 import contactView from './View.vue'

 export default {
 data () { ... },
 components: {
  contactView
 },
 computed: {
  listNewData: function () { ... },
 mounted: function () {
  this.listData = this.utils.getLocalStorage('vueContact')
 },
 methods: {
  goToNew: function () {
  this.$router.push('/contact/edit')
  },
  sexFormatter: function (row) { ... },
  deleteContact: function (res) {
  let data = res.row
  this.$confirm('此操作将永久删除该联系人, 是否继续?', '提示', {
   confirmButtonText: '确定',
   cancelButtonText: '取消',
   type: 'warning',
   callback: (action) => {
   if (action === 'confirm') {
    this.$delete(this.listData, data.id)
    this.utils.setLocalStorage('vueContact', this.listData)
   }
   }
  })
  },
  editContact: function (res) {
  let data = res.row
  this.$router.push({
   path: '/contact/edit', query: {id: data.id}
  })
  },
  viewContact: function (row) {
  this.viewShow = true
  this.curData = this.listData[row.id]
  },
  contactSearch: function () {
  let data = this.utils.getLocalStorage('vueContact')
  let newData = {}
  for (let item in data) {
   if (data[item].name.indexOf(this.searchParams.name) > -1) {
   newData[item] = data[item]
   }
  }
  this.listData = newData
  }
 }
 }
</script>

list.vue相当于该模块的主页,新增与编辑页面通过右上角的新建按钮或者列表中的编辑按钮进入,查看页面通过引入View.vue作为一个弹窗放在列表页中展示,不单独设置路由。

列表展示所使用的是elementUI的table组件

删除对象时一定要使用$delete,否则不会触发视图更新

view.vue代码:

<template>
 <div class="contact-view">
 <el-dialog :before-close="closePop" ref="myDialog" :visible="viewShow">
  <el-form :model="viewData" label-width="60px">
  <el-form-item label="姓名" prop="name">
   <el-input :readonly="true" v-model="viewData.name"></el-input>
  </el-form-item>
  ...
  <el-form-item label="备注">
   <el-input :readonly="true" type="textarea" v-model="viewData.desc"></el-input>
  </el-form-item>
  </el-form>
 </el-dialog>
 </div>
</template>

<script>
 export default {
 props: ['viewShow', 'viewData'],
 methods: {
  closePop: function () {
  // 需手动关闭弹窗,找到父组件中调用的地方进行事件的触发
  this.$parent.$refs.contactView.$emit('update:viewShow', false)
  }
 }

 }
</script>

这里有个比较值得注意的点,就是关闭查看弹窗,弹窗的开启关闭状态通过list也就是父级中的viewShow来控制,viewShow通过view也就是子级中的props流入到子级中,但是vue中的数据流向是默认是单向的,想要子级中修改父级属性必须使用emit,详见上面代码。

这里原先使用elementUI的dialog组件的自己的关闭,会报错,只能自己修改了。

ps: 为什么这里不用vuex处理父子组件的通信?因为如果是一个大型的后台管理系统,像这样的情况会经常发生,如果都放在vuex中管理,那vuex的体积会非常庞大,反而不利于维护。

8. 联系人编辑(新增)页 --- edit.vue

<template>
 <div class="contact-edit">
 <el-form ref="contactForm" :model="form" :rules="rules" label-width="80px">
  <el-form-item label="姓名" prop="name">
  <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="性别">
  <el-select v-model="form.sex" placeholder="请选择性别">
   <el-option label="男" value="male"></el-option>
   <el-option label="女" value="female"></el-option>
  </el-select>
  </el-form-item>

...
  <el-form-item label="备注">
  <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>
  <el-form-item>
  <el-button type="primary" @click="onSubmit('contactForm')">{{ btnName }}</el-button>
  <el-button @click="cancelForm">取消</el-button>
  </el-form-item>
 </el-form>
 </div>
</template>

<script>
 export default {
 data () {
  var nameValid = (rule, value, callback) => {
  if (!value) {
   callback(new Error('姓名不能为空'))
  } else {
   callback()
  }
  }
  var mobileValid = (rule, value, callback) => {
  let phonePattern = /(^\s*$)|(^[1][3,4,5,7,8][0-9]{9}$)/
  if (value && !phonePattern.test(value)) {
   callback(new Error('手机号格式不正确'))
  } else {
   callback()
  }
  }
  return {
  type: '', // 控制是否是新建
  ...
  rules: {
   name: [{validator: nameValid, trigger: 'blur'}],
   mobile: [
//   {required: true, message: '手机号不能为空', trigger: 'blur'},
   {validator: mobileValid, trigger: 'blur'}
   ]
  }
  }
 },
 // 组件加载后的钩子
 mounted: function () {
  this.checkPageStatus(this.$route.query.id)
 },
 // 路由在组件中的钩子
 beforeRouteUpdate: function (to, from, next) {
  this.checkPageStatus(to.query.id)
  next()
 },
 methods: {
  // 检查页面是新建还是编辑
  checkPageStatus: function (id) { ... },
  cancelForm: function () {
  this.$router.push('/contact')
  },
  onSubmit: function (formName) { ... }
 }
 }
</script>

可以看到mounted与beforeRouteUpdate中的代码有些重合,那是因为vue在路由仅仅只是参数变换的时候,是不会重新重新加载组件的,所以需要在beforeRouteUpdate中处理初始的数据。

nameValid与mobileValid为表单验证的函数,el-form配置rules属性名称,然后data中相应的添加rules即可开启表单验证,但是有一点一定要注意el-form-item上一定要设置对应的prop属性,rules才会生效。

9. 总结

非常简单的一个项目,但是有几个点一定要关注好:

模块的划分,模块划分要合理,尽量能保证模块的复用性

状态的管理,一定要明确什么东西要放vuex中,什么东西不用放,以免使项目的维护反而变得更复杂

如果是大型项目,路由中一定要让.vue文件在需要时再引入,否则会加重初次加载的负担

为了减少篇幅,删减了很多不重要的代码,需要查看源码请移步,项目地址: https://github.com/junjunhuahua/vue-basic-demo

github上的项目已改为后台提供接口,不再使用localStorage操作数据,后台项目使用MongoDB+node实现,具体项目:https://github.com/junjunhuahua/mongodb-demo

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
Jan 13 Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 Javascript
Javascript实现计算个人所得税
May 10 Javascript
js获取滚动距离的方法
May 30 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
vue百度地图 + 定位的详解
May 13 #Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 #Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 #Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 #Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
May 13 #Javascript
详解async/await 异步应用的常用场景
May 13 #Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 #Javascript
You might like
php常用Stream函数集介绍
2013/06/24 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
php邮件发送的两种方式
2020/04/28 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
js实现在网页上简单显示时间的方法
2015/03/02 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
Python实现的端口扫描功能示例
2018/04/08 Python
python实现二维数组的对角线遍历
2019/03/02 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
英语专业学生个人求职信
2014/01/28 职场文书
学生安全责任书模板
2014/07/25 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
认真学习保证书
2015/02/26 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python