设计网页内容
预览图如下
前端编写
主页效果图(简直一模一样😶/(ㄒoㄒ)/~~)
后端功能实现
计划和笔记内容的读取
计划的添加删除打卡
学习笔记的添加,分专栏查询,内容概要模糊查询
目录结构如下
代码如下
frame.py
import json
import logging
import urllib
import requests
import pymysql
import datetime
logging.basicConfig(level=logging.DEBUG,
format='%(asctime)s-%(filename)s[line:%(lineno)d]-%(levelname)s:%(message)s',
filename='log.txt',
filemode="a",
encoding="utf-8"
)
func_list = {}
def route(data):
def func_out(func):
func_list[data] = func
def func_inner():
pass
return func_inner
return func_out
@route("/index.html")
def index():
with open("./template/index.html", "rb") as f:
file_data = f.read()
return file_data.decode()
@route("/search_plan.html")
def search_plan():
conn = pymysql.Connect(host="localhost",
port=3306,
database="gyq",
user="root",
password="root",
charset="utf8"
)
cursor = conn.cursor()
sql = "SELECT p_content,p_time FROM plan WHERE p_status =0"
cursor.execute(sql)
data = cursor.fetchall()
data_list = [{
"content": row[0],
"time": str(row[1]),
} for row in data]
json_str = json.dumps(data_list)
return json_str
cursor.close()
conn.close()
@route("/search_done.html")
def search_done():
conn = pymysql.Connect(host="localhost",
port=3306,
database="gyq",
user="root",
password="root",
charset="utf8"
)
cursor = conn.cursor()
sql = "SELECT p_content,p_time FROM plan WHERE p_status =1"
cursor.execute(sql)
data = cursor.fetchall()
data_list = [{
"content": row[0],
"time": str(row[1]),
} for row in data]
json_str = json.dumps(data_list)
return json_str
cursor.close()
conn.close()
@route("/search_article.html")
def search_article():
conn = pymysql.Connect(host="localhost",
port=3306,
database="gyq",
user="root",
password="root",
charset="utf8"
)
cursor = conn.cursor()
sql = "SELECT a_title,a_href,a_simple,a_time FROM article"
cursor.execute(sql)
data = cursor.fetchall()
data_list = [{
"title": row[0],
"time": str(row[3]),
"simple": row[2],
"href": row[1],
} for row in data]
json_str = json.dumps(data_list)
return json_str
cursor.close()
conn.close()
@route("/search_type.html")
def search_type():
conn = pymysql.Connect(host="localhost",
port=3306,
database="gyq",
user="root",
password="root",
charset="utf8"
)
cursor = conn.cursor()
sql = "SELECT DISTINCT a_type FROM article"
cursor.execute(sql)
data = cursor.fetchall()
data_list = [{
"type": row[0],
} for row in data]
json_str = json.dumps(data_list)
return json_str
cursor.close()
conn.close()
@route("/add_plan.html")
def add_plan(datalist):
plan = datalist[0];
time = datalist[1];
plan = urllib.parse.unquote(plan)
conn = pymysql.Connect(host="localhost",
port=3306,
database="gyq",
user="root",
password="root",
charset="utf8"
)
cursor = conn.cursor()
sql = "INSERT INTO plan(p_content,p_time,p_status) VALUES('" + plan + "','" + time + "',0);"
cursor.execute(sql)
cursor.close()
conn.commit()
conn.close()
return "添加成功"
@route("/add_article.html")
def add_article(datalist):
title = datalist[0];
simple = datalist[1];
type = datalist[2];
href = datalist[3];
type = urllib.parse.unquote(type)
title = urllib.parse.unquote(title)
simple = urllib.parse.unquote(simple)
href = urllib.parse.unquote(href)
print(title)
print(type)
print(simple)
print(href)
conn = pymysql.Connect(host="localhost",
port=3306,
database="gyq",
user="root",
password="root",
charset="utf8"
)
cursor = conn.cursor()
sql = 'INSERT INTO article(a_title,a_href,a_simple,a_time,a_type) VALUES("' + title + '","' + href + '","' + simple + '",NOW(),"' + type + '")'
print(sql)
cursor.execute(sql)
cursor.close()
conn.commit()
conn.close()
return "添加成功"
@route("/change_plan.html")
def change_plan(datalist):
plan = datalist[0]
plan = urllib.parse.unquote(plan)
gettime = datetime.date.today()
time = str(gettime.year) + "-" + str(gettime.month) + "-" + str(gettime.day)
conn = pymysql.Connect(host="localhost",
port=3306,
database="gyq",
user="root",
password="root",
charset="utf8"
)
cursor = conn.cursor()
sql = 'UPDATE plan SET p_status=1,p_time="' + time + '" WHERE p_content="' + plan + '"'
cursor.execute(sql)
cursor.close()
conn.commit()
conn.close()
return "打卡成功"
@route("/change_article.html")
def change_article(datalist):
type = datalist[2]
type = urllib.parse.unquote(type)
conn = pymysql.Connect(host="localhost",
port=3306,
database="gyq",
user="root",
password="root",
charset="utf8"
)
cursor = conn.cursor()
if type == 'all':
sql = 'SELECT a_title,a_href,a_simple,a_time FROM article'
else:
sql = 'SELECT a_title,a_href,a_simple,a_time FROM article WHERE a_type="' + type + '"'
cursor.execute(sql)
data = cursor.fetchall()
data_list = [{
"title": row[0],
"href": row[1],
"simple": row[2],
"time": str(row[3]),
} for row in data]
json_str = json.dumps(data_list)
return json_str
cursor.close()
conn.close()
@route("/find_article.html")
def find_article(datalist):
type = datalist[2]
type = urllib.parse.unquote(type)
conn = pymysql.Connect(host="localhost",
port=3306,
database="gyq",
user="root",
password="root",
charset="utf8"
)
cursor = conn.cursor()
sql = 'SELECT a_title,a_href,a_simple,a_time FROM article WHERE a_title LIKE "%' + type + '%" OR a_simple LIKE "%' + type + '%"'
print(sql)
cursor.execute(sql)
data = cursor.fetchall()
data_list = [{
"title": row[0],
"href": row[1],
"simple": row[2],
"time": str(row[3]),
} for row in data]
json_str = json.dumps(data_list)
return json_str
cursor.close()
conn.close()
@route("/drop_plan.html")
def drop_plan(datalist):
plan = datalist[0]
plan = urllib.parse.unquote(plan)
conn = pymysql.Connect(host="localhost",
port=3306,
database="gyq",
user="root",
password="root",
charset="utf8"
)
cursor = conn.cursor()
sql = 'DELETE FROM plan WHERE p_content="' + plan + '"'
cursor.execute(sql)
cursor.close()
conn.commit()
conn.close()
return "删除成功"
def error():
return "404 ERROR"
def application(requests_path):
try:
func = func_list[requests_path]
return func()
except Exception as e:
logging.error("get访问动态资源错误路径:" + str(e))
return error()
def application1(requests_path, datalist):
try:
func = func_list[requests_path]
return func(datalist)
except Exception as e:
logging.error("post访问动态资源错误路径:" + str(e))
return error()
index.css
body{
text-align: center;
}
#sign{
position:absolute;
width: 100px;
float: left;
left: 10%;
}
hr{
margin-top: 20px;
}
.title{
font-size: 45px;
}
#header{
margin-top: 20px;
}
#body{
margin-top: 30px;
width: 100%;
}
th{
width: 20%;
font-size: 20px;
}
#navigation,#content,#article{
width: 100%;
position:relative;
margin-top: 10px;
}
#mid{
height: 500px;
background:url("./background.jpg");
}
#bottom{
width: 100%;
}
#csdn:visited{
font-size: 20px;
color: #000;
}
#csdn{
font-size: 20px;
text-decoration: none;
}
#btn{
position:absolute;
float: right;
top: 700px;
right: 30%;
color: orangered;
}
#span1{
position:absolute;
left: 30%;
}
#span2{
position:absolute;
right: 35%;
}
#web{
width: 5%;
position: absolute;
top: 17%;
left: 8%;
background-color: rgba(255, 69, 0, 0.7);
display: block;
}
#plan{
width: 28%;
position: absolute;
top: 17%;
left: 16%;
background-color: rgba(255,69,0,0.7);
display: block;
}
#safe{
width: 5%;
position: absolute;
top: 17%;
left: 47.5%;
background-color: rgba(255, 69, 0, 0.7);
display: block;
}
#play{
width: 5%;
position: absolute;
top: 17%;
left: 67%;
background-color: rgba(255, 69, 0, 0.7);
display: block;
}
.ing>td>a{
font-size :2px ;
}
#plan>table{
width: 100%;
}
#web>span>a{
font-size: 1px;
text-decoration: none;
}
#web>span>a:visited{
font-size: 1px;
color: rgb(180, 173, 173);
}
#article>tr>td>a{
font-size: 15px;
text-decoration: none;
}
#article>tr>td>a:visited{
font-size: 15px;
color: #ed1941;
}
#web>span>img{
width: 20px;
}
#safe>span>a{
font-size: 1px;
text-decoration: none;
}
#safe>span>a:visited{
font-size: 1px;
color: rgb(180, 173, 173);
}
#safe>span>img{
width: 20px;
}
#play>span>a{
font-size: 1px;
text-decoration: none;
}
#play>span>a:visited{
font-size: 1px;
color: rgb(180, 173, 173);
}
#play>span>img{
width: 20px;
}
#content{
margin-top:25px;
}
#add_div{
width: 40%;
position: absolute;
top: 62.3%;
left: 49%;
background-color: rgba(255,69,0,0.7);
display: block;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/index.css">
<script src="./jquery.min.js"></script>
<script>
function showweb(){
var $oWeb=$("#web");
if ($oWeb.css("display")=="none"){
$oWeb.css({"display":"block"});
}else{
$oWeb.css({"display":"none"});
}
};
function add_article(){
var $oWeb=$("#add_div");
if ($oWeb.css("display")=="none"){
$oWeb.css({"display":"block"});
}else{
$oWeb.css({"display":"none"});
}
};
function article_send(){
$(function(){
var $type=$("#type");
var $title=$("#title");
var $simple=$("#simple");
var $href=$("#href");
new_type=$type.val();
new_title=$title.val();
new_simple=$simple.val();
new_href=$href.val();
alert(new_title)
$.post("http://localhost:8081/add_article.html",{"plan":new_title,"time":new_simple,"type":new_type,"href":new_href});
location.reload();
});
};
$(document).ready(function(){
$.get("/search_plan.html",function(response){
var $table=$("#doing");
for(var i=0;i<response.length;i++){
var oData=response[i];
var oTr='<tr class="ing">'+
'<td><a>'+oData.content+'</a></td>'+
'<td><a>'+oData.time+'</a></td>'+
'<td><input type="button" value="打卡" onclick="change(this)"></td>'
'</tr>';
$table.append(oTr);
}
},"json");
$.get("/search_done.html",function(response){
var $table=$("#done");
for(var i=0;i<response.length;i++){
var oData=response[i];
var oTr='<tr class="ing">'+
'<td><a>'+oData.content+'</a></td>'+
'<td><a>'+oData.time+'</a></td>'+
'<td><input type="button" value="删除" onclick="drop(this)"></td>'
'</tr>';
$table.append(oTr);
}
},"json");
$.get("/search_article.html",function(response){
var $table=$("#article");
for(var i=0;i<response.length;i++){
var oData=response[i];
var oTr='<tr>'+
'<td style="width: 33%;"><a href="'+oData.href+'" target="_blank"</a>'+oData.title+'</a></td>'+
'<td style="width: 33%;"><a>'+oData.simple+'</a></td>'+
'<td style="width: 34%;"><a>'+oData.time+'</a></td>'+
'</tr>';
$table.append(oTr);
}
},"json");
$.get("/search_type.html",function(response){
var $select=$("#select");
for(var i=0;i<response.length;i++){
var oData=response[i];
var oOpt='<option value="'+oData.type+'">'+oData.type+'</option>';
$select.append(oOpt);
}
},"json");
});
function add_plan(){
$(function(){
var $plan=$("#new_plan");
var $time=$("#new_time");
new_plan=$plan.val();
new_time=$time.val();
$.post("http://localhost:8081/add_plan.html",{"plan":new_plan,"time":new_time,"type":null,"href":null});
location.reload();
});
};
function change(obj){
var plan=obj.parentNode.parentNode.firstChild.firstChild.firstChild.nodeValue;
$(function(){
$.post("http://localhost:8081/change_plan.html",{"plan":plan,"time":null,"type":null,"href":null});
location.reload();
});
};
function drop(obj){
var plan=obj.parentNode.parentNode.firstChild.firstChild.firstChild.nodeValue;
$(function(){
$.post("http://localhost:8081/drop_plan.html",{"plan":plan,"time":null,"type":null,"href":null});
location.reload();
});
};
function change_article(){
var opt=$("#select option:selected").val();
$(function(){
$.post("http://localhost:8081/change_article.html",{"plan":null,"time":null,"type":opt,"href":null},function(response){
var $table=$("#article");
$table.empty();
for(var i=0;i<response.length;i++){
var oData=response[i];
var oTr='<tr>'+
'<td style="width: 33%;"><a href="'+oData.href+'" target="_blank"</a>'+oData.title+'</a></td>'+
'<td style="width: 33%;"><a>'+oData.simple+'</a></td>'+
'<td style="width: 34%;"><a>'+oData.time+'</a></td>'+
'</tr>';
$table.append(oTr);
}
},"json");
});
};
function find_article(){
var key=$("#key").val();
$(function(){
$.post("http://localhost:8081/find_article.html",{"plan":null,"time":null,"type":key,"href":null},function(response){
var $table=$("#article");
$table.empty();
for(var i=0;i<response.length;i++){
var oData=response[i];
var oTr='<tr>'+
'<td style="width: 33%;"><a href="'+oData.href+'" target="_blank"</a>'+oData.title+'</a></td>'+
'<td style="width: 33%;"><a>'+oData.simple+'</a></td>'+
'<td style="width: 34%;"><a>'+oData.time+'</a></td>'+
'</tr>';
$table.append(oTr);
}
},"json");
});
};
</script>
<title>个人主页</title>
</head>
<body>
<div id="header">
<a class="title">GYQ的个人主页</a>
<img src="./sign.png" id="sign">
<hr>
</div>
<div id="body">
<table id="navigation">
<tr>
<th onclick="showweb()">在线学习</th>
<th>学习计划</th>
<th>网安资源</th>
<th>休闲娱乐</th>
<th><a href="https://www.csdn.net/?spm=1001.2014.3001.4476" target="_blank" id="csdn">CSDN</a></th>
</tr>
</table>
<div id="mid">
</div>
</div>
<div id="bottom">
<h3>学习笔记</h3>
<button id="btn" onclick="add_article()">新增内容</button>
<hr>
<br>
<div>
<span id="span1">
<label><input type="button" value="切换专栏" onclick="change_article()">
<select id="select" name="select" onclick="change_article()" autofocus>
<option value='all'>全部</option>
</select>
</label>
</span>
<span id="span2">
<input type="text" placeholder="请输入关键字" id="key">
<input type="button" id="search" value="查找" onclick="find_article()">
</span>
</div>
<table id="content">
<tr>
<th style="width: 33%;font color:red">文章标题</th>
<th style="width: 33%;">文章概要</th>
<th style="width: 34%;">记录时间</th>
</tr>
</table>
<table id="article">
</table>
</div>
</body>
</html>
<div id="web">
<span>
<img src="./chuanzhi.png">
<a href="http://stu.ityxb.com/" target="_blank">传智播客</a>
</span>
<span>
<img src="./sign.png">
<a href="https://www.bilibili.com/" target="_blank">哔哩哔哩</a>
</span>
<span>
<img src="./sign.png">
<a href="https://www.icourse163.org/" target="_blank">大学慕课</a>
</span>
<span>
<img src="./sign.png">
<a href="https://www.xuetangx.com/my-courses/current" target="_blank">学堂在线</a>
</span>
<span>
<img src="./sign.png">
<a href="https://r2coding.com/#/README?id=%e6%95%b0%e6%8d%ae%e7%bb%93%e6%9e%84%e7%ae%97%e6%b3%95%e9%a2%98"
target="_blank">代码之路</a>
</span>
<span>
<img src="./sign.png">
<a href="https://github.com/"
target="_blank">_github_</a>
</span>
</div>
<div id="plan">
<table>
<tr>
<th style="width: 33%;">新增计划</th>
<th style="width: 33%;">计划耗时</th>
<th style="width: 34%;">添加</th>
</tr>
<tr>
<td style="width: 33%;"><input type="text" style="width: 90%;" id="new_plan" placeholder="请新增计划"></td>
<td style="width: 33%;"><input type="date" style="width: 70%;" id="new_time"></td>
<td style="width: 34%;"><input type="button" value="添加" onclick="add_plan()"></td>
</tr>
</table>
<table id="doing">
<tr>
<th style="width: 33%;">进行中</th>
<th style="width: 33%;">截至日期</th>
<th style="width: 34%;">处理</th>
</tr>
</table>
<table id="done">
<tr>
<th style="width: 33%;">已完成</th>
<th style="width: 33%;">完成日期</th>
<th style="width: 33%;">处理</th>
</tr>
</table>
</div>
<div id="safe">
<span>
<img src="./sign.png">
<a href="https://www.mozhe.cn/" target="_blank">墨客学院</a>
</span>
<span>
<img src="./sign.png">
<a href="https://vulhub.org/" target="_blank">靶场环境</a>
</span>
</div>
<div id="play">
<span>
<img src="./sign.png">
<a href="https://www.youku.com/" target="_blank">优酷视频</a>
</span>
</div>
<div id="add_div" style="display:none">
<table>
<tr>
<th style="width: 22%;">专栏</th>
<th style="width: 22%;">文章标题</th>
<th style="width: 22%;">文章概要</th>
<th style="width: 22%;">文章链接</th>
</tr>
<tr>
<td style="width: 22%;"><input type="text" id="type"></td>
<td style="width: 22%;"><input type="text" id="title"></td>
<td style="width: 22%;"><input type="text" id="simple"></td>
<td style="width: 22%;"><input type="text" id="href"></td>
<td style="width: 12%;"><input type="button" value="提交" onclick="article_send()"></td>
</tr>
</table>
</div>
server.py
import logging
import socket
import threading
import re
import dynamic.frame
import win32api, win32gui
ct = win32api.GetConsoleTitle()
hd = win32gui.FindWindow(0, ct)
win32gui.ShowWindow(hd, 0)
def handle_client(client_socket):
client_requests_data = client_socket.recv(1024).decode()
requests_data = client_requests_data.split(" ")
if len(requests_data) == 1:
client_socket.close()
return
requests_path = requests_data[1]
if requests_path.endswith(".html"):
logging.info("动态资源" + requests_path)
response_line = "HTTP/1.1 200 OK\r\n"
response_header = "content-type: text/html; charset=utf-8\r\n"
if requests_data[0] == "POST":
requests_data[-1] += 'end'
str = "plan=(.*?)&"
plan = re.findall(str, requests_data[-1])
str2 = "time=(.*?)&"
time = re.findall(str2, requests_data[-1])
str3 = "type=(.*?)&"
type = re.findall(str3, requests_data[-1])
str4 = "href=(.*?)end"
href = re.findall(str4, requests_data[-1])
datalist = [plan[0], time[0], type[0], href[0]]
response_body = dynamic.frame.application1(requests_path, datalist)
else:
response_body = dynamic.frame.application(requests_path)
response_data = (response_line + response_header + "\r\n" + response_body).encode()
client_socket.send(response_data)
else:
logging.info("静态资源" + requests_path)
try:
with open("./static" + requests_path, 'rb') as f:
file_data = f.read()
except Exception as e:
logging.error("访问静态资源错误路径:" + str(e))
response_line = "HTTP/1.1 404 Not Found\r\n"
response_header = "Server:pwd\r\n"
response_body = "404 NOT FOUND"
response_data = (response_line + response_header + "\r\n" + response_body).encode()
client_socket.send(response_data)
else:
response_line = "HTTP/1.1 200 OK\r\n"
response_header = "Server:pwd\r\n"
response_body = file_data
response_data = (response_line + response_header + "\r\n").encode() + response_body
client_socket.send(response_data)
finally:
client_socket.close()
if __name__ == '__main__':
tcp_sever_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM);
tcp_sever_socket.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, True)
tcp_sever_socket.bind(("", 8081))
tcp_sever_socket.listen(128)
while True:
client_socket, addr = tcp_sever_socket.accept()
client_thread = threading.Thread(target=handle_client, args=((client_socket,)))
client_thread.start()
tcp_server_socket.close()
设置python服务器开机自启动
python程序开机自启动 - 程序猿·胖虎 - 博客园 (cnblogs.com)
设置浏览器打开时页面为https:localhost:8081/index.html
之后打开电脑,打开浏览器首页就是个人主页了,nice!