Python学习笔记-第18天:实战练习（5）

第十八天 实战练习（5）

今天计划用Python继续一个web开发的实战项目练习，学习项目及练习源码地址：
GitHub源码

文章内容的编写与提交

富文本编辑器

我选择了TinyMCE,原因很简单，用的人多，而且支持的浏览器多，这两个理由足够了。
虽然中文文档比较少，但这个不是重要的，做一个东西，兼容性还是要考虑下的。

使用起步：

首先，需要下载一份copy，

然后：

其次：将TinyMCE初始化为页面的一部分

  
  



TinyMCE快速开始示例
  

    Hello, World!
  

最后：数据提交

当form提交时，TinyMCE会将内容塞进textarea，你可以通过正常的post方法获取到编辑器中的内容，行为与普通textarea完全一致。

一个内联示例:

    

                

                

                    

                    
在这里输入文字
                
            
 

图片上传

设置初始化参数：images_upload_handler:upload_pic

var upload_pic = function (blobInfo, succFun, failFun) { 
            var file = blobInfo.blob();//转化为易于理解的file对象
            var formData = new FormData();
            formData.append('file', file, file.name );//此处与源文档不一样
         
            console.log(formData.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
            var config = {
                headers: { 'Content-Type': 'multipart/form-data' }
            };  //添加请求头
            axios.post('/upload', formData, config)
                .then(response => {        
                    console.log(response.data);
                    succFun(response.data.filename);
                })
                .catch(error=>{
                    failFun(error)
                })
        }

图片处理服务端示例:

@post('/upload')
async def storefile(request):
    try:
        reader = await request.multipart()
        file = await reader.next()

        exts = ['.jpg','.jpeg','.png','.gif','.bpm']
        filename = file.filename if file.filename else 'undefined'
        suffix = os.path.splitext(filename)
        filename = '{}{}'.format(short_uuid(),suffix[1])
        filepath = '{}/{}'.format(config.app.uploaddir,filename)
        size = 0
        with open(filepath, 'wb') as f:
            while True:
                chunk = await file.read_chunk()  # 默认是8192个字节。
                if not chunk:
                    break
                size += len(chunk)
                f.write(chunk)
        text = {'res': '上传成功','filename':'{}{}'.format('/static/uploads/',filename)}
        result = text
        return result
    except Exception as e:
        print(e)
        result = {'success':False,'error': e}
        return result

文件上传

类似于图片上传，这里不再举例

文档内容的保存

设置初始化参数：save_onsavecallback: saveConent

前端js代码:

var saveConent =  function (el) {
            // do the work on html
            var title = $('#b_title').val();
            var content = el.getContent()
            
            var data = {
                title: title || "",
                content: content || ""
            } 
            console.log(data);
            axios.post('/b/0',data)
            .then(res=>{
                console.log(res);
            })
            .catch(err=>{
                console.log(err);
            })
        }

后端处理:

'''
还没有作入数据库的处理，这里需要用户信息，所以需要处理session判定用户的合法性等
'''
@post('/b/{id}')
async def save_content(*,id,title,content,request):
    result = {'success':False}
    return result