基于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确定urlvar 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如果服务器返回数据正常，则赋值给listthis.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文件，模仿服务端存储数据

{"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的相关路由规则

//导入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日期处理类库

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

//导入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中使用过滤器

<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确定urlvar 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如果服务器返回数据正常，则赋值给listthis.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

<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 定义urlvar 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文件，伪造数据库存放新闻信息

{"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文件

<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确定urlvar 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如果服务器返回数据正常，则赋值给listthis.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

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

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

项目结构图：

实现评论组件

步骤一：创建一个评论组件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() {//确定评论数据的urlvar 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.listthis.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文件，存储相关的评论信息

{"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文件

<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 定义urlvar 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

项目结构图：

转载于:https://www.cnblogs.com/fengxiongZz/p/8094794.html

基于Vue的WebApp项目开发（四）相关推荐

html5快速开发模板生成器,推荐一个基于Vue 的 H5 快速开发模板
本项目以基于 vue-cli4 和 Vant-ui 搭建的,进行移动端开发中的一些最佳实践方案模板地址动动你的小手点颗star 样式适配在移动端网页开发时,样式适配始终是一个绕不开的问题.对此目 ...
Vue PC商城项目开发笔记与问题汇总
Vue PC商城项目开发笔记与问题汇总负责PC端商城项目,这也是人生第一个真正的项目.刚做了一天,就遇到不少问题,在这里列出自己的问题与解决办法,与大家交流,提升自己,希望以后不会掉进同一个坑里. ...
实验管理系统springboot+vue+element ui项目开发
实验管理系统某学院实验老师长期采用人工的形式完成药品试剂的入库.查询.出库的流程.但这种方式存在诸多问题和不便: 1. 在仓库运行流程中效率不高,容易出错. 2. 管理人员不能方便的了解每种物品的状 ...
vue 微信公众号支付接口_基于vue的h5项目之支付宝支付与微信支付
本文仅记录基于vue开发h5项目过程中使用支付宝和微信支付过程中的重点与槽点,仅为前端部分,如有疏漏不正之处,请于文末评论探讨.注意:标红部分灰常重要,仔细阅读官方文档非常重要,耐心非常重要,细心非常 ...
vue lang_推荐一个基于Vue 的 H5 快速开发模板
关注 Vue社区,回复"加群" 加入我们一起学习,天天进步 praise juejin.im/post/5e612534e51d4527017971a2 模板基于 vue-cli4 ...
基于vue 旅游网移动开发
文章目录前言开发前准备项目配置 vue.config.js 使用框架vant babel.config.js配置 main.js 引入路由 vuex环境 axios 1.创建axios实例 2. ...
基于vue的简单流程图开发
严重拖延症,一方面这项目模块纯属个人娱乐.另一方面,流程图这块涉及的东西还是蛮多的,这次也只是介绍一些简单的部分.拖了这么久,现在终于要开始硬着头皮写一篇基于vue+svg的流程图"伪教程& ...
vue+node+mysql项目开发(包括部署到服务器)
声明: 1．该项目为练习项目,只是基础内容． 2．文章部分内容为网上查阅所得,由于查阅文章较多,无法确认文章地址.如有雷同,算我抄你. 3．本文不讲解vue(ts)的项目搭建. ...
基于android的防抖音直播,基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能...
一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.Ap ...

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

基于Vue的WebApp项目开发（四）相关推荐

最新文章

热门文章