首页 > 语言 > JavaScript > 正文

indexedDB bootstrap angularjs之 MVC DOMO (应用示例)

2024-05-06 14:55:49
字体:
来源:转载
供稿:网友

1、indexedDB(Model) -- 前端浏览器对象型数据库,一般我们后台用的数据库都是关系型数据库。那么indexeddb有什么特点呢:

  首先,从字义上它是索引型数据库,从实际使用中可以体现为,它需要为表创建索引才可以根据某个字段来获取数据,而在关系型数据库中,这明显是不需要的。

  其次,我不需要行列数据的转化,我只需要通过类似于数组的处理方式:

代码如下:
objectStore.push(data);

  有点像是把一个json对象塞入数据库,是不是很暴力?

  2、bootstrap(View)  -- bootstrap,老实说,我不是很熟悉这个东西,毕竟我是后端java开发出身。以我的理解,这就是一个以响应式布局为特点的前端框架,至于说比较特别的,应该就是它比较流行吧?!老实说,我这边只用到css,而我也认为,后现代的前端开发,将不会需要bootstrap的js部分,毕竟那还是以jquery为主的方式。

  3、angularjs(Controller)  -- 必须承认这个东西东西的诞生完全颠覆了我对前端开发的看法,以前和现在我们依然困在前后端无法彻底分离的窘境中,但我认为如果后期,前端人员普遍采用应用式的angularjs脚本来开发(还有一些类似的框架),我们将不再需要让后端开发工程师套用诸多的前端样式、结构等等。

  这么说,很多后端人员可能还是不能体会得到,举个例子:angularjs的使用方式有点像是jsp、freemarker等渲染html的东西,只是一个在客户端渲染,另一个在后台服务器渲染。我们只要改变数据的结构和属性,对应渲染出来的页面就会不同,angularjs就是让我们更加关注数据的变化,而非DOM的变化,就是说:你将很少会去写到$("btnSave").click(function() {});这样需要获取到html节点的脚本代码,可以说,这完全脱离了jQuery的范畴。所以这可以算是一个跨时代的改变?

  接下来就上例子吧(最终必须运行到服务器上):

user.html

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"/><!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body ng-app="myApp" ng-controller="userCtrl"><div class="container"><h3>Users</h3><table class="table table-striped"><thead><tr><th>Edit</th><th>First Name</th><th>Last Name</th></tr></thead><tbody><tr ng-repeat="one in users"><td><button class="btn" ng-click="editUser(one)"><span class="glyphicon glyphicon-pencil"></span>  Edit</button><button class="btn" ng-click="deleteUser(one.id)"><span class="glyphicon glyphicon-remove"></span>  Delete</button></td><td>{{ one.fName }}</td><td>{{ one.lName }}</td><td>{{ one.telephone }}</td></tr></tbody></table><hr><button class="btn btn-success" ng-click="editUser()"><span class="glyphicon glyphicon-user"></span> Create New User</button><hr><h3 ng-show="edit">Create New User:</h3><h3 ng-hide="edit">Edit User:</h3><form class="form-horizontal"><div class="form-group"><label class="col-sm-2 control-label">First Name:</label><div class="col-sm-10"><input type="text" ng-model="user.fName" ng-disabled="!edit" placeholder="First Name"></div></div><div class="form-group"><label class="col-sm-2 control-label">Last Name:</label><div class="col-sm-10"><input type="text" ng-model="user.lName" ng-disabled="!edit" placeholder="Last Name"></div></div><div class="form-group"><label class="col-sm-2 control-label">telephone:</label><div class="col-sm-10"><input type="tel" ng-model="user.telephone" placeholder="telephone"></div></div></form><hr><button class="btn btn-success" ng-click="saveCustomer()"><span class="glyphicon glyphicon-save"></span> Save Changes</button></div><script src="jdbc.js?v=2323"></script><script src="myUsers.js"></script></body></html>            
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选