无法从 json-服务器获取数据

Question

我正在 Backbone.js 中做一个小项目，我正在运行宁一个 json-server 包来填充一些数据。我制作了一个包含数据和运行 json-server --watch db.json 的 db.json 文件，它在 localhost:3000 上完美启动并运行s。在我的 Backbone 应用程序中，我有这个：

// app/javascripts/collections/resumes.js

define(['backbone', 'models/resume'], function (Backbone, Resume) {
    var ResumesCollection = Backbone.Collection.extend({
        model: Resume,
        url: 'http://localhost:3000/resumes'
    });
    return ResumesCollection;
});

// app/javascripts/views/resumes/resume.js

define(['backbone', 'jquery'], function (Backbone, $) {
    var ResumeView = Backbone.View.extend({
        tagName: 'article',
        render: function () {
            this.$el.html(this.model.get("firstName"));
            return this;
        }
    });
    return ResumeView;
});

// app/javascripts/views/resumes/index.js

define(['backbone', 'views/resumes/resume'], function (Backbone, ResumeView) {
    var ResumesList = Backbone.View.extend({
        tagName: 'section',
        initialize: function() {
            this.collection.fetch();
        },
        render: function() {
            var resumesView = this.collection.map(function (cv) {
                return new ResumeView({model: cv}).render().el;
            });
            this.$el.html(resumesView);
            return this;
        }
    });
    return ResumeList;
});

这是我的 app/router.js:

define(['backbone',
        'collections/resumes',
        'views/resumes/resume',
        'views/resumes/index'], 
function (Backbone, ResumesCollection, ResumeView, ResumeList) {
    var AppRouter = Backbone.Router.extend({
        routes: {
            'resumes': 'showAll'
        },
        showAll: function () {
            this.ResumeList.render();
        }
    });
    return AppRouter;
});

在 app/javascripts/main.js 我有这个：

require.config({
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: [
                'underscore',
                'jquery'
            ],
            exports: 'Backbone'
        }
    },

    paths: {
        jquery: '../node_modules/jquery/dist/jquery',
        underscore: '../node_modules/underscore/underscore',
        backbone: '../node_modules/backbone/backbone'
    }
});

require(['backbone',
         'jquery',
         'router'
], function (Backbone, $, AppRouter) {
    var Router = new AppRouter();
    Backbone.history.start({
        pushState: true,
        root: '/'
    });
});

我还通过 gulp-connect 和 gulp-livereload 使用 Gulp 到运行 localhost:8080 上的开发服务器。但是当我导航到 localhost:8080/resumes 时，它 returns 我 Cannot GET /resumes，尽管控制台中没有错误。我做错了什么？+

Answer 1

根据所提供的内容，我们无法查明确切的问题和原因，但无论如何让我尽力提供帮助。

我尝试了 json-server 并使用以下内容启动它 db.json:

{
    "posts": [{
        "id": 1,
        "title": "json-server",
        "author": "typicode"
    }, {
        "id": 2,
        "title": "This is a test",
        "author": "Emile Bergeron"
    }]
}

然后我做了最简单的合集来用

var PostCollection = Backbone.Collection.extend({
    url: "http://localhost:3000/posts"
});

var posts = new PostCollection();
posts.fetch({
    success: function(){
        console.log(posts.pluck('title'));
    }
});

在我的控制台中，我可以看到：

["json-server", "This is a test"]

使用起来非常简单！所以问题出在别处。也许向我们展示完整的请求（原始数据）。

正在获取集合

this.collection.fetch(); // this is enough

无需传递 { data: { fetch: true, type:"get" } }，因为这是默认行为。

链接函数调用

ResumeList 中的以下行将失败：

return new ResumeView({model: cv}).render().el;

这是因为 ResumeView 的 render 函数没有 return this.

总的来说，您的代码看起来不错。

如果您要将 API 放在另一台服务器上，也就是另一个域，请查看 CORS 以启用 js 获取不同的域。

无法从 json-服务器获取数据

Cannot get data from json-server

javascript

json

backbone.js

正在获取集合

链接函数调用