如何使用Backbone with PHP

Question

我目前正在使用Backbone.js的PHP，在某些地方我使用PHP与我的MySQL服务器进行交互，并使用Backbone / javascript填充前端。

这是我试图执行的示例PHP。

$query="select id,username,message,useremail,date from contact";
$result =mysqli_query($connection,$query);
if ($result) {
    echo '<table id="hor-minimalist-b" summary="Users List">
    <thead>
        <tr>
            <th scope="col">User ID</th>
            <th scope="col">User Name</th>
            <th scope="col">User Message</th>
            <th scope="col">User Email</th>
            <th scope="col">Date</th>
        </tr>
    </thead>
    <tbody>';
    while($resultarray=mysqli_fetch_array($result)){
        echo "
        <tr>
            <td>{$resultarray['0']}</td>
            <td>{$resultarray['1']}</td>
            <td>{$resultarray['2']}</td>
            <td>{$resultarray['3']}</td>
            <td>{$resultarray['4']}</td>
        </tr>
        ";
    }
    echo "</tbody>
    </table>";
}

一种方法是制作PHP文件并发出ajax请求以获取HTML输出并附加到div容器中。但由于我有太多的PHP代码片段，我想以某种方式使用javascript来缓解我，因为我正在实现骨干（http://myurl/#link/feed）。

目前，我尝试了一种丑陋的方式：使用HTML并通过PHP的echo调用javascript函数。

Answer 1

我的评论摘要：

逐步将Backbone集成到现有的PHP网站中   射击自己的脚。正确使用时，主干会发光   在单页面应用程序中从RESTful API提供数据。

您需要的是使用PHP创建REST API，从而公开您的数据   从服务器通过骨干模型使用的不同url端点   和收藏品。 PHP可以返回任何内容，它不仅限于HTML，所以   你可以返回javascript，javascript可以轻松解析。

如何使用Backbone with PHP

后端API

这是一个基于代码的非常简单的PHP端点。

<强> example_ajax.php

<?php
$query ="select id,username,message,useremail,date from contact";
$result = mysqli_query($query);
$rows = array();
while($r = mysqli_fetch_assoc($result)) {
    $rows[] = $r;
}

// return the array as JSON so Backbone can automatically parse it.
print json_encode($rows);

请参阅Creating a simple REST API in PHP

有一些PHP框架可以为您处理REST API，例如：

Silex（基于Symfony的微框架）
Slim
Lumen（轻量级Laravel）
Phalcon

前端数据处理

创建一个自定义集合，该集合绑定到我们新创建的端点：

var ContactCollection = Backbone.Collection.extend({
    url: "example_ajax.php",
});

静态模板

使用Backbone视图处理HTML模板。

首先准备HTML模板，可以是服务器上的静态HTML。

<table id="hor-minimalist-b" summary="Users List">
    <thead>
        <tr>
            <th scope="col">User ID</th>
            <th scope="col">User Name</th>
            <th scope="col">User Message</th>
            <th scope="col">User Email</th>
            <th scope="col">Date</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<script type="text/template" id="contact-template">
    <td><%= id %></td>
    <td><%= username %></td>
    <td><%= message  %></td>
    <td><%= useremail %></td>
    <td><%= date %></td>
</script>

骨干视图

然后是观点：

var ContactView = Backbone.View.extend({
    tagName: 'tr',
    template: _.template($('#contact-template').html()),
    initialize: function(options){
        // optional, automatically remove the html of this row only.
        this.listenTo(this.model, 'remove', this.remove);
    },
    render: function() {
        this.$el.empty().append(this.template(this.model.toJSON()));
        return this;
    },
});

下面的列表视图使用ContactView作为子视图。

var ContactListView = Backbone.View.extend({
    el: "#hor-minimalist-b", // uses existing element in the page

    initialize: function(options) {
        // cache a jQuery element to use as a container for the child views.
        this.$body = this.$('tbody');

        // optional, automatically adds a new contact when the collection changes
        this.listenTo(this.collection, 'add', this.renderContact);
    },
    render: function() {
        this.$body.empty();
        this.collection.each(this.renderContact, this);
        return this; // always return this for chaining
    },

    renderContact: function(model) {
        var view = new ContactView({ model: model });
        this.$body.append(view.render().el);
    },
});

如何使用

var collection = new ContactCollection(),
    view = new ContactListView({ collection: collection });
view.render();

collection.fetch();

.fetch()函数对http://www.example.com/example_ajax.php之类的函数进行GET调用，该函数应该返回一个数组。

为何选择API？为什么不从JavaScript发送SQL查询？

JavaScript在客户端运行，您应该永远不会信任。相反，您可以在服务器上公开您可以信任的特定端点。这就是您需要API的原因。

从javascript发送SQL查询是一个坏主意，原因如下：

SQL Injection：有人可以获取/更改数据库中的任何内容（包括窃取密码或将数据库整合在一起），
这是对您服务器敞开的大门，
缺乏可信验证，或者验证SQL查询字符串更难，
紧耦合，例如使得在不同客户端（移动应用程序，网站，桌面应用程序等）之间共享查询代码变得更加困难

可以这样做，但不应该。

phpMyAdmin是一个应用程序的示例，它使用用户编写的SQL并按原样运行。

如果它在受控环境中，如本地Intranet，并且您想从客户端JavaScript访问MySQL，您可以编写一个php脚本，它接收请求的主体并将其直接传递给MySQL数据库，返回结果为JSON。

例如，有一个名为Squel.js的lib，用于构建SQL查询字符串。他们在首页上有一个大红框，上面写着：

注意：建议您不要在浏览器端创建查询在服务器上运行，因为这大大增加了SQL Injection攻击的风险。

附加阅读：

Answer 2

简短的回答是：你不能。

PHP在服务器上执行，JavaScript在客户端上执行。一旦页面到达浏览器，所有PHP都已被解释。您最好的选择是向返回JSON的服务发出AJAX请求，然后使用JavaScript进行处理和显示。

Answer 3

如果我理解正确，您希望在某些地方使用PHP加载某些网页。它可以做到但是我的经验很复杂，并不理想。以下是您可以执行的操作的非代码说明。

使用PHP渲染HTML / JavaScript页面。（使用example.php）
拥有一个使用Ajax调用PHP页面的JavaScript函数。您调用的PHP页面应该只回显您想要动态创建的所有HTML。您可以创建一个大的字符串变量，并在它准备好返回后回显它。 echo将返回到JavaScript的Ajax调用。（example_ajax.php生成你想要的HTML并回复它）
根据需要使用从example_ajax.php收到的响应JavaScript来更新您的页面。

如何通过JavaScript执行PHP

3 个答案:

如何使用Backbone with PHP

后端API

前端数据处理

静态模板

骨干视图

如何使用

为何选择API？为什么不从JavaScript发送SQL查询？

可以这样做，但不应该。