springboot前后端交互小白教学
在上次前后端交互,我们使用的是最基本的HTML Servlet的组合,比较基础,今天我们来讲一讲Html Springboot框架,前后端交互实现更为简便,大大降低了我们开发人员在代码上面所花费的时间,那今天让我们一探究竟吧。
1.添加路由守卫
在前端我们在index.js中添加了路由守卫
在网址中直接去http://localhost:8081/#/main
由于路由守卫,我们不能直接进入main页面中,自动给我们跳转到登录页面中
2.验证token
添加token一块有4步:
- 登录成功后,后端生成token
- 前端接收,并保存
- 前端拦截器向后端发送
- 后端拦截器验证token
1. 登录成功后,后端生成token
-
package com.ffyc.common;
-
-
-
import com.auth0.jwt.JWT;
-
import com.auth0.jwt.JWTVerifier;
-
import com.auth0.jwt.algorithms.Algorithm;
-
import com.auth0.jwt.interfaces.DecodedJWT;
-
import org.springframework.context.annotation.Configuration;
-
import org.springframework.stereotype.Service;
-
-
import java.util.Date;
-
import java.util.HashMap;
-
import java.util.Map;
-
-
-
public class JWTUtil {
-
-
/**
-
* jwt 生成 token
-
*
-
* @param id
-
* @param account * @return
-
*/
-
public static String token(Integer id, String account) {
-
String token = "";
-
try {
-
//过期时间 为 1970.1.1 0:0:0 至 过期时间 当前的毫秒值 有效时间
-
Date expireDate = new Date(new Date().getTime() 60 * 60 * 24 * 1000);//过期时间
-
//秘钥及加密算法 加盐
-
Algorithm algorithm = Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE");
-
//设置头部信息
-
Map<String, Object> header = new HashMap<>();
-
header.put("typ", "JWT");//生成的类型
-
header.put("alg", "HS256");//加密算法
-
//携带 id,账号信息,生成签名
-
token = JWT.create()
-
.withHeader(header)//头部
-
.withClaim("id", id)//用户id
-
.withClaim("account", account)//用户账号
-
.withExpiresAt(expireDate)
-
.sign(algorithm);
-
} catch (Exception e) {
-
e.printStackTrace();
-
return null;
-
}
-
return token;
-
}
-
-
public static boolean verify(String token) {
-
try {
-
//验签
-
Algorithm algorithm = Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE");
-
JWTVerifier verifier = JWT.require(algorithm).build();
-
DecodedJWT jwt = verifier.verify(token);
-
return true;
-
} catch (Exception e) {//当传过来的 token 如果有问题,抛出异常
-
return false;
-
}
-
}
-
-
/**
-
* 获得 token 中 playload 部分数据,按需使用
-
*
-
* @param token
-
* @return
-
*/
-
public static DecodedJWT getTokenInfo(String token) {
-
return JWT.require(Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE")).build().verify(token);
-
}
-
}
将生成Token添加到admin对象中
2.前端接收,并保存
在main.js中添加验证token字段
3. 前端拦截器向后端发送
在main.js中添加
4.后端拦截器验证token
后端token拦截器:
-
package com.ffyc.common;
-
-
import com.fasterxml.jackson.databind.json.JsonMapper;
-
import org.springframework.web.servlet.HandlerInterceptor;
-
-
import javax.servlet.http.HttpServletRequest;
-
import javax.servlet.http.HttpServletResponse;
-
-
//Token 验证拦截器
-
public class Token implements HandlerInterceptor {
-
-
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
-
System.out.println("后端Token拦截器");
-
String adminToken=request.getHeader("token");
-
boolean res=JWTUtil.verify(adminToken);
-
if(!res){
-
CommonResult commonResult=new CommonResult(202,res,"token失效");
-
JsonMapper jsonMapper=new JsonMapper();
-
String json= jsonMapper.writeValueAsString(commonResult);
-
response.getWriter().print(json);
-
}
-
return res;
-
}
-
}
注册拦截器:
-
package com.ffyc.common;
-
-
import org.springframework.context.annotation.Configuration;
-
import org.springframework.web.servlet.config.annotation.*;
-
-
-
public class WebConfig implements WebMvcConfigurer{
-
-
public void addInterceptors(InterceptorRegistry registry) {
-
InterceptorRegistration inter = registry.addInterceptor(new Token());
-
inter.addPathPatterns("/admin/**"); //管理员需要拦截过滤地址
-
inter.excludePathPatterns("/admin/loginCtl/login");//放行地址
-
-
-
//放行行前台首页,文章详细信息等地址
-
//inter.excludePathPatterns("/swagger*/**"); //放行swagger
-
//inter.excludePathPatterns("/v2/**");//放行swagger
-
//inter.excludePathPatterns("/webjars/**");//放行swagger
-
}
-
-
-
}
在网址中直接搜索127.0.0.1:8080/admin/loginCtl/test
拦截器会进行验证,没有Token,返回CommomResult
3.完成最基本的登录功能
3.1 dao层
在dao层创建接口
-
package com.ffyc.dao;
-
-
import com.ffyc.model.Admin;
-
import org.springframework.stereotype.Repository;
-
-
//使spring创建并管理对象
-
public interface LoginDao {
-
public Admin Login(Admin admin);
-
}
-
-
-
mapper
-
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
-
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
-
<!--接口的添加-->
-
<mapper namespace="com.ffyc.dao.LoginDao">
-
<select id="Login" resultType="Admin">
-
select * from admin where account=#{account} and password=#{password}
-
</select>
-
</mapper>
3.2 model层
在model层创建admin类
-
package com.ffyc.model;
-
-
import lombok.Data;
-
import lombok.Getter;
-
import lombok.Setter;
-
import org.springframework.beans.factory.annotation.Value;
-
import org.springframework.stereotype.Component;
-
-
//lombok 可以自动创建get set方法
-
-
-
public class Admin {
-
private Integer id;
-
private String account;
-
private int password;
-
private String token;
-
-
public Integer getId() {
-
return id;
-
}
-
-
public void setId(Integer id) {
-
this.id = id;
-
}
-
-
public String getAccount() {
-
return account;
-
}
-
-
public void setAccount(String account) {
-
this.account = account;
-
}
-
-
public int getPassword() {
-
return password;
-
}
-
-
public void setPassword(int password) {
-
this.password = password;
-
}
-
-
public String getToken() {
-
return token;
-
}
-
-
public void setToken(String token) {
-
this.token = token;
-
}
-
}
3.2 service层
在service层写逻辑部分
-
package com.ffyc.service;
-
-
import com.ffyc.common.CommonResult;
-
import com.ffyc.common.JWTUtil;
-
import com.ffyc.dao.LoginDao;
-
import com.ffyc.model.Admin;
-
import org.springframework.beans.factory.annotation.Autowired;
-
import org.springframework.stereotype.Service;
-
import org.springframework.transaction.annotation.Transactional;
-
-
-
-
public class LoginService {
-
-
LoginDao loginDao;
-
public Admin login(Admin admin){
-
Admin a = loginDao.Login(admin);
-
-
return a;
-
-
}
-
-
}
3.4 web层
-
package com.ffyc.web;
-
-
import com.ffyc.common.CommonResult;
-
import com.ffyc.common.JWTUtil;
-
import com.ffyc.model.Admin;
-
import com.ffyc.service.LoginService;
-
import org.springframework.beans.factory.annotation.Autowired;
-
import org.springframework.web.bind.annotation.RequestBody;
-
import org.springframework.web.bind.annotation.RequestMapping;
-
import org.springframework.web.bind.annotation.ResponseBody;
-
import org.springframework.web.bind.annotation.RestController;
-
-
-
-
public class Controller {
-
-
LoginService loginService;
-
-
//后端可以接收前端提交的json数据,但是必须是对象接收,必须要在参数前面添加@RequestBody
-
public CommonResult login({ Admin admin)
-
Admin a = loginService.login(admin);
-
CommonResult commonResult=null;
-
if(a!=null) {
-
a.setToken(JWTUtil.token(a.getId(),a.getAccount()));
-
commonResult = new CommonResult(200, a, "登录成功");//可以对创建方法进封装
-
}else{
-
commonResult = new CommonResult(201, a, "账号密码错误");//可以对创建方法进封装
-
}
-
return commonResult;
-
}
-
-
}
加这个标签之后,前端就不需要再添加JsonString的方法
4.配置application.yml
-
#配置内置服务器的端口号
-
server:
-
port: 8080
-
-
#spring相关的配置
-
spring:
-
#配置数据库的连接信息,生成默认的数据源对象,生成JdbcTemplate,事务管理功能进行初始化
-
datasource:
-
url: jdbc:mysql://127.0.0.1:3306/map?serverTimezone=Asia/Shanghai
-
username: root
-
password: root
-
driver-class-name: com.mysql.cj.jdbc.Driver
-
type: com.alibaba.druid.pool.DruidDataSource #指定数据源类型,还需要创建其对象
-
initialSize: 5 #初始化时建立物理连接的个数 数据库连接池相关的配置
-
minIdle: 1 #最小连接池数量
-
maxActive: 20 #最大连接池数量
-
-
#mybatis配置 创建SqlsessionFactory
-
mybatis:
-
type-aliases-package: com.ffyc.model
-
mapper-locations: classpath:mappers/*Mappers.xml
-
configuration: #mybatis settings配置
-
map-underscore-to-camel-case: true
-
cache-enabled: true
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfkkkif
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24