欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 人文社科 > 生活经验 >内容正文

生活经验

Vue.js框架简单读取数据库信息并渲染完成news新闻文章列表以及detail详情页功能（小试牛刀）

发布时间：2023/11/27 生活经验 42 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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详情页功能（小试牛刀）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。