javascript - Express, rangka kerja pembangunan bahagian hadapan, bagaimana untuk menambah peristiwa mengikat pada butang di bawah enjin templatnya?

Question

Saya menggunakan ekspres di tempat kerja, dan ini kali pertama saya menggunakan ekspres
Enjin templat akan mengambil sedikit masa untuk membiasakan diri! Tetapi bukan itu maksudnya.
Soalan pertama: Bagaimana untuk menambah acara klik (serupa dengan vue, sudut atau sesuatu seperti ini: v-bind=xxx??? Adakah terdapat perkara sedemikian??)

ul(class="communityList")
    each item in tree
      a(href="joingroup/1")
           li(class="CommList")
               p(class="comLogo")
                   if item.img
                       img(src="#{item['img']}")
                   else
                       img(src="http://cdn.duitang.com/.thumb.600_0.jpeg")
               p(class="content")
                   p(class="cTitle")=item['name']
                   p(class="comInfo")="简介：" + item['content']
                   if item['join'] == 0
                       p(class="button")="加入" /* 我想给这个按钮添加点击事件 */
                   else
               a(href="" class="ybutton")="已加入"

Soalan kedua:
Semua data halaman diperoleh daripada antara muka
Jadi:

router.get('/join', function (req, res, next) {


    request.post({url: 'https://api.xxx.com/bbs/list', form: {userId: 10000}}, function (err, httpResponse, body) {

        body = JSON.parse(body);

        res.render('join', {tree: body['return']});

    });
    /* 如果把第二个接口写在这里 也不行，再次render 会报错！！！ */
});

Antara muka ini hanya boleh mendapatkan sebahagian daripada data pada halaman
Namun, masih terdapat sebahagian daripada data yang perlu mengakses antara muka lain Anda tidak boleh menulis laluan dua kali, betul (yang di atas ditulis menggunakan penghalaan). ? Tidak berguna untuk menulis dua.

Masalahnya ialah dua ini, saya tidak tahu sama ada saya boleh menyatakannya dengan jelas.
1. Bagaimana untuk mengikat peristiwa dengan unsur?
2. Bagaimana untuk mengakses dua antara muka pada halaman yang sama

Answer 1

1. Anda boleh terus menulis onclick="function to be executed" pada elemen, atau perkenalkan js baharu di bahagian bawah templat dan cari elemen dom yang mengikat dalam js, seperti
var ele=document.getElement("button").addEventlistener("click",function(){要执行的逻辑})
2 nama dinamik, atau tambahkan pertimbangan Parameter

Answer 2

Soalan pertama:
https://forum-archive.vuejs.o...
Soalan kedua:
Anda boleh meminta dua antara muka di bahagian belakang, dan kemudian meletakkan data yang diminta oleh kedua-dua antara muka menjadi satu Objek digunakan pada halaman, atau halaman hujung hadapan boleh menggunakan js untuk meminta data daripada antara muka lain dan kemudian menggunakannya

Answer 3

Tulis js文件，在pug里面通过script标签引入，
js文件要用express的static kaedah lain untuk membungkusnya.

Sebagai contoh, cara menulis di bawah koa:

app.use(mount('/static', serve(__dirname + '/app/static')));