一个小时搭建一个全栈 Web 应用框架

时间：2022-08-26 11:57:59

把想法变为现实的能力是空想家与实干家的区别。不管你是在一家跨国公司工作，还是正在为自己的创业公司而努力，那些有能力将创意转化为真正产品的人，都具有宝贵的技能并拥有明显的实力。如果你能在不到一个小时的时间里创建一个全栈的Web应用，那么你就有能力为自己下一个伟大的想法迅速的的创建一个简单的MVP，或者在工作中快速构建一个新的应用程序。

本文介绍了创建一个简单的全栈Web应用所需的步骤，其中包括一个Python服务器和一个React前端。你可以轻松的在其基础上进行构建，根据你的实际需求进行修改，或是添加一些其他技术特性，例如Redux。

世界在互联网的驱动下，计算机的基本技术和简单工具已经成为现代商业人士的必备技能。本文适合想要学习怎样制作一个简单的基于web的应用程序，并且具备基本编程技能的人。

尽管你可以在我的GitHub上找到本文所有的源代码，但是如果你能够从头开始创建这个程序，将会得到最好的学习成果。

初始项目设置

 
 
 
 
 

Python

 
1
2
3
4
5
6
7
8
9
.
├── README.md
└── fullstack_template/
    ├── server/
    └── static/
        ├── css/
        ├── dist/
        ├── images/
        └── js/

我们将使用npm包管理器来处理Javascript依赖项。Npm是非常棒的，因为它易于使用，有良好的文档支持，有将近50万个包可供使用，以及合理的默认项目设置方案。

使用包管理器可以使您的项目依赖项保持最新状态，并能够获取和安装最新的包。

让我们初始化项目：

 
 
 
 
 

Python

 
1
2
$ cd fullstack_template/static
$ npm init

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

package.json文件有如下几个作用：

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

安装和配置Webpack

Webpack是一个模块打包器。它可以处理你所有的模块依赖，并生成静态资源。 使用模块打包器可以减少浏览器需要加载的模块数量，从而大大缩短了网页的加载时间。

一个小时搭建一个全栈 Web 应用框架
演示了Webpack是怎样工作的

安装Webpack：

 
 
 
 
 

Python

 
1
$ npm i webpack --save-dev

要使用Webpack，我们需要添加一个 Webpack 配置文件。这个配置告诉 Webpack 在哪里可以找到 JavaScript 和 React 文件，以及在哪里放置生成的JavaScript包。

在static目录中添加一个名为webpack.config.js的文件，下面的内容如下:

 
 
 
 
 

Python

 
1
2
3
4
5
6
7
8
9
10
11
12
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;

添加运行命令

向package.json文件中添加一些运行命令会是你的开发过程更加顺畅。我总是在自己的package.json 文件中添加一些build, dev-build 和 watch 命令。

build用于构建生产环境版本, dev-build用于开发时的构建版本，watch的作用和dev-build类似，只不过可以自动监视项目文件是否修改，并且自动重新构建被修改的部分，你只需要刷新浏览器就可以看到改动后的结果。叉车租赁

自动化构建你的项目还有一个好处，那就是你不会耗费时间去思考为什么修改了代码却看不到效果，一般遇到这种情况纯粹是因为你忘记了构建它们！

以下是我的 package.json 文件内容：

 
 
 
 
 
 

Python

 
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
{
  "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"
  }
}

添加Babel支持

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

一个小时搭建一个全栈 Web 应用框架
Babel转换JavaScript代码的示例

安装Babel：

 
 
 
 
 
 

Python

 
1
$ npm i babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

添加Babel presets到package.json文件中：

 
 
 
 
 

Python

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

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

 
 
 
 
 

Python

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

创建 index.jsx 和 index.html

为了能在浏览器中看到一些东西，我们将创建一个简单的index.html页面，这个页面只显示一个由JavaScript弹出的“Hello World!”对话框，以此来证明设置是正确的。

在static目录中创建一个index.html文件，并填写下面的代码：

 
 
 
 
 
 

Python

 
1
2
3
4
5
6
7
8
9
10
11
12
13
<!— 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>

在static/js目录下创建一个index.jsx文件，并添加下面的代码：

 
 
 
 
 

Python

 
1
alert(“Hello World!”);

启动一个独立的终端窗口来运行前面创建的 Webpack watch 命令，这样当我们在工作时，它可以在后台一直运行。它会在没有编码错误的前提下自动构建你的包。

 
 
 
 
 

Python

 
1
$ npm run watch

打开浏览器并访问index.html，应该能够看到弹出一个写着“Hello World!”的提示窗口。

一个小时搭建一个全栈 Web 应用框架

创建一个简单的 React 应用

首先需要安装React：

 
 
 
 
 

Python

 
1
$ npm i react react-dom --save-dev

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

 
 
 
 
 

Python

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

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

 
 
 
 
 

Python

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

如果我们现在刷新浏览器，页面上将会显示“Hello React!”，而不再是“Hello World!”提示框。

一个小时搭建一个全栈 Web 应用框架

配置Python服务

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

创建一个新的virtualenv并安装Flask

在server目录中创建Flask服务源码文件，添加一个用来返回返回“Hello World!”的端点路由“/hello”，再添加一个主页面端点路由 “/“ 用来渲染index.html 模版。

 
 
 
 
 
 

Python

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# server.py
from flask import Flask, render_template
 
app = Flask(__name__, static_folder="../static/dist", template_folder="../static")
 
