Django项目总结

概述

题目：基于bytom信息流的新闻聚合网站。
问题说明：本系统首先需要通过网络爬虫爬取Bytom发布在各个平台的内容信息，通过对这些信息的分类，可以清晰的展示，帮助人们更好的获取到信息。
因为种种原因报名了python程序设计挑战赛，所以才有了这个项目。事实证明，人可能要有点自知之明…不管怎样，过程中间还是学到了一些的（大概）。

忏悔

本来准备时间是一个月，但是因为期中考、出去玩以及犯懒等等私人原因，到ddl前3天才真正开始做，导致各种睡眠不足，水课补作业补到头疼。下次一定不拖到ddl了（这个flag我就立这儿了）。

分工

因为之前接触过一点前端（而且感觉比较简单好学一些…html、css什么的），所以初步定是我负责前端，另俩人分别负责后台和爬虫。结果负责后台的小伙伴咕咕了好久…所以后台最后也差不多是我和另一个人完成的。

反省

在完成项目的过程中，有遇到许多小问题，感觉下次可以改进一些。

• 用github远程仓库
  因为全部从0开始学，有很多参考网上的代码，对于那个实际效果其实是不确定的，因此需要不断地测试（也有可能就我）。github可以记录每次更新的功能，还可以版本回退…是个好东西啊。（但我因为犯懒之前没搞…导致用了复制压缩包存档的蠢办法）
• coding代码托管
  现在才突然发现这个和git仓库是两回事…之前我一直以为是一个东西。不管怎样，反正多人合作的话，需要一个能共同记录的东西（对…因为之前没搞，导致各种qq文件满天飞，文件的重命名看得我心好累）。
• 规划好项目结构
  这次毕竟完成的很匆忙，很多功能直接照搬别人，但自己在写的过程中又会有很多想法涌现（最后因技术不到位夭折了…）。应该在一开始就确定整个项目的构建。（毕竟是第一次，我就原谅自己啦！）
• 好好学习
  还是懂的太少了…
  完成的很心累，因为很多是按照自己的思路来走，每一个小问题都需要上网查，还会有很多意想不到的bug…
  上网查找能力也要加强啊…在好不容易找到网上一篇思路基本类似的一系列文章的时候，那一部分的代码已经勉勉强强完成了（心痛）。

项目总结

其实从这里才算步入正题…

思路

基本照搬别人（学长）的想法。

功能：

***1.***首页显示各网址及其跳转链接，并对根据网址获取来源添加对应的标签
***2.***可通过导航栏对不同来源网址进行分类（这里学长是设置的只有用户登录才有这个功能，但我们是对所有用户开放）
***3.***收藏喜欢的网页，并在可在个人收藏查看（学长设置的只有登录用户有这个功能，但因为一些原因，我们实现的是对所有用户开放，但非登录用户只有临时收藏的功能（一刷新就没了））
***4.***用户的登录及注册功能

还存在的bug：

***1.***页面跳转过程中闪现的情况
***2.***页脚不固定在底部
***3.***导航栏中因为出现滚动条导致的页面布局稍有变化
（发现全是前端的锅…）

需完善的功能：

***1.***用户注册时邮箱的格式验证及密码的长度、格式检测
后期可以考虑实现的功能：
***1.***对首页的各项链接通过不同的方式排序，例如发表时间
***2.***对首页的各项链接进行分页展示（这个学长完成了）
***3.***对各项链接可以进行搜索（这个前期的页面实现了…但因为时间不够技术不足等不可抗因素被暂时搁浅）
***4.***用户登录后的功能完善，例如个人信息的更改
***5.***实时爬取数据（这个我反正做不了…）
***6.***对于不同数据展示评论、喜欢等人数（这个学长也实现了）
7. … …（感觉可完成的还有好多好多啊…毕竟我们做的只是最简陋的还充满bug的小项目）

实际项目进程

时间顺序：

5.16以前：写爬虫的小伙伴好像开始的比较早…他应该之前就写了一些了。但我在这之前只是看过一些关于django的入门教程，以及红家的项目，参考了一下前端代码。
5.16：看了学长的完成页面，参考一下，开始写页面。初步页面布局就废了我一个下午加晚上，所有功能都没有实现。
5.17、5.18：基本完成功能。（我实在记不得了…果然还是用git的好！）

项目完成顺序：

***1.***爬虫获取网页数据（后期也有完善）
***2.***首页、用户登录、用户注册页面布局
***3.***导航栏功能实现
***4.***收藏功能实现（临时用户）
***5.***用户登录、注册实现
***6.***用户的个人收藏功能实现

