留守儿童关爱之家网站的详细设计与实现主要是根据前面的留守儿童关爱之家网站的需求分析和留守儿童关爱之家网站的总体设计来设计页面并实现业务逻辑。主要从留守儿童关爱之家网站界面实现、业务逻辑实现这两部分进行介绍。
当进入留守儿童关爱之家网站的时候，系统以上中下的布局进行展示，首先映入眼帘的是系统的导航栏，下面是轮播图，再往下是公告栏，其主界面展示如下图4-1所示。
图4-1 前台首页界面图
留守儿童关爱之家网站的用户可以进行注册登录，当用户左上角“注册”按钮的时候，当填写上自己的账号+密码+确认密码+昵称+邮箱+手机号等后再点击“注册”按钮后将会先验证输入的有没有空数据，再次验证密码和确认密码是否是一样的，最后验证输入的账户名和数据库表中已经注册的账户名是否重复，只有都验证没问题后即可会员注册成功。其用注册界面展示如下图4-2所示。
图4-2用户注册界面图
用户注册关键代码如下：
public function register()
{
if (Request::isPost()) {
$request = Request::param();
$request['create_time'] = isset($request['create_time']) ? $request['create_time'] : date('Y-m-d H:i:s');
$request['update_time'] = isset($request['update_time']) ? $request['update_time'] : date('Y-m-d H:i:s');
$result = $this->validate($request, $this->validate);
if (true !== $result) {
$data['error'] = 30000;
$data['message'] = $result;
} else {
$request['password'] = md5($request['password']);
$result = $this->model->register($request, $this->table);
$data = $result;
}
} else {
$data['error'] = 30000;
$data['message'] = "field的值不能为空！";
}
return json_encode($data);
}
public function register($request=[],$table_name = ''){
$username = $request['username'];
$bol = $this->where(['username'=>$username])->find();
if (!$bol){
$result = self::allowField(true)->save($request);
if ($result) {
return ['result' => 1];
} else {
return ['error' => ['code' => 3000, 'message' => '注册失败']];
}
}else{
return ['error' => ['code' => 3000, 'message' => '注册失败,账号已存在']];
}
}
留守儿童关爱之家网站中的前台上注册后的用户是可以通过自己的账户名和密码进行登录的，当会员输入完整的自己的用户名和密码信息并点击“登录”按钮后，将会首先验证输入的有没有空数据，再次验证输入的账户名+密码和数据库中当前保存的用户信息是否一致，只有在一致后将会登录成功并自动跳转到留守儿童关爱之家网站的首页中；否则将会提示相应错误信息，用户登录界面如下图4-3所示。
图4-3用户登录界面图
用户登录关键代码如下：
public function login()
{
if (Request::isPost()) {
$request = Request::param();
$result = $this->validate($request, $this->validate);
if (true !== $result) {
$data['error'] = 30000;
$data['message'] = $result;
} else {
$request['password'] = md5($request['password']);
$result = $this->model->login($request, $this->table);
$data = $result;
}
} else {
$data['error'] = 30000;
$data['message'] = "field的值不能为空！";
}
return json_encode($data);
}
public function login($request=[],$table_name = ''){
$username = $request['username'];
$password = $request['password'];
$bol = $this->where(['username'=>$username])->find();
if ($bol){
$password = md5($password);
if ($request['password']==$bol['password']) {
//添加token信息
$access_token['create_time'] = date('Y-m-d H:i:s');
$access_token['update_time'] = date('Y-m-d H:i:s');
$access_token['info'] = json_encode($bol);
// $access_token['info'] = $bol;
$access_token['token'] = md5(date('Y-m-d H:i:s'));
$bol_token = Db::name('AccessToken')->insert($access_token);
if ($bol_token){
$data['obj'] = $bol;
$data['obj']['token'] = $access_token['token'];
return ['result' => $data];
}else{
return ['error' => ['code' => 5000, 'message' => '登录失败,token生成失败']];
}
} else {
return ['error' => ['code' => 5000, 'message' => '登录失败,密码不正确']];
}
}else{
return ['error' => ['code' => 5000, 'message' => '登录失败,账号不存在']];
}
}
点击“学习资源”这个菜单，可以查看到系统中所有添加的学习资源信息进行查询，如果想要了解某一学习资源的详细信息，点击后面的“详情”会进入详情界面；可以进行点赞+评论+收藏等，学习资源界面如下图4-4所示。
图4-4学习资源界面图
当访客点击“公告消息”后就可以看到网站公告、关于我们、网站介绍、前台公告栏信息等相关的信息，公告消息页面如图4-5所示。
图4-5公告消息界面图
点击“参加活动”这个菜单，可以查看到自己的参加活动信息，如果想要了解某一宣传活动的详细信息，点击后面的“详情”会进入详情界面；参加活动界面如图4-6所示。
图4-6参加活动界面图
留守儿童关爱之家网站中的管理人员在“系统用户”这一菜单是中可以对注册的注册用户和管理员进行管控。界面如下图4-7所示。
图4-7系统用户界面图
个人信息，在此界面图可对个人的头像、昵称等信息进行更新；个人信息界面界面如下图4-8所示。
图4-8个人信息界面图
4.2.3 修改密码界面
修改密码：管理员和用户点击“修改密码”按钮，可以对登录密码进行更改，首先输入原密码，然后再输入新密码和确认密码，当原密码正确，输入两次新密码一致，则修改成功，否则给出错误提示信息。修改密码界面如下图4-9所示。
图4-9 修改密码界面图
密码修改代码如下：
public function get_list()
{
$request = Request::param();
$result['list'] = $this->model->get_list($request, $this->table, $this->table_id);
$result['count'] = $this->model->list_count($request, $this->table, $this->table_id);
$data['result'] = $result;
return json_encode($data);
}
4.2.4 轮播图管理界面
管理员可以对轮播图进行提交，还可以进行查询、重置、删除、添加等操作。界面如下图4-10所示。
图4-10轮播图管理界面图
">