# app项目

**Repository Path**: them/fan_fan

## Basic Information

- **Project Name**: app项目
- **Description**: mint-ui  app-开发
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-02-11
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

fan-app基于vue、mint-ui构建开发，实现app前端功能，提供一套更优的前端解决方案

##用（c传统方式）命令行把修改后的代码上传到码云
1.git add .
2.git commint -m "提交信息"
3.git push
####制作过程
##制作首页组件
1.完成Header 区域，使用的是Mint-UI 中的Header组件
2.制作底部的Tabbar区域，使用的是MUI的Tabbar.html
    +在制作购物车小图标的时候，操作相对多一些；
    +先把扩展图标的css样式，拷贝到项目中去
    +拷贝扩展字体库ttf文件，到项目中
    +为购物车 小图标 ，添加。。样式
3.要在中间区域放置router-view来显示路由匹配到组件

##改造tabbar为router-link


##设置路由高亮

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

##制作首页轮播图布局

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

##改造 九宫格 区域样式

##新闻资讯  页面  制作
1.绘制界面
2.使用vue-resource  获取数据
3.渲染真实数据
<!-- 导入格式化时间的插件
import moment from 'moment'
//定义全局的过滤器
Vue.filter('dataFormat',function(dataStr,pattern = "YYYY-MM-DD HH:mm:ss"){
  return moment(dataStr).format(pattern)


 <span>发表时间：{{ item.click |dataFormat}}</span> -->

 ##实现  新闻资讯列表  点击跳转到新闻详情
 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.将注册子组件的时候，注册名称，以标签形式，在页面中 引用即可

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

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


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

  ##改造图片分析  按钮为  路由的链接并显示对应的组件页面



  ##实现图片下详情  中 缩略图的功能
  1.使用插件vue-preview这个缩略图插件
  2.获取到所有的图片列表，然后使用v-for指令渲染数据
  3.注意：img标签上的class不能去掉
  4.注意：每个图片数据对象中，必须有w  和   h属性

  ##绘制  商品列表  页面基本结构并美化


  ##尝试手机上  去进行项目的预览和测试
  1.要保证自己的手机可以正常运行
  2.要保证手机和开发项目的电脑 处于同一个wifi环境中，也就是说手机可以访问到电脑的Ip
  3.打开自己的项目中packge.json文件，在dev脚本中，添加一个--host指令，把当前电脑的wifi ip地址，设置为--host的指令值
  3.如何查看自己电脑所处wifi的IP呢，在cmd终端中运行“ipconfig”,查看无线网的ip地址    


  注意一定要区分this.$toute 和this.$touter这两个对象
  1.其中：this.$route是路由【参数对象】，所偶有路由中的参数，params，query都属于他
  1.其中：this.$router是一个路由【导航对象，用他可以方便的使用js代码，是实现路由的前进，后退跳转页面】