1. 工程初始化.md

2018-04-24 本文已影响91人 readyou

简单原则

鉴于现在Docker越来越流行，我们也会使用Docker来部署环境和上线。为了方便，我们将前后端代码放在一起打包。
文中的命令，有时会省略路径的切换步骤，请自行切换到对应的路径中。
我们会使用前、后端分离的技术，并采用Restful接口开发。

项目初始化

1. 创建项目顶层目录并初始化python环境

mkdir py-note
cd py-note
pipenv --three
pipenv install flask

这里的py-note只是我们工程目录的名字，不会出现在前、后端的代码中，即代码无关。

使用pipenv初始化完环境之后，打开Pycharm，设置一下工作环境：
https://github.com/readyou/first-code-lesson/blob/master/0.%20%E7%8E%AF%E5%A2%83%E7%AE%A1%E7%90%86.md

2. 初始化前端项目

vue init webpack py-note-fe

如下：

➜  py-note vue init webpack py-note-fe

? Project name py-note-fe
? Project description A Vue.js project
? Author wuxinlong <wuxinlong@shuidihuzhu.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) yarn

   vue-cli · Generated "py-note-fe".


# Installing project dependencies ...
# ========================

yarn install v0.24.4
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
...

说明：

py-note-fe是前端工程的名字，可以自己随便起。
这里没有选择测试工具，测试用python写。
这里使用了yarn来管理node相关包，创建完后会自动安装好相关包。

初始化完成之后，启动前端开发环境：

cd py-note-fe && npm run dev

完成后，浏览器中打开http://127.0.0.1:8080，即可看到如下页面：

image

3. 创建后端工程目录

mkdir py_note
touch py_note/__init__.py

为什么后端工程还以py_note命名呢？python工程的习惯而已，可以随便命名为其他的。注意：后端工程内部需要以这个名字来import模块，所以这个文件夹名字是跟代码相关的。

注意：python包名中不能包含-，统一用下划线_；而前端包却用中划线-。这只是不能的命名习惯而已。

3.1 编辑py_note/__init__.py：

# -*- coding: utf-8 -*-

from flask import Flask


def create_app():
    app = Flask(__name__)

    @app.route('/')
    def root():
        return 'Hello world'

    return app

这里定义了一个方法，用来创建我们后端的主app。@app.route用来注册一个路由，当我们访问/的时候返回'Hello world'。

3.2 工程顶层目录创建文件run.py
这个文件是用来启动开发环境用的，文件名自己随意。

# -*- coding: utf-8 -*-

from py_note import create_app

app = create_app()
app.run(debug=True, port=5555)

按快捷键:Ctrl + Shift + D，启动程序。在浏览器中访问http://127.0.0.1:5555，我们可以看到网页上出现了'Hello world'。

此时文件目录如下：

# tree -L 2 py-note
py-note
├── Pipfile
├── Pipfile.lock
├── py-note-fe
│   ├── README.md
│   ├── build
│   ├── config
│   ├── index.html
│   ├── node_modules
│   ├── package.json
│   ├── src
│   ├── static
│   └── yarn.lock
├── py_note
│   └── __init__.py
└── run.py

结语

我们初始化了整个工程环境，并顺利地启动了前后端开发服务器，通过http://127.0.0.1:8080正常访问第一个前端页面，通过http://127.0.0.1:5555正常访问第一个后端页面。我们后面的开发会使用Restful，后端接口基本不再通过浏览器来访问。

原文链接

https://github.com/readyou/py-note/blob/master/docs/1.%20%E5%B7%A5%E7%A8%8B%E5%88%9D%E5%A7%8B%E5%8C%96.md

加QQ群共同成长

群号码：1524563698829

image

1. 工程初始化.md

简单原则

相关软件安装

1. nodejs

2. vue-cli

3. python3

4. pipenv

5. nginx

6. Pycharm