實現新聞咨詢頁面
目錄結構
步驟一：創建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": " 在《火影忍者》中有不少忍術和戰斗方法都以怪誕的形式出現，令人印象深刻，比如大蛇丸的\"科學方法\"，會讓對手感到極度的不適。今天就為大家帶來幾個效果堪比恐怖漫畫的忍術，毛骨悚然的效果令人浮想聯翩。<br><br><h4>迪達拉的C4.迦樓羅</h4> C4.迦樓羅是迪達拉專門為了針對宇智波鼬所開發出來的爆炸忍術，跟以往迪達拉所使用的肉眼可見炸彈不同，C4.迦樓羅是超小型的毫微炸彈，通過一次巨大的爆炸把這些納米級別的炸彈散布到敵人體內。<img src='../../statics/imgs/news/newsinfo01.jpg' height='200px' width='100%' style='margin-top:5px'/><br><br><h4>志乃的寄生大蟲.蟲蛀</h4> 油女一族的寄壞蟲本來就是令人感到不適的秘術，這些蟲子平時寄居在族人的身體里，戰斗的時候才出來。志乃的蟲子甚至是從眼睛里往外爬出來，寄大蟲·蟲蛀更是可怕的術。<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": " 現在每年都會產出數百部新動畫，隨着時光流逝和動畫數量的沖擊之下，曾經陪伴我們的經典作品逐漸被淡出了人們的視線。盤點那些將要被遺忘的經典動畫。<br><br> 未完待續...." },{ "id": 3, "title": "伊藤潤二的世界", "click": 38, "add_time": "2017-12-10", "content": " 著名恐怖漫畫大師伊藤潤二的名字相信喜歡恐怖題材的漫迷們絕不陌生，作為“日本恐怖漫畫界的大師”的他創作了多部經典的漫畫作品，比如《雙一恣意的詛咒》、《富江》早已為大眾所知。<br><br> 未完待續...." },{ "id": 4, "title": "聲優種田梨沙最新視頻公布", "click": 51, "add_time": "2017-12-10", "content": " 正在准備中...." },{ "id": 5, "title": "《陰陽師》手游2018", "click": 11, "add_time": "2017-12-10", "content": " 正在准備中...." },{ "id": 6, "title": "面向動畫行業的虛擬貨幣", "click": 31, "add_time": "2017-12-10", "content": " 正在准備中...." } ] }
步驟三：配置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>
項目結構圖：
