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 ...
随机推荐
- [51nod1410]回文调整
给一个序列,选择其中一个区间,这个区间内的数字顺序可以随意互换.问有多少这样的选择使得整个序列(不是选择的区间)是一个回文. 说明:为了要使得整个序列是一个回文,可以选择一个区间对里面的数字进行调整, ...
- git工作流程一览
Git是分布式版本控制系统,没有中央服务器,每个人的电脑就是一个完整的版本库,工作的时候不需要联网了,因为版本都在自己电脑上.协同的方法是这样的:比如说自己在电脑上改了文件A,其他人也在电脑上改了文件 ...
- [国嵌笔记][008-009][远程登录Linux]
[国嵌笔记][008][远程登录Linux] 1.windows与Linux能够相互ping通 2.关闭Linux防火墙 /etc/init.d/iptables stop 3.通过ssh(字符界面) ...
- CSS3之border-radius圆角
CSS3之border-radius圆角 DIV盒子圆角 图片圆角,CSS3样式实现盒子对象圆角.图片圆角效果.div css3 border-radius圆角样式教程篇. 一.css3单词与语法结构 ...
- SQL语句order by两个字段同时排序。
ORDER BY 后可加2个字段,用英文逗号隔开.理解:对两个字段都排序,并不是之排序其中的一个字段: f1用升序, f2降序,sql该这样写 ORDERBY f1, f2 DESC 也可以这样 ...
- css3图片动画旋转
body{ background-color:#021E36; text-align: center; } .container{margin:500px auto;} .round{position ...
- JavaScript实现Tab栏切换
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 京东网页上,可以看到下面这种tab栏的切换: 我们把模型抽象出来,实现一 ...
- MyBatis动态传入表名,字段名参数的解决办法
原文:http://blog.csdn.net/xichenguan/article/details/50393748 要实现动态传入表名.列名,需要做如下修改 添加属性statementType=& ...
- [知了堂学习笔记]_牵线Eclipse和Tomcat第一篇 —— 配置Java环境变量&&安装eclipse
一.先给他们提供一个"浪漫的"环境,比如传说中的"鹊桥"--java环境变量.哈哈! 配置java环境变量. 下载jdk,根据自己电脑的版本和操作位数选择不同的 ...
- webpack的四大核心概念
webpack中文文档:https://doc.webpack-china.org/concepts/ 一.Entry(入口) 1.单个入口(简写)语法 // 语法 entry: string|Arr ...