一步步教你学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',再次刷新下页面是否是就正常了。

数据库

TODO: ..