全栈学习之心态爆炸的每一天！！！

因为学习Python，然后呢就学到了Django框架，在B站呢就搜到了“老男孩全栈教程”，还饶有兴趣的学了起来，一开始还是可以接受的，但是随着学习的深入，用到的东西也越来越多，像这个Ajax，jQuery，是真心不会这两个框架，为了能更快地跟上视频的进度，我选择先去学习前端，总的来说，HTML语言还是比较简单的，目前的话已经开始接触到CSS,这个框架总的来说很好用，但是需要掌握的东西还是比较多的，哦对了，在这里要感谢一下pink老师，讲的很好，而且他的视频每个都比较短，他的视频共有388p，我在三天之内爆淦92p，今天还有25p没有看完呢，我会抓紧的(昨晚熬夜到1点），今晚可能还要熬夜了吧。
闲话不说了，跟随着老男孩视频做的一个学院管理（还是得吐槽一下，真的是越来越难了，30分钟的视频我得看一个小时），然后把其中的班级管理的代码承上给各位爷看一下：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>班级列表</title><style>.hide{display: none;}.shadow{position: fixed;left: 0;top:0;right:0;bottom:0;background-color: black;opacity: 0.4;}.modal{z-index: 1000;position: fixed;left:50%;top:50%;height: 300px;width:400px;background-color: white;margin-left: -200px;margin-top:-150px;}.red {color: red;}.word {font-style: normal;font-weight: 700;}a:hover {color: blue;}.text {text-decoration: none;}</style><link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.min.css">
</head><body><h1>班级列表</h1><div><a href="/add_class/" class="text"><i class="fa fa-hand-o-right fa-fw" aria-hidden="true"></i>:&nbsp;添加</a><br/><br/><a οnclick="showModal();" class="word"><i class="fa fa-user-circle-o fa-fw " aria-hidden="true"></i>:&nbsp;对话框添加</a><br/></div><br/><label for="school"><a href="https://www.ytu.edu.cn/" target="_blank" ><i class="fa fa-picture-o  fa-pull-left fa-border" aria-hidden="true"></i>&nbsp;<img src="/static/YTU.jpg" width="200" height="120" title="点击图片跳转至烟台大学官网"></a>
</label><table align="center" border="1" cellpadding="1" cellspacing="0" width="400" height="100"><thead><tr><th>ID</th><th>班级名称</th><th>操作</th></tr></thead><tbody>{% for row in class_list %}<tr><td class="red word">{{ row.id }}</td><td class="word">{{ row.title }}</td><td><a href="/edit_class/?nid={{ row.id }}">编辑</a>|<a οnclick="modelEdit(this);">对话框编辑</a>|<a href="/del_class/?nid={{ row.id }}">删除</a></td></tr>{%  endfor %}</tbody>
</table><div id="shadow" class="shadow hide"></div><div id="modal" class="modal hide"><form method="post" action="/modal_add_class/"><p><p>班级ID</p><input id="id" type="text" name="id"/><p>班级名称</p><input id="title" type="text" name="title"/><span id="errormeg"></span></p><input type="button" value="提交" οnclick="AjaxSend();"/><input type="button" value="取消" οnclick="CancleModel();"/></form></div><div id="editmodal" class="modal hide"><form method="post" action="/modal_edit_class/"><p><h3>对话框编辑（此处更改ID无效）</h3><p>班级ID</p><input id="editId" type="text" name="id"/><span id="errormeg"></span><p>班级名称</p><input id="editTitle" type="text" name="title"/><span id="errormeg"></span></p><input type="button" value="提交" οnclick="EditAjaxSend();"/><input type="button" value="取消" οnclick="CancleModel();"/></form></div><script src="/static/jquery-3.5.1.js"></script><script>function showModal() {document.getElementById('shadow').classList.remove('hide');document.getElementById('modal').classList.remove('hide');}function CancleModel() {document.getElementById('shadow').classList.add('hide');document.getElementById('modal').classList.add('hide');document.getElementById('editmodal').classList.add('hide');}function AjaxSend() {$.ajax({url:'/modal_add_class/',type:'POST',data:{"title":$('#title').val(),"id":$("#id").val()},success:function (data) {console.log(data);if(data=='Ok'){location.href="/classes/";}else{$("#errormeg").text(data);}}})}function modelEdit(self) {document.getElementById('shadow').classList.remove('hide');document.getElementById('editmodal').classList.remove('hide');/*  1、获取当前标签2、当前父标签，再找上方标签3、获取班级当前行和名称，复制到编辑对话框*/var row = $(self).parent().prevAll();{#获取内容#}var context = $(row[0]).text();var id = $(row[1]).text();$("#editTitle").val(context);$("#editId").val(id);}function EditAjaxSend() {var nid = $('#editId').val();var context = $("#editTitle").val();$.ajax({url:'/modal_edit_class/',type: 'POST',data:{'nid':nid,"context":context},success:function (arg) {arg = JSON.parse(arg);if(arg.status){location.reload();}else{alert(arg.message);}}})}
</script>
</body>
</html>

tips：没有找到HTML格式，就只能用CSS格式了
网页如下图：

在这里呢自己也用自己学到一些前端，稍微修改了一下，还有font-Awesome的一些图标修饰了一下（做的也不好看，主要是为了联系一下吧）。

通过这一段时间的学习，我逐渐明白了全栈的含义吧，就是后台去数据库拿（筛选）数据，将数据传给前端，前端再用html将数据用文字，表格或者图片的形式呈现给用户，在这个过程还有很多细节的地方，比如后台要将前端传回的数据进行整理放入数据库等等吧，我对于全栈的理解就是这些吧，才疏学浅，也纯属于在胡扯吧。

数据库 <–> 后台 <–> 前端，这个过程是双向的，三者缺一不可，继续努力吧，明后天我买的Django的书也应该差不多到了，目前所有编程的知识几乎都是自学的，学这些东西只是看视频我觉得效果都挺一般的，所以学到那些地方都是买书配合视频区学习，最近攒的博客但就是这些吧，主要是为了吐槽一下，快七点了，还有几个任务没有完成呢，就先写到着吧，等前端学完了就把html和css，后面好像还会学js(应该就是jQuery吧），到时都像亨利一下再把笔记携程博客。

最后把学院管理的其他几个子页面截图放上来：
1、添加班级：

2、对话框添加班级

3、鼠标放到图标上会出现提示：“点击图片跳转至烟台大学官网”，当然，点击之后是会真的跳转哦

4、点击表格的编辑

5、点击表格的对话框编辑

全栈学习之心态爆炸的每一天！！！相关推荐

python学全栈还是运维_Python全栈学习——Python基础及Web开发
原标题:Python全栈学习--Python基础及Web开发在DevOps火热的敏捷行业中,无论是开发还是运维都在互联网快速发布下练就了一身的本领,微服务下的敏捷开发体系及智能运维体系都在实战中逐步 ...
python全栈要学什么_python全栈要学什么 python全栈学习路线
IT行业,技术要比学历.年龄.从业经验更为重要,技术水平直接决定就业薪资,想要学好python,首先要先了解精通Python语言基础.Python web开发.Python爬虫.Python数据分析这 ...
python全栈计划_Python 全栈学习视频教程，包含了从 0-99天的全栈学习计划，估计可以学习 1024 小时。...
今天跟大家推荐某大厂出 Pthon\Mysql\Linux 神器,据说是大厂内部大神分享的资料,不论是资料的详细程度和质量,都非常稀有! 我们知道,不论是高级开发和运维工程师,Linux 命令熟练程度 ...
（零基础）入门python学习四步骤，附上Python全栈学习路线大刚！
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理以下文章来源于腾讯云作者:python学习教程 ( 想要学习Python?Pyt ...
人工智能全栈学习路线之人工智能概览(百度云智学院学习笔记)
最近参加了百度云智学院的AI学习课程,下面是课程链接: 人工智能全栈学习路线课程内容通俗易懂,下面是我在学习的过程中整理的笔记 AI趣味课堂人工智能基础知识计算机视觉自然语言处理语音任务人 ...
python全栈学习路线
人工智能时代,想要从事编程行业,最佳的学习语言是什么?当然是Python!Python入门简单.功能强大,已成为各大企业首选开发语言,也吸引了无数有志学子投身学习.下面是小编为您整理的关于python ...
流弊！《Python全栈学习手册》开放下载了
本次给大家分享一个质量非常高的<Python全栈学习手册>. 这份资料非常全面,从 Python 基础.到 web 开发.数据分析.机器学习.深度学习.金融量化统统都有,该手册是 HTM ...
2020年新版PHP+H5全栈学习路线图（内含大纲+视频+工具+书籍，持续更新中。。。。。.)
写在前面:(本帖干货较多耐心阅读收获颇丰,图片点击可放大) 传智播客黑马程序员作为一个IT学习平台,历经13年的成长,免费分享视频教程长达10万余小时,累计下载量超3000万次,受益人数达千万.202 ...
字节码学院全栈学习笔记
今天正式加入字节码学院,努力学习Java全栈,争取在6个月内称为一个了解软件行业的人,本人在这里立铁为证: 搭建vue 组件化开发环境时,需要安装node.js =================== ...

全栈学习之心态爆炸的每一天！！！

全栈学习之心态爆炸的每一天！！！相关推荐

最新文章

热门文章