基于Vue的WebApp项目开发（四）

实现新闻咨询页面

目录结构

步骤一：创建newslist.vue文件

<template>
  <div id="tml">
    <!--使用mui框架，实现新闻资讯列表样式-->
    <ul class="mui-table-view">
      <li v-for="item in list" class="mui-table-view-cell mui-media">
        <a href="javascript:void(0);">
          <img class="mui-media-object mui-pull-left" :src="item.img_url">
          <div class="mui-media-body">
            {{item.title}}
            <p class='mui-ellipsis' v-text="item.zhaiyao" style="margin-top: 3px;"></p>
            <div class="ft">
              <span>发表时间：{{item.add_time}}</span>
              <span>点击数：{{item.click}}</span>
            </div>
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
        list: [] //新闻列表功能
      }
    },
    created() {
      this.getnewslist();
    },
    methods: {
      //获取JSON中的新闻资讯
      getnewslist() {
        //1.0确定url
        var url = '../../statics/json/newslist.json';
        // 2.0调用$http.get()
        this.$http.get(url).then(function (response) {
          //3.0获取响应报文体数据
          var data = response.body;
          //4.0判断响应报文体中的状态值
          //如果非0,则将服务器响应回来的错误消息提示给用户
          if (data.status != 0) {
            Toast(data.message);
            return;
          }
          //5.0如果服务器返回数据正常，则赋值给list
          this.list = data.message;
        })
      }
    }

  }
</script>

<style>
  .mui-table-view img {
    height: 80px;
    width: 80px;
  }
  .mui-table-view .mui-media-object {
    height: 80px;
    line-height: 80px;
    max-width: 80px;
  }
  .ft {
    margin-top: 1.5em;
    font-size: 14px;
    color: #0094ff;
  }
</style>

步骤二：创建newslist.json文件，模仿服务端存储数据

{
  "status": 0,
  "message": [
    {
      "id": 1,
      "title": "《火影忍者》揭秘",
      "add_time": "2017-12",
      "zhaiyao": "《火影忍者》中诡异的战斗招式 效果令人毛骨悚然",
      "click": 30,
      "img_url": "../../statics/imgs/news/news01.jpg"
    }, {
      "id": 2,
      "title": "将要被遗忘的经典动漫",
      "add_time": "2017-11",
      "zhaiyao": "童年优秀大作 盘点那些将要被遗忘的经典动画片",
      "click": 25,
      "img_url": "../../statics/imgs/news/news02.jpg"
    }, {
      "id": 3,
      "title": "伊藤润二的世界",
      "add_time": "2017-10",
      "zhaiyao": "欢迎来到伊藤润二的世界 ",
      "click": 38,
      "img_url": "../../statics/imgs/news/news03.jpg"
    }, {
      "id": 4,
      "title": "声优种田梨沙最新视频公布",
      "add_time": "2017-10",
      "zhaiyao": "声优种田梨沙最新视频公布 熟悉的大美女回来了",
      "click": 51,
      "img_url": "../../statics/imgs/news/news04.jpg"
    }, {
      "id": 5,
      "title": "《阴阳师》手游2018",
      "add_time": "2017-10",
      "zhaiyao": "《阴阳师》手游泡面番2018年春季开播 开启欢乐日常",
      "click": 11,
      "img_url": "../../statics/imgs/news/news05.jpg"
    }, {
      "id": 6,
      "title": "面向动画行业的虚拟货币",
      "add_time": "2017-10",
      "zhaiyao": "面向动画行业的虚拟货币，「宅币」正在准备第一次公开发行",
      "click": 31,
      "img_url": "../../statics/imgs/news/news06.jpg"
    }
  ]
}

步骤三：配置入口文件main.js的相关路由规则

//导入vue核心包
import Vue from 'vue';

//导入vue-router
import vueRouter from 'vue-router';
//将vueRouter对象绑定到Vue对象上
Vue.use(vueRouter);

//将vue-resource在vue中绑定，自动在vue对象实例上注入一个$http对象就可以使用ajax方法了
import vueResource from 'vue-resource';
Vue.use(vueResource);

//导入App.vue的vue对象
import App from './App.vue';

//导入路由规则对应的组件对象
import home from './components/Home.vue';
import shopcar from './components/shopcar/car.vue';
import news from './components/news/newslist.vue';

