Introduction

最近在开发 senti-weibo Web 的过程中,由于前端知识匮乏,经常卡在简单的常识性问题上,再这样下去是不行的,所以来这里总结一下,也是一个前端小白的前端开发感悟。

前端开发的知识,十分杂乱,要学习的有很多,但是细细想想,各个分支领域的产生,都是前端解耦的过程,每个子领域各司其职。例如 HTML 负责前端的骨架,CSS 负责前端的效果展示,Javascript 负责事件处理,而 DOM 则是 JavaScript 与 HTML/CSS 进行交互的接口,Ajax 负责与服务器进行通信,等等。

前端技术框架梳理

我从一个小白的角度,梳理了我现在用到的一些前端技术和知识点:

前端知识梳理

一个简单的 Django 前端 Template

一个目前我所理解的最普通的前端Demo,由于目前并没有用到特别前卫的技术,例如 React,VUE,所以这个Demo 中都是最基础的知识,其包括 Bootstrap,Ajax 等最基础的知识的应用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<!-- 响应式布局 -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

{% load static %}
<!-- 设置网站的图标 -->
<link rel="shortcut icon" href="{% static 'images/favicon.png' %}"/>

<!-- 加载 css 库 -->
<!-- Loading Bootstrap -->
<link rel="stylesheet" type="text/css" href="{% static 'flat_ui/css/vendor/bootstrap/css/bootstrap.min.css' %}"/>
<!-- Loading loader css, from github -->
<link rel="stylesheet" href="{% static 'css/loaders.css' %}" type="text/css" />
<!-- 自定义的 css -->
<link rel="stylesheet" href="{% static 'css/main.css' %}" type="text/css" />

<title>Senti-Weibo</title>
</head>

<body>
<!-- Static navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="container">

</div>
</div>

<!-- input for sentiment analysis -->
<div class="container">
<form role="form" method="get" onsubmit="return false" action="##" >

</form>
</div>

<footer class="navbar-fixed-bottom">
<div class="container text-center">
©2019
<a href="https://github.com/wansho">wansho</a> &nbsp;
All rights reserved.
苏ICP备18061950号
</div>
</footer>

<!-- 加载脚本 -->
{% load static %}
<!-- Loading Bootstrap -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{% static 'flat_ui/js/vendor/jquery.min.js' %}"></script>
<script src="{% static 'js/loaders.css.js' %}"></script>

<script>
// JQuery 代码
$(document).ready(function(){ // 所有 DOM 加载完成后,执行 Jquery 代码
// 因为我们在当前页面显示结果,暂时考虑用 ajax 替换 form 的提交操作
$("#button_classify").click(function () {
let weibo = $("#input_weibo").val();
if(weibo.length < 4){
$("#classify_result").text(
"Please enter at least three characters"
).addClass("warning_color").css("visibility", "visible");
return;
}
$("#loader").css("visibility", "visible");
$.ajax({
url: "/senti_weibo/classify/",
type: "GET",
dataType: "json", // 是请求后,返回的数据将以json格式显示
data: {
"weibo": weibo
},
success: function (data) {
$("#classify_result").text(data.toString()).addClass("success_color").css("visibility", "visible");
$("#loader").css("visibility", "hidden")
return;
}
});
});
});
</script>
</body>
</html>

总结

前端开发的知识虽然杂乱,但是其主线脉络并不乱,抓住核心的知识,向外拓展即可,我觉得搞 Web 开发,还是有必要把前端的知识系统的学一下的,尤其是 JavaScript,已经实现了前后端通用的语言,其重要性并不比 Python 小