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

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

 

项目结构

 

news.html（新闻列表文件）



Vue-新闻列表页


{ {item.title}}
{ {item.content | stripHTML}}
查看详情

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）



Vue-详情页

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

更多相关：

  • 兼容IE11

    两种方法动态加载外部原生JS文件

    //方法1----------------------------------------document.write("");//方法2----------------------------------------/** 动态加载JS @para...

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

    项目结构 css/angular-common.css table tr td:first-child {/**背景图片*/width: 200px;height: 100px;/**居中填满*/background-repeat: no-repeat;background-position: center;background-s...

  • xBIM 实战01 在浏览器中加载IFC模型文件

    系列目录    【已更新最新开发文章，点击查看详细】  一、创建Web项目 　　打开VS，新建Web项目，选择 .NET Framework 4.5  选择一个空的项目 新建完成后，项目结构如下： 二、添加webServer访问文件类型 　　由于WexXplorer 加载的是 .wexBIM格式的文件或者文件流，所以需要在W...

  • js盒模型

    js盒模型 js盒模型属性 clientwidth/height/top/leftclientWidth padding+widthclientLeft 左边框宽度 offsetoffsetWidth padding+width+borderoffsetParent scrollscrollWidth 左border+内容...

  • java,js,jstl,EL的简单交互

        EL全名Expression Language.EL提供了在JSP脚本编制元素范围外使用运行时表达式的功能。     脚本编制元素是指页面中能够用于在JSP文件中嵌入java代码的元素。     JSP标准标记库（jsp staandard tag library，jstl）是一个实现web应用程序常用功能的定制标记库集。有c...

  • object expected错误解决方法

          写一个页面，引用了另外的js，结果触发js事件时，浏览器显示"object expected "错误，说什么action有错，在action硬是纠结了半天，结果发现是由于action跳转之后，路径错了，所以js不能正确引入。 原来写的是相对引入路径