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. 最新版Sublime Text Build 3156 x64 的下载 + 注册码 + Install Package Control + 汉化教程

    一.Sublime Text  下载 神器 Sublime Text 最近开始更新到开发版本 Build 3156,本身英语不是太6,汉化党自然各种百度汉化教程,网上不是一堆绿色汉化包,就是让你下载汉 ...

  2. JAVA代码实现嵌套层级列表,POI导出嵌套层级列表

    要实现POI导出EXCEL形如 --A1(LV1) ----B1(LV2) ----B2(LV2) ------C1(LV3) ------C2(LV3) ----B3(LV2) --A1(LV1)

  3. Oracle忘记密码如何重

    ---恢复内容开始--- 昨天安装Oracle11g R2的时候给scott用户设置密码,当时没有显示而且还只以输入一次,可能密码输入错误,结果今天用scott用户登录果然密码不对,还好sys和sys ...

  4. 改进ban冒泡排序

    设置一标志性变量pos,用于记录每趟排序中最后一次进行交换的位置.由于pos位置之后的记录均已交换到位,故在进行下一趟排序时只要扫描到pos位置即可. //改进后算法如下: function bubb ...

  5. 从零开始学习前端开发 — 3、CSS盒模型

    ★  css盒模型是css的基石,每个html标签都可以看作是一个盒模型. css盒模型是由内容(content),补白或填充(padding),边框(border),外边距(margin)四部分组成 ...

  6. java if与for循环的题

    //打印一个4*5的空心长方形        /*        for (int i = 0; i < 5;i++ ) {            if (i == 0 | i == 4) {  ...

  7. 怎么去掉织梦网站首页带的index.html/index.php

    方法1. 1)在空间面板里面找到默认首页设置: 我们是需要去掉index.html,这时我们只需要把index.html这个把它移到最顶级去就行,然后点击确定,在打开网站刷新下,就基本可以解决了! 其 ...

  8. phpfpm配置 php中的坑

    ###### 记一些坑```//phpfpm配置pm.max_children = 最大并发数详细的答案:pm.max_children 表示 php-fpm 能启动的子进程的最大数量.因为 php- ...

  9. PHP闭包Closure与array_reduce结合的一个范例

    最近在研究laravel5.5的源代码,发现了其中的一段代码觉得挺有意思! 文件:vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.p ...

  10. Mac OS启动服务优化高级篇

    一.Mac下的启动服务主要三个可配置的地方 1.系统偏好设置->帐户->登陆项 2./System/Library/StartupItems 和 /Library/StartupItems ...