菜单

据书上说Vue的WebApp项目支付

2019年3月8日 - 注册免费送38元体验金

贯彻音讯咨询页面

目录结构

注册免费送38元体验金 1

注册免费送38元体验金,步骤一:创建newslist.vue文件

注册免费送38元体验金 2注册免费送38元体验金 3

<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">
              发表时间:{{item.add_time}}
              点击数:{{item.click}}
            </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>

View Code

 步骤二:成立newslist.json文件,模仿服务端存款和储蓄数据

注册免费送38元体验金 4注册免费送38元体验金 5

{
  "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"
    }
  ]
}

View Code

步骤三:配置入口文件main.js的连锁路由规则

注册免费送38元体验金 6注册免费送38元体验金 7

//导入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)
})

View Code

 

落实音讯资源消息日期格式化

对于页面日期的处理,一般都亟需有统一的样式来进展田间管理,该品种选拔的是Moment.js日期处理类库,上边是切实可行的支出步骤

手续一:下载安装Moment.js日期处理类库

注册免费送38元体验金 8

手续二:在输入文件中定义2个大局过滤器

注册免费送38元体验金 9注册免费送38元体验金 10

//导入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)
})

View Code

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

注册免费送38元体验金 11注册免费送38元体验金 12

<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">
              发表时间:{{item.add_time | datefmt('YYYY-MM-DD')}}
              点击数:{{item.click}}
            </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>

View Code

 

贯彻音信资讯详情页

该意义难题是哪些传递父页面包车型大巴唯一值(id),然后经过判断那些唯一值去央求例外的json数据,再次回到对应的子页面

手续一:成立一个新闻详情页newsinfo.vue

注册免费送38元体验金 13注册免费送38元体验金 14

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

View Code

步骤二:创立newsinfo.json文件,伪造数据仓库储存放消息信息

注册免费送38元体验金 15注册免费送38元体验金 16

{
  "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;正在准备中...."
    }

  ]
}

View Code

步骤三:配置newslist.vue文件

注册免费送38元体验金 17注册免费送38元体验金 18

<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">
              发表时间:{{item.add_time | datefmt('YYYY-MM-DD')}}
              点击数:{{item.click}}
            </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>

View Code

手续四:配置入口文件的路由规则

注册免费送38元体验金 19注册免费送38元体验金 20

//导入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)
})

View Code

花色布局图:

注册免费送38元体验金 21

 

兑现评论组件

步骤一:创设多少个指指点点组件comment.vue。由于并未运用到数据库方面包车型大巴技能,由此在这一块有广大务必的功力都未开发

注册免费送38元体验金 22注册免费送38元体验金 23

<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">
          第{{index + 1}}楼
          用户:{{item.user_name}}
          发表时间:{{item.add_time | datefmt('YYYY-MM-DD')}}
        </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>

View Code

步骤二:创造三个userlist.json文件,存款和储蓄相关的评论音信

注册免费送38元体验金 24注册免费送38元体验金 25

{
  "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我来也"
    }
  ]
}

View Code

步骤三:修改newsinfo.vue文件

注册免费送38元体验金 26注册免费送38元体验金 27

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

View Code

 项目结构图:

注册免费送38元体验金 28

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图