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-size: cover;}a {text-decoration: none;cursor: pointer;border-bottom: 1px solid transparent;
}a:hover {border-color: black;
}.hasLink {pointer-events: auto;color: black;border-bottom: 1px solid black;
}.hasLink:hover {color: blue;border-bottom: 1px solid blue;
}.noLink {pointer-events: none;color: lightgray;
}._active {background-color: red;
}

news.html

<!doctype html>
<html ng-app="app" ng-cloak>
<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>Angular-新闻列表页</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/angular/angular.min.js"></script><link rel="stylesheet" href="css/angular-common.css">
</head><body ng-controller="ctrl"><div><table><tr ng-repeat="item in list"><td style="background-image: url({{item.pic}})"></td><td><h2>{{item.title}}</h2><h3>{{item.content | stripHTML}}</h3></td><td><a ng-href="detail.html?id={{item.id}}" target="_blank">查看详情</a></td></tr></table>
</div></body>
<script src="js/news.js"></script>
</html>

js/news.js

/**angular post 请求*/
let url = 'http://your_ip:your_port/api/api_name'
const config = {headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}, transformRequest: function (data) {return $.param(data);}
};
let app = angular.module('app', []);
app.controller('ctrl', function ($scope, $http) {$http.post(url, {start: 0, count: 6}, config).then((r) => {/* 请求成功执行代码*//* alert(JSON.stringify(r.data))*/$scope.list = r.data.data}, (r) => {/* 请求失败执行代码*/alert(JSON.stringify(r))});
});app.filter('stripHTML', function() {//可以注入依赖return function(c) {return c.stripHTML().substring(0, 30) + "...";}
});

detail.html

<!doctype html>
<html ng-app="app" ng-cloak>
<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>Angular-详情页</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/angular/angular.min.js"></script><script src="js/angular/angular-sanitize.min.js"></script><!--奇葩的angular，用个ng-bind-html还需要依赖angular-sanitize.min.js，真是日了狗了！！！--><link rel="stylesheet" href="css/angular-common.css">
</head><body ng-controller="ctrl"><div><div><h1>{{data.title}}</h1><h6>{{data.date|format}}</h6><p ng-bind-html="data.content"></p><!--如果不引入angular-sanitize.min.js，就会报错--></div><div><a ng-href="{{data.prevHref}}" target="_self" ng-class="data.hasPrevLink?'hasLink':'noLink'">[上一篇] {{data.prevTitle}}</a><br><a ng-href="{{data.nextHref}}" target="_self" ng-class="data.hasNextLink?'hasLink':'noLink'">[下一篇] {{data.nextTitle}}</a><br><br></div>
</div></body>
</html>
<script src="js/detail.js"></script>

js/detail.js

let url = 'http://your_ip:your_port/api/api_name'
let detailId = hash.getQueryString("id");
detailId || alert("id参数获取失败");const config = {headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}, transformRequest: function (data) {return $.param(data);}
};
let app = angular.module('app', ['ngSanitize']);
app.controller('ctrl', function ($scope, $http) {$scope.data = {title: "加载中…",date: "",content: "加载中…",prevHref: "",prevTitle: "文章标题加载中…",nextHref: "",nextTitle: "文章标题加载中…",hasPrevLink: false,hasNextLink: false,};$http.post(url, {id: detailId}, config).then((r) => {/* 请求成功执行代码*//* alert(JSON.stringify(r.data))*/r = r.data.data;document.title = r.title;$scope.data.title = r.title;$scope.data.date = r.date;$scope.data.content = r.content;}, (r) => {/* 请求失败执行代码*/alert(JSON.stringify(r))});$http.post(url, {}, config).then((r) => {/* 请求成功执行代码*/let arr = r.data.data;let len = arr.length;let id = parseInt(detailId);let index = parseInt(array.getIndexById(arr, id));if (index <= 0) {$scope.data.prevHref = "#";$scope.data.prevTitle = "没有了";$scope.data.hasPrevLink = false;} else {let _index_l = index - 1;$scope.data.prevTitle = arr[_index_l].title;$scope.data.prevHref = "detail.html?id=" + arr[_index_l].id;$scope.data.hasPrevLink = true;}if (index >= len - 1) {$scope.data.nextHref = "#";$scope.data.nextTitle = "没有了";$scope.data.hasNextLink = false;} else {let _index_n = index + 1;$scope.data.nextTitle = arr[_index_n].title;$scope.data.nextHref = "detail.html?id=" + arr[_index_n].id;$scope.data.hasNextLink = true;}}, function () {alert('接口请求失败！');});
});app.filter('format', function () {//可以注入依赖return function (c) {if (c == "") return;return date.formatDateTime(c);}
});

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

Vue.js框架简单读取数据库信息并渲染完成news新闻文章列表以及detail详情页功能（小试牛刀）
项目结构 news.html(新闻列表文件) <!doctype html> <html lang="en"> <head><meta c ...
php 读取数据库信息,php读取数据库信息的几种方法
php读取数据库信息的几种方法 2021-01-23 15:45:586 $dbh=@mysql_connect("localhost:3306","root" ...
读取数据库信息构建视图字段的备注信息，方便程序代码生成
在很多情况下,我们开发都需要有一个快速的代码生成工具用来提高开发效率,代码生成工具很多信息都是读取数据库的表.视图等元数据进行对象表信息的完善,有了这些信息,我们就可以在普通的实体类代码里面添加属性字 ...
brit用脚本JavaScript用报表创建数据源，并从配置文件中读取数据库信息
可以定义一个参数去指定properties文件的路径,然后创建datasource. 在datasource的script中编辑beforeOpen事件,参考下面的代码: ============== ...
Python读取数据库数据写入Excel
Python读取数据库数据写入Excel 本文示例: 读取数据库数据创建Excel文件,并创建指定名称的sheet页将数据库数据写入创建的sheet页中保存文件示例代码: # -*- codi ...
Java语言写一个简单的学生信息管理系统，通过JDBC连接数据库对学生信息进行增删改查，采用三层思想和DBUtils第三方框架。
我把源代码和sql文件放GitHub上了,你们可以自行下载:https://github.com/fenglily1/student. 有问题可以留言或私信,我看到就会回. 进阶版加上页面的管理系统在 ...
jdbc 获取mysql表注释_jdbc读取数据库，表相关信息（含注释）
读取数据库中的所有的表名 private Set getTableNameByCon(Connection con) { Set set = new HashSet(); try { Database ...
上传图片至服务器，写入到数据库Blob字段中，以及从数据库读取Blob信息（iframe父子页面传值）(1)
最近做了个用户维护功能,涉及到照片的操作. 照片是存到数据库oracle中的Blob字段中. 难点有两个: 1,图片的上传:2,Blob字段的读取. 先说图片的上传吧, 我使用common-fileu ...
Unity读取数据库的简单思路
1.背景介绍使用Unity管理较多数据时,数据库的读写便成了较为关键操作.写入不必多说,许多博客都有介绍.而读取则是一个麻烦事,如果使自己读取的数据和结构便于修改,不出错,成了我首先考虑的问题(性能 ...

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

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

最新文章

热门文章