//定义路由规则
var router1 = new vueRouter({
  //改变路由激活时的class名称
  linkActiveClass: 'mui-active',
  routes: [{
      path: '/',
      component: home
    },
    {
      path: '/home',
      component: home
    },
    {
      path: '/shopcar',
      component: shopcar
    }, {
      path: '/news/newlist',
      component: news
    }
  ]
});

//导入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//导入mint-ui组件对象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui);

//注册mui的css样式
import '../statics/mui/css/mui.css';

//导入一个当前系统的全局基本样式
import '../statics/css/site.css';

//利用Vue对象进行解析渲染
new Vue({
  el: '#app',
  //使用路由对象实例
  router: router1,
  render: c => c(App)
})

实现新闻资讯日期格式化

对于页面日期的处理，一般都需要有统一的样式来进行管理，该项目使用的是Moment.js日期处理类库，下面是具体的开发步骤

步骤一：下载安装Moment.js日期处理类库

步骤二：在入口文件中定义一个全局过滤器

//导入vue核心包
import Vue from 'vue';

//导入vue-router
import vueRouter from 'vue-router';
//将vueRouter对象绑定到Vue对象上
Vue.use(vueRouter);

//将vue-resource在vue中绑定，自动在vue对象实例上注入一个$http对象就可以使用ajax方法了
import vueResource from 'vue-resource';
Vue.use(vueResource);

//导入App.vue的vue对象
import App from './App.vue';

//导入路由规则对应的组件对象
import home from './components/Home.vue';
import shopcar from './components/shopcar/car.vue';
import news from './components/news/newslist.vue';

//定义路由规则
var router1 = new vueRouter({
  //改变路由激活时的class名称
  linkActiveClass: 'mui-active',
  routes: [{
      path: '/',
      component: home
    },
    {
      path: '/home',
      component: home
    },
    {
      path: '/shopcar',
      component: shopcar
    }, {
      path: '/news/newlist',
      component: news
    }
  ]
});

//导入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//导入mint-ui组件对象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui);

//注册mui的css样式
import '../statics/mui/css/mui.css';

//导入一个当前系统的全局基本样式
import '../statics/css/site.css';

//定义一个全局过滤器实现日期的格式化
import moment from 'moment';
Vue.filter('datefmt',function(input,fmtstring){
    //使用momentjs这个日期格式化类库实现日期的格式化功能
    return moment(input).format(fmtstring);
});

//利用Vue对象进行解析渲染
new Vue({
  el: '#app',
  //使用路由对象实例
  router: router1,
  render: c => c(App)
})

步骤三：在newslist.vue中使用过滤器

<template>
  <div id="tml">
    <!--使用mui框架，实现新闻资讯列表样式-->
    <ul class="mui-table-view">
      <li v-for="item in list" class="mui-table-view-cell mui-media">
        <a href="javascript:void(0);">
          <img class="mui-media-object mui-pull-left" :src="item.img_url">
          <div class="mui-media-body">
            {{item.title}}
            <p class='mui-ellipsis' v-text="item.zhaiyao" style="margin-top: 3px;"></p>
            <div class="ft">
              <span>发表时间：{{item.add_time | datefmt('YYYY-MM-DD')}}</span>
              <span>点击数：{{item.click}}</span>
            </div>
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
        list: [] //新闻列表功能
      }
    },
    created() {
      this.getnewslist();
    },
    methods: {
      //获取JSON中的新闻资讯
      getnewslist() {
        //1.0确定url
        var url = '../../statics/json/newslist.json';
        // 2.0调用$http.get()
        this.$http.get(url).then(function (response) {
          //3.0获取响应报文体数据
          var data = response.body;
          //4.0判断响应报文体中的状态值
          //如果非0,则将服务器响应回来的错误消息提示给用户
          if (data.status != 0) {
            Toast(data.message);
            return;
          }
          //5.0如果服务器返回数据正常，则赋值给list
          this.list = data.message;
        })
      }
    }

  }
</script>

<style>
  .mui-table-view img {
    height: 80px;
    width: 80px;
  }
  .mui-table-view .mui-media-object {
    height: 80px;
    line-height: 80px;
    max-width: 80px;
  }
  .ft {
    margin-top: 1.5em;
    font-size: 14px;
    color: #0094ff;
  }
</style>

实现新闻资讯详情页

该功能难点是如何传递父页面的唯一值（id），然后通过判断这个唯一值去请求不同的json数据，返回对应的子页面

步骤一：创建一个新闻详情页newsinfo.vue

