前端開發的正確姿式——各類文件的目錄結構規劃及引用

時間 2019-11-06

標籤前端開發正確各類文件目錄結構規劃引用简体版

原文原文鏈接

　　首先，要說的是咱們領導總掛在嘴邊的一句話：一入前端深似海。以前沒有接觸過前端，一直不懂這句話的含義，直到最近寫做業改需求的時候才發現，由於web頁面是直接面向客戶的，因此需求的修改都和前端有關，有時候甚至不須要修改後臺的代碼就能夠知足新的需求。忽然對前端工程師的將來表示擔心，於我來講，這些繁瑣的細節性工做我但願始終與其保持安全距離，嘻嘻！css

　　不喜歸不喜，然而python是一門自動化語言，分工不像java開發那樣明確，因此也須要掌握前端的知識，關於前端的知識網上比比皆是，在這裏就很少作贅述，今天想說的仍是我在學習過程當中的一些困擾，面對那些繁瑣的js文件，css文件和html文件，你是否是也和我同樣蒙圈。。。不知道該往哪裏放，不知道目錄結構怎麼安排？如今就來分享一下我從前端同事那裏偷師來的目錄結構和引用方式吧~~~html

初識那些亂七八糟的文件

　　要寫好一個web頁面，必不可少的是html文件，css文件，和js文件。但是這些東西究竟是什麼呢？舉個栗子：html就是一個赤裸裸的人，css則是人的衣服，而js就是一我的的行爲，它支配頁面上的全部動做。咱們寫html，用各類標籤、容器來承裝不一樣的文字、圖片，總之html作的就是把咱們要表達的一股腦的寫在頁面上。可是它們在什麼位置、什麼顏色，好看很差看，就不是html的工做了，這個裝飾頁面的工做就交給了css。有了css和html，咱們的頁面就能夠很好看了，可是再好看的頁面，也不過是一張圖片而已，要讓他們真正動起來，就要依靠js了。好啦，掃盲結束，插播一段廣告：Python之路【第十一篇】前端初識之HTML，具體的html相關知識，見我偶像博客！前端

普通青年——全部的內容都寫在html頁面裏

一直以來，我都乖乖的作普通青年，把全部的東西都寫在html文件裏，這樣的好處是，寫着不亂，一個文件的內容、樣式和全部的行爲都在一塊兒，不須要規劃、也不須要引入。咱們只須要將js的代碼用<script>標籤框起來，css代碼用<style>標籤框起來，html代碼仍是寫在body中，就ok啦~具體格式以下：java

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>主頁</title>
</head>
<script>
    //js代碼
</script>
<style>
   <!--css代碼>
</style>
<body>
   <!--html代碼>
</body>
</html>

文藝青年——優雅的劃分文件

　　儘管是屌絲程序員，可是咱們不能一直low下去呀，感受同事的這種規劃很合理，因此拿來用用。就是這樣，咱們認爲css，js和web頁面用到的圖片都屬於靜態文件，統一放在static下對應的文件夾中，全部的html頁面都放在templates文件夾下。這樣是爲了別人看咱們的頁面清晰，也是爲了之後寫複雜的頁面作準備哦！python

　　那麼問題來了，咱們寫在不一樣文件中的內容，如何在html中使用呢？快來get新技能吧！栗子以下：jquery

<html>
<head>
<meta charset="utf-8" />
<title>用戶登陸</title>
<script src="../static/js/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/sub.css">
</head>
<body>
    <div class="bg">
        <div class="pictrue">
            <img src="../static/img/loginPic.jpg" />
        </div>
        <div class="main">
            <div class="center">
                <div class="administration">用戶登陸</div>
                　　<div class="information">
                    　　<div class="name"><input type="text" placeholder="用戶名" id="name"></div>
                    　　<div class="password"><input type="password" placeholder="密碼" id="password"></div>
                　　</div>
                <div class="submit"><div class="button" id = 'login'>登陸</div></div>
                <a class="jump" target="_blank"; href = "register.html">當即註冊</a>
            </div>
        </div>
    </div>
</body>
</html>

　　我用了上面目錄結構中的login.html文件作栗子，引入的是static/css/文件夾下的sub.css文件，其中link標籤起到了最重要的做用，下面咱們就來解讀一下：程序員

link rel="stylesheet" type="text/css" href="../static/css/sub.css">
link表示連接一個外部樣式表，rel 屬性指示被連接的文檔是一個樣式表，type 屬性規定被連接文檔的MIME 類型，該屬性最多見的 MIME 類型是 "text/css"，該類型描述樣式表。
href就是咱們要引入文件的地址。向上面的目錄結構，我須要從當前login.html文件所在的templates文件夾向上翻一層，而後再依次找到static/css/下面的sub.css文件。
這樣樣式文件就被順利的導入了。

　　仍是用上面目錄結構中的login.html文件作栗子，引入的是static/js/文件夾下的jquery-1.11.1.min.js文件，其中script標籤起到了最重要的做用，下面就來解讀一下：web

<script src="../static/js/jquery-1.11.1.min.js"></script>
script 標籤用於定義客戶端腳本
src屬性指向外部腳本文件,與href的用法大體相同。

　　附上css文件，就能夠擁有一個完整的web登陸頁面啦！安全

/* CSS Document */
*{padding:0px; margin:0px; list-style:none; font-family:"微軟雅黑";}
body{background: #f2f2f2;}
.bg{ width:100%; float:left;}
.main{ margin:0 auto; width:300px;position: absolute;right: 15%; margin-top:15%; height: 300px; background-color:#ffffff; border: 1px solid #cccccc;}
.center{width: 250px; margin: 0 auto;}
.administration{width: 100%; height: 30px; line-height: 30px;color: #3485FB; margin-top: 30px; float: left; font-size: 18px;}
.information{float:left; width:100%;}
.name{background:#fff;width:100%; height:35px; border:2px solid #DCDCDC; border-radius:10px; margin-top:20px;}
.name span{width:45px; height:35px; float:left;}
.name span img{float:left; margin:5px 0 0 8px;}
.name input{ line-height:35px;height:35px;float:left;outline:none; width:201px; border:0; color:#C9C9C9; font-family:"微軟雅黑"; text-indent:5px;}

.password{background:#fff;width:100%; height:35px; border:2px solid #DCDCDC; border-radius:10px; margin-top:20px;}
.password span{width:45px; height:35px; float:left;}
.password span img{float:left; margin:5px 0 0 8px;}
.password input{ line-height:35px;height:35px;float:left;outline:none; width:201px; border:0; color:#C9C9C9; font-family:"微軟雅黑"; text-indent:5px;}

.main .jump{float:right; width:65px; font-size:13px; margin-top:10px;}
.submit{width:100%; float:left; }
.submit .button{ cursor:pointer;font-size:14px; font-weight:bold;width:100%; margin:12px auto; background:#f7f7f7;height:35px; text-align:center; line-height:35px; border:2px solid #0086E0; border-radius:10px;}
.pictrue{float: left;width:400px;height:400px; margin:180px 100px 50px 200px;}