README.md · PhilHou/vue-cms-2021

# Vue项目

## 首页九宫格布局 使用 MUI 中的 grid-default.html 进行布局
+ 使用MUI中的`grid-dafault.html`
+ 添加图标并设置宽高
+ 设置背景颜色为白色 
+ 去掉了九宫格的边框
+ 修改了字体大小为13px

## 实现路由切换的动画效果
 1. 分析:
  + 要使用vue提供的transition元素把 `router-view` 给包裹起来
  + 使用自定义动画类名来实现动画效果
 2. 当实现基本的动画效果之后，需要解决一些问题：
  + 设置即将离开的页面的方向为`-100%`
  + 为了防止页面跳动的问题，需要为离开的页面设置绝对定位 
  + 当有组件切换动效的时候，一瞬间，页面的宽度会变成正常宽度的两倍，此时，需要隐藏超出屏幕宽度的区域

## 完成新闻资讯列表的路由配置
  + 创建路由组件页面
  + 改造路由链接
  + 添加路由对应规则

## 绘制新闻资讯页面的效果
  + 使用MUI中的`media-list.html`
  + 使用`display:flex;`实现了弹性盒模型布局，从而让元素左右贴边； `justify-content:space-between`

## 展示新闻列表的数据
 1. 当页面加载完毕之后，就要去获取页面数据，因此，应该在`created`钩子函数中调用获取数据的方法
 2. 在methods中定义一个`getNewsList`方法来获取数据`this.$http.get()`
 3. 在获取数据的时候，为了操作方便一些，我们用到了`async`和`await` 特性
 4. 当数据获取回来之后，如果需要通过`v-for`指令渲染到页面上，需要把数据挂载到`data`上

## 定义全局的过滤器来格式化时间字符串
 1. 经过分析，整个项目中，许多组件都需要格式化时间，因此，推荐定义为全局的时间过滤器；
 2. 定义全局过滤器的语法：`Vue.filter('dataFormat(过滤器的名称)'，function（dataStr）{}')`
 3. 调用过滤器的语法：`<span?>{{item.add_time | dataFormat }}</span>`
 4. 整个时间过滤器如何去格式化时间？比较方便的方式是：借助第三方的`moment`插件
 5. 这个全局过滤器定义到哪个文件中呢？ 因为是Vue使用的 而导入Vue的文件是 `main.js`
 6. 在设计时间过滤器的时候，为了提高用户体验度(可能有的用户需要 最全的`年-月-日 时：分：秒`,而有的用户只想要`YYYY-MM-DD`，此时我们今天为过滤器定义一个可选的格式化字符串；)

## 以模块化的思想抽离main.js中的代码
 1. 把`filter`过滤器，统一到抽离到 `filter.js`模块中
 2. 当抽离完`filter.js`之后，发现`main.js`中，很多代码和`vm`实例没有很强的关联关系
    因此，把全局配置相关的代码。单独抽离到`global.config.js`的模块中；
 3. 因此，我们在`main.js`中不需要关心全局配置文件如何配置的，只需要导入这个全局配置即可

## 实现了新闻列表到新闻详情的跳转
 1. 添加新闻详情组件
 2. 改造每一个新闻列表项的链接，为` router-link`，其中，1属性中的id值，需要动态拼接给每一个
 router-link，因此，需要把to属性，改造成`：to`，然后，属性值中的统一路径前缀：
 `/home/newsinfo/` 应该被单引号包裹起来，后面，拼接上`item.id`即可
 3. 添加路由规则
 4. 当实现了上面三步骤之后，我们想在页面中，获取路由传递过来的参数：
  + 方式1：`$router.params.id`来获取，比较麻烦，是老的方式
  + 方式2：使用路由的`props`属性来传递参数：
    - 改造路由规则，在对应规则中，添加`props：true` 的属性
    - 在组件中，定义` props：[]`，数组中定义的名称，就是路由规则中，对应参数的名称占位符(要保持一致)

## 渲染新闻详情页面
1. 获取数据
2. 挂载数据到data上
3. 渲染页面

## 评论子组件的封装和引用
1. 在项目的 src/components/ 下创建 sub-components 目录
2. 创建一个标准的vue组件， 命名为 Comment.vue，作为我们的评论子组件
3. 在哪个页面需要引用这个评论组件了，就在页面的script 节点中，通过 import 的形式 ，导入此组件
4. 在页面的script 通过components 属性注册导入的评论组件
5. 把注册的名称，以注册的形式，引入到页面上，就能够看到这个评论子组件了