<template>
  <div id="tml">
    <!--1.0 实现新闻详情-->
    <div class="title">
      <h4 v-text="info.title"></h4>
      <p>
        <span>{{ info.add_time | datefmt('YYYY-MM-DD') }}</span>
        <span>{{info.click}}次浏览</span>
        <div id="content" v-html="info.content"></div>
      </p>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        id: 0, // 传入的id值
        info: {}
      }
    },
    created() {
      //1.0 获取url传入的id参数值赋值给data中的id属性
      this.id = this.$route.params.id;
      //2.0 请求服务器获取到这个id对应的详情数据对象
      this.getinfo();
    },
    methods: {
      getinfo() {
        //1.0 定义url
        var url = '../../statics/json/newsinfo.json';
        //2.0 发出ajax请求获取数据
        this.$http.get(url).then(function (res) {
          var body = res.body;
          if (body.status != 0) {
            alert(body.message);
            return;
          }
          for (var i = 0; i < body.message.length; i++) {
            if (this.id == body.message[i].id) {
              this.info = body.message[i];
            }
          }
        });
      }
    }
  }
</script>

<style scoped>
  .title h4 {
    color: #0094ff;
  }
  .title p {
    color: rgba(0, 0, 0, 0.5);
  }
  .title,
  #content {
    padding: 5px;
  }
  #content {
    line-height: 27px;
  }
</style>

步骤二：创建newsinfo.json文件，伪造数据库存放新闻信息

{
  "status": 0,
  "message": [
    {
      "id": 1,
      "title": "《火影忍者》揭秘",
      "click": 30,
      "add_time": "2017-12-16",
      "content": "&nbsp;&nbsp;&nbsp;&nbsp;在《火影忍者》中有不少忍术和战斗方法都以怪诞的形式出现，令人印象深刻，比如大蛇丸的\"科学方法\"，会让对手感到极度的不适。今天就为大家带来几个效果堪比恐怖漫画的忍术，毛骨悚然的效果令人浮想联翩。<br><br><h4>迪达拉的C4.迦楼罗</h4>&nbsp;&nbsp;&nbsp;&nbsp;C4.迦楼罗是迪达拉专门为了针对宇智波鼬所开发出来的爆炸忍术，跟以往迪达拉所使用的肉眼可见炸弹不同，C4.迦楼罗是超小型的毫微炸弹，通过一次巨大的爆炸把这些纳米级别的炸弹散布到敌人体内。<img src='../../statics/imgs/news/newsinfo01.jpg' height='200px' width='100%' style='margin-top:5px'/><br><br><h4>志乃的寄生大虫.虫蛀</h4>&nbsp;&nbsp;&nbsp;&nbsp;油女一族的寄坏虫本来就是令人感到不适的秘术，这些虫子平时寄居在族人的身体里，战斗的时候才出来。志乃的虫子甚至是从眼睛里往外爬出来，寄大虫·虫蛀更是可怕的术。<img src='../../statics/imgs/news/newsinfo02.jpg' height='200px' width='100%' style='margin-top:5px'/>"
    },{
      "id": 2,
      "title": "将要被遗忘的经典动漫",
      "click": 25,
      "add_time": "2017-12-11",
      "content": "&nbsp;&nbsp;&nbsp;&nbsp;现在每年都会产出数百部新动画，随着时光流逝和动画数量的冲击之下，曾经陪伴我们的经典作品逐渐被淡出了人们的视线。盘点那些将要被遗忘的经典动画。<br><br>&nbsp;&nbsp;&nbsp;&nbsp;未完待续...."
    },{
      "id": 3,
      "title": "伊藤润二的世界",
      "click": 38,
      "add_time": "2017-12-10",
      "content": "&nbsp; &nbsp;&nbsp;著名恐怖漫画大师伊藤润二的名字相信喜欢恐怖题材的漫迷们绝不陌生，作为“日本恐怖漫画界的大师”的他创作了多部经典的漫画作品，比如《双一恣意的诅咒》、《富江》早已为大众所知。<br><br>&nbsp;&nbsp;&nbsp;&nbsp;未完待续...."
    },{
      "id": 4,
      "title": "声优种田梨沙最新视频公布",
      "click": 51,
      "add_time": "2017-12-10",
      "content": "&nbsp;&nbsp;&nbsp;&nbsp;正在准备中...."
    },{
      "id": 5,
      "title": "《阴阳师》手游2018",
      "click": 11,
      "add_time": "2017-12-10",
      "content": "&nbsp;&nbsp;&nbsp;&nbsp;正在准备中...."
    },{
      "id": 6,
      "title": "面向动画行业的虚拟货币",
      "click": 31,
      "add_time": "2017-12-10",
      "content": "&nbsp;&nbsp;&nbsp;&nbsp;正在准备中...."
    }

  ]
}

