Spring Boot基础学习之(六):前后端交互实现用户登录界面

 

 本次项目所有能够使用的静态资源可以免费进行下载

静态资源

 本篇博客写的内容,是一个系列,内容都是关于spring boot架构的学习,实现前后端交互,极大的解放双手spring boot学习系列这是关于spring boot的专栏,后期也会不定期进行更新。内容都是有序号的,一步接着一步。Spring Boot 基础学习之(四)页面通过自定义LocaleResolver组件实现网页页面的的中英文转换_不想睡醒的梦的博客-CSDN博客本篇文章则是在此博文的基础上完善登陆界面。

前后端交互,实现用户登录界面的功能。通过spring boot实现在后端对此功能的实现。

索引网页代码修改一:最开始的索引网页源码放在上一篇博文当中了,有感兴趣的小伙伴可以去了解在<input>标签添加name属性,为了后端能拿到用户在次输入的值。 

在后端创建用户控制类:用以获取前端用户输出的账户和密码,在进行判断

package com.example.demo2.Controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.util.StringUtils;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;


import javax.servlet.http.HttpSession;

@Controller
public class loginController {

    @RequestMapping("/user/login")      //交给前端去调用
    public String login(@RequestParam("username") String username, @RequestParam("password") String password, Model model, HttpSession session){  
    //@RequestParam("username")获取前端用户登录时,用户名 password则是密码
    //Model:创建一个属性,并赋值,然后在传给前端显示
        if(StringUtils.hasText(username)==true && "123".equals(password)){  //进行判断,没有设置很复杂,设置要求:只要用户名有内容,并且密码为123就登录成功
            session.setAttribute("loginuser",username);   //if判断成功后,就为session设置属性和值
                return "dashboard";  //返回则是跳转页面
        }
        else
            model.addAttribute("msg","信息填写错误");    //如果用户登录没有成功则,显示在页面上,并返回到索引网页
            return "index";
    }
}

HttpSession原理
当用户第一次访问Servlet时,服务器端会给用户创建一个独立的Session
并且生成一个SessionID,这个SessionID在响应浏览器的时候会被装进cookie中,从而被保存到浏览器中
当用户再一次访问Servlet时,请求中会携带着cookie中的SessionID去访问
服务器会根据这个SessionID去查看是否有对应的Session对象
有就拿出来使用;没有就创建一个Session(相当于用户第一次访问)
 

 后端控制器设置完成了,接下来就是前端如何去进行调用

索引网页代码修改二:

  第一处红色方框则是将登陆界面交给咱们刚才创建的登录控制器,进行用户登录信息的核实,如果核实满足要求则是跳转页面到dashboard.html网页中。

这时就会出现一个问题

 登录成功会显示,用户登录时账户和密码:但是我们在日常的网页访问时,则不会出现这种问题,那如何进行修改呢?

其实很简单

第一步:修改控制器中return 返回的值

修改为return "redirect:/main.html";

但是在静态资源没有此网页,哪有该怎么办呢?

假设用户登录成功,需要跳转到其他网页,那该如此进行跳转呢?

 

对:就是咱们在之前博客提到的,自定义组件实现网页的跳转

@Configuration
public class Myconfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("index");  //访问/时则是跳转到index网页
        registry.addViewController("/index.html").setViewName("index"); 
        registry.addViewController("/main.html").setViewName("dashboard");//访问main.html网页则是跳转到dashboard网页

    }

重新启动项目,进行登录

没有出现前面的那种问题,出现则是咱们跳转页面的域名。

问题一:上面的操作则是用户能够一次登陆成功的操作,那如果用户登录时信息填写不满足情况该如何提示用户呢?

如果用户登录失败则是跳转到用户登录界面,并且显示提示信息,像这样:

代码在上面登录控制器中:往前端传递一个值用以显示作为用户登陆失败的提示信息 

后端传递的值,需要在前端调用

 添加这一行代码即可:msg则是后端传递的属性,注意:这里要添加一个判断语句 就是if语句因为只有登🦌失败才能显示定义的提示信息 判断语句:判断前端传递的msg属性是否为空,为空则不显示,不为空则显示。

总结:登陆界面的实现流程

1:在索引网页添加属性,为了让后端能够获取到用户登录的账户名和密码

2:当后端得到用户登录的信息时,则是验证用户登录的信息是否满足咱们的条件,满足则进行网页跳转,不满足将网页跳转到索引网页,并给前端传递一个参数,用以显示提示信息

3:当用户登陆成功时,进行跳转到一个未定义的网页,然后通过自定义配置,将这个未定义网页调转到登录成功后的界面:解决信息泄露的问题

  • 3
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要实战下载一个基于Spring Boot和Vue 3的大型前后分离项目,可以按照以下步骤进行: 1. 确保你已经安装了相关的开发环境,包括Java开发环境和Node.js环境。可以在官方网站上下载并安装最新版本的JDK和Node.js。 2. 打开终或命令行界面,并通过npm安装Vue CLI(Vue Command Line Interface)。在终中运行以下命令: ``` npm install -g @vue/cli ``` 3. 创建一个新的Vue 3项目。在终中运行以下命令: ``` vue create my-project ``` 根据提示选择使用Vue 3版本和一些其他配置选项。 4. 进入项目目录。在终中运行以下命令: ``` cd my-project ``` 5. 开发前。通过Vue CLI提供的开发服务器,在本地运行前项目并进行开发。在终中运行以下命令: ``` npm run serve ``` 这将启动开发服务器,并提供一个本地地址,例如:http://localhost:8080。在浏览器中打开此地址,你将看到默认生成的Vue欢迎页面。 6. 下载Spring Boot项目。可以在GitHub等代码托管平台上搜索和下载基于Spring Boot的后项目模板。选择一个合适的项目,下载并解压缩。 7. 在IDE(如IntelliJ IDEA)中打开后项目。将此项目导入你的IDE,并按照需要进行配置和修改。 8. 运行后项目。通过IDE的运行按钮或在终中运行以下命令启动后项目: ``` ./mvnw spring-boot:run ``` 后项目将启动,并监听默认口8080。 9. 在Vue前项目中配置跨域访问。由于前后分离,前将运行在不同的域上,需要配置后允许跨域访问。在Vue项目的src目录下创建一个vue.config.js文件,并在其中添加以下代码: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', ws: true, changeOrigin: true } } } } ``` 10. 在前项目中发起API请求。根据后项目的API文档,在前项目的代码中编写对后接口的调用。可以使用Vue提供的axios等HTTP库来发送请求。 通过以上步骤,你就可以开始在本地开发一个基于Spring Boot和Vue 3的大型前后分离项目实战。根据实际需求,你可以进一步完善前后交互和功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不想睡醒的梦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值