一. 實(shí)際需求
- 之前這篇文章kettle-自動(dòng)生成周報(bào) 是使用java開(kāi)源ETL工具kettle實(shí)現(xiàn),正常情況下是每天寫(xiě)工作完成情況到Excel表,每周五定時(shí)任務(wù)啟動(dòng)讀取Excel日志寫(xiě)入數(shù)據(jù)庫(kù),再讀取數(shù)據(jù)庫(kù)內(nèi)容按照公司周報(bào)模板生成文件,發(fā)郵件,上傳到SVN,如果有天遺忘寫(xiě)工作進(jìn)度,需要數(shù)據(jù)庫(kù)插入一條記錄.
- 當(dāng)通過(guò)web頁(yè)面提交數(shù)據(jù),需要做到的功能有哪些?
需要考慮到實(shí)現(xiàn)插入新記錄,刪除記錄(測(cè)試時(shí)候?yàn)闉榱俗屩麈Iid從1開(kāi)始 刪除默認(rèn)全部刪除),更新某條記錄的值,導(dǎo)出excel文件,也就是基本上的增刪改查導(dǎo)出操作
二.項(xiàng)目操作
2.1 diango項(xiàng)目新增一個(gè)app python manage.py startapp weekreport,其次數(shù)據(jù)庫(kù)建一個(gè)周報(bào)日志表,插入幾條數(shù)據(jù).
CREATE TABLE `weekreport` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主鍵id',
`content` text COMMENT '周報(bào)內(nèi)容',
`create_time` varchar(50) DEFAULT NULL COMMENT '完成時(shí)間',
`finished_status` varchar(50) DEFAULT NULL COMMENT '完成情況',
`cooperation` varchar(50) DEFAULT NULL COMMENT '協(xié)同部門(mén)/人',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
2.2 其次讀取這個(gè)表的數(shù)據(jù) 渲染到頁(yè)面(依舊沒(méi)用ORM模型).
有些細(xì)節(jié) 比如 新增一行 按鈕點(diǎn)擊以后,需要根據(jù)數(shù)據(jù)庫(kù)總記錄數(shù)+1生成一個(gè)id,完成時(shí)間點(diǎn)擊可以彈出當(dāng)日時(shí)間,也可以手動(dòng)修改時(shí)間.總而言之,數(shù)據(jù)表改變后都需要重載當(dāng)前表格,導(dǎo)出文件需要導(dǎo)出到指定文件夾,生成的文件和原來(lái)kettle生成的一樣.
web頁(yè)面
除了新增一行沒(méi)有調(diào)用接口,純js生成新的一行記錄,其余4個(gè)按鈕點(diǎn)擊時(shí)候通過(guò)jQuery的ajax請(qǐng)求后臺(tái)接口.
2.3 前端頁(yè)面(原諒我low的前端....)
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>周報(bào)</title>
<link rel="stylesheet" >
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/static/css/templatemo_main.css">
<style>
table {
border-spacing: 0;
border-collapse: collapse
}
th {
background-color: #79aec8;
border: 1px #609ab6 solid;
}
</style>
</head>
<body>
<!-- <table class="table table-bordered table-striped table-hover table-condensed"-->
<div align="center" style="width: 100%;font-size:15px">
<h3>周報(bào)</h3>
<div class="container" align="center">
<div class="row">
<div class="col-md-12">
<table id="oTable" class="table table-hover table-bordered table-condensed table-striped">
<thead>
<tr class="info">
<th>序號(hào)</th>
<th>工作內(nèi)容</th>
<th>完成時(shí)間</th>
<th>完成情況</th>
<th>協(xié)同部門(mén)/人</th>
</tr>
</thead>
<tbody id="tr_tbody">
{% for data in week_reports_data %}
<tr class="active">
<td class="col-md-2"><input style='width:100%' value="{{ data.id }}" id='id1' name="id1">
</td>
<td class="col-md-4"><input style='width:100%' value="{{ data.content }}" id='content1'
name="content1"></td>
<td class="col-md-2"><input style='width:100%' value="{{ data.create_time }}"
id='create_time1' name="create_time1"></td>
<td class="col-md-2"><input style='width:100%' value="{{ data.finished_status }}"
id='finished_status1' name="finished_status1"></td>
<td class="col-md-2"><input style='width:100%' value="{{ data.cooperation }}"
id='cooperation1' name="cooperation1"></td>
</tr>
{% endfor %}
</tbody>
</table>
<input type="button" value="新增一行" id="btn1" onclick="Addrow()">
<button type="button" id="commit">提交保存</button>
<button type="button" id="update">更新周報(bào)</button>
<button type="button" id="delete">刪除全部</button>
<button id="export_excel" type="button">導(dǎo)出excel</button>
<script type="text/javascript">
function Addrow() {
var id = "<tr><td class='col-md-2'><input style='width:100%' type='text' id='id' name='id' value={{ max_id }}></td>";
var content = "<td class='col-md-4'><input style='width:100%' type='text' id='content' name='content' value=''></td>";
var create_time = "<td class='col-md-2'><input style='width:100%' type='text' id='create_time' name='create_time' onclick='get_now_time()'></td>";
var finished_status = "<td class='col-md-2'><input style='width:100%' type='text' id= 'finished_status' name='finished_status' value='' ></td>";
var cooperation = "<td class='col-md-2'><input style='width:100%' type='text' id='cooperation' name='cooperation' value='' ></td></tr>";
var str_html = id + content + create_time + finished_status + cooperation;
$("#oTable").append(str_html);
}
</script>
<script type="text/javascript">
function get_now_time() {
function p(s) {
return s < 10 ? '0' + s : s;
}
var myDate = new Date();
var year = myDate.getFullYear();
var month = myDate.getMonth() + 1;
var date = myDate.getDate();
var now_time = year + '-' + p(month) + "-" + p(date);
var x = document.getElementById('create_time');
x.value = now_time;
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#commit").click(function () {
$.ajax({
type: 'POST',
url: "{% url 'weekreport:add_report' %} ",
data: {
id: $('#id').val(),
content: $('#content').val(),
create_time: $('#create_time').val(),
finished_status: $('#finished_status').val(),
cooperation: $('#cooperation').val(),
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success: function (data) {
alert(data);
window.location.reload();
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#update").click(function () {
$.ajax({
type: 'POST',
url: "{% url 'weekreport:update_report' %} ",
data: {
id: $('#id1').val(),
content: $('#content1').val(),
create_time: $('#create_time1').val(),
finished_status: $('#finished_status1').val(),
cooperation: $('#cooperation1').val(),
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success: function (data) {
alert(data);
window.location.reload();
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#delete").click(function () {
$.ajax({
type: 'get',
url: "{% url 'weekreport:delete_report' %} ",
success: function (data) {
alert(data);
window.location.reload();
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#export_excel").click(function () {
htmlobj = $.ajax({url: "{% url 'weekreport:export_all_excel' %}", async: false});
alert(htmlobj.responseText);
});
});
</script>
</div>
</div>
</div>
</div>
</body>
</html>
三.實(shí)現(xiàn)
數(shù)據(jù)庫(kù)
導(dǎo)出excel文件
excel內(nèi)容
