VUE2.0增删改查附编辑添加model(弹框)组件共用
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(弹框)组件共用的更多相关文章
- Vue2.0增删改查案例(Vue+Less+LocalStorage)
本人写的小程序,功能还在完善中,欢迎扫一扫提出宝贵意见! Vue+Less+LocalStorage 安装Less:npm install less less-loader --s ...
- yii2.0增删改查实例讲解
yii2.0增删改查实例讲解一.创建数据库文件. 创建表 CREATE TABLE `resource` ( `id` int(10) NOT NULL AUTO_INCREMENT, `textur ...
- EF4.0和EF5.0增删改查的写法区别及执行Sql的方法
EF4.0和EF5.0增删改查的写法区别 public T AddEntity(T entity) { //EF4.0的写法 添加实体 //db.CreateObjectSet<T>(). ...
- MVC ---- EF4.0和EF5.0增删改查的写法区别及执行Sql的方法
EF4.0和EF5.0增删改查的写法区别 public T AddEntity(T entity) { //EF4.0的写法 添加实体 //db.CreateObjectSet<T>(). ...
- HBase1.2.0增删改查Scala代码实现
增删改查工具类 class HbaseUtils { /** * 获取管理员对象 * * @param conf 对hbase client配置一些参数 * @return 返回hbase的HBase ...
- Vue+Mock.js模拟登录和表格的增删改查
有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...
- EF5.0增删改查的写法及执行Sql的方法
public T AddEntity(T entity) { //EF4.0的写法 添加实体 //db.CreateObjectSet<T>().AddObject(entity); // ...
- EF4.0和EF5.0增删改查写法区别
1 public T AddEntity(T entity) 2 { 3 //EF4.0的写法 4 添加实体 5 //db.CreateObjectSet<T>().AddObject(e ...
- yii2.0增删改查
//关闭csrf public $enableCsrfValidation = false; 1.sql语句 //查询 $db=\Yii::$app->db ->createCommand ...
随机推荐
- BZOJ2282: [Sdoi2011]消防
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2282 答案一定是在直径上的一段,然后答案一定不会小于不在直径上的点到直径的距离(要是可以的话那 ...
- FineReport父子格实现动态参数注入
"深入学习FineReport后发现其功能及其强大,之前使用存储过程实现的报表完全可以使用FineReport本身的功能实现. 当你需要的表名,查询条件等均未知的时候,使用"动态参 ...
- 构建LVS-DR+Keepalive高可用集群
------client----------主LVS----------从LVS------------WEB1-------------WEB2--------- 2.2.2.250 2.2.2. ...
- OpenStack Horizon创建虚拟机时增加虚拟机OS用户
背景 通过OpenStack的Horizon使用镜像创建虚拟机(以Ubuntu为例),如果不知道镜像的用户名和密码,在创建好虚拟机之后,无法登录虚拟机的OS.因此,我们需要一种方法,创建虚拟机时增加用 ...
- 利用object.defineProperty实现数据与视图绑定
如今比较火的mvvm框架,例如vue就是利用es5的defineProperty来实现数据与视图绑定的,下面我来介绍一下defineProperty的用法. var people= {} Object ...
- Unity Object Pool
using System.Collections; using System.Collections.Generic; using UnityEngine; [System.Serializable] ...
- java if与for循环的题
//打印一个4*5的空心长方形 /* for (int i = 0; i < 5;i++ ) { if (i == 0 | i == 4) { ...
- APACHE 服务器开启URL REWRITE模块的方法
最近做wordpress,发现固定链接总是设置不了.后来发现是由于apache服务器的URL REWIRITE模块没有开启导致. 查询了资料之后终于设置成功,记录下步骤: 1:开启apache的url ...
- sqlite3-入门教程
*** 非常好 http://wenku.baidu.com/link?url=xDoS4prJaGRac0QS0nxdNr6056N-qJIfZ7OhiTharj1ntuIsNy9sWXWvBXLh ...
- hasResultError
hasResultError 的作用是 让返回的对象可以报错误信息.