Template

所有的文件夹里面的Templates里面的文件最后都会结合到一个Template里面，所以在app里面定义的Templates文件。所以如果定义app里面的跟app自己相关的template，最好的方式是把Template文件放置在新建的和APP同名的文件夹里面。
如果是使用createPROJECT创建的目录，Template使用到根目录。

基本的流程组件

routing.py

添加websocket的基本监听路径，所有的websocket的相关内容放置在这个路径之下

在routing之中使用ProtocolTypeRouter来定义相应的application入口，这个是2.0引入的新特性，在第一个版本中不这么使用

# mysite/routing.py
from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter
import chat.routing

application = ProtocolTypeRouter({
    # (http->django views is added by default)
    'websocket': AuthMiddlewareStack(
        URLRouter(
            chat.routing.websocket_urlpatterns
        )
    ),
})

外层中间件使用ProtocolTypeRouter，并结合使用AuthMiddlewareStack中间件来将routing文件指定到内部文件。

# chat/routing.py
from django.conf.urls import url

from . import consumers

websocket_urlpatterns = [
    url(r'^ws/chat/(?P<room_name>[^/]+)/$', consumers.ChatConsumer),
]

内部文件也使用类似urlpatterns的模式来进行，这里是讲这个chat 下面room_name的所有都制定到ChatConsumer里面。可以发现这里制定的是Consumer对象而不是具体的一个方法。这个和老版本的还是有一些区别的。

在setting中需要加入这个application的配置项

# mysite/settings.py
# Channels
ASGI_APPLICATION = 'mysite.routing.application'

Consumer

在定义WebSocket的时候最后加上/ws/的路径，这样能够更好地区分Http请求和webscoket请求，从而更好进行优化。同时也更方便在部署的时候让nginx更好的将不同的目录给不同的部件去解析。WSGI Server使用 Gunicorn + Django 来解析Http请求；ASGI Server 可以使用Daphne+Channels来解析WebSocket请求。

对于小型的网站可以使用Daphne Server就可以同时解析HTTP和socket请求，从而不需要划分。

# chat/consumers.py
from channels.generic.websocket import WebsocketConsumer
import json

class ChatConsumer(WebsocketConsumer):
    def connect(self):
        self.accept()

    def disconnect(self, close_code):
        pass

    def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']

        self.send(text_data=json.dumps({
            'message': message
        }))

这个是最基本同步连接请求，从同步端接收请求等

同步请求的Consumer如下

# chat/consumers.py
from channels.generic.websocket import AsyncWebsocketConsumer
import json

class ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        self.room_name = self.scope['url_route']['kwargs']['room_name']
        self.room_group_name = 'chat_%s' % self.room_name

        # Join room group
        await self.channel_layer.group_add(
            self.room_group_name,
            self.channel_name
        )

        await self.accept()

    async def disconnect(self, close_code):
        # Leave room group
        await self.channel_layer.group_discard(
            self.room_group_name,
            self.channel_name
        )

    # Receive message from WebSocket
    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']

        # Send message to room group
        await self.channel_layer.group_send(
            self.room_group_name,
            {
                'type': 'chat_message',
                'message': message
            }
        )

    # Receive message from room group
    async def chat_message(self, event):
        message = event['message']

        # Send message to WebSocket
        await self.send(text_data=json.dumps({
            'message': message
        }))

我一般的做法是通过命令行git clone ，然后在手动创建venv ，最后再导入

virtualenv -p /usr/local/bin/python3.6 

新建项目

使用打开文件夹来创建项目，打开文件夹的目录最好定位到项目内部目录中去，不要导入venv，否则后面打开文件什么的都很麻烦

配置django工程

直接open的文件夹是无法成为django工程的，需要手动导入django工程
打开preference，或者使用快捷键 cmd + ,

1. 配置venv

直接选择到已有virtualenv环境即可

2. 配置django framework

配置运行时环境

完成后即可。

测试环境 61.183.247.105