完成过程中遇到的问题及解决办法

***1.***前端布局中div、文本等居中问题

解决办法：用flex布局、text-align、margin、绝对位置解决
反省：css还是用不熟练，天知道我仅仅为了把东西布局到页面正中花了多少心思。可以考虑多参考其他网页的页面布局以及多练手。

***2.***导航栏实现不同链接展示问题

问题：一开始使用.append方法增加html内容，后来发现这样页面信息无法保存。
解决办法：给不同标签的链接加上不同class，点击时分别显示对应的内容，其他的隐藏。
反省：可能还是写得少看得少，这个办法我也是自己想的，不晓得其他人怎么解决的，不管怎样，最终效果达到了（就是过程充满艰辛…）。

***3.***未登录时使用临时收藏夹跳出提示框

题外话：一开始的提示框太难看了，又没法修改内容，于是想自己写一个。
问题：提示框的出现用下降实现，但会有一直点就一直下降问题。
解决办法：直接上代码
$('.alert').css("top", 50+"px").show().animate({top:"+=20px"}, 100);
反省：嗯…写代码要靠脑子的（要么有强大的搜索能力应该也行…但我没）

***4.***临时收藏功能

题外话：说了个实话，这个功能跟我一开始想的不一样…是因为一开始没考虑到记录用户到数据库的问题，所以想用这个实现，算阴差阳错吧。
问题：一开始不知道怎么实现增加对应的div的class
解决办法：直接上代码

$('.icon').on('click', function () {
            var b_src = $(this).attr('src');
            if(b_src == '/static/imgs/collect1.png'){
                $(this).attr('src', '/static/imgs/collect0.png');
                $(this).parent().removeClass('hascolloect');
            }else if(b_src == '/static/imgs/collect0.png'){
                $(this).attr('src', '/static/imgs/collect1.png');
                $(this).parent().addClass('hascolloect');
            }
        })

注：这不是最终完成代码，只截取了涉及本问题部分。（重点：用.parent()解决）
反省：有的时候真是为自己的机智折服…（没别的本事，只能在这种小小的问题上高兴一下下）

***5.***登陆后显示功能列表

题外话：显示的问题的话在网上找到了直接的解决办法
问题：判断用户是否登录，若登录则显示功能列表，用本身logined的判断不成功
解决办法：用$('#login').text().indexOf("Hello") >= 0判断，完整代码如下：

$('.collect').hide();
if($('#login').text().indexOf("Hello") >= 0){
    var timer;
    $('#login').mouseover(function () {
        clearTimeout(timer);
        $('.collect').show();
    })
    $('#login').mouseout(function () {
        timer = setTimeout(function () {
            $('.collect').hide();
        }, 50);
    })
    $('.collect').mouseover(function () {
        clearTimeout(timer);
        $('.collect').show();
    })
    $('.collect').mouseout(function () {
        timer = setTimeout(function () {
            $('.collect').hide();
        }, 50);
    })
}

***6.***用户的个人收藏传递到后台

题外话：这个问题可多…我几乎是要从开始到放弃到自闭，好在后台数据库的问题小伙伴解决了，只剩前端传参的问题（虽然这也是个可大的问题…一开始小伙伴想到用form表单解决，解决是解决了，但带来的问题更多，我又不想修复这方面的bug，坚信ajax可以解决这个问题的！）
问题：用ajax传参不成功（html500错误码）
解决办法：上代码

function add_fav(fav_id){
    $.ajax({
        cache: false,
        type: "post",
        url: "{% url "stars" %}",
        data:{'fav_id': fav_id},
        async: true,
        beforeSend:function(xhr, settings){
            xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
        },
    });
}
add_fav($(this).parents().children('.webid').text());

注：我一开始一直以为是url的问题（实际应该也有问题），改了半天，检查发现提交到./star/这个地址去了，而不是我所想的使用view.py里的star这个方法。后来发现小伙伴一开始给的路径没配置好，这个方法本来就需要路径实现，最终url填的就是实现这个方法的路径。顺带一提，网上说cache: false,这一句去掉也会报html500错误码。且这一句不加会有跨域的错误。
小问题1：传参数据不对
问题描述：一开始用，检查的时候才发现获取不到信息。
解决办法：我在前端页面加了一个不可见的

