# myvue

**Repository Path**: yejun-web/myvue

## Basic Information

- **Project Name**: myvue
- **Description**: Vue测试项目
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-11-03
- **Last Updated**: 2021-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## [主流开源协议之间有何异同？](https://www.zhihu.com/question/19568896)

## git基本指令

git init
git status

git add .  
git commit -m "init my project"

git config --global user.name "叶俊"  
git config --global user.email "2512636001@qq.com"

cd existing_git_repo  
git remote add origin https://gitee.com/yejunm3/myvue.git  
git push -u origin master  


## 制作首页App组件
1. 完成 Header 区域，使用的是 Mint-UI 中的Header组件
2. 制作底部的 Tabbar 区域，使用的是 MUI 的 Tabbar.html
 + 在制作 购物车 小图标的时候，操作会相对多一些：
 + 先把 扩展图标的 css 样式，拷贝到 项目中
 + 拷贝 扩展字体库 ttf 文件，到项目中
 + 为 购物车 小图标 ，添加 如下样式 `mui-icon mui-icon-extra mui-icon-extra-cart`
3. 要在 中间区域放置一个 router-view 来展示路由匹配到的组件


##首页制作

#### 改造 tabbar 为 router-link

#### 设置路由高亮 linkActiveClass

#### 点击 tabbar 中的路由链接，展示对应的路由组件

#### 制作首页轮播图布局 加载首页轮播图数据
1. 获取数据， 如何获取呢， 使用 vue-resource
2. 使用 vue-resource 的 this.$http.get 获取数据
3. 获取到的数据，要保存到 data 身上
4. 使用 v-for 循环渲染 每个 item 项

#### 改造 九宫格 区域的样式


## 新闻资讯部分

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

#### 新闻资讯 页面制作
1. 绘制界面， 使用 MUI 中的 media-list.html
2. 使用 vue-resource 获取数据
3. 渲染真实数据

#### 实现 新闻资讯列表 点击跳转到新闻详情
1. 把列表中的每一项改造为 router-link,同时，在跳转的时候应该提供唯一的Id标识符
2. 创建新闻详情的组件页面  NewsInfo.vue
3. 在 路由模块中，将 新闻详情的 路由地址 和 组件页面对应起来

#### 实现 新闻详情 的页面布局和数据渲染

#### 单独封装一个 comment.vue 评论子组件
1. 先创建一个 单独的 comment.vue 组件模板
2. 在需要使用 comment 组件的 页面中，先手动 导入 comment 组件
 + `import comment from './comment.vue'`
3. 在父组件中，使用 `components` 属性，将刚才导入 comment 组件，注册为自己的 子组件
4. 将注册子组件时候的，注册名称，以 标签形式，在页面中 引用即可

#### 获取所有的评论数据显示到页面中
 - getComments

#### 实现点击加载更多评论的功能
1. 为加载更多按钮，绑定点击事件，在事件中，请求 下一页数据
2. 点击加载更多，让 pageIndex++ , 然后重新调用 this.getComments() 方法重新获取最新一页的数据
3. 为了防止 新数据 覆盖老数据的情况，我们在 点击加载更多的时候，每当获取到新数据，应该让 老数据 调用 数组的 concat 方法，拼接上新数组

#### 发表评论
1. 把文本框做双向数据绑定
2. 为发表按钮绑定一个事件
3. 校验评论内容是否为空，如果为空，则Toast提示用户 评论内容不能为空
4. 通过 vue-resource 发送一个请求，把评论内容提交给 服务器
5. 当发表评论OK后，重新刷新列表，以查看最新的评论
 + 如果调用 getComments 方法重新刷新评论列表的话，可能只能得到最后一页的评论，前几页的评论获取不到
 + 换一种思路：当评论成功后，在客户端，手动拼接出一个最新的评论对象，然后 调用 数组的 unshift 方法， 把最新的评论，追加到 data 中 comments 的开头；这样，就能 完美实现刷新评论列表的需求
 + .trim()剔除空格

## 配置全局变量
- Vue.http.option.root = 'http://www.liulongbin.top:3005';
- Vue.http.option.emulateJSON = true;

- this.$http.post('这里是链接', { 这里是传递的数据 }, { emulateJSON: true }).then(res => {});


## 子组件引用
1. 引入子组件 import comment from '../subcomponents/comment.vue';
2. 定义一个私有组件 components: {'comment': comment}
3. 标签形式引入 <comment :sonmsg="id"></comment>


## 图片列表与详情页

