python搭建web全栈_python web full stack

一个Python服务器和一个React前端
1、Node.js
Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

Node.js 安装配置__Node.js v4.4.3 LTS(长期支持版本)
Ubuntu 上安装 Node.js源码安装
sudo git clone https://github.com/nodejs/node.git
修改目录权限：
sudo chmod -R 755 node
使用 ./configure 创建编译文件
cd node
sudo ./configure
sudo make
sudo make install

Ubuntu apt-get命令安装
sudo apt-get install nodejs
sudo apt-get install npm

2、NPM 使用介绍
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

如果你安装的是旧版本的 npm，可以很容易得通过 npm 命令来升级，命令如下：
sudo npm install npm -g
使用 npm 命令安装模块
npm install
全局安装与本地安装
npm install express # 本地安装(local)
npm install express -g # 全局安装(global)
如果出现以下错误：
npm err! Error: connect ECONNREFUSED 127.0.0.1:8087
解决办法为:
npm config set proxy null
卸载模块
npm uninstall express
更新模块
npm update express
搜索模块
npm search express
创建模块

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (node_modules) runoob                   # 模块名
version: (1.0.0) 
description: Node.js 测试模块(www.runoob.com)  # 描述
entry point: (index.js) 
test command: make test
git repository: https://github.com/runoob/runoob.git  # Github 地址
keywords: 
author: 
license: (ISC) 
About to write to ……/node_modules/package.json:      # 生成地址

{
  "name": "runoob",
  "version": "1.0.0",
  "description": "Node.js 测试模块(www.runoob.com)",
  ……
}


Is this ok? (yes) yes

以上的信息，你需要根据你自己的情况输入。在最后输入 "yes" 后会生成 package.json 文件。
接下来我们可以使用以下命令在 npm 资源库中注册用户（使用邮箱注册）：

$ npm adduser
Username: mcmohd
Password:
Email: (this IS public) mcmohd@gmail.com

接下来我们就用以下命令来发布模块：

$ npm publish
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

3、初始项目设置

$ cd fullstack_template/static
$ npm init
在初始化的过程中可以接受默认设置，但是你最好填写自己的程序名称和Git库等参数，结束后会自动在你的static目录下生成一个名为package.json 的文件。

package.json文件有如下几个作用：
跟踪所有的依赖项及其版本。
它可是使其他开发人员了解你的项目，比如应用的名称、说明、所有者和所在存储库的位置。
可以非常容易的通过npm进行自动化安装、运行和更新。
1
2
3
4
5
6
7
8

4、安装Webpack：

项目下安装一份局域的
npm i webpack –save-dev
要使用Webpack，我们需要添加一个 Webpack 配置文件。这个配置告诉 Webpack 在哪里可以找到 JavaScript 和 React 文件，以及在哪里放置生成的JavaScript包。

在static目录中添加一个名为webpack.config.js的文件

const webpack = require('webpack');
const config = {
    entry:  __dirname + '/js/index.jsx',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js',
    },
    resolve: {
        extensions: ['.js', '.jsx', '.css']
    },
};
module.exports = config;
1
2
3
4
5
6
7
8
9
10
11
12

添加运行命令
向package.json文件中添加一些运行命令会是你的开发过程更加顺畅，在自己的package.json 文件中添加一些build, dev-build 和 watch 命令。
build用于构建生产环境版本, dev-build用于开发时的构建版本，watch的作用和dev-build类似，只不过可以自动监视项目文件是否修改，并且自动重新构建被修改的部分，你只需要刷新浏览器就可以看到改动后的结果。
自动化构建你的项目还有一个好处，那就是你不会耗费时间去思考为什么修改了代码却看不到效果，一般遇到这种情况纯粹是因为你忘记了构建它们！

{
  "name": "FullStackTemplate",
  "version": "1.0.0",
  "description": "A Template for creating a Full Stack Web Application using Python, NPM, Webpack and React",
  "main": "index.js",
  "scripts": {
    "build": "webpack -p --progress --config webpack.config.js",
    "dev-build": "webpack --progress -d --config webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --progress -d --config webpack.config.js --watch"
  },
  "keywords": [
    "fullstack",
    "template",
    "python",
    "react",
    "npm",
    "webpack"
  ],
  "author": "Angela Branaes",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^3.0.0"
  }
}
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

5、添加Babel支持
Babel能够允许我们使用最新的JavaScript特性编码，即便是浏览器还没有支持它们。通过安装ES2015和react presets，Babel能够把使用 Javascript 新特性和 React jsx 的代码转换为与当前浏览器兼容的 JavaScript 语法。

npm i babel-core babel-loader babel-preset-es2015 babel-preset-react –save-dev
添加Babel presets到package.json文件中：

"babel": {
  "presets": [
    "es2015",
    "react"
  ]
},
1
2
3
4
5
6

