阅读此文章前,请先阅读基础篇
上一篇文章中,我们弄出了一个最基本的带有后端的小程序,本篇将讲述如何使小程序/后端具有双向通信与数据存储的能力
数据库相关
建立数据库
在宝塔中点击数据库,添加数据库,自己写数据库名和用户名,点提交。然后找到此数据库,点击管理,进入phpMyAdmin数据库管理界面。
点击左侧你的数据库,点击上方的操作,在新建数据表那边填个表名字,字段数写2
随后跳出对表的设置界面,有两行
- 名字写num,其他不动
- 名字: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%; }