原生php实现账单功能

由于合租，在一块做饭缴纳水电费等等这样的消费，为了公开透明，我专门花一下午做了一个账单记录的小demo，相关的消费力求做到公开透明

这个项目做完复习了并且学到了很多东西，挺有成就感。

代码：
add.php

<?php
class MYSQL
{private static $conn =false ;protected $config = array(
//      "host" =>'127.0.0.1',"host" =>'mysql',"database"=>"mall","user"=>"root","password"=>"123456","port"=>3306);private function __construct(){$this->conn = mysqli_connect($this->config['host'],$this->config['user'],$this->config['password'],$this->config['database']);$this->conn or die("mysql_connect error".mysqli_error($this->conn));mysqli_query("SET NAMES utf8");}public static function getInstance(){if (self::$conn instanceof self){return self::$conn;}return new self();}private function __clone(){// TODO: Implement __clone() method.}public function fetchAll($table){$sql    = "select * from {$table}";$data   = mysqli_query($this->conn,$sql);$result = mysqli_fetch_all($data,MYSQLI_ASSOC);
//        var_dump($result);$result =array("code"=>1,"message"=>'success',"data"=>$result);exit(json_encode($result));}public function add($table , $data){$key_str   = "";$value_str = "";foreach ($data as $key =>$value){if (empty($value)){die("插入失败");}$key_str     .=$key.",";$value_str   .="'{$value}'".",";}$key_str     = trim($key_str,',');$value_str   = trim($value_str,',');$sql = "insert into {$table} ($key_str) values ($value_str)";
//        echo $sql;$insert_id = mysqli_query($this->conn,$sql);//        echo $insert_id;if ($insert_id){return $insert_id;}return false;}
}$type = $_POST['type']?$_POST['type']:1;
$tableName = "consumelog";
if ($type ==1)
{MYSQL::getInstance()->fetchAll($tableName);
} else{$data = array('photo'=> uplod(),'money'=> $_POST['money'],'goodName'=>$_POST['goodName'],'add_time'=>time());$re = MYSQL::getInstance()->add($tableName,$data);header("location:http://localhost/layui/upload.html");/*$result =array("code"=>1,"message"=>'success',"data"=>$re);exit(json_encode($result));*/
}
function uplod()
{$file = $_FILES['file'];//得到传输的数据//得到文件名称$name = $file['name'];$type = strtolower(substr($name,strrpos($name,'.')+1)); //得到文件类型，并且都转化成小写$allow_type = array('jpg','jpeg','gif','png'); //定义允许上传的类型
//判断文件类型是否被允许上传if(!in_array($type, $allow_type)){//如果不被允许，则直接停止程序运行return ;}
//判断是否是通过HTTP POST上传的if(!is_uploaded_file($file['tmp_name'])){//如果不是通过HTTP POST上传的return ;}$upload_path = "./upload/"; //上传文件的存放路径
//开始移动文件到相应的文件夹if(move_uploaded_file($file['tmp_name'],$upload_path.$file['name'])){return $upload_path.$file['name'];}else{return ;}}

upload.html

<html>
<head><title>消费账单</title><meta charset="UTF-8">
</head>
<style>table{border: 1px solid #0C0C0C;height: 100px;margin-top: 20px;}table th{border: 1px solid #0C0C0C;}table td {border: 1px solid #0C0C0C;text-align: center;cellspacing:"0" ;cellpadding:"0";height: 60px;width: 100px;}
</style>
<style>#userinfo{display: inline-block;background: inherit}#userinfo form{margin-bottom: 10px;}#userinfo form label{font-size: 15px !important;font-weight: 600;}#change{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);}#change>.box{width:36%;position: relative;left:32%;top:30%;background: #FFFFFF;}#change>.box .title{line-height: 2rem;padding: 0 1rem;color: #FFFFFF;background: #023052;font-weight: bold;}#change>.box .main{padding: 1rem 2rem;}#change>.box .input{line-height: 4rem;border-bottom: 1px dashed #e2e2e2}#change>.box .input .tips{color: red;margin-left: 1rem;}#change>.box .main button{outline: none;border: none;color: #ffffff;background: #1ba194;padding: 0.5rem;margin: 1rem 4rem;}
</style>
<body>
<div><div style="float: right; padding: 20px 15%;" ><button onclick="change(1)" >添加记录</button></div><div align="center"><h1>账单记录</h1><table width="70%"  cellspacing="0" cellpadding="0" id="record"><tr><th>id</th><th>凭证</th><th>消费</th><th>购买商品</th><th>添加时间</th></tr></table></div></div>
<!---------------------------------------------------------------------------------><div id="change" style="display:none;"><div class="box"><form id="upload" method="post" enctype="multipart/form-data" action="http://localhost/layui/add.php"><p class="title">添加账单<span style="float: right;" onclick="box_close(1)">x</span></p><div class="main"><span style="color: #023052;font-weight: bold;">新增记录</span><div class="input"><span>商品名称：</span><input type="txt" name="goodName" id="" value="" /></div><div class="input"><span>商品价格：</span><input type="txt" name="money" id="" value="" /></div><div class="input"><span>凭证：</span><input type="file" name="file" id="" value="" /></div><input type="hidden" name="type"  value="2" /><button type="submit" onclick="box_close()">确定</button></div></form></div></div>
<!---------------------------------------------------------------------------------><script>function change(value){// document.getElementById("userid").attr({value:value})//  $('#change').css("display","block");document.getElementById("change").style.display = "block";}function box_close(a){if (a){document.getElementById("change").style.display = "none";}}//将时间戳转换成正常时间格式function timestampToTime(timestamp) {var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000var Y = date.getFullYear() + '-';var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';var D = date.getDate() + ' ';var h = date.getHours() + ':';var m = date.getMinutes() + ':';var s = date.getSeconds();return Y+M+D+h+m+s;}function httpRequest(obj,successfun,errFun){var xmlHttp = null;//创建 XMLHttpRequest 对象，老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")if(window.XMLHttpRequest){//code for all new browsersxmlHttp = new XMLHttpRequest;}else if(window.ActiveXObject){//code for IE5 and IE6xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}//判断是否支持请求if(xmlHttp == null){alert("浏览器不支持xmlHttp");return;}//请求方式， 转换为大写var httpMethod = (obj.method || "Get").toUpperCase();//数据类型var httpDataType = obj.dataType||'json';//urlvar httpUrl = obj.url || '';//异步请求var async = true;//post请求时参数处理if(httpMethod=="POST"){//请求体中的参数 post请求参数格式为：param1=test&param2=test2var data = obj.data || {};var requestData = '';for(var key in data){requestData = requestData + key + "=" + data[key] + "&";}if(requestData == ''){requestData = '';}else{requestData = requestData.substring(0,requestData.length - 1);}// console.log(requestData);}//onreadystatechange 是一个事件句柄。它的值 (state_Change) 是一个函数的名称，当 XMLHttpRequest 对象的状态发生改变时，会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时，我们才执行代码xmlHttp.onreadystatechange = function(){//completeif(xmlHttp.readyState == 4){if(xmlHttp.status == 200){//请求成功执行的回调函数successfun(xmlHttp.responseText);}else{//请求失败的回调函数errFun;}}}//请求接口if(httpMethod == 'GET'){xmlHttp.open("GET",httpUrl,async);xmlHttp.send(null);}else if(httpMethod == "POST"){xmlHttp.open("POST",httpUrl,async);xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xmlHttp.send(requestData);}}httpRequest({method:"post",url:"http://localhost/layui/add.php",//请求的url地址data:{'type':1}},function(res){res = JSON.parse(res);// console.log(res.data)for (var i=0;i<res.data.length;i++){t =timestampToTime(res.data[i].add_time)document.getElementById("record").innerHTML +="  <tr>\n" +"            <td>"+res.data[i].id+"</td>\n" +"            <td><img width='90' src='"+res.data[i].photo+" '/></td>\n" +"            <td>"+res.data[i].money+"</td>\n" +"            <td>"+res.data[i].goodName+"</td>\n" +"            <td>"+t+"</td>\n" +"        </tr>";}},function(){console.log("请求失败");});</script>
</body>
</html>

效果图：

原生php实现账单功能相关推荐

非常不错的一款html5【404页面】,不含js脚本可以左右摆动,原生JavaScript实现日历功能代码实例(无引用Jq)...
这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下成品显示,可左右切换月份 ...
利用 Android 系统原生 API 实现分享功能
对于 App 的分享功能,基本上是一个刚需,本文主要介绍运用系统原生分享功能时候需要注意的一些问题.对于某些特定平台的一些高级分享特性,比如微信或者微博之类的分享来源标注,需要在其开放平台注册应用再接 ...
开启Mac os系统原生的NTFS读写功能
开启Mac os系统原生的NTFS读写功能早期的Mac OS是可以通过修改mount_ntfs指令实现的.但是10.5以后的版本都不可以编译了,打开是乱码.只能说微软霸道.后来只能用破解版的Para ...
如何打开Mac OS原生的读写NTFS功能
如何打开Mac OS原生的读写NTFS功能不想用NTFS for Mac之类的第三方工具,更喜欢原生简单的,在网上也搜了一些,感觉写的都不是完全正确,就自己鼓捣着再写一个.最后结合看到的好几个作者的 ...
【安卓开发】调用系统原生的文件分享功能将文件分享给QQ或微信好友
调用系统原生的文件分享功能将文件分享给QQ或微信好友核心代码: //传入的fileName是文件名的全路径@SuppressLint("QueryPermissionsNeeded&quo ...
android原生屏蔽电话,更人性化 Android P获得原生屏蔽未知来电功能
原标题:更人性化 Android P获得原生屏蔽未知来电功能 [PConline资讯]骚扰电话让人十分头痛,不过得益于各种拦截数据库的完善,基本上手机来电时都能自动识别来电是推销电话还是诈骗电话. 骚 ...
Android9全屏手势,国行三星S9系列开始推送安卓9.0 原生全屏手势功能来了
原标题:国行三星S9系列开始推送安卓9.0 原生全屏手势功能来了最近几天不少三星手机用户终于等来了跳票依旧的更新:包括三星S9.三星S9+.三星Note 9的国行版本终于获得了安卓9.0(Andro ...
微软原生输入法的一些功能和技巧
微软原生输入法的一些功能和技巧针对中文输入法特殊符号栏输入法原生其实自带颜表情,一些比较常见的可以通过关键字进行输出: 或者可以用 tab 键直接跳转到
javascript --- 原生的拖拽功能实现
准备一个方块: <style>.drag{background-color:#aaf;position:absolute;} </style> <div class=&q ...

原生php实现账单功能

原生php实现账单功能相关推荐

最新文章

热门文章