## 绘制评论子组件的结构

## 获取评论内容
1. 前提：在评论组件中，获取当前新闻的id
2. 通过属性传递的方式，父组件为子组件传递新闻的id
3. 定义根据新闻id和页码，获取评论数据的方法，并在`created` 钩子中，调用此方法，获取数据；
4. 把获取到的数据，挂载到data上的cmtlist中；并渲染到页面;

## 点击加载更多的评论
1. 为加载更多按钮，绑定点击事件；
2. 在事件中让page自增
3. 当页面值+1 之后，重新调用获取评论的方法
   + 如果重新调用获取更多评论内容的方法，刚获取的那一页的数据，会覆盖之前的评论数据
   + 为了防止上述的问题，我们在获取到评论数据之后，不应该直接 `this.cmtlist = data.message` 这样最新页的评论会把之前页的评论覆盖
     而是应该  `this.cmtlist = this.cmtlist.concat(data.message)` 将最新页的评论拼接到之前页下面

## 实现发表评论的功能
1. 在点击发表评论按钮的时候，处理的函数中，做一个非法值校验，防止评论内容为空
2. 如果校验成功，则调用API接口评论数据到后端
3. 当评论成功后，需要在客户端，手动组织一个新的评论对象，手动unshift到评论列表`cmtlist`在中

## 改造图片分享的路由跳转
1. 新建一个图片分享组件页面
2. 改造路由链接`HomeContainer.vue`
3. 在`ruter.js`中添加一个路由规则

## 实现图片分享列表中顶部的滑动区域
1. 借助MUI的`tab-top-webview-main.html`组件来实现
2. 当拿到UI代码片段之后，需要把`mui-fullscreen`这个类去掉
3. 当页面布局没有大问题之后，发现无法实现滑动效果，此时，需要使用官方推荐的方式，
    去初始化一下控件，具体初始化的方式参考官方文档`https://dev.dcloud.net.cn/mui/ui/#scroll`

## 当在项目中引入了 MUI 的js文件报错的问题：
 > 报错信息：`Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments    objects for calls to them`
1. 分析问题的原因：
   + webpack打包出来的bundle.js中，默认启用了严格模式
   + 想项目中，import导入的 bundle.js中，默认使用了 callee caller 这些特性，但是这些特性在严格模式下不支持，会报错
   + 经过分析：发现，关闭webpack的严格模式，更容易一些，因为不再需要mui.js的源代码了
   + 如何关闭webpack的严格模式呢？ 使用下面两个webpack的插件：
    - `npm install @babel/plugin-transform-strict-mode -D`
    - `npm install @babel/plugin-transform-modules-commonjs -D`
   + 然后在.babelrc中 配置 `["@babel/plugin-transform-modules-commonjs", { "strictMode": false }]`

## 当移除严格模式之后滑动效果还无法实现
1. 主要原因：需要在`mounted `钩子函数中来初始化
2. 因为如果当前的图片分享列表组件，还没有挂载到页面上，那么，调用mui()初始化组件是没用任何意义的；
    因为此时页面上没有任何的元素；

## 如何移除滑动区域浏览器的警告问题
1. 为`mui-slider`类样式，添加，`touch-action:pan-x `属性样式,从而支持此元素的单指水平滑动效果，提高滑动的流畅度

## 解决 tabbar 区域 和 图片分享分类列表 JS行为列表冲突的问题
1. 冲突的原因: 每一个tabbar按钮的类样式 `mui-tab-item` 和JS 行为有冲突；
2. 解决的思路：把所有和`mui-tab-item `相关的样式沾出来，然后改个类名，重新在样式中，把自己的类名替换掉之前的即可

## 获取图片分类数据并加载到页面上
1. 获取分类数据
2. 手动把`全部`的分类信息，通过数组的shift方法，头部追加到数组中
3. 把获取到的分类，挂载到data上的 category 中
4. 默认设置`全部分类`被高亮选中：通过`class`结合三元表达式，把`id` 为0那一项分类，设置为默认选中；

## 默认加载全部的分类数据
1. 定义一个 `getPhotoByCategory`的方法，接收一个分类的id，然后根据ID获取所有的图片列表
2. 把获取到的图片，挂载到`photolist`中
3. 根据Mint-UI的 lazy-load 组件 实现图片的懒加载
   + 在实现懒加载效果时候，需要注意：图片的URL地址，需要通过`v-lazy` 来指定
   + 需要把图片的样式也粘贴到项目中，同时，把`image`选择器替换成`img`标签选择器

