最近太闲刷抖音看有人教如何做网站 一时兴起 ,
学习了两天做网站视频 。感觉有点收获 故而发帖记录一个菜逼成长过程
案例如题 就是一个登录页面
案例用到 main.html文件 和 bookcover文件夹 里面放图片和css文件
目录结构如下
main.html文件源码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link href="./bookcover/css.css" type="text/css" rel="stylesheet" />
</head>
<body οndragstart="window.event.returnValue=false" οncοntextmenu="window.event.returnValue=false" onselectstart="event.returnValue=false">
<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#FB7E2E" rules="cols" bordercolorlight="#FB7E2E" bordercolordark="#FFFFFF" frame="vsides">
<tr>
<td>
<script type="text/javascript">
var content = new Array();
content[0]=['法国'];
content[1]=['1、阿芒得骑士','<img src=./bookcover/阿芒得骑士.jpg class=shadow>','1-1','大仲马 '];
content[2]=['2、包法利夫人','<img src=./bookcover/包法利夫人.jpg class=shadow>','1-2','福楼拜 '];
content[3]=['3、高老头','<img src=./bookcover/高老头.jpg class=shadow>','1-3','巴尔扎克'];
content[4]=['4、黑郁金香','<img src=./bookcover/黑郁金香.jpg class=shadow>','1-4','大仲马'];
content[5]=['5、红与黑','<img src=./bookcover/红与黑.jpg class=shadow>','1-5','司汤达'];
content[6]=['6、幻灭','<img src=./bookcover/幻灭.jpg class=shadow>','1-6','巴尔扎克 '];
content[7]=['7、基督山伯爵','<img src=./bookcover/基督山伯爵.jpg class=shadow>','1-7','大仲马 '];
content[8]=['8、蒙梭罗夫人','<img src=./bookcover/蒙梭罗夫人.jpg class=shadow>','1-8','大仲马'];
content[9]=['9、漂亮朋友','<img src=./bookcover/漂亮朋友.jpg class=shadow>','1-9','莫泊桑'];
content[10]=['10、三个火枪手','<img src=./bookcover/三个火枪手.jpg class=shadow>','1-10','大仲马'];
content[11]=['11、双雄记','<img src=./bookcover/双雄记.jpg class=shadow>','1-11','大仲马 '];
content[12]=['12、约翰·克里斯朵夫','<img src=./bookcover/约翰·克里斯朵夫.jpg class=shadow>','1-12','罗曼·罗兰 '];
content[13]=['13、巴黎圣母院','<img src=./bookcover/巴黎圣母院.jpg class=shadow>','1-13','雨果'];
content[14]=['14、邦斯舅舅','<img src=./bookcover/邦斯舅舅.jpg class=shadow>','1-14','巴尔扎克'];
content[15]=['15、悲惨世界','<img src=./bookcover/悲惨世界.jpg class=shadow>','1-15','雨果'];
content[16]=['16、贝姨','<img src=./bookcover/贝姨.jpg class=shadow>','1-16','巴尔扎克'];
content[17]=['17、茶花女','<img src=./bookcover/茶花女.jpg class=shadow>','1-17','小仲马'];
content[18]=['18、忏悔录','<img src=./bookcover/卢梭忏悔录.jpg class=shadow>','1-18','卢梭'];
content[19]=['19、海底两万里','<img src=./bookcover/海底两万里.jpg class=shadow>','1-19','儒勒·凡尔纳'];
content[20]=['20、驴皮记','<img src=./bookcover/驴皮记.jpg class=shadow>','1-20','巴尔扎克'];
content[21]=['21、欧也妮·葛朗台','<img src=./bookcover/欧也妮·葛朗台.jpg class=shadow>','1-21','巴尔扎克'];
content[22]=['22、羊脂球','<img src=./bookcover/羊脂球.jpg class=shadow>','1-22','莫泊桑'];
content[23]=['23、追忆似水年华','<img src=./bookcover/追忆似水年华.jpg class=shadow>','1-23','普鲁斯特'];
content[24]=['俄·前苏联'];
content[25]=['24、复活','<img src=./bookcover/复活.jpg class=shadow>','2-1','列夫·托尔斯泰'];
content[26]=['25、静静的顿河','<img src=./bookcover/静静的顿河.jpg class=shadow>','2-2','肖洛霍夫'];
content[27]=['26、上尉的女儿','<img src=./bookcover/上尉的女儿.jpg class=shadow>','2-3','普希金'];
content[28]=['27、战争与和平','<img src=./bookcover/战争与和平.jpg class=shadow>','2-4','列夫·托尔斯泰'];
content[29]=['28、安娜·卡列宁娜','<img src=./bookcover/安娜·卡列宁娜.jpg class=shadow>','2-5','列夫·托尔斯泰'];
content[30]=['29、钢铁是怎样炼成的','<img src=./bookcover/钢铁是怎样炼成的.jpg class=shadow>','2-6','尼·奥斯特洛夫斯基'];
content[31]=['30、母亲','<img src=./bookcover/母亲.jpg class=shadow>','2-7','马克西姆·高尔基'];
content[32]=['31、青年近卫军','<img src=./bookcover/青年近卫军.jpg class=shadow>','2-8','法捷耶夫'];
content[33]=['32、死魂灵','<img src=./bookcover/死魂灵.jpg class=shadow>','2-9','果戈理'];
content[34]=['33、童年','<img src=./bookcover/童年.jpg class=shadow>','2-10','马克西姆·高尔基'];
content[35]=['34、我的大学','<img src=./bookcover/我的大学.jpg class=shadow>','2-11','马克西姆·高尔基'];
content[36]=['35、在人间','<img src=./bookcover/在人间.jpg class=shadow>','2-12','马克西姆·高尔基'];
content[37]=['36、罪与罚','<img src=./bookcover/罪与罚.jpg class=shadow>','2-13','陀思妥耶夫斯基'];
content[38]=['37、毁灭','<img src=./bookcover/毁灭.jpg class=shadow>','2-14','法捷耶夫'];
content[39]=['美国'];
content[40]=['38、北回归线','<img src=./bookcover/北回归线.jpg class=shadow>','3-1','亨利·米勒'];
content[41]=['39、第二十二条军规','<img src=./bookcover/第二十二条军规.jpg class=shadow>','3-2','约瑟夫·海勒'];
content[42]=['40、根','<img src=./bookcover/根.jpg class=shadow>','3-3','亚历克斯·哈利 Alex Haley'];
content[43]=['41、赫克尔贝里·芬历险记','<img src=./bookcover/赫克尔贝里·芬历险记.jpg class=shadow>','3-4','马克·吐温'];
content[44]=['42、嘉莉妹妹','<img src=./bookcover/嘉莉妹妹.jpg class=shadow>','3-5',''];
content[45]=['43、教父','<img src=./bookcover/教父.jpg class=shadow>','3-6','马里奥·普佐(Mario Puzo) '];
content[46]=['44、廊桥遗梦','<img src=./bookcover/廊桥遗梦.jpg class=shadow>','3-7','j.r.沃勒 '];
content[47]=['45、老人与海','<img src=./bookcover/老人与海.jpg class=shadow>','3-8','海明威'];
content[48]=['46、曼斯菲尔德庄园','<img src=./bookcover/曼斯菲尔德庄园.jpg class=shadow>','3-9','简·奥斯丁 Jane Austen'];
content[49]=['47、南回归线','<img src=./bookcover/南回归线.jpg class=shadow>','3-10','亨利·米勒'];
content[50]=['48、飘','<img src=./bookcover/飘.jpg class=shadow>','3-11','玛格丽特.米切尔'];
content[51]=['49、汤姆大伯的小屋','<img src=./bookcover/汤姆大伯的小屋.jpg class=shadow>','3-12','斯陀夫人'];
content[52]=['50、野性的呼唤','<img src=./bookcover/野性的呼唤.jpg class=shadow>','3-13','杰克·伦敦'];
content[53]=['英国'];
content[54]=['51、大卫·科波菲尔','<img src=./bookcover/大卫·科波菲尔.jpg class=shadow>','4-1','查尔斯·狄更斯'];
content[55]=['52、德伯家的苔丝','<img src=./bookcover/德伯家的苔丝.jpg class=shadow>','4-2','托马斯·哈代'];
content[56]=['53、呼啸山庄','<img src=./bookcover/呼啸山庄.jpg class=shadow>','4-3','艾米莉·勃朗特'];
content[57]=['54、简·爱','<img src=./bookcover/简·爱.jpg class=shadow>','4-4','夏洛蒂·勃朗特'];
content[58]=['55、理智与情感','<img src=./bookcover/理智与情感.jpg class=shadow>','4-5','简·奥斯汀'];
content[59]=['56、双城记','<img src=./bookcover/双城记.jpg class=shadow>','4-6','查尔斯·狄更斯'];
content[60]=['57、雾都孤儿','<img src=./bookcover/雾都孤儿.jpg class=shadow>','4-7','查尔斯·狄更斯'];
content[61]=['58、傲慢与偏见','<img src=./bookcover/傲慢与偏见.jpg class=shadow>','4-8','奥斯丁'];
content[62]=['59、哈姆雷特','<img src=./bookcover/哈姆雷特.jpg class=shadow>','4-9','威廉·莎士比亚'];
content[63]=['60、鲁宾孙漂流记','<img src=./bookcover/鲁宾孙飘流记.jpg class=shadow>','4-10','狄福'];
content[64]=['61、名利场','<img src=./bookcover/名利场.jpg class=shadow>','4-11','萨克雷(Thackeray,W.M.)'];
content[65]=['62、威尼斯商人','<img src=./bookcover/威尼斯商人.jpg class=shadow>','4-12','莎士比亚'];
content[66]=['63、蝴蝶梦','<img src=./bookcover/蝴蝶梦.jpg class=shadow>','4-13','达夫妮·杜穆里埃'];
content[67]=['十大禁书'];
content[68]=['64、世界十大禁书简介','<img src=./bookcover/世界十大禁书.jpg class=shadow>','5-1','百度百科'];
content[69]=['65、儿子与情人','<img src=./bookcover/儿子和情人.jpg class=shadow>','5-2','【英】戴.赫.劳伦斯'];
content[70]=['66、洛丽塔','<img src=./bookcover/洛丽塔.jpg class=shadow>','5-3','【美】弗拉基米尔·纳博科夫'];
content[71]=['67、情欲之网','<img src=./bookcover/情欲之网.jpg class=shadow>','5-4','【美】享利·米勒'];
content[72]=['68、查太莱夫人的情人','<img src=./bookcover/查太莱夫人的情人.jpg class=shadow>','5-5','【英】戴.赫.劳伦斯'];
content[73]=['69、金瓶梅传奇','<img src=./bookcover/金瓶梅传奇.jpg class=shadow>','5-6','郭戈'];
content[74]=['70、恋爱中的女人','<img src=./bookcover/恋爱中的女人.jpg class=shadow>','5-7','【英】戴.赫.劳伦斯'];
content[75]=['71、娜娜','<img src=./bookcover/娜娜.jpg class=shadow>','5-8','【法】艾米尔·左拉'];
content[76]=['72、女人十曰谈','<img src=./bookcover/女人十曰谈.jpg class=shadow>','5-9','【前苏联】 里娅·沃兹涅先斯卡娅'];
content[77]=['73、生命中不能承受之轻','<img src=./bookcover/生命中不能承受之轻.jpg class=shadow>','5-10','【捷克】米兰·昆德拉'];
content[78]=['74、失乐园','<img src=./bookcover/失乐园.jpg class=shadow>','5-11','【日】渡边淳一'];
content[79]=['其他'];
content[80]=['75、奥德赛','<img src=./bookcover/奥德赛.jpg class=shadow>','6-1','【古希腊】荷马'];
content[81]=['76、百年孤独','<img src=./bookcover/百年孤独.jpg class=shadow>','6-2','【哥伦比亚】马尔克斯'];
content[82]=['77、忏悔录','<img src=./bookcover/忏悔录奥古斯丁.jpg class=shadow>','6-3','【古罗马】奥古斯丁'];
content[83]=['78、荆棘鸟','<img src=./bookcover/荆棘鸟.jpg class=shadow>','6-4','【澳】考琳·麦卡洛'];
content[84]=['79、牛虻','<img src=./bookcover/牛虻.jpg class=shadow>','6-5','【爱尔兰】伏尼契'];
content[85]=['80、少年维特的烦恼','<img src=./bookcover/少年维特的烦恼.jpg class=shadow>','6-6','【德】歌德'];
content[86]=['81、苏菲的世界','<img src=./bookcover/苏菲的世界.jpg class=shadow>','6-7','【挪威】乔斯坦·贾德'];
content[87]=['82、唐·吉诃德','<img src=./bookcover/唐吉诃德.jpg class=shadow>','6-8','【西班牙】塞万提斯·萨维德拉'];
content[88]=['83、希腊神话故事','<img src=./bookcover/希腊神话故事.jpg class=shadow>','6-9','【德】施瓦布'];
content[89]=['84、雪国','<img src=./bookcover/雪国.jpg class=shadow>','6-10','【日】川端康成 著 叶渭渠 译'];
content[90]=['85、一千零一夜','<img src=./bookcover/一千零一夜.jpg class=shadow>','6-11','解传广 王秀英 译'];
content[91]=['86、尤利西斯','<img src=./bookcover/尤利西斯.jpg class=shadow>','6-12','【爱尔兰】乔伊斯'];
content[92]=['尤利西斯注释文件','<img src=./bookcover/注释文件.jpg class=shadow>','6-13','【爱尔兰】乔伊斯'];
var i = 0
var end = content.length;
document.write("<table width=100% border=0 cellspacing=0 cellpadding=0>");
while(i != end)
{
document.write("<tr>");
for(nn = 1;nn <= 3;nn++)
{
if (i == end)
{
if(nn == 1) break;
else document.write("<td class='tablebody1' align='middle' style='width:25%'> </td>");
}
else
{
if (content[i][2] == undefined)
{
if(nn==1)
{
document.write("<td colspan='4' align='center' valign='middle' style='height:32;font-size:20px;color:white' background='bookcover/book_mj_002.gif'><strong>"+content[i][0]+"</strong></td>");
i++
nn=5
}
else
{
document.write("<td style='width:25%;'> </td>");
}
}
else
{
document.write("<td align='middle' style='width:25%;padding:8px'><table width=180 border=0 cellspacing=0 cellpadding=5 style='background-color:#FFFFFF'><tr><td height=32px align=center valign='middle' style='font-size:18px;font-weight:bold;border:dotted 1px #FB7E2E'>"+content[i][0]+"</td></tr>");
document.write("<tr><td align='middle' style='border:dotted 1px #FB7E2E'><a href=/login title="+content[i][0]+">"+content[i][1]+"</a></td></tr></table>");
document.write("</td>");
i++
}
}
}
document.write("</tr>");
}
document.write("<td colspan='4' align='middle' style='height:32;font-size:20px;color:white' background='bookcover/book_mj_002.gif'><strong>END</strong></td></tr></table>");
</script>
</td>
</tr>
</table>
</body>
</html>
python 完整源码如下
# -*- coding: utf-8 -*-
#!/usr/bin/python
from bottle import run,route,template,request,response,static_file
import os
def check_login(username, password):
if username == '789' and password == '789':
return True
else:
return False
@route('/')
def main():
currentPath=os.path.dirname(os.path.realpath(__file__)) #获取当前路径
return static_file(currentPath+"/main.html",root=currentPath,charset="gbk")#,download=True
@route('/<path:path>')
def path(path):
currentPath=os.path.dirname(os.path.realpath(__file__)) #获取当前路径
print(path)
data = static_file(currentPath+"/"+path,root=currentPath,charset="gbk") #,download=True
return data
@route('/login')
def login():
return '''<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg') no-repeat;
background-size: 100%130%;
}
#login_box {
width: 20%;
height: 400px;
background-color: #00000060;
margin: auto;
margin-top: 10%;
text-align: center;
border-radius: 10px;
padding: 50px 50px;
}
h2 {
color: #ffffff90;
margin-top: 5%;
}
#input-box {
margin-top: 5%;
}
span {
color: #fff;
}
input {
border: 0;
width: 60%;
font-size: 15px;
color: #fff;
background: transparent;
border-bottom: 2px solid #fff;
padding: 5px 10px;
outline: none;
margin-top: 10px;
}
button {
margin-top: 50px;
width: 60%;
height: 30px;
border-radius: 10px;
border: 0;
color: #fff;
text-align: center;
line-height: 30px;
font-size: 15px;
background-image: linear-gradient(to right, #30cfd0, #330867);
}
#sign_up {
margin-top: 45%;
margin-left: 60%;
}
a {
color: #b94648;
}
</style>
</head>
<body>
<div id="login_box">
<h2>登录页面</h2>
<form action="/login" method="post">
<input name="username" type="text" placeholder="请输入用户名">
<input name="password" type="password" placeholder="请输入密码">
<button type="submit">登录</button>
</form>
</div>
</body>
</html>
'''
@route('/login', method='POST')
def do_login():
# 第一种方式
# username = request.forms.get('username')
# password = request.forms.get('password')
#第二种方式
postValue = request.POST.decode('utf-8')
username = request.POST.get('username')
password = request.POST.get('password')
if check_login(username, password):
return '''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>less01</title>
</head>
<body>
<script>
window.οnlοad=function(){alert("登录成功")}
</script>
登录成功<a href="/">返回首页
</body>
</html></a>'''
else:
return '''<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>less01</title>
</head>
<body>
<script>
window.οnlοad=function(){alert("登录失败 账号或密码输入不对")}
</script>
登录失败账号或密码输入不对<a href="/">返回首页</a>
</body>
</html>'''
run(host='127.0.0.1', port=8888, debug = True, reloader = True)
执行文件 在浏览器输入 http://127.0.0.1:8888/
显示效果如下