javascript - Express, the front-end development framework, how to add binding events to buttons under its template engine?

Question

I used express at work, and it was my first time to use express
The template engine also took a while to get used to! But that's not the point.
The first question: How to add a click event (similar to vue, angular or something like this: v-bind=xxx??? Is there such a thing??)

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")="已加入"

Second question:
All page data is obtained from the interface
So:

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 会报错！！！ */
});

This interface can only take part of the data on the page.
However, there is still part of the data that needs to access another interface. You can't write the route twice, right (the one above is written with routing)? It’s useless to write two.

The problem is these two, I don’t know if they are expressed clearly.
1. How to bind events to elements?
2. How to access two interfaces on the same page

Answer 1

1. You can directly write onclick="function to be executed" on the element, or introduce new js at the bottom of the template and find the dom element binding in the js, such as
var ele=document.getElement("button"). addEventlistener("click",function(){logic to be executed})
2. You can bind a dynamic name, or add a parameter to judge

Answer 2

First question:
https://forum-archive.vuejs.o...
Second question:
You can request two interfaces on the backend, and then put the data requested by the two interfaces into one The object is used on the page, or the front-end page can use js to request data from another interface and then use it

Answer 3

Write another js file and introduce it through the script tag in pug. The
js file should be packaged using the static method of express.

For example, under koa:

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