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. POJ 1163 The Triangle【dp+杨辉三角加强版(递归)】

    The Triangle Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 49955   Accepted: 30177 De ...

  2. [51nod1597]有限背包计数问题

    你有一个大小为n的背包,你有n种物品,第i种物品的大小为i,且有i个,求装满这个背包的方案数有多少 两种方案不同当且仅当存在至少一个数i满足第i种物品使用的数量不同 Input 第一行一个正整数n 1 ...

  3. BZOJ1758: [Wc2010]重建计划(01分数规划+点分治+单调队列)

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1758 01分数规划,所以我们对每个重心进行二分.于是问题转化为Σw[e]-mid>=0, ...

  4. HDFS(数学题)

    题目连接:http://acm.tju.edu.cn/toj/showp.php?pid=4119 4119.   HDFS Time Limit: 5.0 Seconds   Memory Limi ...

  5. Ubuntu搭建Gitlab服务器

    想到Gitlab就必定会想到SVN,因为两者都是代码管理系统,作为开发人员来说,用习惯了SVN的图形化界面和SVN代码更新和提交的方式, 可能就会觉得使用git会比较麻烦,其实不然git使用起来非常方 ...

  6. linux基本命令学习02

    =============================================================================a.txtc:\abc\a.txt windo ...

  7. Oracle_复杂查询综合

    Oracle_复杂查询综合 -- 1.列出所有员工的年工资,按年薪从低到高排序. select,) income from emp order by income;   -- 2.列出薪金比" ...

  8. 使用pscp命令在Windows与linux之间拷贝文件

    在Linux环境下做开发时,我们可能会在windows下远程控制Linux系统,本文介绍如何使用putty的pscp.exe在Windows和 Linux(本文使用fedora)之间copy文件. 工 ...

  9. Java compiler level does not match the version of the installed java project facet错误的解决

    因工作的关系,Eclipse开发的Java项目拷来拷去,有时候会报一个很奇怪的错误.明明源码一模一样,为什么项目复制到另一台机器上,就会报“java compiler level does not m ...

  10. linux的nvme驱动需要关心的统计项

    blk-mq-sysfs.c生成了一些其他的nvme的统计项, 有多少个online的cpu,在驱动加载的时候会默认生成多少个队列,除非内存不足或者在保留内核中,则会减少. [root@localho ...