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);}

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