gpt4 book ai didi

javascript - 使用 AngularJS 更新 JSON 数据

转载 作者:行者123 更新时间:2023-11-28 15:19:55 25 4
gpt4 key购买 nike

我对 Web 开发相当陌生,我试图更好地了解服务器和数据库以及客户端开发的局限性。

现在,我正在学习 AngularJS,并且已经能够创建简单的 CRUD 应用程序,例如待办事项列表或在线商店。目前,我一直通过常规 J​​avaScript 数组/对象为我的 Web 应用程序创建数据。但现在我希望能够通过我自己的 CMS 用户界面永久编辑/更改此数据。

一些研究引导我使用 JSON 和 Angular $http 服务从服务器请求 JSON 数据。

现在,我正在尝试使用 angularJS 异步更新此 JSON 数据,但我不确定如何执行此操作(请参阅下面的尝试)。

简单的待办事项列表应用程序

<body ng-controller="ToDoCtrl">

<div class="container">
<div class="page-header">
<h1>
{{todo.user}}'s To Do List &nbsp;
<span class="label label-default" ng-hide="incompleteCount() == 0"
ng-class="warningLevel()">
{{ incompleteCount() }}
</span>
</h1>
</div>

<div class="panel">

<div class="input-group">
<input class="form-control" ng-model="actionText">
<span class="input-group-btn">
<button class="btn btn-success" ng-click="addItem(actionText, todo.items)">Add</button>
</span>
</div><!-- end input-group -->

<table class="table table-striped">
<thead>
<tr>
<th>Descriptions</th>
<th>Done</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in todo.items | checkedItems: showComplete | orderBy: 'action'">
<td>{{item.action}}</td>
<td><input type="checkbox" ng-model="item.done"></td>
<td><button ng-click="deleteItem(item, todo.items)" class="btn btn-danger">Delete</button></td>
</tr>
</tbody>
</table>

<div class="checkbox-inline">
<label><input type="checkbox" ng-model="showComplete">Show Complete</label>
</div>

<div class="input-group">
<button ng-click="save()" class="btn btn-primary">Save Changes</button>
<p>{{msg}}</p>
</div>

</div><!-- end panel -->
</div>

<!-- Vendor JS -->
<!-- Angular -->
<script src="vendors/angular.min.js"></script>

<!-- Modules -->
<script src="app.js"></script>

</body>

app.js

var model = {
user: "Alex"
};

angular.module('todoApp', [])

.run(function($http) {

$http.get("todo.json").success(function(data) {
model.items = data;
});

})

.controller('ToDoCtrl', ['$scope', '$http', function($scope, $http) {

$scope.todo = model;

$scope.incompleteCount = function() {
var count = 0;
angular.forEach($scope.todo.items, function(item) {

if (!item.done) {
count++
}

});
return count;
};

$scope.warningLevel = function() {
return $scope.incompleteCount() < 3 ? "label-success" : "label-warning";
};

$scope.addItem = function(actionText, sourceArray) {
sourceArray.push(
{
action: actionText,
done: false,
}
);

$scope.actionText = '';
};

$scope.deleteItem = function(item, sourceArray) {
for(var i = 0, j = sourceArray.length; i < j; i++) {
if(item.action == sourceArray[i].action) {
sourceArray.splice(i, 1);
return;
}
}
};

$scope.save = function() {
$http.post('C:\Users\Alex\Desktop\Development\"Web Design"\2015\todoApp\public\src\todo.json', $scope.todo.items).then(function(data) {
$scope.msg = 'Data saved '+ JSON.stringify($scope.todo.items);
});
};

}])

.filter("checkedItems", function() {
return function(items, showComplete) {
var resultArr = [];
angular.forEach(items, function(item) {

if(item.done == false || showComplete == true) {
resultArr.push(item);
}

});
return resultArr;
}
});

我用过这个Post对于 $scope.save 函数,但我收到错误:“XMLHttpRequest 无法加载。跨源请求仅支持协议(protocol)方案:http、data、chrome...”

  $scope.save = function() {
$http.post('C:\Users\Alex\Desktop\Development\"Web Design"\2015\todoApp\public\src\todo.json', $scope.todo.items).then(function(data) {
$scope.msg = 'Data saved '+ JSON.stringify($scope.todo.items);
});
};

基本上,我只想使用 $scope.todo.items 数组的当前内容更新我的 todo.json 文件。我认为最简单的方法是删除 JSON 数据的当前内容并替换为 $scope.todo.items 的当前内容,但我对此了解不多。

感谢您的帮助。

最佳答案

让我们首先从一些概念开始:

1.- JSON 文件只是一个文本文件,它可以是数据库查询的产物,也可以由服务器动态生成,但最终只是一个文本文件。

2.- $http 服务处理对 HTTP 服务器的请求,例如 Apache Web 服务器或 NodeJS Http 服务器,使用后端技术运行您的软件,有大量服务器,有些可以在您的计算机上运行远程。

3.- GET 和 POST 是 HTTP 方法,必须对运行后端的服务器进行。最常见的一种是 GET 方法,通常用于从服务器获取数据,例如文本文件或 JSON 文件。

4.- 在 Windows 为本地开发提供的文件服务器中,GET 方法可以从文件系统中调出文件(如“todo.json”)。这个文件服务器非常基本,它只接受 GET 请求,这就是它应该接受的全部。

5.- 在你的后端软件中,你定义一个Endpoint,它应该是你的后端准备好接收POST请求的地址,并且你还需要定义这个POST请求的作用。

从 Angular 文件到在服务器中定义端点之间有很长的一步,您将遇到不同的技术,Angular 框架不是后端技术,而是前端库。

如果您想了解这些概念,TODO 列表项目是一个很好的第一个项目,像 http://www.todobackend.com/ 这样的网站可以向您展示各种不同后端和前端的各种 TODO 项目。

关于javascript - 使用 AngularJS 更新 JSON 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31956232/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com