0

どの要素がclick編集されたかを追跡し、それをサーバーに送り返して、その要素が何であるかに応じてバックエンドで何らかの作業を行うフロントエンドがあります。コードは次のように設定されています...

$('body').on('click', function(e) {
    $.post( '/edit', {el: $( e.target ).serialize()}, function(response) {
        console.log( response );
    });
});

しかし、私elはサーバー上で空の文字列として取得します。e.targetサーバーに情報を取得するために他に何ができますか?

アップデート：

私の質問は、いくつかの文脈から恩恵を受けることができると思います。

アプリの基本機能は、ページ内編集を有効にすることです。ノード サーバーが、編集したい HTML ページを読み込みます。このページの任意の要素をクリックすると、その要素のテキストを変更できます。このテキストはPOSTノード サーバーに返され、そこでcheerioモジュールを使用して DOM 表現を変更し、元の HTML ファイルを上書きします。ページをリロードすると、編集したページの新しいバージョンが表示されます。

しかし、フロントエンドで行った編集を適用するには、DOM 表現で適切な要素を見つけてから を変更するcheerio必要があります。これは、ページ上の要素の多くに が含まれていないためです。e.targettextid

これはアプリ全体です...

var
    express  = require( 'express' )
,   fs       = require( 'fs' )
,   cheerio  = require( 'cheerio' )
,   $        = ''
,   app      = express()
,   html     = ''
,   injected = "<script> \
                    $( 'body').on( 'click', function(e) {  \
                        $( e.target ).text( prompt('Enter new value:') );  \
                        $.post( '/edit', {el: $(e.target).serialize(), newVal: $(e.target).text()}, function(response) {  \
                            alert( response );  \
                        });  \
                    });  \
                </script>";

app.use( express.static(__dirname) )
app.use( express.bodyParser() )


app.get( '/', function( req, res ) {
    fs.readFile( process.argv[2], 'utf8', function(err, data) {
        $ = cheerio.load( data )
        err? console.log( err ): res.send( data.replace('</body>', injected + '</body>') )
    })
})

app.post( '/edit', function(req,res) {
    $( req.body.el ).text( req.body.newVal )
    fs.writeFile( process.argv[2], $.html(), function(err) {
        err? res.send( err ): res.send( 'file saved with changes!' )
    })
})

app.listen( 8080 )

次に、アプリを実行します。

node cms.js "E:\Dropbox\sites\index.html"

index.html理論的には、これにより、コード エディターなしで「ページはめ込み」を編集できるはずです。しかしe.target、サーバーに完全に戻すことは依然としてハードルです。

回避策:

私の現在の回避策は、どの要素がクリックされたかに関係なくPOST、ページの HTML 全体だけを使用することです。そのため、ページ全体の新しい状態を取得し、既存のファイルをこの新しい状態で上書きできます。$( 'html' ).html()しかし、独自の HTML/JS を挿入するブラウザー拡張機能があり、ファイルに保存する前にそれらを取り除くという面倒なプロセスを避けたいと考えています。そのためには、cheerioどの要素がclick編集されたかを正確に伝える必要があります。

4

1 に答える 1