在实验室折腾附加题折腾了一个多钟没做出来……晚上回到宿舍决定再试一试,按原来的思路居然行了,目测在实验室的时候什么地方打错字了吧(心在流血)

实现晃过元素后出现跟随鼠标的悬浮窗,只有几行代码给我折腾了好久,前端的JS果然debug困难 打错字都没提示OTZ 下次试试strict mode好了……

简而言之就是mouseover的时候show,mouseout的时候hide,mousemove的时候跟着改坐标

// tweet.js

$('#avatar').mouseover(function(e){
    $('#tip').show();
});

$('#avatar').mousemove(function(e){
    var offset = $('#avatar').offset();
    var x = e.pageX - offset.left + 10;
    var y = e.pageY - offset.top + 10;
    $('#tip').css({"left": x + "px", top: y + "px"});
});

$('#avatar').mouseout(function(e){
    $('#tip').hide();
});

在实验室的时候贪方便,数据库操作写到其他函数里,连接的代码复制粘贴重复了N遍,回去重新写了一下,直接放到application里,大家一起用:

#main.py

conn = pymongo.Connection("localhost", 27017)
twitterDB=conn["twitterDB"]
self.db = twitterDB.userSets

用的时候直接写self.application.db就可以了。因为userinfo只有一个instance,为了效率包数据的时候用namedtuple代替了class(看了知乎一个实习生笔试被拒的问答之后对“过度封装"格外敏感……),mongodb的查询回来之后被我改成了用projection提高效率(其实第二个抓tweets的操作也可以用projection的不过懒得写了……)

# main.py

class MainPageHandler(BaseHandler):
    """Handle the main page."""
    def get(self, index):
        # retrieve data from local database
        user = self.get_current_user()
        # project user info and put it into a dict
        info_dict = self.application.db.find_one({"name": user},
            {"_id": 0, "name": 1, "image": 1, "age": 1, "email": 1})
        # get tweets of the user
        tweets = self.application.db.find_one({"name": user})['tweets']

        # Since there's only one user per page, use namedtuple
        info = namedtuple('Info', info_dict.keys())(*info_dict.values())

        self.render('twitter.html', info=info, tweets=tweets, user=user)

AJAX操作方面用Jquery搞定,Prototype比较没那么灵活的样子(JSON一定要写清楚类型),不过安全起见还是多给header设置了几句。在TA的提示下给提交后的callback加了清空文本框,稍微自然一点。

实验室只有chrome,拿回去测试的时候发现FF下不行,看log发现点按钮之后给定的AJAX POST专用的url没动静,反而原来页面的url有个不成功的POST,也就是event.preventDefault()没有起到作用。google了一下发现是FF没有全局的event,所以不能写$("#submitTweet").click(function(){}),必须写$("#submitTweet").click(function(event){}),不然里面的函数拿不到event就取消不了按钮按下去的缺省效果

$("#submitTweet").click(function(event) {
    event.preventDefault();
    var tweet = {
        time: $.datepicker.formatDate('M. dd, yy', new Date()),
        content: $('#tweet-content').val()
    };

    $.ajax({
            url: '/ajax/addTweet',
            datatype: "json",
            type: "POST",
            data: JSON.stringify(tweet),
            contentType: "application/json charset=utf-8",
            processData: false,
            success: function (data) {
                insertTweet(tweet.time, tweet.content);
                $('#tweet-content').val('');
            },
            error: function(e){
                alert(e);
            }
    });
});

后端用了tornado自带的json_decode,忘了之前做什么东西的时候被py自带的json.loads坑过,用tornado带的比较安全一点

class addTweet(BaseHandler):
    """Get tweet posted with AJAX and save it to the local database."""
    def post(self):
        newTweet = tornado.escape.json_decode(self.request.body)
        user = self.get_current_user()
        record = self.application.db.find_one({"name": user})
        record['tweets'].append(newTweet)
        self.application.db.save(record)

为了方便debug写了几个print语句,会夹进log显示在终端, 方便看到数据库操作结果。有空试试看学着用logging,不要直接print……

另外回来之后帮人debug,发现好多人有出错不仔细看log啊= =b

考试之前还写了个自定义的404,关键在于给其他RequestHandler继承的类里面要记得定义get_error_html,并且这个函数不能用render,要用render_string,不过写法还是一样,模版放在老地方

class BaseHandler(tornado.web.RequestHandler):
    def get_error_html(self, status_code, **kwargs):
        return self.render_string("404.html",
            err=kwargs.get('message', None))

然后在RequestHandler里有需要丢404的地方写

self.send_error(404, **error)

就可以了。其他状态码同理,加if语句配置就行。不想全都继承的话在只有需要的类里面定义get_error_html也OK。

代码依然在Github上

https://github.com/joyeec9h3/WebHWs/tree/master/Web2_0course

写在Web考试后的一点小总结的更多相关文章

  1. 基于tomcat7 web开发中的一点小东西

    控制台: org.apache.jasper.compiler.TldLocationsCache tldScanJar 信息: At least one JAR was scanned for TL ...

  2. net core体系-web应用程序-4net core2.0大白话带你入门-8asp.net core 内置DI容器(DependencyInjection,控制翻转)的一点小理解

    asp.net core 内置DI容器的一点小理解   DI容器本质上是一个工厂,负责提供向它请求的类型的实例. .net core内置了一个轻量级的DI容器,方便开发人员面向接口编程和依赖倒置(IO ...

  3. 用C写一个web服务器(一) 基础功能

    .container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px } .conta ...

  4. 用c#写的一个局域网聊天客户端 类似小飞鸽

    用c#写的一个局域网聊天客户端 类似小飞鸽 摘自: http://www.cnblogs.com/yyl8781697/archive/2012/12/07/csharp-socket-udp.htm ...

  5. 徒手用Java来写个Web服务器和框架吧<第三章:Service的实现和注册>

    徒手用Java来写个Web服务器和框架吧<第一章:NIO篇> 徒手用Java来写个Web服务器和框架吧<第二章:Request和Response> 这一章先把Web框架的功能说 ...

  6. 转:C#写的WEB服务器

    转:http://www.cnblogs.com/x369/articles/79245.html 这只是一个简单的用C#写的WEB服务器,只实现了get方式的对html文件的请求,有兴趣的朋友可以在 ...

  7. 关于win8开发的一点小总结

    我今天做画面的时候,发现了一点小问题. 我在xmal文件里面加了一个CheckBox控件,设置IsChecked属性为True,并添加了Checked事件.Checked事件里面有对另外一个TextB ...

  8. 用C写一个web服务器(二) I/O多路复用之epoll

    .container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px } .conta ...

  9. 关于PHP魔术方法__call的一点小发现

    好久没有上博客园写文章了,今晚终于有点空了,就来写一下昨天的一点小发现. 我自己所知,C++,Java的面向对象都有多态的特点,而PHP没有,但PHP可以通过继承链方法的重写来实现多态的属性.而魔术方 ...