在 Webpack 的配置中添加一条 babel-loader 规则。注意，我们在规则中排除了node_modules。这可以保证 Babel 不会尝不会对 node 模块进行转换，从而不会影响到node程序的加载速度。

module: {
  rules: [
    {
      test: /\.jsx?/,
      exclude: /node_modules/,
      use: 'babel-loader'
    }
  ]
}
1
2
3
4
5
6
7
8
9

6、创建 index.jsx 和 index.html

<!--index.html -->
<html>
  <head>
    <meta charset="utf-8">
    <!-- Latest compiled and minified bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <title>Creating a Full-Stack Python Application with NPM, React.js and Webpack</title>
  </head>
  <body>
    <div id="content" />
    <script src="dist/bundle.js" type="text/javascript"></script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

在static/js目录下创建一个index.jsx文件，并添加下面的代码：
alert(“Hello World!”);

7、安装React
npm install react react-dom –save-dev
npm install react-bootstrap –save-dev

用一个简单的 React 应用替换掉前面的index.jsx，并让它加载一个创建在单独的 App.js 文件中的 React 类。

// index.jsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("content"));
1
2
3
4
5

React 类需要在不同的React源码文件中做导出，以方便后面的使用。通常每个文件中只写一个类，并且导出。

// App.jsx
import React from “react”;
export default class App extends React.Component {
  render () {
    return <p> Hello React!</p>;
  }
}
1
2
3
4
5
6
7

8、配置Python服务
一）安装Virtualenv
virtualenv通过创建独立Python开发环境的工具, 来解决依赖、版本以及间接权限问题。
virtualenv创建一个拥有自己安装目录的环境, 这个环境不与其他虚拟环境共享库, 能够方便的管理python版本和管理python库。

sudo pip install virtualenv

二）安装Flask
Flask是小型Python应用的最佳选择之一。“微框架（microframework）”可以使你在短短几分钟内轻松快速的使一个服务跑起来。对于大型应用和某些专业领域，企业通常会使用 Pyramid 或 Django。如果你想在自己的环境中拥有很大的灵活性和能够自定义配置的特性，Pyramid是一个不错的选择。Django则提供了一个全功能的Web框架，同时使你不必为应用的配置花费太多的时间，比如在数据库配置等方面。

sudo pip install flask
在virtualenv 环境下创建flask，防止版本冲突。

9、从服务器返回随机语言的“Hello”
每当我们与服务器上的 /hello 端点进行通话时，为了能够请求一个随机的欧洲语言“Hello”，必须更改 server/server.py 文件中的功能。每次调用它时，都不会返回静态的“Hello World”，而是从“Hello”列表中选择一个随机语言的“Hello”。

import random
def get_hello():
  greeting_list = [‘Ciao’, ‘Hei’, ‘Salut’, ‘Hola’, ‘Hallo’, ‘Hej’]
  return random.choice(greeting_list)
1
2
3
4

这个函数定义了一个欧洲语言的“hello”列表， 然后我们调用这个函数时，使用 random.choice()从列表中随机选择一个项目。

@app.route("/hello")
def hello():
  return get_hello()
1
2
3

10、组件化的重要性 – 在 React 中创建一个Hello类

npm install react-bootstrap –save-dev
React是为组件化而设计的。这意味着它是用多个较小的部分来构建你的网站的。就像玩乐高一样，可以轻松地将一个组件替换成另外一个，也可以复用组件，这也能帮助其他开发人员了解你的代码。我们应该努力的编写可理解的代码，因为这样可以使我们的程序更容易维护和扩展。

考虑到组件化，我们创建一个 Hello 类来处理我们网页上的问候语。该类将从服务器上的 /hello 端点点获取一个 “Hello” ，并将其显示给用户。 它也应该有一个“name”参数，这样就可以向某个具体的人进行问候。

通过更改 React App 类中的render函数，使其调用Hello类，我们就可以很快的完成功能，而不是使用旧的代码。传递名称“Rimini”作为参数。出于结构化的目的，我们将把Hello类放在一个 PageHeader 中。

export default class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {greeting: 'Hello ' + this.props.name};
    // This binding is necessary to make `this` work in the callback    
    this.getPythonHello = this.getPythonHello.bind(this);
  }
}
1
2
3
4
5
6
7
8

在 React 中有一种叫做组件和道具的东西。 Props是创建时传递给构造函数的不可变参数。 道具是公开的，修改他们将违反 React 的基本使用原则。状态是内部的，可变的。每次更新状态时，都会在UI中重新展现。如果希望更深入地了解其运作方式，我强烈建议你阅读React文档中有关生命周期和状态的部分。
我们将在Hello类中添加一个名为personaliseGreeting() 的函数。 当我们点击按钮获得一个新的问候语时，它将会处理网页上的问候语的更新操作。 请注意，我们使用this.setState()与名为“greeting”的key。你必须使用这个语法才能让 React 自动刷新网页上的“greeting”状态。

