基于Python的手机舆情系统

图4.2 用户登陆页面设计

登录验证图如图4.3 所示：

返回用户登录登录失败否用户名和密码是否正确是登录成功

图4.3 登录验证图

17

在登陆页面输入用户名和密码以后，点击提交按钮，触发jquery绑定事件，jquery通过input 输入框的ID来获取用户输入的用户名密码。然后由jquery ajax利用POST方式把用户名密码传给后台，由后台再查数据库user表中的数据来进行比对。如果用户名密码正确，后台则返回前台的json串没有error，则前端就认为用户名密码正确。则做相应的跳转；如果后台在数据库未找到用户名或者密码错误，则后台返回前端带有error的json串，则前端读取到错误信息，则不做相应的跳转。用户就停留在登录页面继续登录，直到后台判断用户名密码正确返回前端没有error的json串，则用户登录成功。

Jquery利用ajax post方式传json给后台关键代码见附录代码片段1；后台制作登录接口，及查询数据库user表关键代码见附录代码片段2。

除此之外，利用jquery在提交请求之前判断用户名和密码是否为空，只要有一个为空，则请求无法发送，并在页面中警告（红色字体）用户名和密码不能为空。其中关键jquery代码为：

if (!userInfo.user_name || !userInfo.password) { $('#errorInfo').html('用户名和密码不能空').show();return;}

第4.2节 自定义频道

描述：频道就是起到一个根标题的作用，可以把频道理解成平时归置物品或者整理信息的时候的一个举足轻重的分类标签。如果没有频道的分类，在你添加的栏目少时，并不感觉怎么样，当添加的栏目多的时候，就会明显乱成一团。这就是设定频道的意义。

程序运行效果图如图4.4—图4.6所示：

图4.4 添加频道提示

18

图4.4所示 是用户首次登录系统，或数据库中没有找到相关用户中的频道数据时,提示添加新的导航频道。

图4.5 交互模态框

图4.5 是点击编辑频道按钮，弹出添加导航交互模态框。

图4.6 添加导航

图4.6所示 是点击添加导航按钮，出现一个input框并在输入框内输入自定义频道名称。

19

图4.7 频道页面

图4.7所示 点击编辑完成会提示即将完成此操作是否确定，点击确定，添加成功添加自定义频道。默认跳转到新创建的频道页面下，若因程序出错或因为不明因素导致添加失败则弹出报错模态框。

点击编辑完成后程序的运行过程，点击编辑完成后，js先判断input输入框中是否为空。频道名为空时，提示错误频道名字不能为空。如果频道名字js验证通过，则通过ajax向后台提交请求，后台则通过api针对数据做处理。直接操作数据库，添加频道。

后台接口处理数据，并操作数据库关键代码见附录代码片段3。

第4.3节 自定义栏目

栏目就是频道的的内容，也就是相当于你在整理信息是被贴上标签的内容。

程序运行效果图如图4.8—图4.9所示：

20