1. 安装 还是可以使用ubuntu的安装脚本安装，这个安装脚本比以前做的好一些了，没什么bug，但是不能在virtualenv下面安装，否则包找不到，这个后面可以研究一下如何处理
2. 安装好之后实际是可以使用的
3. 如果要修改前台页面，需要重新进行npm build 。 方法就是首先到版本的目录，然后执行npm run install。执行npm install的时候记得最好把github的hosts配上，不然可能下不到会失败。然后完成后再执行npm run build就可以把前端build出来了，build的内容会在clinet/dist目录下。如果要修改文件需要重新build才可以生效。supervisor使用的是dist文件夹。
4. 如果执行一次npm install 失败，不要修改后继续执行，最好先删除npm文件，首先rm -rf node_modules 然后再执行 npm install。

可以研究一下要搞的几个东西

• 开发环境配置——整理一个更好的python开发环境模式
• 尝试把echarts插件引入到visualization组件中去
• docker配置
• 整理成docker开发环境

开发环境整理

1. 可以按照安装脚本整理一套，然后自己手动启动webserver 、Celery、webpack，把这三个搞好可以试着跑起来，按照安装的模式来整理开发环境

开发梳理

redash 使用了 flask、 angularJS

redash 代码结构研究

1. client —— 存储所有的前台内容
   1. app —— 存放所有的前台源码，包含HTML、js
      1. assets/ —— 存放所有的css、fonts、images
      2. components/ —— 大部分组件的页面都存放在这里。这里和pages的区别是这里大多存的是一些公共组件，而不是主题页面
      3. config/ ——存放基本配置，包含angularJS总路由，样式表文件配置等
      4. directives/ —— 基本配置统一放在这里
         
      5. filters/
         
      6. lib/
         
         1. pagination/ —— 分页组件
         2. sortable/ —— 排序组件
         3. visualizations —— 可视化插件
      7. pages/
         
         1. admin/ ——首页用户名下面的system status页面的Admin管理页面，包含system status系统状态、queries queue查询队列、outdated queries过期查询队列。
         2. alert/ ——首页菜单alert页面
         3. alerts-list/
            
         4. dashboards/
            
         5. data-sources/
            
         6. destinations/
            
         7. groups/
            
         8. home/
            
         9. queries/
            
         10. queries-list/
             
         11. query-snippets/
         12. users/
             
      8. services/ —— 相应的js服务部分
      9. visualizations/ —— 可视化相关部分
   2. dest —— 存放所有的webpack打包后的页面内容
2. migration —— 存放所有的数据库更新内容
3. redash —— 存储redash的后端部分，所有的py文件都在这里面，这里的话最好还是要详细研究一下flask在来修改，跟django还是有一些区别的。
4. test —— 存储测试内容

从词云组件开始研究visualization

wordcloud

开发模式

redash也存在开发模式，实际上在package.json已经配置了，在webpack.config.js里面也进行了相关的配置

package.json里面的配置

"scripts": {
    "start": "webpack-dev-server",
    "build": "rm -rf ./client/dist/ && NODE_ENV=production node node_modules/.bin/webpack",
    "watch": "webpack --watch --progress --colors -d"
  },

start 用于 run start 来启动web pack服务。

build用于重新发布

watch用于开发环境下修改文件后的直接发布，所见即所得。

每次build的时间比较久，如果每次开发修改一点点都需要build的话，那将会很浪费时间，所以使用watch模式，每次有修改之后会自动进行发布和编译，并且响应速度较快。

使用的方法： npm run watch

运行启动后，修改相关文件会自动进行编译，只需要刷新页面就能生效，最好是强制刷新。

访问数据库

root@williiiam-dev:/opt/redash/redash.3.0.0.b3134# sudo -u redash psql

配置到navicat 远程连接

配置与连接
首先，在pgdata（也就是在安装pg时指定的存放数据的文件见中）文件夹中，找到pg_hba.conf文件，并写入下面的内容：

$ host    all        all         0.0.0.0/0       trust

接着，在pgdata文件夹中，找到postgresql.conf为文件，并修改下面的内容：

$ listen_addresses = '*'     #允许任何的ip地址监听，并保存

最后，重新启动PostgreSQL数据库，然后在Navicat中进行连接配置，该步骤省略，相信使用过功该工具的读者都知道该怎么配置。

$ ${PG_HOME}/bin/pg_ctl restart -D ${PGDATA}   #重新启动pg数据库

