项目结构
news.html（新闻列表文件）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue-新闻列表页</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/public/k-app-common.js"></script>
<script src="js/vue/vue.min.js"></script>
<script src="js/vue/vue-resource.min.js"></script>
<link rel="stylesheet" href="css/vue-common.css">
</head>
<body>
<div id="app" class="app">
<table>
<tr v-for="item in list">
<td :style="{backgroundImage:'url('+item.pic+')'}"></td>
<td>
<h2>{{item.title}}</h2>
<h3>{{item.content | stripHTML}}</h3>
</td>
<td>
<a :href="'detail.html?id='+item.id" target="_blank">查看详情</a>
</td>
</tr>
</table>
</div>
</body>
</html>
<script src="js/news.js"></script>
js/news.js（新闻列表js文件）
let url = 'http://your_ip:your_port/api/api_name';
new Vue({
el: '#app',
data: {
list: [],
},
created: function () {
this.init();
},
methods: {
init: function () {
this.$http.post(url, {start: 0, count: 6}, {emulateJSON: true}).then(function (r) {
this.list = r.body.data;
}, function () {
alert('接口请求失败！');
});
}
},
filters: {
stripHTML: function (c) {
return c.stripHTML().substring(0, 30) + "...";
}
}
});
detail.html（详情页html）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue-详情页</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/public/k-app-common.js"></script>
<script src="js/vue/vue.min.js"></script>
<script src="js/vue/vue-resource.min.js"></script>
<link rel="stylesheet" href="css/vue-common.css">
</head>
<body>
<div id="app" class="app">
<div>
<h1>{{title}}</h1>
<h6>{{date|format}}</h6>
<p v-html="content"></p>
</div>
<div>
<a :href="prevHref" target="_self" :class="hasPrevLink?'hasLink':'noLink'">[上一篇] {{prevTitle}}</a><br>
<a :href="nextHref" target="_self" :class="hasNextLink?'hasLink':'noLink'">[下一篇] {{nextTitle}}</a><br><br>
</div>
</div>
</body>
</html>
<script src="js/detail.js"></script>
js/detail.js（详情页js）
let url = 'http://your_ip:your_port/api/api_name';
new Vue({
el: '#app',
data: {
list: [],
},
created: function () {
this.init();
},
methods: {
init: function () {
this.$http.post(url, {start: 0, count: 6}, {emulateJSON: true}).then(function (r) {
this.list = r.body.data;
}, function () {
alert('接口请求失败！');
});
}
},
filters: {
stripHTML: function (c) {
return c.stripHTML().substring(0, 30) + "...";
}
}
});
css/vue-common.css（公用简单样式，聊胜于无，用于测试看清楚具体内容）
table tr td:first-child {
/**背景图片*/
width: 200px;
height: 100px;
/**居中填满*/
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
a {
text-decoration: none;
}
