基于WeX5的新闻类HTML5 App开发和设计.docVIP

基于WeX5的新闻类HTML5 App开发和设计 　　本文是基于WeX5工具来开发的新闻类的HTML5 App，利用MySQL数据库来分类储存数据，WeX5在制作app具有、快速开发、多端运行、开源免费等优点。 　　【关键词】WeX5 数据库 HTML5 App 　　1 WeX5工具 　　WeX5是一款免费开源跨端Hybrid App的开发工具。WeX5具有可视化、快速开发、多端运行、开源免费等优点。 　　1.1 快速开发 　　WeX5页面组件是可视化页面设计，以模块化形式快速开发，开发、编程、调试是一体化集成开发环境，并且不需要原声开发经验即可使用。 　　1.2 多端运行 　　WeX5支持Android 端app开发运行、ios端app开发运行WeChat(微信)端app开发运行。 　　1.3 开源免费 　　永久免费，运行框架全部开源，底层内库也是开放的，Apache开源协议商业友好。 　　2 关键功能模块的设计 　　2.1 登录注册模块 　　主要由login控制器类实现。具体实现上包含login、register方法，用于产生验证码的verify方法和用于注册控制checkRegister的方法、用于登录校验的checklogin方法及用于找回密码的getPassword方法。其中通过post方法获得提交的用户提交的注册信息(这里考虑到get方法不安全)。用等函数对所获得的信息进行处理，用MD5函数进行密码加密等操作。 　　2.2 后台管理功能模块 　　后台的核心功能是增删改查操作数据，这个操作只需要用add、delete、save就可以方便的实现。其实模块关键点在于权限控制。我们按部门来为管理员划分角色，分为高级管理员和普通管理员，不同级别管理员权限不同、责任不同。高级管理员可以添加和删除普通管理员账号，普通管理员进行数据的增删改查具体操作。 　　2.3 MySQL数据库设计 　　通过对该项目内容的需求模型进行分析，将数据库划分为9张数据库表，其储存内容为： 　　2.3.1 党务政务表 　　包括部门机构、通知公告、政策文件、人事管理、政务公开、党建之窗等二级目录。 　　2.3.2 新闻快递表 　　包括剑河新闻、乡镇之窗、新闻视频、部门动态。 　　2.3.3 平安剑河表 　　法治剑河、综合动态、治安防控、纠纷调解、见义勇为、网格服务、平安常识。 　　2.3.4 剑河旅游表 　　包括景点、线路、美食、酒店、资讯、特产、视频、留言。 　　2.3.5 个人中心表 　　包括用户注册信息、用户登录记录、用户书签等。 　　2.3.6 社情民意表 　　包括群众来信（公开/非公开）、投诉举报（公开/非公开）。 　　2.3.7 便民服务 　　包括政务中心、医疗卫生、脱贫攻坚、民生查询。 　　2.3.8 百信生活 　　包括房屋租赁、求职招聘、交通出行、常用电话查询、保修服务、科技知识、剑河公益。 　　测试连接来创建数据库表TABLE，创建一个example_News的数据库表create table，开始添加字段，数据类型为VARCHAR，新闻要闻内容页表中的9个字段为例，fID、fTitle、fImg、fAlt、fClass、fAuthor、fData、fText、fFilter。 　　主?IfID、字段长度50、确保数据唯一； 　　文章的标题fTitle、字段长度200； 　　图片名称fImg，字段长度200、(储存图片名称)； 　　图片详情fAlt 、字段长度200、图片加载失败出现的内容； 　　文章分类 fClass、字段长度50； 　　作者fAuthor、字段长度50（定义长度也可为20，） 　　来源fSource、字段长度50；作者fAuthor、字段长度50； 　　时间日期fData、字段长度50；正文fText、字段长度20000 (数据库表的排序规则和字符集定义的均为utf8格式，则字段设置的最大值为 (65535-1-2-4-30*3)/3=21812字段）； 　　过滤显示字段fFilter、字段长度50；(前端调用，区分二级目录下不同的文件位置，用来过滤后显示内容的字段）。 　　3 HTML5页面设计 　　管理员从后台把数据录入,数据经过处理为前端可直接显示的html5文件,新闻类app数据以图片和文本为主。我们要把文章标题、文章来源、时间日期、正文和图片等用javascript编码来实现。 　　（1）考虑到手机屏幕尺寸不同，我们要设置为自适应宽度，我们在body里的table中设置宽度在width=”100%”,保障可以自适应手机屏幕尺寸。 　　（2）简单用程序把我们所要显示的文章标题、来源、时间等文本消息导入到html文件b