@app.route("/")
def index():
    return render_template("index.html")
 
@app.route("/hello")
def hello():
    return "Hello World!”
 
if __name__ == "__main__":
app.run()

运行python服务：

 
 
 
 
 

Python

 
1
$ python server.py

接下来访问http://localhost:5000/就可以看到 react 应用提供的的“Hello React!”提示。访问http://localhost:5000/hello 将会看到由Python端点路由返回的“Hello World!”

恭喜，现在你已经有了一个基本的全栈应用

如果你想要学习如何与服务器进行通信，以及怎样使自己的程序更加美观，请等待本文的下半部分：《一个小时搭建一个全栈Web应用框架——界面美化与功能实现》

一个小时搭建一个全栈 Web 应用框架的更多相关文章

  1. Ninja：Java全栈Web开发框架-Ninja中文网

    相信不少业界人士都还停留在SSh的时代 其实我想给大家推荐的一个轻量级框架那就是Ninja; Ninja是一个Java全栈Web开发框架,稳定.快速.非常高效. 商业价值 在你的下一个项目中,Ninj ...

  2. 一个全栈Web&sol;移动App开发学习路径

    HTML.CSS 和 JavaScript 网页开发的基本元素,包括HTML.CSS个JavaScript.本课程完全适合零基础的同学,当然如果你有相关开发经验更好.在课程开始呢,我们先探索与讨论HT ...

  3. 一个 Vue &amp&semi; Node 的全栈小项目

    约学 - 可以寻找一起自习的小伙伴的Web APP 一个基于 Vue & Node 的移动端全栈小项目 在线演示(请使用移动端查看效果) 源码地址: https://github.com/G- ...

  4. 如何用 4 个小时搭建一个新 &OpenCurlyDoubleQuote;Clubhouse” ，引爆声音社交新风口

    Clubhouse,基于实时音频技术的声音社交现象级火爆 最近,让硅谷两位* VC 大打出手争相投资的 Clubhouse 火到了国内,甚至在社交圈里 "一码难求",此种火爆程度 ...

  5. date 增加一个小时 减少一个小时

    # date -s `date -d -1hour +%T`

  6. Python全栈 Web（边框、盒模型、背景）

    原文地址 https://yq.aliyun.com/articles/634926 ......................................................... ...

  7. Python全栈 Web（HTML基础语法）

    原文地址:           https://yq.aliyun.com/articles/632672 .............................................. ...

  8. Python全栈 Web（概述、HTML基础语法）

    原文地址: https://yq.aliyun.com/articles/631222 ........................................................ ...

  9. &quot&semi;轻&quot&semi;量级 Java Web 服务框架漫谈

    博文太长了, 还是先说下概要: 框架"轻量"与否可以从两方面来看待: 1) 框架本身的体量 - 例如小 jar 无依赖的苗条框架; 2) 用户使用框架是否获得各种便利而无阻隔(&q ...

随机推荐

  1. apache的AB测试

    A/B测试A/B测试是一种新兴的网页优化方法,可以用于增加转化率注册率等网页指标..A/B测试的目的在于通过科学的实验设计.采样样本代表性.流量分割与小流量测试等方式来获得具有代表性的实验结论,并确信 ...

  2. highcharts报表插件之expoting参数的使用

    exporting 参数配置 本文转载自:http://blog.csdn.net/myjlvzlp/article/details/8531275 说明:导出及打印选项 打印导出功能的配置项. 1. ...

  3. MockMvc和Mockito之酷炫使用

    由于项目中需要添加单元测试,所以查询之后发现Mockito非常适合现在的web项目. 首先需要添加pom依赖: <dependency> <groupId>junit</ ...

  4. linux中shell编程

    shell编程 1 echo -e 识别\转义符 \a \b \t \n \x十六进制 \0八进制 等等 #!/bin/bash echo -e "hello world" 执行脚 ...

  5. BZOJ 1020 安全的航线flight

    Description 在设计航线的时候,安全是一个很重要的问题.首先,最重要的是应采取一切措施确保飞行不会发生任何事故,但同时也需要做好最坏的打算,一旦事故发生,就要确保乘客有尽量高的生还几率.当飞 ...

  6. 直流滤波器 verilog

    // dc filter- y(n) = c*x(n) + (1-c)*y(n-1) `timescale 1ps/1ps module ad_dcfilter #( // data path dis ...

  7. 【转载】阻塞队列之三：SynchronousQueue同步队列 阻塞算法的3种实现

    一.SynchronousQueue简介 Java 6的并发编程包中的SynchronousQueue是一个没有数据缓冲的BlockingQueue,生产者线程对其的插入操作put必须等待消费者的移除 ...

  8. asp&period;net core 使用docker默认端口修改

    默认端口是80 在dockerfile文件中修改 ENV ASPNETCORE_URLS http://+:80 ------------------------------------------- ...

  9. react学习笔记&lpar;二）

    在以类继承的方式定义的组件中,为了能方便地调用当前组件的其他成员方法或属性(如:this.state),通常需要将事件处理函数运行时的 this 指向当前组件实例. 绑定事件处理函数this的几种方法 ...

  10. shell脚本中sqlite3命令查询数据库失败返回空，并将错误信息打印到标准错误输出

    shell脚本中sqlite3命令查询数据库失败返回空,并将错误信息打印到标准错误输出 如: #/bin/sh local ret='sqlite3 test.db "select test ...

相关文章