2025-1-21-简易登录功能的实现

前端

我们需要两个输入框，一个登录按钮，像这样（为了好看，用的是element-ui的组件，使用的话需要先去下载文件引用）

代码如下

系统

      <el-form ref="form" :model="user" label-width="80px">
      <el-form-item label="用户名">
          <el-input v-model="user.userID" style="width: 30%; margin: 0 auto;"></el-input>
      </el-form-item>
      <el-form-item label="密码">
          <el-input v-model="user.password" style="width: 30%; margin: 0 auto;"></el-input>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" @click="dy">立即登录</el-button>
          <el-button @click="zc">注册</el-button>
      </el-form-item>
  </el-form>

然后呢我们就需要将数据传回到后端去了，这里用的是vue+axios将储存有我们输入两个数据的user以post方式传输，根据传回来的数据来进行不同的操作，我这里是成功登入就将界面展示，同时储存相应的数据，也可以是临时储存一下，转换到另一个主界面html中，失败则是不转换，就出现两条警告消息

   dy(){
        var _this = this;
        axios({
          method: 'post',
          url: 'http://localhost:8080/dy',
          data:_this.user
          }).then((res) => {
            if(Array.isArray(res.data) && res.data.length > 0&&res.data!='fail'){
              _this.isShowDy=false;
              _this.isShow=true;
              _this.user=res.data[0];
              _this.$message({
                message: '登录成功',
                type: 'success'
              });
              setTimeout(() => {
                _this.$message({
                  message: '欢迎您,' + _this.user.userID,
                  type: 'success'
                });
              }, 3000);
            }else if(res.data=='fail'){
              _this.$message({
                message: '登录失败',
                type: 'warning'
              });
              setTimeout(() => {
                _this.$message({
                  message: '您可能还未注册或账号密码错误',
                  type: 'warning'
                });
              }, 3000);
            }
        })
      },

后端代码因为是用的springboot的模型，在新建时类型就选择了maven，依赖项选择了我们的spring web，lombok，MyBatis Framework，MySQL Driver，连接数据库什么的就不说了，在这里提一下依赖的目的呢，主要是现在我们不注意版本使用lombok的时候会有不兼容问题，导致使用@Data的getter跟setter方法不能取到值，如果也有这种问题把设置里的注解编译器换成从项目类路径获取，或者自己从网上查找解决

跳过构造结构，在mapper的接口中我们需要有从数据库拿到数据的语句，这就是我们登录需要的语句

    @Select("select * from user where UserID=#{UserID} and password=#{password}")
    public List<user> selectdy(String UserID, String password);

下边呢我们需要先引入fastjson依赖，这是来进行json跟java对象之间转换的，我放在了编辑处理器中

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.78</version>
        </dependency>

然后我们就是登录的GetMapping跟PostMapping，我有很多的输出语句，毕竟是简易的，而且也被lombok卡了好久，确实是红温了，完整体错误提示用try跟catch来打配合；这两个函数是一样的，获取到请求体中的json格式后我们将他转化成String类型，再转成user类型，然后实行查找方法，用isEmpty()来验证是否有值以此决定传输回前端的数据

    @GetMapping("/dy")
    public void dy(HttpServletRequest req, HttpServletResponse res) throws IOException {
        System.out.println("开始登录,查找个人信息中");
        //获取请求体数据
        BufferedReader reader = req.getReader();
        String line = reader.readLine();
        System.out.println(line);
        //获取到为json格式，我们将其转化为java对象
        user u= JSON.parseObject(line,user.class);
        System.out.println(u.toString());
        System.out.println(u.getUserID());
        //实行查找方法，用list<user>承接，再用isEmpty验证是否为空
        List<user> u1=s.selectdy(u.getUserID(),u.getPassword());
        System.out.println(u1);
        res.setContentType("application/json;charset=UTF-8");
        String JsonU=JSON.toJSONString(u1);
        if(!u1.isEmpty()){
            res.getWriter().write(JsonU);
        }
        else {
            res.getWriter().write("fail");
        }

    }
    @PostMapping("/dy")
    public void dy2(HttpServletRequest req, HttpServletResponse res) throws IOException {
        this.dy(req, res);
    }

这基本上就是我通用的一个简易模板，如果需要更多功能也是在这基础上增加，基本上不会被影响到