In the previous section, we implemented the first interface and received the return {a:123} when requesting the interface. Next, we implemented a simple get and set interface and updated the page view with the returned data.

This is the page view we want to implement. The code is as follows.

<template>
  <div>
    <h1>{{ msg }}</h1>

    <div class="wrapDiv">
          <input type='text' class='leftDiv' ref='inputRef' placeholder="Please enter" />
          <div class="rightDiv"> {{txt_data}} </div>
    </div>

    <van-button type="danger" @click="sendBtn">Send out</van-button>
    <van-button type="danger" @click="getBtn">Obtain</van-button>
  </div>
</template>

This is the basic operation.

When you click the Send button, it will transfer the input data to the node.
When you click the Get button, you will get the data you processed in the node and update it in the input on the right.

This is the code in the Js section.

sendBtn(){
    let _val = this.$refs.inputRef.value;
    // console.log( _val )

    axios.get('http://localhost:5678/node_a',{
                params:{ xxval:_val }
          });
},
getBtn(){
    axios.get('http://localhost:5678/node_b')
          .then( _d=>{
                console.log( _d.data );
                this.txt_data = _d.data;
          })
}

From the above two methods, we need two interfaces in node.

// Temporary storage of data
var _xxObj = null;

// The first nodeJs interface, receive
app.get('/node_a', function(req, res){
    console.log( req.query.xxval );
    _xxObj = req.query;
    res.end();
});

// Second interface, send
app.get('/node_b', function(req, res){
    res.send( _xxObj.xxval + '----Whatever it is' )
});

So, when you click the first button, you call the node_a interface. Because you're a get grammar, the data is in req.query, and after you get the data, you put it in a public variable, because there's no database in use.

When you click the second button, in fact, according to the scope principle of js, you can get the value of variables outside the function in the function, after spelling the result string, res.send returns to the client.

After running, that's it.

The content of this section is very simple. Students can implement it by themselves. After that, they can basically understand the front-end and back-end interactive thinking of js+node.