安装npm

apt-get install nodejs
apt-get install npm

#如果不执行这个会报错
apt-get install nodejs-legacy

安装redis

安装postgresql

安装问题

Successfully built gspread impyla MySQL-python oauth2client pyhive pymongo vertica-python dql sasl thrift thrift-sasl cassandra-driver memsql uritemplate future msgpack-python wraptor
Installing collected packages: uritemplate, pyasn1, pyasn1-modules, rsa, oauth2client, google-api-python-client, gspread, thrift, impyla, influxdb, MySQL-python, future, pyhive, pymongo, pyOpenSSL, vertica-python, urllib3, msgpack-python, td-client, pymssql, jmespath, docutils, botocore, dynamo3, pyparsing, dql, sasl, thrift-sasl, futures, cassandra-driver, wraptor, memsql, atsd-client, simple-salesforce, s3transfer, boto3, monotonic, tenacity, PyAthena, certifi
Found existing installation: pyOpenSSL 17.5.0
Uninstalling pyOpenSSL-17.5.0:
Successfully uninstalled pyOpenSSL-17.5.0
Successfully installed MySQL-python-1.2.5 PyAthena-1.2.1 atsd-client-2.0.12 boto3-1.5.26 botocore-1.5.72 cassandra-driver-3.11.0 certifi-2018.1.18 docutils-0.14 dql-0.5.24 dynamo3-0.4.7 future-0.16.0 futures-3.2.0 google-api-python-client-1.5.1 gspread-0.6.2 impyla-0.10.0 influxdb-2.7.1 jmespath-0.9.3 memsql-2.16.0 monotonic-1.4 msgpack-python-0.4.8 oauth2client-3.0.0 pyOpenSSL-16.2.0 pyasn1-0.4.2 pyasn1-modules-0.2.1 pyhive-0.3.0 pymongo-3.2.1 pymssql-2.1.3 pyparsing-2.1.4 rsa-3.4.2 s3transfer-0.1.12 sasl-0.2.1 simple-salesforce-0.72.2 td-client-0.8.0 tenacity-4.8.0 thrift-0.11.0 thrift-sasl-0.3.0 uritemplate-0.6 urllib3-1.22 vertica-python-0.5.1 wraptor-0.6.0
Traceback (most recent call last):
File "/opt/redash/redash.3.0.0.b3134/manage.py", line 6, in
from redash.cli import manager
File "/opt/redash/redash.3.0.0.b3134/redash/__init__.py", line 5, in
import redis
ImportError: No module named redis

需要安装

(redashenv) root@williiiam-dev:/opt/redash/redash/setup/ubuntu# pip install redispy
Collecting redispy
Downloading redispy-3.0.0-py2.py3-none-any.whl (64kB)
100% |████████████████████████████████| 71kB 177kB/s
Installing collected packages: redispy
Successfully installed redispy-3.0.0

解决方案

在requirements.txt中增加引入 redispy==3.0.0

• release

在用sublime生成一些脚本的时候，会用到生成行号的操作，使用Insert Nums这个插件可以实现。

安装InsertNums

使用 cmd+shift+p 打开sublime快捷管理器

输入install package ，等待一下之后会弹出新窗口，

然后输入Insert Nums，完成后就可以开始安装

使用InsertNums

同样的输入cmd+shift+p 打开快捷管理器

输入Insert num 便可以使用，同时可以看到下面支持多种方式的 比如 200:5 ，其中200代表其实数，5代表步长。

结合cmd+shift+l 使用能够起到更好的效果。

循环的使用

循环变量

size(400,400)

fill(0,0.6,0.9,0.1)
stroke(0,0.6,0.9)
strokewidth(0.25)

for i in range(100):
    fill(random(0.0,1.0),random(0.0,1.0),random(0.0,1.0),0.1)
    x = random(WIDTH)
    y = random(HEIGHT)
    r = random(50,100)
    oval(x,y,r,r)

执行结果：

这个就不多说了，其实在前面都有介绍，主要是将循环和随机结合。

函数

size(400,400)

