简单原则
- 鉴于现在Docker越来越流行，我们也会使用Docker来部署环境和上线。为了方便，我们将前后端代码放在一起打包。
- 文中的命令，有时会省略路径的切换步骤，请自行切换到对应的路径中。
- 我们会使用前、后端分离的技术，并采用Restful接口开发。
相关软件安装
本人开发环境为mac，这里不详解各个软件的安装，大家可以自行百度下列这些软件在其他平台上的安装方法。
1. nodejs
去官网下载nodejs安装包安装即可，这里下载版本为：v8.11.1
2. vue-cli
命令行中使用npm全局安装：
npm install -g vue-cli
3. python3
brew install python3
4. pipenv
pip3 install pipenv
5. nginx
- mac：
brew install nginx - 其他平台: 自行百度或google
6. Pycharm
下载免费版：https://download-cf.jetbrains.com/python/pycharm-community-2018.1.1.dmg
项目初始化
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，后端接口基本不再通过浏览器来访问。
原文链接
加QQ群共同成长
群号码：1524563698829
image
网友评论