personaliseGreeting(greeting) {
  this.setState({greeting: greeting + ' ' + this.props.name + '!'});
}
1
2
3

为了让问候语出现在页面上，必须在render函数中调用“{this.state.greeting}”。我们还必须添加一个带有回调函数的按钮，这个函数叫做getPythonHello()，我们很快就会实现它。这个函数在调用使用Python编写的后端时，将会得到一个新的“Hello”。

render () {
  return (
    <h1>{this.state.greeting}</h1>
    <hr/>
    <Button bsSize="large" bsStyle="danger" onClick={this.getPythonHello}>
      Say Hello!
    </Button>
  )
}
1
2
3
4
5
6
7
8
9

因为JavaScript中的类方法没有做默认绑定，所以当我们想在函数回调中使用“this”时，就必须在构造函数中创建一个绑定。否则“this”将会是 undefined 的。 这适用于在 JavaScript 中调用without() 的情况。一个典型的例子就是 render() 中的 “onClick = {this.getPythonHello}”。

11、安装jQuery依赖关系：
npm install jquery –save-dev
将 jQuery 依赖添加到要使用的 React 文件中，也就是 Hello.jsx 中。应该将此依赖添加到 Hello 类的定义前面。
var $= require(‘jquery’); 将查询依赖添加到React文件中意味着可以在自己的React代码中使用标准的 jQuery 函数，只要它们以我们刚刚定义的“$”变量开始。下面让我们用它来从服务器获取一个“Hello”。
我们将使用 HTTP 协议的 GET 请求获取信息。GET 实质上是HTTP请求的“只读”模式。可以用来获取信息，但是不能要求服务器更改它。

getPythonHello() {
  $.get(window.location.href + 'hello', (data) => {  
    console.log(data);
    this.personaliseGreeting(data);
  });
}
1
2
3
4
5
6

12、使 Webpack 能够处理 CSS
安装下列插件：
css-loader
style-loader
extract-text-webpack-plugin
安装 CSS 相关的加载器 (They need to be installed locally, without -g)
npm install style-loader css-loader –save-dev

在你的webpack.config.js文件的 modules.rules 部分添加下面的CSS规则：

{
  test: /\.css$/,
  use: ExtractTextPlugin.extract({
         fallback: 'style-loader',
         use: 'css-loader',
       })
},
1
2
3
4
5
6
7

将ExtractTextPlugin插件添加到 webpack.config.js（如果您感到困惑，请查看我的 webpack 文件）。注意，在创建时，需要将捆绑的CSS文件名传给此插件。我们将调用文件’styles.css’。

plugins: [ new ExtractTextPlugin('styles.css') ]
1

最后，我们需要将 styles.css 包添加到index.html中，以确保样式被加载。将以下行添加到你的index.html文件中的 head 部分（可以参考我的代码）：

<link rel="stylesheet" href="dist/styles.css">
1

将在css文件夹中创建一个名为fullstack.css 的文件。

.header-contents h1 { 
    font-size: 120px; 
    font-weight: 300;
}
1
2
3
4

创建 fullstack.css 文件之后，我们需要将它添加到使用规则的 React 组件中，这样它们才能生效。由于标题在 App.jsx 中定义，所以需要添加以下代码：

require('../css/fullstack.css');
1

13、添加背景图
Webpack 本身并不理解图像的概念。因此，我们还需要添加一个可以在Web应用程序中使用它们的加载程序。我们需要安装名为“file-loader”的loader。
npm install file-loader –save-dev
将file-loader规则添加到 webpack.config.js 文件中的modules.rules部分：

{
  test: /\.(png|svg|jpg|gif)$/,
  use: 'file-loader'
}
1
2
3
4

将要使用的图像添加到images/ folder。将其命名为“header.jpg”。
为了能够使图像成为网页头部的背景，我们需要将其作为背景图像添加到 fullstack.css 文件的页眉部分。

.page-header {
  background-image: url('../images/header.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
1
2
3
4
5
6

接下来要做的是把图像加载到使用它的 React 文件中。如果没有在 React 中显式加载图片，Webpack 将不会棒的它，也不会把它显示在页面上。这种行为不是很直观，在我第一次在自己的应用中添加一个背景图像时，曾经犯过这个错误。

在App.jsx中进行如下更改：

import HeaderBackgroundImage from '../images/header.jpg';

将此函数添加到你的App类:
addHeaderImg() {
  let headerBg = new Image();
  headerBg.src = HeaderBackgroundImage;
}

将下列代码添加到render()函数中：
{this.addHeaderImg()}
1
2
3
4
5
6
7
8
9
10

参考备注：
http://python.jobbole.com/88394
http://www.runoob.com/nodejs/
https://webpack.github.io/docs/tutorials/getting-started/#development-server
https://www.zfanw.com/blog/webpack-tutorial.html
http://www.jianshu.com/p/08c657bd34f1