誰もが見ることができるクライアントに加えて、フロントエンドアプレットはどのようにバックエンドサーバーと対話しますか？
この記事は理解しやすいでしょう。ここでは、例としてnodejsを説明します
1.最初にサーバーにnodejsサーバーをインストールします。
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 // 进入解压目录
解凍したファイルのbinディレクトリには、nodeやnpmなどのコマンドが含まれています。Linuxシステムの環境変数（プロファイル）を変更して、直接実行コマンドを設定できます。
古いルールでは、最初にバックアップし、重要なファイルを変更する前にバックアップする習慣を身に付けます。
cp /etc/profile /etc/profile.bak次に、vim / etc / profileで、エクスポートPATH = $ PATH：を追加し、その後にノードの下のbinディレクトリのパスを追加します。
export PATH=$PATH:/root/node-v12.18.1-linux-x64/binすぐに効果的
source /etc/profile
[root@localhost ~]# node -v
v12.18.1
次に、サーバーファイルでドメイン名ディレクトリを見つけます。
cd /wwwroot //进入wwwroot目录下
mkdir index //新建文件夹
このディレクトリの下に新しいディレクトリを作成し、index.jsをこのディレクトリに配置します。（そして、このファイルパスを覚えておいてください）
//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')
})
サーバーのコマンドラインウィンドウを開き、記憶したインデックスディレクトリを入力します。
プロジェクトを初期化します。
npm init -y
Expressフレームワークをインストールして、HTTPサーバーをすばやく構築します。
npm install express –save
npm install nodemonモニターファイルの変更をインストールします。
npm install express –save次はアプレットクライアントのコーディングですソースコードは以下の通りです：
<!--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}
これらのモジュールをインストールしたら、サーバーを起動します。
nodemon index.jsサーバーがhttp：//ドメイン名で実行されている場合は、起動が成功したことを意味します
成功したテストのスクリーンショット
