Además del cliente que todos pueden ver, ¿cómo interactúa el subprograma de front-end con el servidor de back-end?
Este artículo será de fácil comprensión. Aquí, tome nodejs como ejemplo para explicar
1. Primero instale el servidor nodejs en el servidor:
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 // 进入解压目录
El directorio bin del archivo descomprimido contiene comandos como node y npm. Podemos modificar las variables de entorno (perfil) del sistema linux para configurar el comando de ejecución directa:
La vieja regla es hacer una copia de seguridad primero y desarrollar un buen hábito de hacer copias de seguridad antes de modificar archivos importantes.
cp /etc/profile /etc/profile.bak
Luego vim / etc / profile, agregue export PATH = $ PATH: en la parte inferior seguido de la ruta del directorio bin debajo del nodo
export PATH=$PATH:/root/node-v12.18.1-linux-x64/bin
Efectivo inmediatamente
source /etc/profile
[root@localhost ~]# node -v
v12.18.1
A continuación, busque el directorio de nombres de dominio en el archivo del servidor
cd /wwwroot //进入wwwroot目录下
mkdir index //新建文件夹
Cree un nuevo directorio en este directorio y coloque index.js en este directorio. (Y recuerda esta ruta de archivo)
//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')
})
Ingrese a la ventana de la línea de comandos del servidor e ingrese el directorio de índice que acaba de recordar
Inicialice el proyecto:
npm init -y
Instale el marco Express para construir rápidamente un servidor HTTP:
npm install express –save
Instale la modificación del archivo del monitor de nodemon npm install:
npm install express –save
A continuación, se muestra la codificación del cliente del applet. El código fuente es el siguiente:
<!--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}
Después de instalar estos módulos, inicie el servidor:
nodemon index.js
Si ve un servidor ejecutándose en http: // nombre de dominio , significa que el inicio fue exitoso
Captura de pantalla de prueba exitosa