前端MVC学习笔记（四）

szs · 发表于 2017-12-15 09:50:09

<!DOCTYPE html>　　
<html>
　　

　　
<head>
　　
<meta charset="UTF-8">
　　
<title>天狗书店</title>

　　
<link>
　　
<link>
　　
<link>　　
<style type="text/css">
　　
.cover {
　　
height: 40px;
　　
width: auto;
　　
}
　　

　　
.addBook {
　　
padding-top: 10px;
　　
}
　　

　　
.w100 {
　　
width: 50px
　　
}
　　

　　
.w200 {
　　
width: 200px;
　　
}
　　

　　
.w300 {
　　
width: 300px
　　
}
　　
</style>
　　
</head>
　　

　　
<body ng-app="bookApp">
　　

　　
<div ng-controller="BookController">
　　
<div>
　　
<div>
　　
<nav role="navigation">
　　
<div>
　　
<button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span>Toggle navigation</span><span></span><span></span><span></span></button>
　　
<a href="#">天狗书店</a>
　　
</div>
　　

　　
<div>
　　
<ul>
　　
<li>
　　
<a href="#">前端</a>
　　
</li>
　　
<li>
　　
<a href="#">Java</a>
　　
</li>
　　
<li>
　　
<a href="#">.Net</a>
　　
</li>
　　
<li>
　　
<a href="#" data-toggle="dropdown">更多类型<strong></strong></a>
　　
<ul>
　　
<li>
　　
<a href="#">Action</a>
　　
</li>
　　
<li>
　　
<a href="#">Another action</a>
　　
</li>
　　
<li>
　　
<a href="#">Something else here</a>
　　
</li>
　　
<li>
　　
</li>
　　
<li>
　　
<a href="#">Separated link</a>
　　
</li>
　　
<li>
　　
</li>
　　
<li>
　　
<a href="#">One more separated link</a>
　　
</li>
　　
</ul>
　　
</li>
　　
</ul>
　　
<form role="search">
　　
<div>
　　
<input type="text" />
　　
</div> <button type="submit">搜索</button>
　　
</form>
　　
</div>
　　
</nav>
　　
<div>
　　
<div>
　　
<div>
　　
<ol>
　　
<li data-slide-to="0" data-target="#carousel-519027">
　　
</li>
　　
<li data-slide-to="1" data-target="#carousel-519027">
　　
</li>
　　
<li data-slide-to="2" data-target="#carousel-519027">
　　
</li>
　　
</ol>
　　
<div>
　　
<div>

　　
<img>　　
<div>
　　

　　
</div>
　　
</div>
　　
<div>

　　
<img>　　
<div>
　　
</div>
　　
</div>
　　
<div>

　　
<img>　　
<div>
　　
<h4>
　　
Third Thumbnail label
　　
</h4>
　　
<p>

　　
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec>　　
</p>
　　
</div>
　　
</div>
　　
</div>
　　
<a href="#carousel-519027" data-slide="prev"><span></span></a>
　　
<a href="#carousel-519027" data-slide="next"><span></span></a>
　　
</div>
　　
</div>
　　
</div>
　　

　　
</div>
　　
</div>
　　

　　
<div>
　　
<div>
　　
<div>
　　
<a href="#modal-container-234446" role="button" data-toggle="modal"><span></span> 新书上架</a>
　　

　　
<div role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
　　
<div>
　　
<div>
　　
<div>
　　
<button type="button" data-dismiss="modal" aria-hidden="true">×</button>
　　
<h4>
　　
添加/编辑图书
　　
</h4>
　　
</div>
　　
<div>
　　

　　
<form role="form">
　　
<div>
　　
<label for="id">编号</label>
　　
<div>
　　
<input type="text" ng-model="book.id" ng-readonly="true" />
　　
</div>
　　
</div>
　　

　　
<div>
　　
<label for="title">书名</label>
　　
<div>
　　
<input type="text" ng-model="book.title" />
　　
</div>
　　
</div>
　　

　　
<div>
　　
<label for="picture">图片</label>
　　
<div>
　　
<input type="text" ng-model="book.picture" />
　　
</div>
　　
</div>
　　

　　
<div>
　　
<label for="price">价格</label>
　　
<div>
　　
<input type="text" ng-model="book.price" />
　　
</div>
　　
</div>
　　

　　
<div>
　　
<label for="author">作者</label>
　　
<div>
　　
<input type="text" ng-model="book.author" />
　　
</div>
　　
</div>
　　

　　
</form>
　　

　　
</div>
　　
<div>
　　
<button type="button" ng-click="save()">
　　
<span></span>
　　
保存</button>
　　
<button type="button" ng-click="clear()" data-dismiss="modal">
　　
<span></span>
　　
清空</button>
　　
<button type="button" data-dismiss="modal">
　　
<span></span>
　　
关闭</button>
　　
</div>
　　
</div>
　　

　　
</div>
　　

　　
</div>
　　

　　
</div>
　　
<table>
　　
<thead>
　　
<tr>
　　
<th>
　　
序号
　　
</th>
　　
<th>
　　
编号
　　
</th>
　　
<th>
　　
书名
　　
</th>
　　
<th>
　　
图片
　　
</th>
　　
<th>
　　
价格
　　
</th>
　　
<th>
　　
作者
　　
</th>
　　
<th>
　　
操作
　　
</th>
　　
</tr>
　　
</thead>
　　
<tbody>
　　
<tr ng-repeat="b in books" ng-class="{'info':$odd}">
　　
<td>
　　
{{$index+1}}
　　
</td>
　　
<td>
　　
{{b.id}}
　　
</td>
　　
<td>
　　
{{b.title}}
　　
</td>
　　
<td>
　　
<img ng-src="img/{{b.picture}}" />
　　
</td>
　　
<td>
　　
{{b.price | number:1}}
　　
</td>
　　
<td>
　　
{{b.author}}
　　
</td>
　　
<td>
　　
<button type="button" ng-click="del(b.id,$index)">删除</button>
　　
<button href="#modal-container-234446" role="button" data-toggle="modal" ng-click="edit(b)">编辑</button>
　　
</td>
　　
</tr>
　　
</tbody>
　　
</table>
　　
</div>
　　
</div>
　　
</div>
　　

　　

　　
<script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
　　
<script src="js/jQuery1.11.3/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
　　
<script src="js/bootstrap/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
　　
<script type="text/javascript">
　　
//定义模块，指定依赖项为空
　　
var bookApp = angular.module("bookApp", []);
　　

　　
//定义控制器，指定控制器的名称，$scope是全局对象
　　
bookApp.controller("BookController", ['$scope', '$http', function($scope, $http) {
　　
$scope.books = [];
　　
$scope.save = function() {
　　
$http({
　　
url: "http://127.0.0.1:3000/books/book",
　　
data: $scope.book,
　　
method: $scope.book.id ? "PUT" : "POST"
　　
})
　　
.success(function(data, status, headers, config) {
　　
if($scope.book.id) {
　　
alert("修改成功");
　　
} else {
　　
$scope.books.push(data);
　　
}
　　
})
　　
.error(function(data, status, headers, config) {
　　
alert(status);
　　
});
　　
}
　　

　　
$scope.edit = function(b) {
　　
$scope.book = b;
　　
}
　　
$scope.clear = function() {
　　
$scope.book = {};
　　
}
　　

　　
//初始化加载
　　
$http.get("http://127.0.0.1:3000/")
　　
.success(function(data, status, headers, config) {
　　
$scope.books = data;
　　
})
　　
.error(function(data, status, headers, config) {
　　
alert(status);
　　
});
　　

　　
$scope.del = function(id, index) {

　　
$http.delete("http://127.0.0.1:3000/books/id/" +>　　
.success(function(data, status, headers, config) {
　　
$scope.books.splice(index, 1);
　　
})
　　
.error(function(data, status, headers, config) {
　　
alert(status);
　　
});
　　
}
　　
}]);
　　
</script>
　　
</body>
　　

　　
</html>

账号		自动登录	找回密码
密码			立即注册

wirelessnetview好用的无线分析工具

Red Hat RHCE 8 (EX294) Cert Guide

Shell从入门到精通（阿良）

亿图图示专家(EDraw Max) V7.9 中文破解版

zabbix3.4.1安装部署+微信推送信息+大屏显

Red Hat OpenShift I: Containers & Kubern

2025 年，C++ 还能“硬核”多久？

[经验分享] 前端MVC学习笔记（四）

浏览过的版块

扫码加入运维网微信交流群