system: [SYSTEM]

user: 5. 系统实现 5.1. 系统的基础配置 5.1.1. 系统环境搭建 本系统采用ThinkPHP的三层架构，开发工具使用了phpstorm，数据库mysql版本为5.5.53，服务器采用Apache，于Windows操作系统下进行开发使用，其前端框架使用了Bootstrap，兼容大部分浏览器，其中包括Chrome、Safari、Firefox、Internet Explorer (IE9以上完美支持)和Opera。 图8. E-R图 图9. 数据表结构图 5.1.2. 数据库的连接配置 本次系统开发使用的是ThinkPHP框架和MySQL数据库，由于ThinkPHP本身对MySQL数据库兼容性好，并且配置简单，只需要更改一下config.php这个项目下的配置项的值即可，所以十分简洁。具体配置如下： //'配置项' => '配置值' 'URL_MODEL'=>'0'，//URL模式 'DB_PREFIX'=>'md_'，//数据库表前缀配置 'DB_TYPE'=>'mysql'，//数据库类型 'DB_HOST'=>'localhost'，//数据库的地址 'DB_NAME'=>'recruit'，//数据库名 'DB_USER'=>'root'，//数据库登录名 'DB_PWD'=>'root'，//数据库登录密码 'DB_PORT'=>'3306'，//数据库端口 'MD5_PRE'=>'modai'，//定义用于MD5加密psw的后缀 之后就可以运用TP框架提供的操作函数直接连接到数据库进行操作。 5.2. 主页模块 系统的主界面如图10所示。 通过主页模块实现的功能为：根据session中的User的type来渲染模板，session不存在的话就跳转到登陆主页。 其前端的设计大致为：头部放置网页logo和导航栏，中间的内容为一个轮播图，底部有一个版权声明。为了能在各种不同的设备上达到一个比较好的视觉效果和使用体验，运用了现今较为成熟的bootstrap前端框架，其优秀的响应式布局，显示效果和较为丰富的插件，为之后的模板设计提供了很大的便利，并且由于其流式栅格系统构成的响应式布局使得网页在电脑上和各个移动端都有很好的显示效果。 其后端实现代码为： class Index Controller extends Controller { public function index(){ //判断用户是否登陆过，通过session if(isset($_SESSION['User'])&&$_SESSION['User']!=''){ if($_SESSION['User']['type']==1){ $this->redirect(U('Admin/index/index'));} if($_SESSION['User']['type']==2){ $this->redirect('BysIndex/index');//显示后台页面} if($_SESSION['User']['type']==3){ $this->redirect('SjIndex/index');//显示相应的后台页面} }else{$this->display('index/index');}} 图10. 主页图 5.3. 系统注册模块 前端页面的编写使用了bootstrap这个前端框架，首先编写了头部的导航栏，之后进行了注册的表单的设计，其中nav导航栏是通过TP框架中的include标签来引入的。 后端的工作主要就是进行对提交的注册数据进行一定的防注入处理和加密后存入数据库，在注册成功之后跳转至相应的首页并存入session变量，反之，跳出错误界面，提示重试。 5.4. 毕业生模块 毕业生主页使用了一个模板文件，其中的各个页面的跳转是通过锚点实现的。为了实现动态加载网页，使用了AJAX技术无刷新动态生成页面。 其左侧导航栏是通过bootstrap的tabtable选项卡和panel-group手风琴切换嵌套应用实现的，头部的导航栏是通过navbar等class属性对nav标签进行样式控制实现的。其中头部导航的下拉菜单中的跳转应用了js中的click方法。毕业生主页如图11所示。 其后端的实现功能主要是页面的赋值和渲染，具体代码如下： public function index(){ if(isset($_SESSION['User'])&&$_SESSION['User']!=''){ $User=session('User'); $name=$User['name']; $data=D('User')->getUserByName($name); $id=$data['id']; session('id'，$id); $num=M('resume')->where('md_userInfo_id='.$id.'')->count(); $data=array_merge($data，array('num'=>$num)); $this->assign('data'， $data);} $this->viewsume(); $this->display('index_personal/bys_index');} 图11. 毕业生主页图 毕业生的个人信息修改前端实现主要是通过一张提交表单，表单中默认填写有现在的登陆者的一些基本信息，方便用户进行订正，更改。后端的主要功能就是更新当前用户的数据库中的相关字段。 毕业生进行工作的查询时，可以选择搜索条件，当无条件的时候点击搜索按钮可以搜索全部的工作信息，之后点击“show details”后可以显示搜索的结果。其搜索结果图如图12所示。 前端的实现是通过一个判断条件的下拉菜单，一个搜索值填写框，搜索按钮和显示详情的按钮组成，其中的搜索值填写框通过JS来根据条件的不同，对其进行disabled与否的切换。搜索结果是由一个列表表单组成，其中操作一栏有一个按钮组，用于显示工作详情和填写简历。 后端的实现包括两个部分，一个部分是查找和显示搜索结果的方法，另一个就是通过AJAX实现的异步处理数据，实现了无刷新页面的渲染，通过这个方法很好的解决了TP中的display方法无法渲染当前页面的问题，通过对弹出层的赋值和页面生成实现对详情的展示。 后端的核心代码如下： 1. 查找功能和显示结果功能的实现： public function findwork(){ $searchdata=array( 'condition'=>$_POST['condition']， 'value'=>$_POST['value']); if($searchdata['condition']==0){ $data= M('compwork')->select(); return show(1，'查询成功！'，$data); 图12. 搜索结果图 }elseif ($searchdata['condition']==1){ $data= M('compwork')->where ('compname='.$searchdata['value'].'')->select(); return show(1，'公司信息查询成功！'，$data); }elseif ($searchdata['condition']==2){ $data= M('compwork')->where ('workname='.$searchdata['value'].'')->select(); return show(1，'职位查询成功！'，$data); }else{return show(0，'查询出错！');}} //显示工作列表 public function showdetail(){ $wid=$_POST['wid']; $compname=M('compwork')->where ('wid='.$wid.'')->find(); $workinfo=D('work')->getWorkById($wid); $work=array_merge($workinfo，array('compname'=>$compname)); return show(1，'查看成功！'，$work);} 2. AJAX实现详情显示和搜索结果的显示，以搜索结果的异步数据传输为例： search:function () { var condition=$('select[name=condition]').val(); var value=$('input[name=value]').val(); if(condition!=0&&!value){dialog.error(请输入要查询的值！);} varurl=index.php?m=Home&c=BysIndex&a=findwork var data={'condition':condition，'value':value}; //执行异步请求$.post $.post(url，data，function (result){ if(result.status==0){returndialog.error(result.message);} if(result.status==1){ var info=result.data; var html=''; for(vari=0;i if(i%2==0){html+='';} else { html+='';} html+=''+info[i].wid+''; html+=''+info[i].compname+''; html+=''+info[i].workname+''; html+=' href=#modal-detail data-toggle=modal title=查看 value='+info[i].wid+' onclick=search.detail('+info[i].wid+')> html+=''; html+=' document.querySelector('#result_show').innerHTML=html;}}，'JSON');//AJAX的post方法} 这里的jquery的$.post(url， data， function(result)， ’JSON’)方法中的参数url地址值为向后台传输数据的地址，data值为页面中获取到的条件和值所组成的数组，function(result)方法中包含了对result这一数组中的status值的判读和对data值的写入，进而进行对相应的div元素进行赋值和html代码的写入，整个后台处理后的结果以JSON数组的形式进行返回。 5.5. 管理员模块 为了能让管理员更为直观的看到后台数据的相关情况，优化用户的体验，在毕业生的图表中主要设计了一个年龄占比的扇形图和一个统计不同性别人数的条形图，在商家的图表中主要设计了商家发布的职位数的条形图。统计图表如图13所示。 前端实现是通过引入echart插件，在预设好的div元素中进行图形的绘制。绘制出的图形在交互上十分友好，鼠标悬停可以看到具体的数目和信息。 后端主要的工作是将后台的数据进行统计整理之后，以JSON数组的形式传给执行图形绘制的操作函数，进而进行绘图。 以下为TP框架的相关操作的代码(毕业生图表相关后端操作)： public function postAgedata(){ $age=D('User')->where('type=2')->field('age，count(age)')-> group('age')->select(); $result=array(); foreach ($age as $k=>$value){ $result[$k]['value']=$value['count(age)']; $result[$k]['name']=$value['age'].'岁';} exit(json_encode($result)); 图13. 统计图表 }//扇形图 public function postSexdata(){ $sex=D('User')->where('type=2')->field('count(sex)')->group('sex')->select(); $result=array(); foreach ($sex as $value){ $result[ ]=$value['count(sex)'];} exit(json_encode($result));}//条形图