MUI+PHP+Mysql 实现简单数据登记页面

一、功能介绍

疫情当前，学校需要统计学生的健康情况，希望做一个二维码连接发给所有学生，让学生填写自己的健康状况，然后后台进行统计。这个其实设计一个简单的问卷调查就可以完成这个功能了，我应该是脑子抽了，只想到开发一个移动端的页面来实现。既然开发了就稍微记录一下，这些技术之前都没用过。

做好的界面效果如下图：

二、技术框架

1. 前端页面： 采用mui框架
2. 服务端： PHP
3. 数据库： mysql

这几种技术都是第一次使用，过程中遇到不少问题。

三、问题解决

1、用HBuilder X创建mui项目。

看mui的文档，说可以直接写入"mheader"，我自己创建了一个html页面，怎么也写不出来。后来才从网上找到解决方法，是自己创建的工程不对，其实就是因为里面没有包含正确的js和css代码。

2、mui中的多个radio单选框并排问题

表单中需要让学生填写性别，采用单选框实现。但是mui中的1个单选框就要占一行。如果要让多个radio并排一行，就需要设置css： display:inline-block

html代码：

<div class="mui-input-row">
	<label style="color:#87CEEB;">2、性别<span>*</span></label>
</div>
<div class="mui-input-row mui-radio myInline mui-left">
	<label>男</label>
	<input name="sex" type="radio" value="男">
</div>
<div class="mui-input-row mui-radio myInline mui-left">
	<label>女</label>
	<input name="sex" type="radio" value="女">
</div>

css代码：

.myInline{
    display: inline-block;
}

3、mui中的form表单校验问题

mui中没找到内置的校验方法，只能自己写。我写的校验比较简单，只检查了必填项，没有对填写值得合法性进行校验。合法性校验，用正则表达式可以很容易实现。

4、mui的ajax提交表单

mui没有提供获取整个form数据的方法，挺坑的。只能自己一个一个写。

mui.ajax('http://服务器地址/saveData.php',{
	data:{
		name:mui("input[name='name']")[0].value,
		sex: getRadioRes("sex"),
		mz: mui("select[name='mz']")[0].value,
		college: mui("select[name='college']")[0].value,
		class: mui("input[name='class']")[0].value,
		tel: mui("input[name='tel']")[0].value,
		address: mui("input[name='address']")[0].value,
		location: mui("select[name='location']")[0].value,
		locationDetail: mui("input[name='locationDetail']")[0].value,
		isGetOut: getRadioRes("isGetOut"),
		getOutReason: mui("input[name='getOutReason']")[0].value,
		sfjcndry: getRadioRes("sfjcndry"),
		sfbgl: getRadioRes("sfbgl"),
		morningTemp: mui("input[name='morningTemp']")[0].value,
		afternoonTemp: mui("input[name='afternoonTemp']")[0].value,
		sfks: getRadioRes("sfks"),
		sfjj: getRadioRes("sfjj"),
		isHomeGood: getRadioRes("isHomeGood"),
		mark: document.getElementById('myTextArea').value
	},
	dataType:'text',//服务器返回json格式数据
	type:'post',//HTTP请求类型
	timeout:10000,//超时时间设置为10秒；
	headers:{'Content-Type':'application/json'},	              
	success:function(data){
		//服务器返回响应，根据响应结果，分析是否登录成功；
		if(data == 1)
			mui.alert("提交成功！");
		else
			mui.alert("提交失败！");
	},
	error:function(xhr,type,errorThrown){
		//异常处理；
		mui.alert(type);
		console.log(type);
	}
});

这里遇到一个坑，后台调试的时候，怎么也获取不到提交的字段数据，后台用

$_POST[name]

这种方式来获取post数据，但取出来是空的。后来查资料才知道是ajax提交的格式与后台使用的方式不匹配。解决方法是在ajax中添加这一行代码：

headers:{'Content-Type':'application/json'},

5、PHP不知道怎么调试，我就添加了一个日志记录的功能，用来定位问题。

function write_log($data, $fileName)
{ 
    $month = date('Y-m');
    $dir_name = './Public/log/'.$month.'/';
    $path = $dir_name.$fileName.'_request_log.txt'; 
    
    // 检测目录是否存在,若不存在则进行创建
    if(!file_exists($dir_name))
    {
        $res = mkdir(iconv('UTF-8', 'GBK', $dir_name), 0777, true);
    }
    
    // 以写入方式打开文件
    $fp = fopen($path, 'a');
    
    // 定义写入内容
    $time = '['.date('Y-m-d H:i:s').'] ';
    $text = var_export($data, true);
    
    // 写入并关闭文件
    fwrite($fp, $time.$text."\r\n");
    fclose($fp);
}

这个日志记录的方法是网上找的，很好用。

6、最后一个问题，PHP插入数据的时候，id字段设置了为identity，insert语句里面要将这个字段值写为NULL

$dat = date('Y-m-d H:i:s', time());

//sql
$sql="insert into StaData values(null,'$dat', '$_POST[name]', '$_POST[sex]',
	'$_POST[mz]', '$_POST[college]', '$_POST[class]', '$_POST[tel]',
	'$_POST[address]', '$_POST[location]', '$_POST[locationDetail]', '$_POST[isGetOut]',
	'$_POST[getOutReason]', '$_POST[sfjcndry]', '$_POST[sfbgl]', '$_POST[morningTemp]',
	'$_POST[afternoonTemp]', '$_POST[sfks]', '$_POST[sfjj]', '$_POST[isHomeGood]', '$_POST[mark]')";

好了，到这里，所有的问题已解决，可以正常运行了。

 

最后这登记页面也没有派上用场，我开发的比较慢，学校找电信公司去做了。不过这个过程可以学一下这些技术，下次用起来就顺手了。