步骤三：配置newslist.vue文件

<template>
  <div id="tml">
    <!--使用mui框架，实现新闻资讯列表样式-->
    <ul class="mui-table-view">
      <li v-for="item in list" class="mui-table-view-cell mui-media">
        <router-link v-bind="{to:'/news/newsinfo/'+item.id}">
          <img class="mui-media-object mui-pull-left" :src="item.img_url">
          <div class="mui-media-body">
            {{item.title}}
            <p class='mui-ellipsis' v-text="item.zhaiyao" style="margin-top: 3px;"></p>
            <div class="ft">
              <span>发表时间：{{item.add_time | datefmt('YYYY-MM-DD')}}</span>
              <span>点击数：{{item.click}}</span>
            </div>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
        list: [] //新闻列表功能
      }
    },
    created() {
      this.getnewslist();
    },
    methods: {
      //获取JSON中的新闻资讯
      getnewslist() {
        //1.0确定url
        var url = '../../statics/json/newslist.json';
        // 2.0调用$http.get()
        this.$http.get(url).then(function (response) {
          //3.0获取响应报文体数据
          var data = response.body;
          //4.0判断响应报文体中的状态值
          //如果非0,则将服务器响应回来的错误消息提示给用户
          if (data.status != 0) {
            Toast(data.message);
            return;
          }
          //5.0如果服务器返回数据正常，则赋值给list
          this.list = data.message;
        })
      }
    }
  }
</script>

<style>
  .mui-table-view img {
    height: 80px;
    width: 80px;
  }
  .mui-table-view .mui-media-object {
    height: 80px;
    line-height: 80px;
    max-width: 80px;
  }
  .ft {
    margin-top: 1.5em;
    font-size: 14px;
    color: #0094ff;
  }
</style>

步骤四：配置入口文件的路由规则

//导入vue核心包
import Vue from 'vue';

//导入vue-router
import vueRouter from 'vue-router';
//将vueRouter对象绑定到Vue对象上
Vue.use(vueRouter);

//将vue-resource在vue中绑定，自动在vue对象实例上注入一个$http对象就可以使用ajax方法了
import vueResource from 'vue-resource';
Vue.use(vueResource);

//导入App.vue的vue对象
import App from './App.vue';

//导入路由规则对应的组件对象
import home from './components/Home.vue';
import shopcar from './components/shopcar/car.vue';
import news from './components/news/newslist.vue';
import newsinfo from './components/news/newsinfo.vue';

//定义路由规则
var router1 = new vueRouter({
  //改变路由激活时的class名称
  linkActiveClass: 'mui-active',
  routes: [{
      path: '/',
      component: home
    },
    {
      path: '/home',
      component: home
    },
    {
      path: '/shopcar',
      component: shopcar
    }, {
      path: '/news/newlist',
      component: news
    },{
      path: '/news/newsinfo/:id',
      component: newsinfo
    }
  ]
});

//导入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//导入mint-ui组件对象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui);

//注册mui的css样式
import '../statics/mui/css/mui.css';

//导入一个当前系统的全局基本样式
import '../statics/css/site.css';

//定义一个全局过滤器实现日期的格式化
import moment from 'moment';
Vue.filter('datefmt',function(input,fmtstring){
    //使用momentjs这个日期格式化类库实现日期的格式化功能
    //input代表左值（原始时间格式），fmtstring代表右值括号内的规则
    return moment(input).format(fmtstring);
});

//利用Vue对象进行解析渲染
new Vue({
  el: '#app',
  //使用路由对象实例
  router: router1,
  render: c => c(App)
})

项目结构图：

实现评论组件

步骤一：创建一个评论组件comment.vue。由于没有使用到数据库方面的技术，因此在这一块有很多必须的功能都未开发