## 点击图片分类，切换图片列表数据
1. 为每一个分类添加点击事件，重新发起请求，来获取图片列表

## 点击图片跳转到图片详情的路由改造
1. 把每个图片的li改造成`router-link` 同时，要添加` tag="li"`属性，而且，跳转的链接，需要使用`：to`来设置，因为需要传递这个图片的id过去
2. 添加一个路由规则，在规则中，使用`props`快速传递路由中的参数
3. 添加路由对应的组件

## 开发图片详情页面
1. 根据`props`中接收的图片id 获取图片的详情数据
2. 根据图片的详情来渲染页面最基本的结构
3. 发表评论的功能，直接引用现成的组件
    + 使用import 把评论子组件导入到当前的组件
    + 把导入的评论组件对象，注册为当前图片详情页面的子组件`components`
    + 以标签形式，把注册好的评论子组件名称，引入到页面指定区域
    + 注意：如果要实现评论的功能，需要在(以`标签`形式)引用评论的子组件的时候，为期传递一个`newsid`的属性，属性值，应该是当前图片的`id`

## 实现缩略图效果
1. 先加载所有的图片并显示到页面上
2. 使用` vue-preview` 插件来实现缩略图效果
3. 如何使用缩略图组件：
   + 运行`cnpm i vue-preview -S` 安装
   + 在全局配置文件中 `gloalConfig.js` 安装此组件：
   ```
    //安装图片预览的插件
    import VuePreview from 'vue-preview'

// defalut install
    Vue.use(VuePreview)
   ``` 
   + 在页面中，先把获取到的图片，按照标准的格式做一层包装：为每个图片添加w 和 h 属性
   + 把官方提供的例子中的  `<vue-preview :slides="photolist" @close="handleClose"></vue-preview>` 粘贴到页面中，然后去渲染数据就行了

## 点击商品购买跳转到商品列表页面
1. 添加商品列表的组件
2. 改造商品购买 为 `router-link`
3. 添加路由规则

## 实现商品列表的经典两列布局
1. 外层有一个`goods-list`，里面的每个商品都是一个`goods-item`
2. 给外层的 `goods-lis`t 设置`display：flex` 布局，同时让一行只显示两个商品，为每个`goods-item`设置 宽度为`49%`，
    同时，设置了 `flex-wrap：wrap` 进行换行
3. 通过为父盒子添加`padding:7px`来挤出左右的边距
4. 为了保留出中间的间隙，我们为父盒子`goods-list` 添加了一个 `justify-content: space-between;`

## 使用手机调试vue项目
1. 前提：要保证自己的手机好当前做项目的电脑处于同一个wifi环境中
2. 当手机和电脑处于同一个wifi中之后，大家需要运行终端命令ipconfig 查看电脑当前的ip地址，查找无线网适配器的ipv4地址，复制一下
3. 把复制的ip地址，粘贴到`package.json`中：`"dev1": "webpack-dev-server --open --port 3000 --host  电脑的ipv4地址 --hot",`
4. 在确保手机和电脑处于同一个wifi的情况下，正确使用wifi的ip之后，在手机浏览器输入ip地址加上`ip地址+端口号`，就能在手机上调试项目了

## 改造进入商品详情页面的路由链接
1. 将每个商品的item项，改造成router-link，同时提供 tag= "div" 属性把路由渲染为div，再指定 ：to属性 拼接上商品的id值
2. 添加新的组件页面
3. 添加路由和组件的对应规则

## 实现商品详情页面的卡片视图布局
1. 使用MUI 提供的 `card.html` 来实现即可

## 实现商品详情页轮播图效果

## 实现首页和商品详情页的轮播图宽高问题
1. 经过分析发现：首页和商品详情页面的轮播图，对于图片的宽高有分歧：
   + 首页期望图片是：宽高 100%
   + 商品详情页面期望图片是 高100% 宽度自适应，图片居中显示
2. 让轮播图组件提供一个isfull属性，表示是否撑满父元素；
   + 如果为true，则表示，宽和高都要是 100%
   + 如果为false，表示，宽是自适应，高度是100%，同时图片居中显示

## 完结撒花
1. 时隔几年再做这个项目，遇到了很多版本还有新特性方面的坑，好在磕磕绊绊写完
2. 唯一遗憾就是并未打包还有接口里的图片大多数失效
3. 后续再补充第二点中的打包

PhilHou/vue-cms-2021

简介

发行版

贡献者

近期动态

PhilHou/vue-cms-2021 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

PhilHou/vue-cms-2021