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

原文地址：https://www.cnblogs.com/nxmin/p/8441086.html

时间： 2024-08-26 21:32:30

VUE2.0增删改查附编辑添加model(弹框)组件共用的相关文章

yii2.0增删改查实例讲解

yii2.0增删改查实例讲解一.创建数据库文件. 创建表 CREATE TABLE `resource` ( `id` int(10) NOT NULL AUTO_INCREMENT, `texture` varchar(50) NOT NULL COMMENT '材质', `mark` varchar(50) NOT NULL COMMENT '牌号', `manufacturers` varchar(100) NOT NULL COMMENT '厂家', `price` int(11) NO

MVC ---- EF4.0和EF5.0增删改查的写法区别及执行Sql的方法

EF4.0和EF5.0增删改查的写法区别 public T AddEntity(T entity) { //EF4.0的写法 添加实体 //db.CreateObjectSet<T>().AddObject(entity); //EF5.0的写法 db.Entry<T>(entity).State = EntityState.Added; //下面的写法统一 db.SaveChanges(); return entity; } public bool UpdateEntity(T

EF4.0和EF5.0增删改查的写法区别及执行Sql的方法

EF4.0和EF5.0增删改查的写法区别 (原文) public T AddEntity(T entity) { //EF4.0的写法 添加实体 //db.CreateObjectSet<T>().AddObject(entity); //EF5.0的写法 db.Entry<T>(entity).State = EntityState.Added; //下面的写法统一 db.SaveChanges(); return entity; } public bool UpdateEnti

实现学校信息增删改查-第一节添加学校名称

SSM框架实现学校信息增删改查-第一节添加学校名称 大家好!第一次写文 语句可能有些生涩,看到我不足的地方可以给我留言~ 好了,开始第一节,一个简单的添加学校名称功能~ 可以先看一下前端html代码,运行程序看一些界面效果 超级简易的一个添加页面,首先我们要知道添加是根据学校id添加信息的,请看代码哦 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

yii2.0增删改查

[php] view plain copy //关闭csrf public $enableCsrfValidation = false; [php] view plain copy 1.sql语句 //查询 $db=\Yii::$app->db ->createCommand("select * from 表名") ->queryAll(); //修改 $db=\Yii::$app->db ->createCommand()->update('表名'

EF4.0和EF5.0增删改查写法区别

1 public T AddEntity(T entity) 2 { 3 //EF4.0的写法 4 添加实体 5 //db.CreateObjectSet<T>().AddObject(entity); 6 //EF5.0的写法 7 db.Entry<T>(entity).State = EntityState.Added; 8 //下面的写法统一 9 db.SaveChanges(); 10 return entity; 11 } 12 public bool UpdateEnt

BootstrapTable+KnockoutJS实现增删改查解决方案

BootstrapTable+KnockoutJS实现增删改查解决方案 前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4的语法,虽然没有完全掌握,但是算是有了一个大致的了解.于是乎有了今天的这篇文章:通过T4模板快速生成页面. KnockoutJS系列文章: JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(

BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面

前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4的语法,虽然没有完全掌握,但是算是有了一个大致的了解.于是乎有了今天的这篇文章:通过T4模板快速生成页面. KnockoutJS系列文章: JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一) JS组件系列——BootstrapTable+KnockoutJS

ASP.NET WebAPI --- 简单实现增删改查

先理解一下WebAPI的概念,官方给的很详细: 什么是Web API? 在我们了解什么是Web API之前,让我们看看什么是API(应用程序编程接口). 根据维基百科的API定义:在计算机编程中,应用程序编程接口(API)是一组用于构建软件和应用程序的子例程定义,协议和工具. 简单来说,API是某种接口,它具有一组允许程序员访问应用程序,操作系统或其他服务的特定功能或数据的功能. Web API顾名思义,是一个可以使用HTTP协议访问的Web上的API.这是一个概念,而不是一种技术.我们可以使用