# vue-cms

**Repository Path**: MonsterLQ/vue-cms

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-06-09
- **Last Updated**: 2021-01-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#vue项目

## 路由规则

| 路由                | 路由地址       |
| ------------------- | -------------- |
| /                   | 需重定向到首页 |
| /home               | 首页           |
| /home/newslist      | 新闻列表页     |
| /home/newslist/:id  | 新闻详情页     |
| /member             | 会员页         |
| /search             | 搜索页         |
| /shopcar            | 购物车         |
| /home/photolist     | 图片列表页     |
| /home/photoInfo/:id | 图片列表详情页 |
| /home/goodsList     | 商品列表       |
| /home/goodsInfo     | 商品详情       |
| /home/goodsDes/:id  | 商品图文       |
| /home/goodsCmt/:id  | 商品评论       |



##接口文档

> 数据是利用json-server模拟出的数据，数据文件保存在根目录db文件夹中的db.json中
>
> 同时这个文件夹中还保存了一些请求的资源文件
>
> 运行数据 	json-server db.json --port 3005
>
> 配置根域名
>
> ```javascript
> Vue.http.options.root = 'http://localhost:3005';
> ```
>
> **注意：在请求地址路径前面不要加/**

### 获取轮播图数据

> 图片数据均来自网络图片

| 请求地址 | 请求方式 | 返回结果          |
| -------- | -------- | ----------------- |
| lunbotu  | get      | 数组对象（[obj]） |

> 制作轮播图过程

1. 利用vue-resource获取数据
2. this.$http.get获取数据
   - 在methods中定义方法去获取数据，并保存在data中
   - 在created生命周期中调用这个方法
3. 把获取到的数据保存在data中
4. 利用v-for循环每个item项
   - 必须为每一个item项绑定key，由于图片的url地址不会重复，所以可以绑定url地址

### 获取新闻列表数据

| 请求地址    | 请求方式 | 返回结果 |
| ----------- | -------- | -------- |
| getnewsList | get      | 数组对象 |

### 获取新闻详情

| 请求地址        | 请求方式 | 请求参数   | 返回结果 |
| --------------- | -------- | ---------- | -------- |
| getnewsList/:id | get      | id(number) | 数组对象 |

### 获取新闻详情评论数据

| 请求地址     | 请求方式 | 请求参数   | 返回结果 |
| ------------ | -------- | ---------- | -------- |
| comments/:id | get      | id(number) | 对象     |

### 发表评论

> 所有页面的发表评论接口一致

| 请求地址     | 请求方式    | 参数 | 返回结果 |
| ------------ | ----------- | ---- | -------- |
| comments/:id | put(需加id) | text | 无       |

### 获取图片分类

| 请求地址    | 请求方式 | 返回结果 |
| ----------- | -------- | -------- |
| picCategory | get      | 数组对象 |

### 获取图片列表

| 请求地址    | 请求方式 | 参数 | 返回结果 |
| ----------- | -------- | ---- | -------- |
| picList/:id | get      | id   | 数组对象 |

### 获取图片详情数据

| 请求地址      | 请求方式 | 参数 | 返回结果 |
| ------------- | -------- | ---- | -------- |
| photoInfo/:id | get      | id   | 对象     |

### 获取商品列表

| 请求地址                             | 请求方式 | 返回结果 |
| ------------------------------------ | -------- | -------- |
| goodsList?\_limit=5&\_page=1（分页） | get      | 数组对象 |

### 获取商品详情

| 请求地址      | 请求方式 | 返回结果 |
| ------------- | -------- | -------- |
| goodsInfo/:id | get      | 对象     |











## 问题解决

### 图片列表滑动菜单栏

> 滑动菜单栏是由mui制作,其中要注意的问题

1. 位置不准

   - 去掉 `mui-fullscreen `这个类

2. 滑动需要初始化

   - 引入mui.min.js文件
   - 初始化代码

   ```javascript
   mui(".mui-scroll-wrapper").scroll({
         deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
       });
   ```

   - **注意:**预览结果报错

   ```javascript
   'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
   ```

   > 错误信息的意思是 'caller', 'callee', and 'arguments'是不严格模式,但是webpack在打包的时候默认启用严格模式

   - 解决方案:移除webpack的严格模式

   > 使用插件*babel-plugin-transform-remove-strict-mode*
   >
   > 在babelrc文件中的plugins中配置一下即可

3. 问题:在进入这个页面的时候这个滚动条不起作用,刷新一下才起作用,这样肯定不合理

   - 解决方案:如果想要滑动条生效,需要DOM元素加载完成,所以就把初始化代码放入`mounted`生命周期函数中

4. tabbar无法切换

   - 解决方案:由于tabbar中的链接样式`mui-tab-item`与引入的js冲突,所以修改类名把以前的样式复制到新类名中,然后使用这个的类名就可解决

### 图片列表详情页的缩略图制作

> 这里的缩略图制作利用了vue-photo-preview插件，使用过程如下：

1. 下载插件并且安装

```javascript
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)
```

2. 使用

> 在想要展示的图片上设置preview属性，属性值一样的是一组图片

```html
<img v-for="item in photoList" :key="item.src" :src="item.src" preview="1" alt />
```

3. 注意点：

> 如果图片是异步加载的数据，这时点击图片是不会有预览的效果，这是因为页面还没加载完成所以事件就不会触发，解决办法，在mounted生命周期函数中重新调用一次`this.$previewRefresh();`

### 商品列表vue-router编程式导航

```javascript
this.$router.push(路由地址)
```

> $route:这个是路由参数对象，跟url地址相关的都使用这个方法
>
> $router:这个是路由导航对象，它可以方便的实现路由的前进，后退，和路由之间的跳转

### 页面轮播图的宽度问题

> 应该让图片高为百分百，宽自适应
>
> 解决方案：添加一个类名full设置宽度为100%，然后人为决定是否要加这个类
>
> 由于轮播图被抽离成一个组件，那么使用组件的时候就可以父组件给子组件传值，来决定是否要加这个类

```html
父组件：
<swiper :isfull="true"></swiper>	//swiper这个就是封装的轮播图组件，true就是要宽为百分百
子组件
.full{width:100%}	//设置一个宽百分百
props：['isfull']	//接收数据
:class={'full':isfull}	//根据传过来的值决定是否添加类

```

### 购物数量制作

1. 子组件向父组件传值(数量)

   - 数量加减是被抽离出来的子组件,所以在数量改变的时候就应该把数量传给父组件(商品详情页)

     > 父组件中定义方法同时保留数据

     ```javascript
     @getCount="count";	//在父组件中引用子组件身上添加自定义属性
     totalcount=1;	//定义数据初始状态下有一件商品
     count(num) {
           this.totalCount = num;
           console.log("接收到数据了");
         }	//添事件处理函数,用来保存数据
     ```

     > 子组件触发事件并且传值
     >
     > this.$refs.numbox.value可以拿到输入框中的数量

     ```javascript
     @change="postnum"	//标签中添加事件,数量发生改变执行函数
     postnum() {
           this.$emit("getCount", parseInt(this.$refs.numbox.value));
         }	//触发引用组件身上的自定义函数,并且把数据传递过去,
     ```

   2. 给数量输入框限制最大数量

      > 数量输入框(子组件)的最大值限制是有库存的数量来决定的,而库存数量的值则来自商品详情页,这里就涉及到父向子传值

      > 父组件自定义属性传值

      ```html
      :max="goodsInfo.lave"
      ```

      > 子组件接受值

      ````javascript
      props:['max']
      ````

      > 数字输入框用的是mui,标签中有个属性` data-numbox-max `可以限制最大值
      >
      > 这里有一个坑:子组件中利用props接收的max值是父组件异步获取数据得来的,所以在页面加载的时候就把max传递过去了,这个时候是没有数据的,打印信息可以发现是undefined

      > 解决办法:既然数据是异步获取的,那么数据最终都是会发送过来的,那么我就可以监听这个数据,这个时候就不能使用mui提供属性来限制,而是需要使用元素js方法

      ```javascript
      watch:{
          max:function(newVal,oldVal){
              mui(".mui-numbox")
              .numbox()
              .setOption("max", newVal);
          }
      }
      ```

      > 这里就可以监听max数据,而newVal就是最新的最大值,所以最初发过来的是undefined,到最后异步请求数据完成后发过来的是最大值,已经监听到max的变化,然后就使用mui提供的js方法设置最大值