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 ...
随机推荐
- BZOJ 3105: [cqoi2013]新Nim游戏
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3105 题意是要取一些数使得剩余的数xor和的子集不为0 拟阵.求解极大线性无关组.贪心从大到小 ...
- linux命令 uname -r 和 uname -a 的解释与演示
1.uname -r : 显示操作系统的发行版号2.uname -a :显示系统名.节点名称.操作系统的发行版号.内核版本等等. 系统名:Linux 节点名称: iZ2zeeailqvwws5dcui ...
- TCP 和 UDP
TCP协议与UDP协议的区别 首先咱们弄清楚,TCP协议和UCP协议与TCP/IP协议的联系,很多人犯糊涂了,一直都是说TCP/IP协议与UDP协议的区别,我觉得这是没有从本质上弄清楚网络通信! ...
- LinkedHashMap 源码详细分析(JDK1.8)
1. 概述 LinkedHashMap 继承自 HashMap,在 HashMap 基础上,通过维护一条双向链表,解决了 HashMap 不能随时保持遍历顺序和插入顺序一致的问题.除此之外,Linke ...
- [国嵌笔记][014][Mini2440安装Linux]
引导安装步骤 相关介绍: 开发板软件构成:Bootloader.嵌入式操作系统.嵌入式文件系统 JTAG接口常用于对flash等器件进行编程,常见的JTAG下载线有并口和USB接口两种 硬件连接: 1 ...
- TypeScript和Node模块解析策略
一般我们在模块化编码时,总会导入其它模块,通常我们使用如下语法: import { A } from './a'; // ES6语法 import { A } from 'a'; var A = re ...
- RSA关于加密长度限制的解决办法
RSA关于加密长度限制的解决办法 因为rsa采用分块进行加密的,所以有长度限制.如果加密信息较多,可分段加解密(不建议对大量信息rsa加密,效率低效): 正常加密情形如下: public ...
- (一)surging 微服务框架使用系列之surging 的准备工作rabbitmq安装
(1)下载erlang: http://www.erlang.org/download/otp_win64_17.3.exe 并安装 (2)下载RabbitMQ: http://www.rabbitm ...
- Python3 的分支与循环
1:条件分支 if 条件 : 语句 else: 语句 2.缩写 else: if : 可以简写为 elif ,因此Python 可以有效的避免"悬挂else" 举例: #悬挂els ...
- ThinkPhp 添加模型类
----------------------------------------------- <?phpnamespace app\common\model;use traits\model\ ...