上一篇文章中，我们弄出了一个最基本的带有后端的小程序，本篇将讲述如何使小程序/后端具有双向通信与数据存储的能力

数据库相关

建立数据库

在宝塔中点击数据库，添加数据库，自己写数据库名和用户名，点提交。然后找到此数据库，点击管理，进入phpMyAdmin数据库管理界面。

点击左侧你的数据库，点击上方的操作，在新建数据表那边填个表名字，字段数写2

随后跳出对表的设置界面，有两行

1. 名字写num，其他不动
2. 名字：time，类型：timestamp，默认：CURRENT_TIME

点击保存，我们在服务器上建立了一个数据库，库中有一张表，表中有存储数字与存储时间的两个字段，其中时间字段会自动获取当前时间

后端与数据库连接并使用

复制以下代码，并填写/修改5~11行的配置

from flask import Flask, request
import pymysql
import json

Myport = 39101       #服务端口号
sql_conf = {         #在下面填写你的数据库信息
    'user': '',      #用户名
    'passwd': '',    #密码
    'db_name': '',   #数据库名
    'sche1_name': '' #表名
}

class mysql:
    def __init__(self):
        self.db_connect()

    def db_connect(self):   #连接数据库函数
        self.db = pymysql.Connect(
            host ='localhost',
            user = sql_conf.get('user'),
            passwd = sql_conf.get('passwd'),
            db = sql_conf.get('db_name'),
        )
        self.cursor = self.db.cursor()

    def common_commit(self, sql, args): #提交数据函数
        try:
            self.cursor.execute(sql, args)
            self.db.commit()
        except Exception as e:
            self.db.rollback()
            print(e)
        finally:
            self.db.close()

    def common_search(self, sql, *args):    #查询函数
        try:
            if args:
                self.cursor.execute(sql, args[0])
            else:
                self.cursor.execute(sql)
            results = [i[0] for i in self.cursor.fetchall()]
        except Exception as e:
            print(e)
        finally:
            self.db.close()
        return results

    def insert_data(self, num):     #调用上面的提交函数来提交输入数据
        sql = "INSERT INTO `"+ sql_conf.get('sche1_name')+\
            "`(`num`) VALUES (%s)"
        self.common_commit(sql, (num))

    def get_data(self):             #调用上面的查询函数来获取数据库中的数据
        sql = "SELECT * FROM `%s` WHERE 1" %sql_conf.get('sche1_name')
        return self.common_search(sql)

app = Flask(__name__)
@app.route('/commit', methods=['GET'])  #提交数据接口
def start():
    str_num = request.args.get('num')
    if str_num == '':
        return 'wrong data'
    else:
        mysql().insert_data(int(str_num))
        return 'you commit a data!'

@app.route('/get', methods=['GET'])     #获取数据接口
def start2():
    return json.dumps(mysql().get_data())

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=Myport)

请再次进行上传与执行命令操作使这段代码工作，若提示缺少库，则使用以下语句安装库文件

pip3 install PyMySQL


若之前使用过后台执行命令，且不确定上一个程序是否依然在运行并占用端口，请使用以下命令来进行查询进程号

ps -ef|grep python3|grep test|grep -v grep

或者用以下命令查询端口是否被占用

lsof -i:端口号

并使用命令：kill+进程号将占用端口的进程杀死

前端

修改三个文件如下（其中.js文件需要修改）

index.wxml

<view class="input-area" id="input1">
    <input type="number" bindinput="get_input1"
        placeholder="随便输点数字"/>
</view>

<view class="btn-area" id="button1">
    <button type="primary" bindtap="commit">提交</button>
</view>

<view class="btn-area" id="button2">
    <button type="primary" bindtap="getData">获取记录</button>
</view>

index.js

const address = "duya12345.top"  //服务器域名或ip
const port = "39101"     //服务端器的端口

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

Page({
  data: {
    inputValue: '',
  },
  get_input1: function(e) { //文本框输入
    this.setData({
      inputValue: e.detail.value
    })
  },
  commit: function(data) {
    wx.request({
        url:"http://"+address+":"+port+"/commit", //指定访问网页
        data:{
          num: this.data.inputValue   //提交数据
        },
        success:function(res){  //如果成功访问，执行以下内容
            console.log(res.data) //打印获取到的数据
        },
        fail:function(res){ //若失败
          console.log(res.errMsg)
        }
    })
  },
  getData: function(data) {
    wx.request({
      url:"http://"+address+":"+port+"/get",
      success:function(res){
          console.log(res.data)
      },
      fail:function(res){
        console.log(res.errMsg)
      }
    })
  }
})

index.wxss

.input-area{
  margin-top: 40px;
  margin-bottom: 20px;
}

input{
  text-align: center;
  height: 20px;
  min-height: 3rem;
}

button{
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  width: 70%;
}