<template>
  <div id="tml">
    <!--评论组件-->
    <!--实现提交评论数据到服务器的静态结构-->
    <div id="postcomment">
      <h4>提交评论</h4>
      <p class="p"></p>
      <textarea placeholder="请输入您要评论的内容..." v-model="postcontent"></textarea>
      <mt-button type="primary" size="large" @click="postcomment">发表</mt-button>
    </div>
    <!--实现获取评论数据列表-->
    <div id="list">
      <h4>评论列表</h4>
      <p class="p"></p>
      <div v-for="(item,index) in list">
        <div class="title">
          <span>第{{index + 1}}楼</span>
          <span style="margin: 0px 7px;">用户：{{item.user_name}}</span>
          <span>发表时间：{{item.add_time | datefmt('YYYY-MM-DD')}}</span>
        </div>
        <ul class="mui-table-view">
          <li class="mui-table-view-cell" v-text="item.content"></li>
        </ul>
      </div>
    </div>
    <!--实现获取更多按钮-->
    <mt-button type="danger" size="large" plain>加载更多</mt-button>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
        id: 0,
        postcontent: '', //用来自动获取用户填写的评论内容
        list: [] //评论数据的数组
      }
    },
    created() {
      //获取url传入的id参数值赋值给data中的id属性
      this.id = this.$route.params.id;
      //获取当前资讯数据的评论信息列表
      this.getcommentlist();
    },
    methods: {
      //获取当前数据的评论数据 pageindex:代表的是当前获取的是哪一页的数据，默认值是1
      getcommentlist() {
        //确定评论数据的url
        var url = '../../statics/json/userslist.json';
        //发出ajax请求获取数据即可
        this.$http.get(url).then(function (res) {
          if (res.body.status != 0) {
            Toast(res.body.message);
            return;
          }
          //3.0 message数组中的数据赋值给this.list
          this.list = this.list.concat(res.body.message);
        });
      },
      //1.0 评论数据的提交
      postcomment() {
        //2.0 判断用户是否填写评论内容
        if (this.postcontent.trim().length <= 0) {
          Toast('您要评论的内容不能为空');
          return;
        }
      }
    }
  }
</script>

<style scoped>
  /* 1.0 实现提交评论样式 */
  #postcomment {
    padding: 5px;
  }
  .p {
    height: 1px;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  }
  /*2.0 评论列表的样式*/
  #list {
    padding: 5px;
  }
  .title {
    padding: 5px;
    color: #6d6d72;
    font-size: 15px;
    background-color: rgba(0, 0, 0, 0.1);
  }
  textarea {
    height: 70px;
    width: 100%;
    box-sizing: border-box;
    margin-right: 10px;
  }
</style>

步骤二：创建一个userlist.json文件，存储相关的评论信息

{
  "status": 0,
  "message": [
    {
      "user_name": "jack李",
      "add_time": "2017-12-23",
      "content": "有点意思，希望越来越好"
    }, {
      "user_name": "hock廖",
      "add_time": "2017-12-21",
      "content": "尝到泪水的味道，才发现酒是那么的好喝"
    }, {
      "user_name": "猪猪侠",
      "add_time": "2017-12-20",
      "content": "2018我来也"
    }
  ]
}

步骤三：修改newsinfo.vue文件

<template>
  <div id="tml">
    <!--1.0 实现新闻详情-->
    <div class="title">
      <h4 v-text="info.title"></h4>
      <p>
        <span>{{ info.add_time | datefmt('YYYY-MM-DD') }}</span>
        <span>{{info.click}}次浏览</span>
        <div id="content" v-html="info.content"></div>
      </p>
    </div>
    <!--调用评论组件-->
    <comment></comment>
  </div>
</template>

<script>
  //导入评论组件 comment.vue
  import comment from '../subcom/comment.vue';
  export default {
    components: {
      comment // 注册评论组件
    },
    data() {
      return {
        id: 0, // 传入的id值
        info: {}
      }
    },
    created() {
      //1.0 获取url传入的id参数值赋值给data中的id属性
      this.id = this.$route.params.id;
      //2.0 请求服务器获取到这个id对应的详情数据对象
      this.getinfo();
    },
    methods: {
      getinfo() {
        //1.0 定义url
        var url = '../../statics/json/newsinfo.json';
        //2.0 发出ajax请求获取数据
        this.$http.get(url).then(function (res) {
          var body = res.body;
          if (body.status != 0) {
            alert(body.message);
            return;
          }
          for (var i = 0; i < body.message.length; i++) {
            if (this.id == body.message[i].id) {
              this.info = body.message[i];
            }
          }
        });
      }
    }
  }
</script>

<style scoped>
  .title h4 {
    color: #0094ff;
  }
  .title p {
    color: rgba(0, 0, 0, 0.5);
  }
  .title,
  #content {
    padding: 5px;
  }
  #content {
    line-height: 27px;
  }
</style>

项目结构图：