115.【SpringBoot(IDEA)+Vue(Vscode)前后端交互】(二)

简介: 115.【SpringBoot(IDEA)+Vue(Vscode)前后端交互】

(三)、IDEA部分

1.创建SpringBoot项目

创建SpringBoot并引入web依赖。

2.创建两个实体类

1.com/jsxs/pojo/User.java

用于用户的认证

package com.jsxs.pojo;
/**
 * @Author Jsxs
 * @Date 2023/5/13 19:51
 * @PackageName:com.jsxs.pojo
 * @ClassName: User
 * @Description: TODO
 * @Version 1.0
 */
public class User {
    int id;
    String username;
    String password;
    public int getId(){
        return id;
    }
    public void setId(int id){
        this.id = id;
    }
    public String getUsername(){
        return username;
    }
    public void setUsername(String username){
        this.username = username;
    }
    public String getPassword(){
        return password;
    }
    public void setPassword(String password){
        this.password = password;
    }
}

2.com/jsxs/pojo/Result.java

用于返回状态码

package com.jsxs.result;
/**
 * @Author Jsxs
 * @Date 2023/5/13 19:53
 * @PackageName:com.jsxs.result
 * @ClassName: Result
 * @Description: TODO
 * @Version 1.0
 */
public class Result {
    //响应码
    private int code;
    public Result(int code){
        this.code = code;
    }
    public int getCode(){
        return code;
    }
    public void setCode(int code){
        this.code = code;
    }
}

3.创建控制层

controller/LoginController.java

package com.jsxs.controller;
import com.jsxs.pojo.User;
import com.jsxs.result.Result;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.util.HtmlUtils;
import java.util.Objects;
/**
 * @Author Jsxs
 * @Date 2023/5/13 19:53
 * @PackageName:com.jsxs.controller
 * @ClassName: LoginController
 * @Description: TODO
 * @Version 1.0
 */
@Controller
public class LoginController {
    @CrossOrigin
    @PostMapping(value = "api/login")
    @ResponseBody
    public Result login(@RequestBody User requestUser){
        //对html 标签进行转义,防止XSS攻击
        //分别与接收到的User类的username和password进行比较,根据结果的不停Result(不同的响应码)
        String username = requestUser.getUsername();
        username = HtmlUtils.htmlEscape(username);
        if(!Objects.equals("1",username) || !Objects.equals("1",requestUser.getPassword())){
            String message = "账号密码错误";
            System.out.println("test");
            return new Result(400);
        }else{
            System.out.println("成功!!");
            return new Result(200);
        }
    }
}

4.配置后端响应的端口

server.port=8443

(四)、Vue和SpringBoot交互

1.同时运行IDEA和Vscode

IDEA

Vscode: npm run serve

2.访问登入界面

访问: http://localhost:8080/#/login

密码输入正确后 显示成功。

相关文章
|
5天前
|
Java 应用服务中间件 Maven
Spring Boot项目打war包(idea:多种方式)
Spring Boot项目打war包(idea:多种方式)
20 1
|
4天前
|
XML JavaScript 前端开发
springboot配合Freemark模板生成word,前台vue接收并下载【步骤详解并奉上源码】
springboot配合Freemark模板生成word,前台vue接收并下载【步骤详解并奉上源码】
|
3天前
|
前端开发 JavaScript Java
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
|
3天前
|
数据采集 监控 安全
java数字工厂MES系统全套源码Java+idea+springboot专业为企业提供智能制造MES解决方案
"MES" 指的是制造执行系统(Manufacturing Execution System)。MES在制造业中扮演着至关重要的角色,它是位于企业资源计划(ERP)系统和车间控制系统之间的系统,用于实时收集、管理、分析和报告与制造过程相关的数据。
10 0
|
4天前
|
JavaScript Java 关系型数据库
基于springboot+vue+Mysql的交流互动系统
简化操作,便于维护和使用。
16 2
|
5天前
|
Java 关系型数据库 MySQL
【毕业设计】基于Springboot的B2B平台医疗病历交互系统
【毕业设计】基于Springboot的B2B平台医疗病历交互系统
17 0
|
5天前
|
数据采集 Web App开发 JavaScript
vscode跟踪vue代码方法
vscode跟踪vue代码方法
11 0
|
5天前
|
安全 Java 数据库连接
在IntelliJ IDEA中通过Spring Boot集成达梦数据库:从入门到精通
在IntelliJ IDEA中通过Spring Boot集成达梦数据库:从入门到精通
|
5天前
|
JSON JavaScript Java
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
26 0
|
5天前
|
JavaScript 前端开发 数据可视化
Spring_Vue前后分离记录1(vue从安装到使用的两种方式)
Spring_Vue前后分离记录1(vue从安装到使用的两种方式)
8 0