Vue.js框架简单读取数据库信息并渲染完成news新闻文章列表以及detail详情页功能（小试牛刀）
生活随笔
收集整理的這篇文章主要介紹了
Vue.js框架简单读取数据库信息并渲染完成news新闻文章列表以及detail详情页功能（小试牛刀）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
項目結構
?
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;
}.hasLink {color: black;border-bottom: 1px solid black;
}.hasLink:hover {color: blue;border-bottom: 1px solid blue;
}.noLink {color: lightgray;
}._active {background-color: red;
}
總結
以上是生活随笔為你收集整理的Vue.js框架简单读取数据库信息并渲染完成news新闻文章列表以及detail详情页功能（小试牛刀）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Node.js中的express框架，修
- 下一篇： Node.js开发WEB项目后端接口AP