使用 MEAN 进行全栈开发基础篇——4、接着前面玩儿添加
来源:互联网 发布:出库单软件 编辑:程序博客网 时间:2024/05/22 11:30
添加一个新用户
在本节中,你将了解有关使用 Express 创建 API 端点,使用 Angular 构建表单,以及使用 Monk 在 Mongo 中存储文档的更多信息。
与上一节类似,我们将从后端到前端的几个步骤中实现此功能。首先,我们将创建一个用于添加用户的 API 端点。我们将使用 Express 路由创建此端点并使用 Monk 在 Mongo 中存储用户文档。然后,我们将创建一个包含表单的新网页,以添加用户。我们将使用 Angular 构建此页面。
Let’s get started.
1. 创建一个 API 端点
打开 routes->users.js,在现有的路由之后和 module.exports 之前添加这个新路由(记住,module.exports 应该是你模块的最后一行):
router.post('/', function(req, res) { var collection = db.get('users'); collection.insert({ // 这里应该是和之前的用户保持同样属性 // 有姓名、年龄、性别 name: req.body.name, age: req.body.age, gender: req.body.gender }, function(err, user) { if (err) throw err; res.json(user); });});
这段代码应该相当熟悉。谈谈重要的部分。首先,注意使用 router.post 方法。在上一篇中,我们使用了 router.get 方法来处理 HTTP GET 请求。这里,我们使用 HTTP POST,这是用于创建新对象的 REST 约定。
在路由处理程序中,首先我们获得对用户集合的引用,然后使用 insert 方法向 Mongo 添加一个新文档。
此方法的第一个参数是具有三个属性的 JSON 对象:name,age 和 gender。我们使用 req.body 读取这些属性的值。此对象表示将在请求的正文中提交的数据。
最后,在用于插入文档的回调方法中,如果我们没有得到任何错误,我们使用响应(res)的 json 方法返回一个 JSON 表示的新用户文档。
2. 创建一个表单
好的,API 准备好了。现在我们需要一个用于添加用户的表单。
在 public->partials 下创建一个名为 user-form.html 的新视图文件。在此视图中键入以下代码:
<h1>Add a User</h1><form> <div> <label>Name</label> <input></input> </div> <div> <label>Age</label> <input type="number"></input> </div> <div> <label>Gender</label> <input></input> </div> <input type="button" value="Save"></input></form>
现在,我们需要告诉 Angular 在用户访问到 /add-user 时呈现这个视图。我们需要一个新的路由这么做。
打开 forusers.js 并更新路由配置代码,如下所示:
app.config(['$routeProvider', function($routeProvider) { $routeProvider .when('/', { templateUrl: 'partials/home.html', controller: 'HomeCtrl' }) // 添加这一部分 .when('/add-user', { templateUrl: 'partials/user-form.html' }) .otherwise({ redirectTo: '/' });}]);
注意,我没有在这里设置控制器,因为我们还没有。我们将在下一步中这样做。
视图和路由准备就绪。最后,我们需要在我们的主页中添加一个 /add-user 的链接。打开 partials->home.html 并在 ul
上方添加一个新链接:
<p> <a href="/#!/add-user">Add a User</a></p>
请注意,你应该在你的 Angular 应用程序中的链接前面加上 /#!
【注:原教程和译文均为 /#
,现在多了一个感叹号】。这用于兼容不支持单页应用程序的旧版浏览器。
让我们预览我们迄今为止做了什么。返回浏览器,然后刷新主页。你应该会看到添加用户的链接。点击链接并查看添加用户页面。
我不得不承认,这个表单看起来真的很丑陋,它离一个真正的应用程序很远。让我们给它加上一个漂亮的外观。
添加并使用 Bootstrap
我们将使用 Bootstrap 为我们的表单添加一点风格。 如果你不熟悉 Bootstrap,它是一个前端 CSS 框架,用于构建现代和响应式Web应用程序。在这一步中,我们将引用 Bootstrap CSS 文件并使用一些 Bootstrap 类来装饰我们的表单元素。
打开 views->layout.jade 文件
添加如下行在 head
中的 link
下:
link(rel="stylesheet", href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css")
确保它与上一行具有相同的缩进级别。
现在,回到 partials->user-form.html。添加下面的类到 HTML 元素中:
<h1>Add a User</h1><form> <div class="form-group"> <label>Name</label> <input class="form-control"></input> </div> <div class="form-group"> <label>Age</label> <input class="form-control" type="number"></input> </div> <div class="form-group"> <label>Gender</label> <input class="form-control"></input> </div> <input class="btn btn-primary" type="button" value="Save"></input></form>
这些类是用于创建表单的标准 Bootstrap 类。有关如何使用 Bootstrap 创建现代表单的更多信息,请参阅 Bootstrap 文档。
让我们回到浏览器并刷新页面。嗯…现在看起来好多了
现在,这个表单没有行为。如果点击保存按钮,是没有任何反应的。这也是我们接下来要实现的东西。
实现添加的控制器
正如我之前告诉所说,在 MVC 框架中,控制器负责处理视图引发的事件。我们将创建一个 Angular 控制器来处理 Save 按钮的点击事件。
打开 forusers.js 并在文件末尾键入以下代码:
app.controller('AddUserCtrl', ['$scope', '$resource', '$location', function($scope, $resource, $location) { $scope.save = function() { var Users = $resource('/api/users'); Users.save($scope.user, function() { $location.path('/'); }); }; }]);
这个控制器有三个依赖:$scope
作为控制器和视图之间的胶水,$resource
用于使用我们的 RESTful API,$location
用于改变浏览器地址栏中的 URL。所有这些都是内置的 Angular 服务。
在这个控制器的主体中,我们在 $scope
上定义了 save 方法。当用户单击保存按钮时将调用此方法。我们很快就会把这个方法链接到我们的视图。现在,让我们看看这个方法里面发生了什么。
首先,我们调用 $resource
方法传递我们的 API(/api/users)地址。这将返回一个对象的方法来使用 API。在最后一节中,我们使用查询方法来获取所有用户。在这里,我们使用 save 方法将用户提交到我们的 API。
Users.save 方法有两个参数:要提交的对象和回调函数,这将指示异步调用完成。在回调中,我们使用 $location
服务将浏览器的地址更改为网站的根目录。Angular 知道(根据我们的路由)根 URL 绑定到主视图。它将向用户显示主页。
现在,打开 partials->user-form.html 并更改输入字段如下:
<h1>Add a User</h1><form> <div class="form-group"> <label>Name</label> <input class="form-control" ng-model="user.name"></input> </div> <div class="form-group"> <label>Age</label> <input class="form-control" type="number" ng-model="user.age"></input> </div> <div class="form-group"> <label>Gender</label> <input class="form-control" ng-model="user.gender"></input> </div> <input class="btn btn-primary" type="button" value="Save"></input></form>
ng-model
属性是我们用于数据绑定的另一个指令。这样,我们告诉 Angular,任何时候我们的输入字段中的值被改变,它应该自动更新 $scope
被引用的属性。在第一个示例中,当标题文本框的值更改时,Angular 将自动在 $scope.user.title
中设置它。
接下来,更改按钮声明如下:
<input class="btn btn-primary" type="button" value="Save" ng-click="save()"></input>
ng-click
属性是我们用来处理 HTML 元素的点击事件的另一个 Angular 指令。有了这个指令,我们告诉 Angular,如果用户点击这个按钮,它应该在 $scope
上执行 save 方法,这是我们在前几分钟定义的。
最后,在路由中注册这个新的控制器:
.when('/add-user', { templateUrl: 'partials/user-form.html', controller: 'AddUserCtrl' })
我们完成了。让我们测试一下应用程序。返回浏览器,填写表单并提交。您应该会在列表中看到一个新用户。
【当然,我们这个页面是没有做数据验证的,如果你什么都不输入直接点 Save,也会存入一条空数据】
让我们快速回顾一下在本节中学到的内容。我们使用 Express 创建了一个新的 API 端点,并使用 Monk 在 Mongo 中存储用户文档。然后,我们创建了一个带有表单的 Angular 视图来添加用户。我们使用 Bootstrap 美化了表单。最后,我们为此视图创建了控制器来处理点击事件。在点击事件的处理程序中,我们使用 $resource
服务将数据提交到服务器。
在下一部分中,我们将添加修改现有用户的功能。
- 使用 MEAN 进行全栈开发基础篇——4、接着前面玩儿添加
- 使用 MEAN 进行全栈开发基础篇——3、接着前面玩儿查询
- 使用 MEAN 进行全栈开发基础篇——5、接着前面玩儿编辑
- 使用 MEAN 进行全栈开发基础篇——6、接着前面玩儿删除
- 使用 MEAN 进行全栈开发基础篇——1、先来弄个环境什么的
- 使用 MEAN 进行全栈开发基础篇——2、弄一个简单的用户管理试试
- MEAN 全栈开发 Create a MEAN App Called CodePost
- MEAN全栈开发 之 用户认证篇
- 使用MEAN进行现代化WEB开发
- MEAN全栈开发:使用NodeJS和MongoDB创建REST服务
- 菜鸟好文推荐(四)——基于JavaScript的现代Web应用全栈开发:MEAN
- 使用Neo4j进行全栈Web开发
- 使用Neo4j进行全栈Web开发
- 【译】基于MEAN的全栈开发实例教程校对版
- 全 Javascript 的 Web 开发架构:MEAN
- MEAN全堆栈javascript开发框架
- 什么是MEAN全堆栈javascript开发框架
- 什么是MEAN全堆栈javascript开发框架
- Linux的shell脚本换行符引起的unexpected syntax errror: ‘最简单方法
- 最短的蛇形填数算法 5个分号 10行!
- chrome浏览器 adobe flash player过期问题
- 编译原理(笔记)
- 原生js实现全屏展示效果
- 使用 MEAN 进行全栈开发基础篇——4、接着前面玩儿添加
- LeetCode解题报告 108. Convert Sorted Array to Binary Search Tree [medium]
- 敏捷大会――会后反思
- dlopen与dlsym
- java环境配置
- 51单片机的堆栈
- java线程深度解析(三)——并发模型(Future)
- java线程深度解析(四)——并发模型(Master-Worker)
- centos 下面升级python