def flower(x,y):
    fill(random(0.5,1),random(0.5,1),random(0.5,1))
    stroke(0.2)
    strokewidth(1)
    
    transform(CORNER)
    translate(x,y)
    
    for i in range(10):
        rotate(360/10)
        line(0,0,15,15)
        oval(10,10,10,10)
    reset()
    
for i in range(60):
    flower(random(WIDTH),random(HEIGHT))

这里主要处理的是函数关系的调用。也不需要多讲

Library 包

Nodebox同时可以使用各种Library包，用这些Library包来扩展整体的能力。

要安装扩展包的时候只需要将扩展包下载，然后让道NodeBox的目录，在使用的时候调用ximport()就可以了

同时也可以使用ximport来引入其他的python包。

list = [1, 2, 3, 4, 5]
rnd = ximport("random")
rnd.shuffle(list) 
print list  
>>> [3, 4, 1, 5, 2]

NodeBox 变量

预置的变量

NodeBox 配置了一系列的预置变量，这些变量只能读，而不能写。

WIDTH: 绘画区域的宽度，可以通过size(300,300)来定义

HEIGHT: 绘画区域的高度，可以通过size(300,300)来定义

PAGENUM: 在多页的导出中可以显示当前页的页码

FRAME: 在动画中显示当前帧数

下面一些能够用在交互中：

MOUSEX: 当前鼠标的水平坐标

MOUSEY: 当前鼠标的垂直坐标

mousedown: 当鼠标按下时，值为True

keydown: 当相关的key按下时，值为True

key: 最后一个按下的Key值

keycode: 上一个按键的值，整数的形式。

KEY_UP, KEY_DOWN_ KEY_LEFT, KEY_RIGHT, KEY_BACKSPACE contain the keycodes for the arrow keys and the backspace key.

Node 输入参数

var("label",TEXT)
var("x",NUMBER,50,1,100)
var("y",NUMBER,50,1,100)

text(label,x,y)

var变量的参数

var(name, NUMBER, default, min, max)
var(name, TEXT, default="hello")
var(name, BOOLEAN)
var(command, BUTTON)

NodeBox 列表

列表

NodeBox中的列表和代码中的列表是类似的，同样是以0为起始索引。实际上就是使用了python中的列表类型。

列表的一个很有趣的demo:

size(200,200)
words = ["Lists", "are", "fun"]
colors = [color(1,0,0), color(1,1,1), color(0,0,0)]
 
for i in range(40):
 
    x = random(WIDTH)
    y = random(HEIGHT)
    rotate(random(360))
    fontsize(random(10,100))
 
    fill(choice(colors))
    text(choice(words), x, y)

这个例子从world和colors中随机选择颜色的字体，在页面上随机放置。
形成的图片如下：

多次运行可以形成不同的图片样式，这种很多海报会死用类似的方式，用杂乱的排版来形成比较好看的广告。

字典值：

字典值dictionaries ，直接使用python的数据类型。

String 字符串变量

String 是一个列表

其实这也是python的基本语法的例子，不过给出了一个demo还是挺好的，作为相应的例子，把几个方法也给我们展示了一下。

size(400,400)

fill(0.2)
rect(0,0,WIDTH,HEIGHT)

fill(1)
stroke(0.2)
strokewidth(1)
font("Zapfino")

for i in range(80):
    fontsize(random(400))
    rotate(random(360))
    
    chars = "abcdefghijklmnopqrstuvwxyz"
    
    p = textpath(choice(chars), random(WIDTH), random(HEIGHT))
    
    drawpath(p)

这里用到几个比较重要的概念，使用choice(chars)说明chars是一个列表结构。
textpath代表了文本的描边，使用drawpath 可以对描边进行绘画。

运行结果如下：

String的一些相关方法

下面是String的一些相关方法

• string.upper(): returns the string in uppercase.
• string.lower(): returns the string in lowercase.
• string.capitalize(): returns the string with the first character capitalized.
• string.find(text, start=0): returns the index position of text in the string.
• string.replace(old, new): replaces all old text in the string with new
• string.split(): returns the string as a list of words.
• string.join(list): concatenates a list of words.

这里也基本上都是python的一些基本方法

文件读入

size(500,500)

str = open("Applications/NodeBox/mo.txt").read()
str = str.decode("utf-8")

