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; } 

原文链接:https://blog.csdn.net/qq_37860634/article/details/88842581?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165277607816782248557448%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165277607816782248557448&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-28-88842581-null-null.nonecase&utm_term=%E6%96%B0%E9%97%BB

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
文明发言,共建和谐米科社区
提交
头像

昵称

取消
昵称表情图片