# vue-study

**Repository Path**: fjf168/vue-study

## Basic Information

- **Project Name**: vue-study
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-01-05
- **Last Updated**: 2021-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue项目

## 制作首页App组件

	首页划分3个区域：

	1. 顶部区域：mint-ui组件Header渲染

	2. 中间区域：由底部路由匹配组件渲染

	3. 底部区域：mui库tabbar.html底部工具栏代码片段渲染

## 改造 tabbar 为router-link

## 设置tabbar 高亮

## 点击 tabbar 路由连接，展示对应组件

	01. 创建tabbar ,**router-link** 对应的组件

			* 1.1 home.vue
			* 1.2 member.vue
			* 1.3 cart.vue
			* 1.4 search.vue
	02. 导入组件

	03. **router-view** 渲染路由匹配的组件

## 首页制作

### home 首页轮播图(carousel) 

1. 导入 mint-ui swip 组件

2. 发送axios请求获取轮播图数据
	 * 导入 axios vue-axios 组件并安装
	 * this.axios.get(url).then() 发送请求并获取数据
	 * 获取方式 get 接口：<http://www.liulongbin.top:3005/api/getlunbo>
3. v-for 渲染轮播图

### 九宫格改造

1. 引入MUI九宫格样式，位置：/grid-default.html
2. 去除3个li标签，改造为需要的6宫格
3. 更换背景色，去掉边框，icon更换为图片，字体大小调整

.
### ‘新闻资讯’ 路由组件制作

#### 新闻资讯路由连接改造

#### 新闻资讯 页面制作

1. 绘制页面，使用MUI中media-list.html
2. 通过axios 获取数据
	* API：api/getnewslist
	* Type: get
	* DataType: json
3. 通过获取数据渲染页面
4. 路由模块中，关联路由地址和组件页面

#### 新闻资讯列表**点击**跳转新闻详情

1. 改造新闻列表连接为**router-link**,添加唯一标志ID
2. 绘制新闻详情组件页面
	* API：api/getnew/:newId
	* Type: get
	* DataType: json
3. 通过获取数据渲染页面
4. 路由模块中，关联路由地址和组件页面

#### 封装comment.vue 子组件

1. 创建单独的 comment.vue 组件模板
2. 页面绘制
3. 组件导入和注册
	* 导入组件
	* 注册为 components 子组件
4. 通过组件标签展示组件

#### 点击加载更多评论

1. ‘加载更多’按钮绑定点击事件
	* 事件处理：点击pageIndex++
	* 重新请求数据
	* data 数据数据拼接请求得到的新数据数据

git 提交 comment v1.0.1

#### 提及评论

1. 评论内容v-model双向绑定
2. 评论按钮绑定提交事件
3. 评论校验，为空Toast提示；不为空则发送axios请求{content: 内容}
	* url: /api/postcomment/:artid
	* type: post
	* body: {content: 评论的内容}
	* dataType: json
	
4. 接收返回结果，如果resp.data.status === 0 ,评论成功 ；否则，失败。
	* 成功： 刷新列表，查看最新评论-构建一个评论对象，添加到评论数组中，不用再次向服务器发送请求

### 改造图片分享路由连接 展示对应组件

	 
v1.0.2 2019-11-01
###  图片分类

### 图片列表

### 图片详情

#### 缩略图

v1.0.2

### 商品购物

#### 商品列表

1. 商品列表路由连接
2. 商品列表路由组件
	* 页面绘制
		* css3 flex布局实现经典双列布局
	* 获取数据
	* 数据渲染
3. 商品列表路由添加

#### 商品详情

1. 商品详情路由连接
	* vue-router programmatic navigation
	* this.$route 导航参数对象
	* this.$router 导航对象
		* push()	跳转到指定地址
		* go(n)		跳转n页
		*	back()  后退一页

+ 标签导航和编程式导航
	- 标签导航：	使用方便
	- 编程式导航：方便控制页面前进、后退

2. 商品详情路由组件
	* 页面绘制
	* 获取数据
	* 数据渲染
3. 商品详情路由添加

##### 商品详情页面绘制

1. 轮播图区域