fill(0.2)

rect(0,0,WIDTH,HEIGHT)

fill(1)

font(u"黑体",13)
text(u"中国体育代表团", 20,30)

font(u"兰亭黑-简",11)
lineheight(1.4)
text(str,20,50,width=450)

使用文件读入方式来来读入相应的字符串。 如果为中文的话，需要使用decode一次utf-8。

最后的执行结果

django 为生产环境部署的改进点

django在生产环境部署的时候，支持多种部署方式，由于对Nginx比较熟，当前采用的是nginx+uwsgi的方式进行部署。配置完成之后，发现一些问题可能和之前的代码也有相应的关系，需要对代码进行重构和优化，以适应生产部署环境。在这里做一个总结。

static文件

在django的生产环境中，如果使用nginx+uwsgi，这时主要的请求是从uwsig来提供，然后在到nginx。而静态文件则直接通过nginx来访问。所以我们会在nginx里面配置相关的参数来指定nginx 的static目录从哪里走。

但是区别是在django容器中，在每个APP中部署的static文件夹，为默认的集中到同一个static目录中，形成统一的static路径。而nginx主要使用alias来解决单一的路径，这时某些路径可能就被丢掉了。造成部分文件无法访问。对于这种情况，我采用的解决方法是在源文件中将所有的static文件提取到根目录，这样所有的app都可以访问该目录，同时在生产环境时，只需要将nginx指定到这个目录就可以了。

看了一下源代码，不知道这是不是也是大多数工程会被static文件丢到外面来的原因。

static最佳实践

仔细研究了一下static的形成方式，以及相关整理方式，整理了一下static的相关实践方式

static的几个配置的研究

staticfiles的主要相关配置与分析

STATIC_ROOT：运行命令python manage.py collectstatic 之后静态文件将要复制到的目录，这个目录只有在运行collectstatic时候才会用到，不能想当然的以为这个目录和MEDIA_ROOT的作用是相同的，否则在开发环境的时候可能一直无法找到静态文件。

STATIC_URL：设置的static file的起始url，这个只是在template里边引用到，这个参数和MEDIA_URL的含义相同。

STATICFILES_DIRS：和TEMPLATE_DIRS的含义差不多，就是除了各个app的static目录以外还需要管理的静态文件设置，比如项目的公共文件差不多。

这几个项比较清楚了，下面仔细的分析一下python manage.py collectstatic这个命令

collectstatic命令

我们刚才上面有研究一下static文件，由于static文件是散落到各个部分的，我们不容易管理。而且从其他包引入的app，其静态文件还可能在site-package文件目录中，这样导致了文件上线后非常不好维护。

所以有了collectstatic命令，这个命令将所有的静态文件统一的手机到STATIC_ROOT目录所定义的位置，这样就不会在生产部署，如nginx下，需要alias的时候导入一大堆的包了，只需要导入这一个路径便能管理所有的静态文件。

讲一下static和media的区别

static更多的是存放如网页相关 css\javascript\image等文件。

media更多的存放运行时导入的图片、文档等动态文件。

讲讲最佳实践

所以在有collectstatic这个命令之后，我们不需要讲静态文件全部放在一个目录下，static文件还是在每个app中管理，这样对于app级别更加清晰，然后在每次需要发包的时候执行 python manage.py collectstatic就可以将所有的文件都导出到static路径下，这样线上的nginx可以直接使用配置这个路径到static中就可以了。

开发环境和线上环境：

在开发环境上，我们需要不时的修改static文件来满足我们的修改需要，此时如果试用static文件的话，那么每次修改必须要重新collectstatic才能重新发布静态文件。因为静态文件会首先使用static文件夹里面的静态文件来发布。所以不建议在开发环境上做collectstatic来进行static文件的收集。而是到正式环境中后，把所有的静态文件统一收集到这里。这样方便生产环境做静态文件配置化。

问题

发现如果在本地开发库里面就将static导入，运行collectstatic的话，会生成2份静态static文件，对于CSS等路径，在员路径修改就不生效了，会对开发造成一定的麻烦，所以最好还是在开发路径中不适用collectstatic，然后在正式发布环境上进行全路径的collectstatic，这样会更有效。