Bob's Blog

现在想做一个前后端分离的网站，我会在多篇文章中记录这个过程。目前的博客写得早，用的还是MVT模式(Model-View-Template), 其实对于独立开发完成的话，两者区别也不大，不过在如下的情况下会有一些区别：

- 如果有多人合作，前后端分离不用出现前端等后端的情况，尽量避免职责不明的情况。

- 在MVT / MVC时，同步展示业务逻辑做起来效率高，不过对于有异步的情况表现不会太好。在single page application这种前端只做展示时，ajax请求后端api会更方便。

- 前后端分离方便做扩展，比如我还有个手机app，可以调用同样的后端api，关注界面实现处理就好。

- 前端js的处理和取消html页面在服务器渲染可以在一定程度上减轻服务器的压力。

- 但是前后端分离不利于搜索引擎优化SEO，而MVT / MVC则对SEO比较友好。

说完废话，工作开始，首先准备后端django。

建立一个虚拟环境。

virtualenv venv --no-site-packages
source venv/bin/activate

安装django。

pip install django
pip install pymysql

新建项目和app。

django-admin startproject automation_center
cd automation_center
python manage.py startapp center

把automation_center/settings.py里修改如下部分。

ALLOWED_HOSTS = ['*']  # 允许其他来源的访问

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'center'  # 新加的app
]

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',  # 换成mysql或其他
        'NAME': 'db name',
        'USER': 'db account',
        'PASSWORD': 'db password',
        'HOST': '127.0.0.1',
        'PORT': 3306,
        'OPTIONS': {
            'autocommit': True,
        },
    }
}

LANGUAGE_CODE = 'zh-hans'

TIME_ZONE = 'Asia/Shanghai'

USE_TZ = False

在automation_center\__init__.py中添加pymysql

import pymysql
pymysql.install_as_MySQLdb()

再migrate数据库

python manage.py migrate

此时对于django2.1以上的使用pymysql会出现错误提示: "django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 or newer is required; you have 0.9.3.", 此时在虚拟环境中的venv/lib/python3.6/site-packages/django/db/backends/mysql/base.py中注释掉"raise ImproperlyConfigured('mysqlclient 1.3.13 or newer is required; you have %s.' % Database.__version__)"即可。

如果还有提示这个错误： "AttributeError: 'str' object has no attribute 'decode'", 那么在虚拟环境中的venv/lib/python3.6/site-packages/django/db/backends/mysql/operations.py中把146行的decode改成encode即可; 或者也可以将venv/lib/python3.6/site-packages/django/db/backends/mysql/operations.py中"query = query.decode(errors='replace')"换成"query = errors = 'replace'".

做了上述步骤后，此时运行

python manage.py runserver 8000

打开http://127.0.0.1:8000/即可看到django的提示。

接着可以创建管理员账号，按照提示输入即可。

python manage.py createsuperuser

现在开始加上django restframework，它可以帮助我们构建restful的类型的接口，可以方便的提供前后端交互的功能，已达成前后端分离的效果。

pip install djangorestframework

到这里，后端基本环境就准备得差不多了。

-------------------------------

接着开始准备前端vue.js的环境。

到nodejs的官网安装nodejs。安装完成后就能使用npm了。由于使用npm下载包时在国内的速度非常感人，于是往往会选择cnpm或者更改npm的资源地址。

# if install cnpm
npm install cnpm -g --registry=https://registry.npm.taobao.org

# if change resource url of npm
npm config set registry https://registry.npm.taobao.org

然后安装vue-cli，方便快速构建大型项目。

npm install -g vue-cli

然后初始化前端项目，webpack是指打包的方式。

vue init webpack front-end

# output:
# (venv) jiangbo-mbp:automation_center bobjames$ vue init webpack front-end
# ? Project name front-end
# ? Project description front-end of automation center
# ? Author bobjiang <auto@byincd.com>
# ? Vue build standalone
# ? Install vue-router? Yes
# ? Use ESLint to lint your code? No
# ? Set up unit tests Yes
# ? Pick a test runner jest
# ? Setup e2e tests with Nightwatch? Yes
# ? Should we run `npm install` for you after the project has been created? (recommended) npm

#   vue-cli · Generated "front-end".


# Installing project dependencies ...

当安装完成后执行下面命令，就可以启动前端的测试环境了: http://localhost:8080

cd front-end
npm run dev

-------------------------------

在下一篇会开始写简单的api用于检查restful的接口是否工作正常。接着就是写第一个页面。

-------------------------------

如果数据库是选择mongodb，那么推荐使用djongo，因为djongo能保留admin且仍保留所有的django contrib library，对于已经在开发过程中的项目修改会非常少；而mongoengine则需要引入它的一些model、field, 使用起来也不太稳定，有坑。

比如用mongodb，创建过用户并需要验证身份的时候，settings.py中连接就可以写作：

DATABASES = {
    'default': {
        'ENGINE': 'djongo',
        'NAME': 'auto_center',
        'AUTH_SOURCE': 'auto_center',
        'HOST': 127.0.0.1,
        'PORT': 27017,
        'USER': 'admin',
        'PASSWORD': '123456'
    }
}