Giter VIP home page Giter VIP logo

frontend's Introduction

这是一个NB的项目

牛不牛逼, 用心去感受,每一行代码中的诗情雅意

我们是有灵魂程序员,所以,我们的代码富有诗意;

丫的,实在编不下去了,哈哈哈

用(传统方式)命令行把修改过后的代码上传到码云???

  1. git add .
  2. git commit -m "提交信息"
  3. git push

制作首页App组件

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

改造 tabbar 为 router-link

设置路由高亮

点击 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'
  1. 在父组件中,使用 components 属性,将刚才导入 comment 组件,注册为自己的 子组件
  2. 将注册子组件时候的,注册名称,以 标签形式,在页面中 引用即可

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

实现点击加载更多评论的功能

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

frontend's People

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.