How the WeChat applet interacts with the server data, explained by questionnaire

In addition to the client that everyone can see, how does the front-end applet interact with the back-end server?

This article will be easy to understand. Here, take nodejs as an example to explain

1. First install nodejs server on the server:

wget https://nodejs.org/dist/v12.18.1/node-v12.18.1-linux-x64.tar.xz    // 下载
tar xf node-v12.18.1-linux-x64.tar.xz                                   // 解压
cd node-v12.18.1-linux-x64                                              // 进入解压目录

The bin directory of the unzipped file contains commands such as node and npm. We can modify the environment variables (profile) of the linux system to set the direct run command:

The old rule is to back up first, and develop a good habit of backing up before modifying important files.

cp /etc/profile /etc/profile.bak

Then vim /etc/profile, add export PATH=$PATH: at the bottom followed by the path of the bin directory under node

export PATH=$PATH:/root/node-v12.18.1-linux-x64/bin

Effective immediately

source /etc/profile
[root@localhost ~]# node -v
v12.18.1

 

Next, find the domain name directory in the server file

cd /wwwroot   //进入wwwroot目录下
mkdir index   //新建文件夹

 

Create a new directory under this directory and put index.js in this directory. (And remember this file path)

//nodejs源代码

const express=require('express')
const bodyParser=require('body-parser')
const app=express()
app.use(bodyParser.json())

app.post('/',(req,res)=>{
    console.log(req.body)
    res.json(req.body)
})

app.listen(3000,()=>{
    console.log('server running at http:域名:3000')
})

 

 

Enter the server command line window and enter the index directory you just remembered

Initialize the project: 

npm init -y

 

Install the Express framework to quickly build an HTTP server: 

npm install express –save

 

 

Install npm install nodemon monitor file modification: 

npm install express –save

Next is the coding of the applet client. The source code is as follows:

<!--index.wxml-->
<view class="container">
  <form bindsubmit="submit">
    <view>
    <text>姓名：</text>
    <input name="name" value="张三" />

    </view>


<view>
    <text>学号：</text>
    <input name="nunber" value="" />

    </view>



    <view>
    <text>性别：</text>
    <radio-group name="gender">
    <label><radio value="0" checked />男</label>
    <label><radio value="1" />女</label>
    </radio-group>
    </view>
    <view>
    <text>专业技能：</text>
    <checkbox-group name="skills">
      <label><checkbox value="html" checked />HTML</label>
      <label><checkbox value="css" checked />CSS</label>
      <label><checkbox value="js" />JavaScript</label>
      <label><checkbox value="ps" />Photoshop</label>
       <label><checkbox value="photo" />摄影</label>
    </checkbox-group>
    </view>
    <view>
      <text>您的意见</text>
      <textarea name="opinion" value="测试"/>
    </view>
    <button form-type="submit">提交</button>
  </form>
  </view>

 

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },


submit: function(e){
  wx.request({
    method:'POST',
    url: 'http://域名',
    data:e.detail.value,
    success:function(res){
      console.log(res)
    }
  })
},





})

/**index.wxss**/
.container{margin: 50rpx;}
view{margin-bottom: 30rpx;}
input{width: 600rpx;margin-top: 10rpx;border-bottom:2rpx solid #ccc;}
label{display: block;margin: 8rpx;}
textarea{width: 600rpx;height: 100rpx;margin-top: 10rpx;border: 2rpx solid #eee}

 

 

 

 

After installing these modules, start the server:

nodemon index.js

If you see server running at http:// domain name , it means the startup is successful

 

Successful test screenshot