#### [懒加载的实现](http://mint-ui.github.io/docs/#/zh-cn2/lazyload)
- 全局导入mint-ui

		import 'mint-ui/lib/style.css';
		import MintUI from 'mint-ui';
		Vue.use(MintUI);
- 获取图片列表

		<img v-lazy="item.img_url">
- 添加懒加载图片样式

		img[lazy=loading] {
            width: 40px;
            height: 340px;
            margin: auto;
        }

#### [图片幻灯片改造 vue-preview](https://github.com/LS1231/vue-preview)
- 装包、全局导入包
		
		npm i vue-preview -S

		import VuePreview from 'vue-preview';
		Vue.use(VuePreview);
- 获取了图片列表之后，当前只有图片的路径，必须有的属性：src、msrc、w、h 可以使用forEach来对每个数组中的对象添加

- 在组件中使用
		
		<vue-preview :slides="this.photothum" class="photothum"></vue-preview>
- 设置样式(这里在组件中设置样式是无效的，必须要在全局的css文件中设置)

		.photothum figure{
		    float: left;
		    width: 30%;
		    height: 30vw;
		    margin: 1.5%;
		    margin-bottom: 0;
		}
		.photothum figure img{
		    width: 100%;
		}

## 重点：购物车相关

#### 使用vuex
	+ 装包

			npm install vuex --save
	+ 引入

			import Vuex from 'vuex'
			Vue.use(Vuex)
	+ ...

#### 实现加入购物车的功能
- 购物车详情页传递 msg到 store中

		addShopCar(){
	        this.ballflag = !this.ballflag;
	        var msg = {
	            id: this.id,
	            count: this.selectvalue,
	            price: this.goodsinfo.sell_price,
	            flag: true
	        }
	        this.$store.commit('addToCar',msg)
	    },
- store处理传递过来的 msg，定义一个 flag为 false，当当前添加的商品已经在 list中存在，则 +=这个商品的数量，flag为 true，不进入下一步，否则直接向 list中 push

		addToCar(state,obj){
		    let flag = false;
		    state.list.some(item => {
		        if(item.id == obj.id){
		            item.count += parseInt(obj.count);
		            flag = true;
		            return true;
		        }
		    })
		    if(!flag){
		        state.list.push(obj)
		    }
		}

#### ShopcarContent.vue中渲染出 list中已经存在的商品
- 请求路径例： "api/goods/getshopcarlist/89,90,91" 将 list中的 id都取出来，并组成一个字符串

        getShopInfo(){
            let i = [];
            this.$store.state.list.forEach(item => {
                i.push(item.id);
            })
            if(i.length <= 0){
                return;
            }else{
                this.$http.get('api/goods/getshopcarlist/' + i.join(',')).then(res => {
                    this.shopinfo = res.body.message;
                })
            }
        }

#### 实现购物车小球下标的变化
- getters节点中，创建 i，每当 list发生变化的时候，i更新，+= list中所有的 count

		getAllCount(state){   
		    let i = 0;
		    state.list.forEach(item => {
		        i += item.count
		    })
		    return i
		},

#### 实现购物车中商品数量的显示
- getters节点中，创建数组 a，数组 a中，商品 id对应商品 count

		getGoodsCount(state){
            let a = [];
            state.list.forEach(item => {
                a[item.id] = item.count
            })
            return a
        }
- 使用 子组件中接收，将此 count作为初始值

		<numbox :initCount="$store.getters.getGoodsCount[item.id]"></numbox>

#### 实现点击修改购物车中的商品数量
- 传递商品 id给子组件，子组件接收
		
		<numbox :goodsId="item.id"></numbox>
- 传递对象给 store进行处理 {id: 商品id，count: 商品个数}

		this.$store.commit('upDateCar',{
		    id: this.goodsId,
		    count: this.$refs.numbox.value
		})
- store进行处理，修改 list中对应 id的商品个数 count

        upDateCar(state,obj){
            state.list.forEach(item => {
                if(item.id == obj.id){
                    item.count = parseInt(obj.count)
                }
            })
            console.log(this.state.list)
        }

#### 点击删除当前商品
- 点击时触发，传递两个参数，当前商品 id及 当前商品标识符 i

		<i @click="deletCar(item.id,i)">删除</i>

		deletCar(id,i){
            this.$store.commit('deletCar',id);
            this.shopinfo.splice(i,1);
        }
- 传递的 id带给 store中进行处理，删除当前 id对应的数组对象

		deletCar(state,id){
            state.list.some((item,i) => {
                if(item.id == id){
                    state.list.splice(i,1);
                    return true;
                }
            })
        }

#### 关于总价的计算、总数量、选中情况 ...