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. Arduino 开源库 u8glib2 之 图标显示【原创】

    Arduino 开源库 u8glib2 研究之 图标显示                -----------------关于drawXBM drawXBMP函数使用的研究 因为心血来潮,近来想做一个 ...

  2. UEP-添加表格

    UEP中添加新的表格标签:function initCustomToolBar(){ var strHtml="<table> <tr> <td id=\&qu ...

  3. [国嵌攻略][155][I2C用户态驱动设计]

    用户态驱动模型 用户态驱动模型首先是一个应用程序,其次是在这个用户程序中通过内核调用来驱动设备. IIC通用驱动代码 IIC通用驱动程序的代码在/drivers/i2c/i2c-dev.c中.一次读操 ...

  4. Netty5序章之BIO NIO AIO演变

    Netty5序章之BIO NIO AIO演变 Netty是一个提供异步事件驱动的网络应用框架,用以快速开发高性能.高可靠的网络服务器和客户端程序.Netty简化了网络程序的开发,是很多框架和公司都在使 ...

  5. TypeScript笔记 6--接口

    接口定义 接口和Java语言一样,都是通过关键字interface定义的,如下例子: interface People { name: string; age: number; hobby?: str ...

  6. TypeScript笔记 3--基础类型

    强类型是TypeScript值得称赞的特性,对于很多后端开发者来说是绝对的福利,加上静态检查使得我们可以在开发态就可以发现很多问题. TypeScript中的类型和JavaScript差不多,下面我们 ...

  7. gettype

    取得变量的类型. 语法: string gettype(mixed var); 返回值: 字符串 函数种类: PHP 系统功能 内容说明 本函数用来取得变量的类型.返回的类型字符串可能为下列字符串其中 ...

  8. encodeURIComponent() 函数

    https://baike.baidu.com/item/encodeURIComponent() 函数/7418815?fr=aladdin encodeURIComponent() 函数[1] 作 ...

  9. dede 提交表单 发送邮件

    第一步:要到dede后台设置好邮箱的资料,并且确定所用的邮箱开启了smtp 第二步:找到/plus/diy.php在 [cce]$query = "INSERT INTO `{$diy-&g ...

  10. CCNA -OSI七层模型

    OSI (开放系统互联(Open System Interconnection)) OSI是Open System Interconnection的缩写,意为开放式系统互联.国际标准化组织(ISO)制 ...