随机推荐

  1. easyui 日期显示

    { field: 'UpdateDatetime', title: '更新时间', width: 100, align: 'left', sortable: true , formatter: fun ...

  2. windows10降低IE版本

    win10支持的最低IE版本为IE10,现在IE最新版本为IE11,而win10自带的浏览器是microsoft  EDGE ,这给 以前的老系统带来很多不便,为了支持以前的老系统,只有降低IE浏览器 ...

  3. iOS学习笔记---c语言第十一天

    函数指针 一.函数指针定义 //函数声明:声明我是一个什么函数 //求两个数的和 //函数的类型:int (int x,int y) //即:我是一个返回值为整型,有两个整型参数的函数. //函数名是 ...

  4. win7发送到菜单

    在文件浏览器地址栏输入 shell:sendto

  5. OD调试1--第一个win32程序

    OD调试一:第一个Win32程序的修改 在软件开发的过程中,程序员会使用一些调试工具,以便高效地找出软件中存在的错误.而在逆向分析领域,分析者也会利用相关的调试工具来分析软件的行为并验证分析结果.由于 ...

  6. TypeScript 基本语法

    TypeScript 基本语法   TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行.TypeS ...

  7. 《得知opencv》注意事项——矩阵和图像处理——cvOr,cvOrS,cvrReduce,cvRepeat,cvScale,cvSet and cvSetZero

    矩阵和图像的操作 (1)cvOr函数 其结构 void cvOr(//两个矩阵相应元素做或执行 const CvArr* src1,//矩阵1 const CvArr* src2,//矩阵2 CvAr ...

  8. 异步任务利器Celery(一)介绍

    django项目开发中遇到过一些问题,发送请求后服务器要进行一系列耗时非常长的操作,用户要等待很久的时间.可不可以立刻对用户返回响应,然后在后台运行那些操作呢? crontab定时任务很难达到这样的要 ...

  9. Spring Boot 2.x 编写 RESTful API (三) 程序层次 &amp; 数据传输

    用Spring Boot编写RESTful API 学习笔记 程序的层次结构 相邻层级的数据传输 JavaBean 有一个 public 的无参构造方法 属性 private,且可以通过 get.se ...

  10. sublimeText3编辑器 + 入门教程 + 使用大全

    sublimeText3编辑器 + 入门教程 + 使用大全 Ctrl+D选中光标所占的文本,继续操作则会选中下一个相同的的文本 ctrl+G:输入行号,可快速跳转该行 ctrl+p:输入冒号,在输入行 ...