天马学航——智慧教务系统(移动端)开发日志一

天马学航——智慧教务系统(移动端)开发日志一

日志摘要：完成了学生端+教师端登陆功能的实现以及相应功能的后端调优

开发日志中所有图片均为概念图，请大家以实际发布上线为准

一、学生端登陆功能开发

老生常谈的问题：

没有思路怎么办：那就先写前端！

前端技术：HarmonyOS

1、使用ArkTS构建简单的前端界面：

import router from '@ohos.router'
import promptAction from '@ohos.promptAction'
import StudentLogins from '../../HttpModel/Student/StudentLogins'
@Entry
@Component
struct StudentLogin {
  @State message: string = 'Hello World'
  sid:string = null
  pwd:string = null
  build() {
    Row(){
      Column({space:30}) {
        Text("学生登陆")
          .fontSize(40)
          .fontWeight(FontWeight.Bolder)
          .fontFamily("楷体")
        //账号
        Row({space:20}){
          Text("账号")
            .fontSize(20)
          TextInput({placeholder:'请输入账号'})
            .width(250)
            .height(50)
            .onChange(value=>{
              this.sid=value
            })
        }
        .width('100%')
        .justifyContent(FlexAlign.Center)
        //密码
        Row({space:20}){
          Text("密码")
            .fontSize(20)
          TextInput({placeholder:'请输入密码'})
            .width(250)
            .height(50)
            .type(InputType.Password)
            .onChange(value=>{
              this.pwd=value
            })
        }
        .width('100%')
        .justifyContent(FlexAlign.Center)
        //登陆按钮
        Button("登陆")
          .width(100)
          .onClick(()=>{
            console.log("前端数据"+this.sid+this.pwd)
           //此处向后端发送请求并处理相应
      }
      .width('100%')
      .height(300)
      .justifyContent(FlexAlign.Center)
      .backgroundColor(Color.White)
      .borderRadius(10)
    }
    .height('100%')
    .width('100%')
  }
}

2、在前端调用向后端发送请求方法

StudentLogins.StuLogin(this.sid,this.pwd)
    .then(resp => {
    if(resp.toString()==='1'){
        promptAction.showToast({
            message: '登陆成功',
            duration: 2000,
            bottom: 50
        });
        router.pushUrl({
            url:"pages/view/Student/Student",
            params:{'id':1}
        },
                       router.RouterMode.Single,
                       err => {
            if(err){
                console.log("跳转失败")
            }
        }
                      )
    }
    else if(resp.toString()==='0'){
        promptAction.showToast({
            message: '账号密码错误',
            duration: 2000,
            bottom: 50
        });
    }
    else {
        promptAction.showToast({
            message: '请求失败，请检查网络设置',
            duration: 2000,
            bottom: 50
        });
    }
})
})

3、发送以及接收请求方法：

import http from '@ohos.net.http';
import IP from '../../IP'

class StudentLogins{
  baseUrl:string = IP.ip
  StuLogin(id:string,pwd:string):Promise<number>{//异步处理返回值
    const data = {
      username:id,
      password:pwd
    }
    return new Promise((resolve,reject) => {
      //创建请求
      let httpRequest = http.createHttp()
      //发送请求
      httpRequest.request(
        `${this.baseUrl}/Slogin`,
        {
          method:http.RequestMethod.GET,
          extraData:data,
          connectTimeout: 10000,
          readTimeout:10000
        },
      )
        .then(resp => {
          if(resp.responseCode === 200){
            console.log('http请求成功！'+resp.result)
            if(resp.result === '欢迎同学'){
              resolve(1)
            }
            else resolve(0)
          }
          else {
            console.log('请求失败')
          }
        })
        .catch(error => {
          console.log("请求发现异常"+error)
          reject(-1)
        })
    })
  }
}

const studentlogin = new StudentLogins()
export default studentlogin as StudentLogins

3、后端代码：

技术选型：Java web

由于移动端和网页端结构不一样，所以这里采用context进行优化，专一于移动端

package contaller.Student;

import MyBatisModel.dao.StudentMapper;
import MyBatisModel.pojo.LoginStudent;
import MyBatisModel.utills.MybatisUntills;
import org.apache.ibatis.session.SqlSession;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class StudentLogin extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json");
        resp.setCharacterEncoding("UTF-8");
        ServletContext ctx = getServletContext();//移动端
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        System.out.println("接收到前端的数据");
        System.out.println("账号："+username+"密码: "+password);

        //Mybatis操作
        SqlSession sql = MybatisUntills.getSqlSession();
        StudentMapper mapper = sql.getMapper(StudentMapper.class);
        Map<String,Object> map = new HashMap<String, Object>();
        map.put("sid",username);
        map.put("pwd",password);
        List<LoginStudent> st = mapper.StudentLogin(map);
        if(st.size()==0){
            resp.getWriter().write("账号或密码错误！");
            sql.close();
        }
        else {
            resp.getWriter().write("欢迎同学");
            HttpSession session = req.getSession();
            session.setAttribute("username",username);//存入session
            ctx.setAttribute("username",username);//移动端
            sql.close();
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

Mybatis部分大家可以参考JDBC

二、教师端登陆功能开发

与学生端相同，这里不再赘述

三、兼容性问题

由于Java web中的session不支持手机端的数据同步

在不使用令牌的条件下，我在后端使用了Servletcontext对手机端数据同步的问题进行进一步的优化

以确保每个界面能同步到该用户的用户名信息

 ServletContext ctx = getServletContext();//移动端
 
   resp.getWriter().write("欢迎同学");
            HttpSession session = req.getSession();
            session.setAttribute("username",username);//存入session
            ctx.setAttribute("username",username);//移动端
            sql.close();
        }