正在将 JSON 数据从 Express 发送到 Backbone
Sending JSON data from Express to Backbone
我制作了一个简单的 Backbone 应用程序,我正在尝试将来自 MYSQL 数据库的 JSON 数据与 Express 服务器一起使用。
当我使用 Express 发送 GET 请求以将数据发送到 Backbone 时,来自 backbone 的 html 模板消失了,屏幕上只有 JSON 数组。如何在我的 html/underscore 模板中获取数据?
server.js(快递)
var express = require('express');
var bodyParser = require('body-parser');
var mysql = require('mysql');
var app = express();
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}));
var connection = mysql.createConnection({
host: 'localhost',
user: '***',
password: '***',
database: '***'
});
connection.connect();
app.get('/users', function(req, res) {
connection.query('SELECT * FROM users', function(err, result) {
if (err) {
console.error(err);
return;
}
res.json(result);
});
});
app.get('/users/:id', function(req, res) {
connection.query('SELECT * FROM users WHERE id =' + connection.escape(req.params.id), function(err, result) {
if (err) {
console.error(err);
return;
}
res.json(result);
});
});
app.get('*', function(req, res) {
res.sendFile(__dirname + '/public/index.html');
});
app.listen(8080);
app.js (Backbone)
var User = Backbone.Model.extend({
default: {
id: 0,
name: 'UserName',
age: 0
}
})
var Users = Backbone.Collection.extend({
model: User,
url: '/users'
})
var UserView = Backbone.View.extend({
template: _.template($('#UserViewTemplate').html()),
tagName: 'li',
render: function() {
this.el.innerHTML = this.template(this.model.toJSON())
return this;
}
});
var UsersView = Backbone.View.extend({
template: _.template($('#UsersViewTemplate').html()),
tagName: 'ul',
render: function() {
this.el.innerHTML = this.template(this.collection);
this.collection.each(function(user) {
var userView = new UserView({
model: user
});
this.$el.append(userView.render().el);
}, this)
return this;
}
});
var UserRouter = Backbone.Router.extend({
routes: {
'users': 'list'
},
list: function() {
console.log('list function called')
var usersView = new UsersView({
collection: users
})
$('body').append(usersView.render().el);
}
})
var users = new Users();
users.fetch().then(function() {
var router = new UserRouter();
Backbone.history.start({pushState: true});
});
已修复!我只需要使用路由 localhost:3000/#users,而不是 localhost:3000/users。
我制作了一个简单的 Backbone 应用程序,我正在尝试将来自 MYSQL 数据库的 JSON 数据与 Express 服务器一起使用。 当我使用 Express 发送 GET 请求以将数据发送到 Backbone 时,来自 backbone 的 html 模板消失了,屏幕上只有 JSON 数组。如何在我的 html/underscore 模板中获取数据?
server.js(快递)
var express = require('express');
var bodyParser = require('body-parser');
var mysql = require('mysql');
var app = express();
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}));
var connection = mysql.createConnection({
host: 'localhost',
user: '***',
password: '***',
database: '***'
});
connection.connect();
app.get('/users', function(req, res) {
connection.query('SELECT * FROM users', function(err, result) {
if (err) {
console.error(err);
return;
}
res.json(result);
});
});
app.get('/users/:id', function(req, res) {
connection.query('SELECT * FROM users WHERE id =' + connection.escape(req.params.id), function(err, result) {
if (err) {
console.error(err);
return;
}
res.json(result);
});
});
app.get('*', function(req, res) {
res.sendFile(__dirname + '/public/index.html');
});
app.listen(8080);
app.js (Backbone)
var User = Backbone.Model.extend({
default: {
id: 0,
name: 'UserName',
age: 0
}
})
var Users = Backbone.Collection.extend({
model: User,
url: '/users'
})
var UserView = Backbone.View.extend({
template: _.template($('#UserViewTemplate').html()),
tagName: 'li',
render: function() {
this.el.innerHTML = this.template(this.model.toJSON())
return this;
}
});
var UsersView = Backbone.View.extend({
template: _.template($('#UsersViewTemplate').html()),
tagName: 'ul',
render: function() {
this.el.innerHTML = this.template(this.collection);
this.collection.each(function(user) {
var userView = new UserView({
model: user
});
this.$el.append(userView.render().el);
}, this)
return this;
}
});
var UserRouter = Backbone.Router.extend({
routes: {
'users': 'list'
},
list: function() {
console.log('list function called')
var usersView = new UsersView({
collection: users
})
$('body').append(usersView.render().el);
}
})
var users = new Users();
users.fetch().then(function() {
var router = new UserRouter();
Backbone.history.start({pushState: true});
});
已修复!我只需要使用路由 localhost:3000/#users,而不是 localhost:3000/users。