Vue实战篇(增删改查附编辑添加model(弹框)组件共用)

前言

最近一直在学习Vue,发现一份crud不错的源码 预览链接 https://taylorchen709.github.io/vue-admin/#/login

自己下载下来后仔细研究了起来,发现编辑和增加写了两个弹框,我觉得这不符合vue的组件原则,于是自己把编辑和添加改成共用的

因为也是纯粹的写写前端页面,所以数据方面用的是mock.js,真实的模拟请求。

这个项目用到的

技术栈:

vue + webpack + vuex + axios

结构:

  • build: webpack配置
  • config: 项目配置参数
  • common 共用的
  • components:组件
  • api :增删改查的接口
  • mock:模拟数据
  • src assets: 静态资源文件,存放图片啥的
  • router.js: 路由表
  • store: 状态管理
  • utils: 常用工具类封装
  • views: 视图页面
  • static: 静态文件 存放 favicon.ico 等等

效果图:





一些更加详细的配置可在github上查看

在线预览地址, https://mgbq.github.io/#/login

github地址 https://github.com/mgbq/Vue-admin (记得star,fork哦)

博客地址 http://blog.csdn.net/qq_32340877/article/details/79309690

VUE2.0增删改查附编辑添加model(弹框)组件共用的更多相关文章

  1. Vue2.0增删改查案例(Vue+Less+LocalStorage)

    本人写的小程序,功能还在完善中,欢迎扫一扫提出宝贵意见!           Vue+Less+LocalStorage 安装Less:npm install less less-loader --s ...

  2. yii2.0增删改查实例讲解

    yii2.0增删改查实例讲解一.创建数据库文件. 创建表 CREATE TABLE `resource` ( `id` int(10) NOT NULL AUTO_INCREMENT, `textur ...

  3. EF4.0和EF5.0增删改查的写法区别及执行Sql的方法

    EF4.0和EF5.0增删改查的写法区别 public T AddEntity(T entity) { //EF4.0的写法 添加实体 //db.CreateObjectSet<T>(). ...

  4. MVC ---- EF4.0和EF5.0增删改查的写法区别及执行Sql的方法

    EF4.0和EF5.0增删改查的写法区别 public T AddEntity(T entity) { //EF4.0的写法 添加实体 //db.CreateObjectSet<T>(). ...

  5. HBase1.2.0增删改查Scala代码实现

    增删改查工具类 class HbaseUtils { /** * 获取管理员对象 * * @param conf 对hbase client配置一些参数 * @return 返回hbase的HBase ...

  6. Vue+Mock.js模拟登录和表格的增删改查

    有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...

  7. EF5.0增删改查的写法及执行Sql的方法

    public T AddEntity(T entity) { //EF4.0的写法 添加实体 //db.CreateObjectSet<T>().AddObject(entity); // ...

  8. EF4.0和EF5.0增删改查写法区别

    1 public T AddEntity(T entity) 2 { 3 //EF4.0的写法 4 添加实体 5 //db.CreateObjectSet<T>().AddObject(e ...

  9. yii2.0增删改查

    //关闭csrf public $enableCsrfValidation = false; 1.sql语句 //查询 $db=\Yii::$app->db ->createCommand ...

随机推荐

  1. [bzoj 2017] [Usaco2009 Nov]硬币游戏

    一个多月没更博客了..(期间明白了自己有多傻逼. 这种问题大概就倒着做... f[i][j]:表示考虑剩下的硬币i..n,且之前的人取了j个时,先手最多拿到的钱数.aft[i]:表示硬币i..n的总钱 ...

  2. HDU_5563Clarke and five-pointed star

    Clarke and five-pointed star Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K ( ...

  3. 同一台电脑使用 gitlab 和 github 配置

    Git 客户端与服务器端的通信支持多种协议,ssh 最常用.ssh的公钥登录流程,用户将自己的公钥存储在远程主机,登录时,远程主机会向用户发送一条消息,用户用自己的私钥加密后,再发给服务器.远程主机用 ...

  4. python对象的基本操作代码

    基础: #对象.方法() # a=1 # b=a # a=2 # # _a=2423 # # print(a) # print(b) # # print(False and False) # prin ...

  5. JavaScript函数声明提升

    首先,JavaScript中函数有两种创建方式,即函数声明.函数表达式两种. 1.函数声明. function boo(){ console.log(123); } boo() 2.函数表达式. va ...

  6. jQuery中获取文档的高度、可视区域高度以及滚动条距页面顶部的高度

    在写页面的时候,经常会碰到这样的情况,就是要获取文档的高度.可视区域高度或者滚动条距页面顶部的高度等情况. 但我总是有些爱搞混淆了,这里还是简单做个笔记吧,这里只限于使用jQuery来获取. 1.获取 ...

  7. js动态添加-表格逐行添加、删除、遍历取值

    关于js对表格进行逐行添加,今天抽空整理了一下:新建一个html文件(没有编辑器的可以新建一个demo.txt文件,然后改后缀名为demo.html),把下面代码全部贴进去即可.功能包括:表格添加一行 ...

  8. 98、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

  9. css cursor属性-显示的光标的类型(形状)的用法和定义

    在网页布局的时候,在特定的地方,光标形状各有区别.这个时候,就需要用到css的cursor属性.根据自身需要选择设置鼠标指针样式. 定义和用法 cursor 属性规定要显示的光标的类型(形状). 该属 ...

  10. Python自建logging模块

    本章将介绍Python内建模块:日志模块,更多内容请从参考:Python学习指南 简单使用 最开始,我们用最短的代码体验一下logging的基本功能. import logging logger = ...