背景
最近开始结合python爬虫+flask+react做一个全栈项目，基本方案是flask提供api接口，以json形式返回爬取到的数据，前端ajax获取，跨域的问题后端解决（庆幸flask有造好的轮子flask-cros），在数据传输过程中出现了一些问题，这里记录一下。
<b>待实现的需求是</b>：爬取网页上某一篇文章，将其内容以HTML的返回给后端，后端再以json形式传给前段，前端运用react的dangerouslySetInnerHTML再将整篇文章渲染出来。
问题
在实现需求的过程中遇到过以下几个问题
- 爬虫获取到的内容无法转换成正常的字符串格式
- 后端返回给前端的数据无法正常渲染
话不多说，先上简化的代码，看看问题出在哪
爬虫
import requests
from lxml.html import fromstring,tostring
class J_Detail(object):
def __init__(self, id):
self.url = 'http://top.jobbole.com/' + id
self.user_agent = 'Mozilla/4.0 (compatible; MSIE 5.5; Windows NT)'
self.headers = {'User-Agent': self.user_agent}
self.records = ''
def get_detail(self):
r = requests.get(self.url, headers=self.headers)
page_source = r.text
root = fromstring(page_source)
element = root.xpath('//div[@class="p-entry"]')[0]
content = tostring(element) ###log 1
return content
后端
@app.route('/api/jobbole/content/<id>', methods=['GET'])
def get_detail_content(id):
detail = J_Detail(id)
content = detail.get_detail()
return jsonify(
message = 'OK',
data = content
)
看似没有毛病，但是运行之后会报一个错误，提示content无法被json序列化，因为content不是字符串。
解决
回到爬虫部分log1处，我们可以看到在获取指定的数据后，已经调用了lxml.html的tostring方法将其转换成字符串，既然这样，我们再用python内置方法转化一次，将log1处代码修改为：
content = str(tostring(element))
这回对了，不再报错，但是前端拿到的数据怪怪的...
{
{"data": "b '<div class="p-entry> ...\n ... </div>' \n \n \n "}
{"message": "OK"}
}
这样的data肯定是不能被dangerouslySetInnerHTML正常渲染的。
这时候，想到了对爬虫获取到的content做进一步处理，比如分隔字符串去除多余的字符，正则表达式替换\n，但是这样后端要处理的逻辑变多了，而且将事情复杂化了，还有没有简单的方法呢？
其实方法很简单，只是解决方向一直错了。
来看下官方文档对lxml.html的tostring的说明：
The result of tostring(encoding='unicode') can be treated like any other Python unicode string and then passed back into the parsers. However, if you want to save the result to a file or pass it over the network, you should use write() or tostring() with a byte encoding (typically UTF-8) to serialize the XML. The main reason is that unicode strings returned by tostring(encoding='unicode') are not byte streams and they never have an XML declaration to specify their encoding. These strings are most likely not parsable by other XML libraries.
嗯哼，找到原因了，原来是编码问题，那么很简单，把log1处代码替换为：
content = tostring(element,pretty_print=True, encoding='unicode')
输出json格式为
{
{"data": "<div class="p-entry">... ... </div>''},
{"message": "OK"}
}
完美解决！
总结
<b>恩...出问题先别急着自己瞎整，多google，多看文档..</b>(摊手
最后
这是这个项目的地址<b>OnlyRead</b>，一个信息聚合类网站，未来会包括伯乐在线，V2EX，SegmentFault， 36Kr，还有其他one，糗事百科在内的很多网站的内容 大概就是给程序员上班划水消磨时间的。
