一步步教你學web開發

時間 2019-11-17

標籤步步 web 開發欄目 HTML 简体版

原文原文鏈接

前提

在閱讀本文以前，我先假設你對目前的web開發知道了js，python，json，sql是什麼，什麼叫後端，什麼又是前端。javascript

文章中還涉及到了一些經常使用的工具，請提早準備好css

簡介

這篇文章將會用當下比較流行的技術，帶領你作一個具備網址導航功能的web網站，step by step.html

web開發是這幾年發展的最快的幾個行業，2014，2015，2016這幾年我能感受的到web開發技術在發生着翻天覆地的變化。nodejs出現了，js開始能夠寫後端了，前端也出現了編譯代碼的概念，數據渲染也從後端轉移到了前端，後端開始專一於API的編寫，等等。還有不少。文章中可能會順帶說起一些個人我的喜歡開發工具，以及開發習慣。前端

開始開發

作好web開發是一個須要精力集中起來，把各類東西在大腦中拼接起來。一旦你被什麼東西干擾了，可能須要重來一遍了。因此第一步應該就是排除干擾源。把桌子上無關的東西統統收起來，多則惑，少則明。網絡上的那些干擾源也須要儘可能的排除，無用的聊天軟件，該關閉的都關閉了。java

網站草圖設計

第一步仍是須要用到最原始的紙和筆，將咱們心中設想的網址導航用草圖的方式畫出來。（PS:有人問，爲何不用電腦畫圖，其實不用電腦是由於電腦上的信息太多了，經常干擾思路)node

草圖出來以後，檢查下，最好再找我的交流下，看看是否合理。python

前端數據結構設計

先建立一個工做目錄，之後咱們全部的代碼都保存在了這個目錄下。jquery

for example: mkdir -p /e/workspace/demo-navgit

而後就能夠開始數據結構的設計了。前端使用的通用格式是json，暫時也沒有什麼更好的格式。（PS: 不要跟我提xml）數據結構須要明確那些地方是變化的數據。這裏變化的數據有標題，連接這兩個部分程序員

到這個地方就須要打開一個編輯器了，我比較喜歡用Sublime Text3或者用notepad++，再或者是editplus,不過千萬不要用電腦上那最古老的notepad

咱們用純手工的方式，把網上草圖上用到的動態數據描寫出來

[
    {
        "title": "經常使用",
        "links": [
            {
                "id": 1,
                "name": "百度",
                "href": "https://www.baidu.com",
                "logo": "/logo/1.ico"
            },
            {
                "id": 2,
                "name": "谷歌",
                "href": "https://www.google.com",
                "logo": "/logo/2.ico"
            }
        ]
    }
]

也就是說，咱們只須要前端可以返回這樣結構的數據就夠了。數據渲染咱們所有都放在前端。

把json數據保存到當前工做目錄下，命名爲nav.json，後面咱們會用到

後端初步設計

工欲善其事必先利其器，先介紹幾個比較經常使用的工具，實際上咱們確定會用到

安裝bower

bower是nodejs的一個命令行工具，有了它，流行的一些前端庫就能夠很方便的管理起來了。

npm install -g bower

執行完命令後，bower就能夠在命令行上使用了。（若是提示npm沒有找到的話，說明node沒有安裝正確）

在咱們的工做目錄下執行bower init建立bower.json配置文件（一路回車就行了）

建立一個文件.bowerrc,內容爲(PS: 先不要問爲何，照作了就行了，之後慢慢就明白了)

{
    "directory": "./static/components"
}

執行命令 bower install --save bootstrap angularjs，執行完後你會發現，當前這個目錄下面忽然多出了一個文件夾 static,繼續打開，你會發現bootstrap庫和angularjs庫已經安裝到static這個目錄下了

咱們這裏提到了bootstrap，這個庫幫咱們定義了一些頗有用的css，是的咱們只用寫很好的html代碼，就能夠作出一個不錯的網站。

angularjs則是咱們在渲染前端頁面時須要用到的一個庫，學會些基礎功能其實很簡單。

PS: 程序員寫程序經常會沒有時間概念，寫的時候，太陽該出來，而後一擡頭太陽就下山了。其實這不是一個好習慣，連續的碼代碼對身體並很差，拿出手機設置個定時器，25分鐘到了，就該起來休息休息了。5分鐘後，繼續幹活。注：這很重要。

安裝livereload

打開命令行，進入這個目錄下。（PS:但願你已經安裝過python了）,咱們接着安裝一個python命令行工具 livereload

pip install livereload

接着安裝一下livereload的Chrome插件

