# vue-crud-demo

**Repository Path**: lyforvue/vue-crud-demo

## Basic Information

- **Project Name**: vue-crud-demo
- **Description**: vue对接apicloud实现简单的增删改查
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2018-08-26
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue对接apicloud实现简单的增删改查
## 1 项目基本介绍
### 1.1 技术栈
	vue + vant + axios + apicloud + webpack

### 1.2 效果图
![](https://i.imgur.com/95qknxK.gif)

### 1.3 线上演示地址
	http://vuecrud.myoli.xin/#/

### 1.4 项目部署
> 步骤一、代码克隆 git clone https://gitee.com/hjy1993/vue-crud-demo.git

> 步骤二、安装项目依赖 npm install

	项目依赖：
	npm install axios --save	// axios
	npm install vant --save		// vant
	npm install sha1 --save		// sha1请求线上的地址
	

> 步骤三、项目运行 npm run dev

> 步骤四、浏览器上访问:http://localhost:8080

### 1.5 目录结构详细说明
	|- build
	  |- build.js                   执行”npm run build”的时候首先执行的是该文件
	                                    1、loading动画
	                                    2、删除目标文件夹
	                                    3、执行webpack构建
	                                    4、输出信息
	  |- check-versions.js          对node和npm的版本检测
	  |- utils.js                   utils提供工具函数，包括生成处理各种样式语言的loader，获取资源文件存放路径的工具函数
	                                    1、计算资源文件存放路径
	                                    2、生成cssLoaders用于加载.vue文件中的样式
	                                    3、生成styleLoaders用于加载不在.vue文件中的单独存在的样式文件
	  |- vue-loader.conf.js         处理.vue文件中的样式
	  |- webpack.base.conf.js       webpack基础配置
	                                    1、配置webpack编译入口
	                                    2、配置webpack输出路径和命名规则
	                                    3、配置模块resolve规则
	                                    4、配置不同类型模块的处理规则
	  |- webpack.dev.conf.js        开发环境下的webpack配置
	                                    1、将webpack的热重载客户端代码添加到每个entry对应的应用
	                                    2、合并基础的webpack配置
	                                    3、配置样式文件的处理规则，styleLoaders
	                                    4、配置Source Maps
	                                    5、配置webpack插件
	  |- webpack.prod.conf.js       生产环境下的webpack配置，该配置同样是在webpack.base.conf基础上的进一步完善
	                                    1、合并基础的webpack配置
	                                    2、配置样式文件的处理规则，styleLoaders
	                                    3、配置webpack的输出
	                                    4、配置webpack插件
	                                    5、gzip模式下的webpack插件配置
	                                    6、webpack-bundle分析
	|- config                       配置文件
	  |- dev.env.js                 开发环境变量设置
	  |- index.js            		描述了开发和生产两种环境下的配置（nodejs端口的配置、数据的访问地址）
	  |- prod.env.js                生产环境变量设置
	|- dist                         编译后的环境
	|- src                          vue主要开发环境（重点）
	  |- assets                     静态资源（偏组件资源、图片会被打包成base64）
	  |- components                 组件
	  |- pages                      页面
	  |- router                     配置路由（前端的路由）
	  |- util                       小工具
	  |- main.js                    入口文件
	|- static                       静态资源（图片不会被压缩、放图片比较大的）
	|- .babelrc                     下一代JavaScript语法的编译器配置（放心使用大部分的JavaScript的新的标准的方法，然后编译成兼容绝大多数的主流浏览器的代码）
	|- .editorconfig                定义统一编写规则
	|- .gitignore                   忽略文件，不能提交目录
	|- .postcssrc.js                postcss配置文件
	|- index.html                   入口文件
	|- package.json                 依赖信息包
	|- README.md                    开发阅读文档

## 2 代码解析
### 2.1 vue页面组成部分
![](https://i.imgur.com/8q3Y7JA.png)

### 2.2 项目依赖配置
#### 2.2.1 在main.js入口文件中引入vant（仅对有使用到的前端组件进行引用）
![](https://i.imgur.com/pZInCc8.png)

#### 2.2.2 对axios二次封装引用
![](https://i.imgur.com/IwLSEiz.png)

#### 2.2.3 对接服务器接口（apicloud）
![](https://i.imgur.com/GVheGRC.png)

### 2.3 页面上使用vant
#### 2.3.1 button
![](https://i.imgur.com/I1Qif5q.png)

#### 2.3.2 dialog
![](https://i.imgur.com/MYRr41t.png)

### 2.4 定义变量
![](https://i.imgur.com/uRHH4qG.png)

### 2.5 添加用户
> 通过v-model绑定name、age变量（图在2.3.2）

> 请求添加用户接口，提交参数

![](https://i.imgur.com/ltMotNe.png) 

### 2.6 获取用户列表
> 使用了this.$get：调用了axios的二次封装

> 把请求到的数据赋值给this.userData

![](https://i.imgur.com/1ghCJy2.png)

> v-for遍历数据

![](https://i.imgur.com/EFNH1pv.png)

### 2.7 删除用户
> 方法传入要删除的id

![](https://i.imgur.com/ySPTThm.png)

### 2.8 修改用户
> 通过id，获取用户信息

![](https://i.imgur.com/2rcat7n.png)

> 保存信息

![](https://i.imgur.com/l8OCrRB.png)

## 3 技术栈剖析
### 3.1 vue
#### 3.1.1 vue官方文档
	https://cn.vuejs.org/
#### 3.1.2 vue介绍
	Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
	与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
	Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
	另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
	项目构建

#### 3.1.3 MVVM

	MVVM：Model–View–ViewModel
	
	View：视图层，也就是用户界面，主要由 HTML 和 CSS 来构建
	Model：数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开
	ViewModel：由前端开发人员组织生成和维护的视图数据层

> MVVM 的核心是 ViewModel 层，它就像是一个中转站，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用

![](https://i.imgur.com/Ck4hlJk.png)

> MVVM 的各个组成部分

![](https://i.imgur.com/yjV8Cg7.png)

> 实战分析MVVM

![](https://i.imgur.com/r7PMIsD.png)

#### 3.1.4 安装vue-cli脚手架
	npm install vue-cli -g

#### 3.1.5 vue-cli初始化项目
![](https://i.imgur.com/QNHlk0H.png)

### 3.2 vant
#### 3.2.1 vant官方文档
	https://www.youzanyun.com/zanui/vant#/zh-CN/intro
#### 3.2.2 vant介绍
	轻量、可靠的移动端 Vue 组件库

### 3.3 axios
#### 3.3.1 axios官方文档
	https://www.kancloud.cn/yunye/axios/234845

#### 3.3.2 axios介绍
	基于http客户端的promise，面向浏览器和nodejs

> 特色

1. 浏览器端发起XMLHttpRequests请求
2. node端发起http请求
3. 支持Promise API
4. 监听请求和返回
5. 转化请求和返回
6. 取消请求
7. 自动转化json数据
8.  客户端支持抵御
	

### 3.4 apicloud
#### 3.4.1 apicloud官方文档
	https://www.apicloud.com/

#### 3.4.2 apicloud介绍
	APICloud是中国领先的“云端一体”的移动应用云服务提供商。
	APICloud为开发者从“云”和“端”两个方向提供API，简化移动应用开发技术，让移动应用的开发周期从一个月缩短到7天。
	基于APICloud提供的“云API”和“端API”，开发者甚至可以忘记繁杂的服务端编码，也可以忘记复杂的Objective-C和Java，更可以忘记那数不清的屏幕适配。

### 3.5 webpack
	https://gitee.com/hjy1993/webpack-imooc-test

### 3.6 vuex
	https://gitee.com/hjy1993/markdown-collect/blob/master/markdown/VUEX.md

### 3.7 es6
	https://gitee.com/hjy1993/es6-imooc-lottery

### 3.8 项目打包
	npm run build 会在当前项目生成一个dist的目录，里面的index.html可以直接运行 或 部署到服务器上