前端开发的正确姿式——各类文件的目录结构规划及引用

时间 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;}

sub.css Code