安裝livereload是如此的必要，一般來講在編譯完一個網頁以後，咱們須要在去手動刷新一下網頁，但有了livereload，這一切就自動化了，很是節省時間的一個好工具。

安裝完livereload以後，就能夠寫寫網頁了。

新建一個index.html文件，內容

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'/>
  <title>Nav</title>
  <link rel="stylesheet" type="text/css" href="/static/components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1>網址導航</h1>
      <div class="panel panel-default">
        <div class="panel-heading">
          經常使用
        </div>
        <div class="panel-body">
          <ul class="link-list">
            <li class="link-item">
              <a href="https://www.baidu.com">百度</a>
            </li>
            <li class="link-item">
              <a href="https://www.google.com">谷歌</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

安裝了sublime text的一些插件以後速度仍是挺快的。一開始可能須要翻看下Bootstrap3的一些文檔，不過以後寫的多了，也就會記住了。

寫完以後效果大概是這個樣子的

使用json數據渲染前端頁面

咱們立刻就要用到咱們一開始提到的nav.json文件，以及以前用bower工具安裝的angularjs

修改index.html的內容爲

<!DOCTYPE html>
<html ng-app='app'>
<head>
  <meta charset='utf-8'/>
  <title>Nav</title>
  <link rel="stylesheet" type="text/css" href="/static/components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container" ng-controller='MainCtrl'>
  <div class="row">
    <div class="col-md-12">
      <h1>網址導航</h1>
      <div class="panel panel-default" ng-repeat='nav in navs'>
        <div class="panel-heading">
          {{nav.title}}
        </div>
        <div class="panel-body">
          <ul class="link-list">
            <li class="link-item" ng-repeat='link in nav.links'>
              <a href="{{link.href}}">{{link.name}}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="/static/components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/static/components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/components/angular/angular.min.js"></script>
<script type="text/javascript" src="/static/js/index.js"></script>
</body>
</html>

而後在static/js目錄下新建一個index.js文件，內容爲

var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $http){
    $scope.navs = [];
    $http({
        method: 'GET',
        url: '/nav.json'
    }).then(function(res){
        $scope.navs = res.data;
        console.log(res.data)
    })
})

是否是感受一會兒增長了好多東西，主要修改的地方主要有3快。

html的標籤修改，增長了一個ng-app
```
<html ng-app='app'>
```

連接部分的修改,增長了ng-controller,另外還增長了ng-repeat. 這個部分完成了從json到html的轉化，有點相似於一種模版語言。更多的內容能夠去angularjs中文網瞭解

<div class="container" ng-controller='MainCtrl'>
  <div class="row">
    <div class="col-md-12">
      <h1>網址導航</h1>
      <div class="panel panel-default" ng-repeat='nav in navs'>
        <div class="panel-heading">
          {{nav.title}}
        </div>
        <div class="panel-body">
          <ul class="link-list">
            <li class="link-item" ng-repeat='link in nav.links'>
              <a href="{{link.href}}">{{link.name}}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

增長的兩個js文件

<script type="text/javascript" src="/static/components/angular/angular.min.js"></script>
<script type="text/javascript" src="/static/js/index.js"></script>

裏面的index.js文件，負責從後臺請求nav.json數據，並通知網站前端去渲染數據。

用python實現後臺代碼

這裏不打算使用django，由於它過重量級了。最終考慮下，仍是選擇了Flask+Flask的一個插件Flask-Restful

安裝方法依然是命令行

pip install flask flask-restful

接下來就能夠進行服務端的開發了，是否是有點小激動

建立一個app.py文件，內容是

# coding: utf-8

import json
from flask import Flask, render_template
from flask_restful import Resource, Api

app = Flask(__name__)
app.jinja_env.variable_start_string = '%%'
app.jinja_env.variable_end_string = '%%'

api = Api(app)

class Navigation(Resource):
    def get(self):
        return json.load(open('nav.json'))

api.add_resource(Navigation, '/api/navs')

@app.route('/')
def homepage():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True, port=5000)

建立一個templates目錄，將原來的index.html移動到這個目錄下

以後打開瀏覽器輸入http://127.0.0.1:5000，而後刷新下瀏覽器。是否是發現連接全沒了。爲了找出其中出現的問題，咱們須要藉助Chrome的開發者工具。直接使用快捷鍵F12就能夠打開，而後切換到Console標籤下。這裏我截個圖

這裏能夠看到問題出如今前端訪問的地址不存在。知道緣由就好辦了。打開static/js/index.js修改第6行的url請求地址，改爲

從url: 'navs.json'改爲url: '/api/navs',再次刷新下頁面是否是就正常了。