计算机科学与技术毕业论文 正文参考2 代码拼图+详细说明.docxVIP

四、系统功能实现

（一）项目搭建

通过执行命令的方式来创建项目，npminstall--globalvue-cli、vueinitwebpackzfb、cdzfb、npminstall，必须按顺序执行命令，这样就可以创建一个基础的Vue项目。

再此之前，需要解决浏览器适配的问题。因为我们选择了VantUI库，官网提供了Viewport布局和Rem[13]布局适配，这里我选择了Rem布局适配。先安装两个插件，postcss-pxtorem是一款PostCSS插件，用于将px单位转化为rem单位，amfe-flexible用于设置rem基准值。安装好后，再项目根目录新建一个配置文件vue.config.js。配置如图44所示，图中的postcss对象就是我们要设置的代码。PostCSS配置好后，还需要再main.js的入口文件引入import?amfe-flexible。这样浏览器适配就完成了。

图44浏览器适配代码

（二）实现登录功能

先介绍家长的登录功能，如图45所示，当点击登录按钮时，发起请求，对请求参数moible和password加密，请求成功后，判断返回值res.result是否为true，若为true继续执行代码，否则阻止，接着判断该手机号是否已注册为家长，若是则缓存token和random值，并登录跳转到首页。若该手机号并不是家长号，则提示用户是否注册为家长号，确定则绑定并登录跳转到首页，否则取消家长绑定。

图45验证登录代码

接着介绍学生的登录功能。当学生输入姓名、学号、密码、学校编码时，直接请求登录接口，如图46所示，若接口返回的数据正常，同样缓存token和random，还要缓存学号和姓名，便于再首页请求接口。若未输入学校编码，则先查询是否有重复学生，如图47所示，根据返回的数据res.data是否有值，有值则重复，阻止登录并提示学生。没值则登录成功。

（三）实现首页功能

该功能只介绍重点部分。进入首页以后，第一步也是最重要的一步，就是关联孩子，若是没有绑定孩子，后续功能都无从谈起。不过再这里不介绍如何关联孩子，而是关联之后。

当再个人中心关联成功后，返回首页，会调用查询关联孩子的接口，如图49，获取之前保存再store中的userInfo.userId，查询findBindedStudents接口，并保存到state.bindedStudents中，后续的功能会需要经常用到该变量。

图46用户信息与学生关联

再进入首页时，监听bindedStudents的值，如图50所示，判断val是否有值，有值则跟上次存储再本地的学生信息做比较，若此次绑定的孩子与本地存储的学生是相同，则把最新的数据缓存起来，若没有，则默认绑定第一个孩子。

图50信息监听与比较

我们可以根据缓存的学生信息，判断该学生是否是会员，通过以下两句代码就可以知道拥有哪些会员科目。