标签，里面内容为,之后再用.text()获取里面的信息。
反省：我真的想知道别人是怎么解决这个问题的…要不然我真觉得自己可机智了
小问题2：后台获取信息有误
题外话：这咱真不知道什么情况，咱也不敢问…我是看着小伙伴的代码直接复制粘贴的。
解决办法：

exist = record.fav.get(id=int(fav_id))

改为

try:
    exist = record.fav.get(id=int(fav_id))
except:
    exist = None

小问题3：对应修改的用户和实际信息不匹配
解决办法：

username = request.POST.get('username', None)

改为

user=request.session['user_name']

反省：咱啥也不知道…

***7.***用户数据传递到后台后，在前端显示收藏情况

问题描述1：在个人收藏页面只显示收藏数据，点击导航栏又可以显示全部链接，需在同一个页面实现
解决办法：用了两个for循环，分别加不同的class，在点击个人收藏后，隐藏包含全部链接的for循环的元素；点击导航栏时，隐藏包含收藏链接的for循环的元素。
问题描述2：在点击导航栏后，需要判断元素是否为收藏，然后显示相应的图标。
解决办法：在包含全部链接的for循环中加一层判断，再加一层包含收藏链接的for循环，如果两个元素相同，说明该元素被收藏，显示被收藏图标，否则在循环结束后显示未被收藏图标。代码如下（包含1、3问题的解决）：

{% for web in c_Webs %}
<div class="conitem con{{ web.type }} collectcon">
    <p class="urlitem">
        <p style="display: none" class="webid">{{ web.id }}</p>
        <img src="/static/imgs/collect1.png" class="icon">
        <a href="{{ web.urls }}">
            {{ web.title }}
        </a>
    {% ifequal web.type 'bilibili'%}
        <span class="from">bilibili</span>
    {% endifequal %}
    {% ifequal web.type 'jianshu'%}
        <span class="from">简书</span>
    {% endifequal %}
    {% ifequal web.type 'weibo'%}
        <span class="from">微博</span>
    {% endifequal %}
    {% ifequal web.type 'github'%}
        <span class="from">github</span>
    {% endifequal %}
    </p>
</div>
{% endfor %}
{% for web in Webs %}
<div class="conitem con{{ web.type }} normalcon">
    <p class="urlitem">
        <p style="display: none" class="webid">{{ web.id }}</p>
        {% if c_Webs %}
            {% for item in c_Webs %}
                {% ifequal web item %}
                    <img src="/static/imgs/collect1.png" class="icon hascollect">
                {% endifequal %}
            {% endfor %}
            <img src="/static/imgs/collect0.png" class="icon nocollect">
        {% else %}
            <img src="/static/imgs/collect0.png" class="icon nocollect">
        {% endif %}
        <a href="{{ web.urls }}">
            {{ web.title }}
        </a>
    {% ifequal web.type 'bilibili'%}
        <span class="from">bilibili</span>
    {% endifequal %}
    {% ifequal web.type 'jianshu'%}
        <span class="from">简书</span>
    {% endifequal %}
    {% ifequal web.type 'weibo'%}
        <span class="from">微博</span>
    {% endifequal %}
    {% ifequal web.type 'github'%}
        <span class="from">github</span>
    {% endifequal %}
    </p>
</div>
{% endfor %}

注：其中一长串的ifequal判断是用来加文本标签的，与本问题无关
问题描述3：在实际写的过程中，因为问题2的解决方法带来了新的问题，就是根据循环中相同两个元素相同的次数会显示对应次数的图标。
解决办法：给所有图标加上class注明该图标是否被收藏，若被收藏则不显示未被收藏的图标。代码如下：

if($('.icon').hasClass('hascollect')){
    $('.hascollect').parents().children('.nocollect').hide();
}

反省：有的时候真是不知道是自己太傻，没见过真正有效率的解决方法，还是说有点机智，对于各种bug都想到了解决方法…
***8.***最后发现一个…凡是实现不同显示的问题，都可以用添加、删除class解决！

个人总结

因为这个真的耗费了挺大心力的…（虽然主要是因为前期不作为导致后来赶工赶得要死）在星期四、星期五基本满课，以及上周末犯懒没写物理作业的极度困难情况下，硬是挤出时间（在水课上写了好多…）勉勉强强完成了这个项目（虽然后面改bug的时候已经超过截止时间了…）最后写这个总结也花了我一上午…
总的来说还是有收获的吧，果然还是要好好学习啊…
接下去我又要面对各种因为这个而拖欠的作业了…以及期末各种大作业。
啊，人生…