前后端分离,使用vue3整合SpringSecurity加JWT实现登录校验

前段时间写了一篇spring security的详细入门,但是没有联系实际。

所以这次在真实的项目中来演示一下怎样使用springsecurity来实现我们最常用的登录校验。本次演示使用现在市面上最常见的开发方式,前后端分离开发。前端使用vue3进行构建,用到了element-plus组件库、axios封装、pinia状态管理、Router路由跳转等技术。后端还是spring boot整合springsecurity+JWT来实现登录校验。

本文适合有一定基础的人来看,如果你对springsecurity安全框架还不是很了解,建议你先去看一下我之前写过的spring security框架的快速入门:

springboot3整合SpringSecurity实现登录校验与权限认证(万字超详细讲解)_springboot3 + springsecurity6 校验密码-CSDN博客

技术栈版本:vue3.3.11、springboot3.1.5、spring security6.x

业务流程:

可以看到整个业务的流程还是比较简单的,那么接下来就基于这个业务流程来进行我们具体代码的编写和实现;

前端:

新建一个vue项目,并引入一些具体的依赖;我们本次项目用到的有:element-plus、axios、pinia状态管理、Router路由跳转(注意我们在项目中使用到的pinia要引入持久化插件)

在vue项目中新建两个组件:Login.vue(登录组件,负责登录页面的展示)、Layout.vue(布局页面,负责整体项目的布局,登录成功之后就是跳转到这个页面)

路由的定义:在router文件夹下新建index.ts文件

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'login',component: () => import('@/components/Login.vue')},{path: '/layout',name: 'layout',component: () => import('@/components/Layout.vue')}]
})export default router

定义Login登录组件为默认的组件,并定义Layout组件;

useToken的状态封装:在stoers文件夹下新建useToken.ts

import { defineStore } from 'pinia'
import { ref } from 'vue'
const useTokenStore = defineStore('token', ()=>{
const token=ref()const removeToken=()=>{token.value=''
}return {token,removeToken}
},
{persist: true}
)export default useTokenStore

axios的封装:在utils文件夹在新建request.ts文件

import axios from "axios";
import  useTokenStore from '@/stores/useToken'
import { ElMessage } from 'element-plus';
// 先建一个api
const api = axios.create({baseURL: "http://localhost:8888",timeout: 5000
});
// 发送请求前拦截
api.interceptors.request.use(config =>{
const useToken = useTokenStore();
if(useToken.token){console.log("请求头toekn=====>", useToken.token);// 设置请求头// config.headers['token'] = useToken.token;config.headers.token = useToken.token;
}return config;},
error =>{return Promise.reject(error);
}
)// 响应前拦截
api.interceptors.response.use(response =>{console.log("响应数据", response);
if(response.data.code !=200){ElMessage.error(response.data.message);
}return response;
},
error =>{return Promise.reject(error);
}
)export default api;

在请求前拦截,主要是为了在请求头中新增token。在request.ts中引入了useToken,并判断如果token不为空,那么在请求头中新增token。

在响应前也进行了一次拦截,如果后端返回的状态码不为200,那么就打印出错误信息;

接下来就可以在Login.vue中进行我们的登录逻辑的具体编写了(我直接将组件内容进行复制了,也不是什么太难的东西,主要还是element-plus的表单):

<template><div class="background" style="font-family:kaiti" ><!-- 注册表单 -->
<el-dialog v-model="isRegister" title="用户注册" width="30%"><el-form label-width="120px" v-model="registerForm"><el-form-item label="用户名"><el-input type="text"   v-model="registerForm.username"   ><template #prefix><el-icon><Avatar /></el-icon></template></el-input></el-form-item><el-form-item label="密码"><el-input  type="password" v-model="registerForm.password" ><template #prefix><el-icon><Lock /></el-icon></template></el-input></el-form-item><el-form-item><el-button type="primary" @click="registerAdd" >提交</el-button><el-button @click="isRegister = false">取消</el-button></el-form-item></el-form>
</el-dialog><!-- 登陆框 -->
<div class="login-box">
<el-formlabel-width="100px":model="loginFrom"style="max-width: 460px":rules="Loginrules"ref="ruleFormRef"><el-form-item label="用户名"  prop="username"><el-input v-model="loginFrom.username"  clearable  ><template #prefix><el-icon><Avatar /></el-icon></template></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="loginFrom.password"   show-password   clearable  type="password" ><template #prefix><el-icon><Lock /></el-icon></template></el-input></el-form-item><el-form-item label="验证码"  prop="codeValue"><el-input v-model="loginFrom.codeValue"  style="width: 100px;"  clearable  ></el-input><img :src="codeImage" @click="getCode" style="transform: scale(0.9);"/></el-form-item><el-button type="success" @click="getLogin(ruleFormRef)"  style="transform: translateX(50px)"  class="my-button">登录</el-button><el-button type="primary" @click="isRegister=true" class="my-button">注册</el-button></el-form></div></div>
</template><script lang="ts" setup>
import { ref,onMounted,reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import useTokenStore  from '@/stores/useToken'
import  api  from '@/utils/request'
import type { FormInstance, FormRules } from 'element-plus'
const ruleFormRef =  ref<FormInstance>()const loginFrom=ref({
username:'',
password:'',
codeKey:'',
codeValue:''
})const Loginrules=reactive({username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur'}],codeValue: [{ required: true, message: '请输入验证码', trigger: 'blur' }]})const registerForm=ref({username:'',password:''
})const codeImage=ref('')const isRegister=ref(false)const tokenStore = useTokenStore();const router = useRouter()const getLogin = async(formEl: FormInstance | undefined) => {if (!formEl)  returnawait formEl.validate((valid, fields) => {if (valid) {console.log('submit!')} else {ElMessage('请输入完整信息')return;}})let {data}=await api.post('/user/login',loginFrom.value)if(data.code==200){ElMessage('登录成功')console.log(data);tokenStore.token=data.datarouter.replace({name:'layout'})
}else{ElMessage('登录失败')
}}const getCode=async()=>{let {data}=await api.get('/getCaptcha')loginFrom.value.codeKey=data.data.codeKeycodeImage.value=data.data.codeValue}const registerAdd=async()=>{
let {data}=await api.post('/user/register',registerForm.value)if(data.code==200){ElMessage('注册成功')isRegister.value=false
}else{ElMessage('注册失败')isRegister.value=false}}// 页面加载完成获取验证码onMounted(()=>{
getCode()})</script>

这个页面中,我还加入了一个图形验证码。还有一个注册的表单。其他的就和普通的登录一样了;

这个页面的最终效果如图:

Layout.vue页面中,我们只进行两个方法的测试;一个是获取当前用户的具体信息,一个是退出登录的按钮;

<template><div class="common-layout"><el-container><el-header height="100px">头部<el-button type="primary" @click="getUserInfo">获取用户信息</el-button><el-button type="success" @click="Logout">退出登录</el-button></el-header><el-container><el-aside width="200px">菜单栏</el-aside><el-main>展示区</el-main></el-container></el-container></div></template><script lang="ts" setup name="Layout">
import { ref } from 'vue'
import api from '@/utils/request'
import {ElMessage} from 'element-plus'
import { useRouter } from 'vue-router'
import  useToeknStore from '@/stores/useToken'
const router = useRouter()const Logout =async () => {let data= api.get("/user/logout")
if(data.data.code==200){
ElMessage.success('退出成功')
// 清除token
useToeknStore().removeToken
router.replace({name:'login'})
}
else{ElMessage.error('退出失败')
}}const getUserInfo = async() => {let data=await api.get("/user/info")console.log('@',data);}</script>

数据库:

我新建一个数据表,用于登录校验:

CREATE TABLE users (id INT PRIMARY KEY AUTO_INCREMENT,username VARCHAR(255) NOT NULL,password VARCHAR(255) NOT NULL,expired BOOLEAN NOT NULL
);

这张表中只有简单的用户名,密码,和用户是否过期等字段;

后端:
 

新建一个spring boot项目,并导入以下的依赖:

   <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><scope>runtime</scope></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><dependency><groupId>com.auth0</groupId><artifactId>java-jwt</artifactId><version>4.3.0</version></dependency><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.3.1</version></dependency><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.18</version></dependency><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>2.0.21</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-security</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency>

后端使用MybatisPlus做用户的增、删、改、查等。基础的controller、service、mapper,我就不再这里进行赘述了;

新建一个类MyTUserDetail ,继承UserDetail:

@Data
public class MyTUserDetail implements Serializable , UserDetails {private static final long serialVersionUID = 1L;private User User;@JsonIgnore  //json忽略@Overridepublic Collection<? extends GrantedAuthority> getAuthorities() {return null;}@JsonIgnore@Overridepublic boolean isAccountNonExpired() {return true;}@JsonIgnore@Overridepublic boolean isAccountNonLocked() {return true;}@JsonIgnore@Overridepublic boolean isCredentialsNonExpired() {return true;}@JsonIgnore@Overridepublic boolean isEnabled() {return true;}
}

新建一个类MyUserDetailServerImpl,实现MyUserDetailServer接口的loadUserByUsername方法

@Service
public class MyUserDetailServerImpl implements MyUserDetailServer {@AutowiredUserMapper userService;@Overridepublic UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {User tUser = userService.selectOne(new LambdaQueryWrapper<User>().eq(username != null, TUser::getUsername, username));if (tUser == null) {throw new UsernameNotFoundException("用户名不存在");}MyTUserDetail myTUserDetail=new MyTUserDetail();
myTUserDetail.setTUser(tUser);return myTUserDetail;}
}

新建一个JwtUtils的工具类,来生成token;

@Component
public class JwtUtil {private final String secret="zhangqiao";private final Long expiration=36000000L;public String generateToken(Integer id) {Date now = new Date();Date expiryDate = new Date(now.getTime() + expiration);Algorithm algorithm = Algorithm.HMAC256(secret);return JWT.create().withSubject(String.valueOf(id)).withIssuedAt(now).withExpiresAt(expiryDate).sign(algorithm);}public Integer getUsernameFromToken(String token) {try {DecodedJWT jwt = JWT.decode(token);return Integer.valueOf(jwt.getSubject());} catch (JWTDecodeException e) {return null;}}/** 判断token是否过期* */public boolean isTokenValid(String token) {try {Algorithm algorithm = Algorithm.HMAC256(secret);JWT.require(algorithm).build().verify(token);return true;} catch (Exception e) {return false;}}/** 刷新token* */public String refreshToken(String token) {try {DecodedJWT jwt = JWT.decode(token);String username = jwt.getSubject();Algorithm algorithm = Algorithm.HMAC256(secret);Date now = new Date();Date expiryDate = new Date(now.getTime() + expiration);return JWT.create().withSubject(username).withIssuedAt(now).withExpiresAt(expiryDate).sign(algorithm);} catch (JWTDecodeException e) {return null;}}
}

新建一个Jwt的拦截类,继承一个OncePerRequestFilter类,用来在每次请求前拦截请求,并从中获取token,并判断这个token是否是我们用户表中的token;

如果是,那么将用户信息存储到security中,这样后面的过滤器就可以获取到用户信息了,如果不是,那么直接放行。我们会将这个拦截器加入到UsernamePasswordAuthenticationFilter过滤器之前。

@Component
public class JwtAuthenticationTokenFilter extends OncePerRequestFilter {@Autowiredprivate RedisTemplate<String,String> redisTemplate;@Autowiredprivate JwtUtil jwtUtil;@Overrideprotected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {//获取请求头中的tokenString token = request.getHeader("token");System.out.println("前端的token信息=======>"+token);//如果token为空直接放行,由于用户信息没有存放在SecurityContextHolder.getContext()中所以后面的过滤器依旧认证失败符合要求if(!StringUtils.hasText(token)){filterChain.doFilter(request,response);return;}//        解析Jwt中的用户idInteger userId = jwtUtil.getUsernameFromToken(token);//从redis中获取用户信息String redisUser = redisTemplate.opsForValue().get(String.valueOf(userId));if(!StringUtils.hasText(redisUser)){filterChain.doFilter(request,response);return;}MyTUserDetail myTUserDetail= JSON.parseObject(redisUser, MyTUserDetail.class);//将用户信息存放在SecurityContextHolder.getContext(),后面的过滤器就可以获得用户信息了。UsernamePasswordAuthenticationToken usernamePasswordAuthenticationToken=new UsernamePasswordAuthenticationToken(myTUserDetail,null,null);SecurityContextHolder.getContext().setAuthentication(usernamePasswordAuthenticationToken);filterChain.doFilter(request,response);}
}

security配置类的设置:

@Configuration
@EnableWebSecurity
public class MyServiceConfig {@Autowiredprivate JwtAuthenticationTokenFilter jwtAuthenticationTokenFilter;/** security的过滤器链* */
@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http)throws Exception {
http.csrf(AbstractHttpConfigurer::disable);http.authorizeHttpRequests((auth) ->auth.requestMatchers("/getCaptcha","user/login","user/register").permitAll().anyRequest().authenticated()
);
http.cors(cors->{cors.configurationSource(corsConfigurationSource());});
//自定义过滤器放在UsernamePasswordAuthenticationFilter过滤器之前http.addFilterBefore(jwtAuthenticationTokenFilter, UsernamePasswordAuthenticationFilter.class);return http.build();
}@Autowired
private MyUserDetailServerImpl myUserDetailsService;/*
* 验证管理器
* */@Beanpublic AuthenticationManager authenticationManager(PasswordEncoder passwordEncoder){DaoAuthenticationProvider provider=new DaoAuthenticationProvider();
//将编写的UserDetailsService注入进来provider.setUserDetailsService(myUserDetailsService);
//将使用的密码编译器加入进来provider.setPasswordEncoder(passwordEncoder);
//将provider放置到AuthenticationManager 中ProviderManager providerManager=new ProviderManager(provider);return providerManager;}//跨域配置@Beanpublic CorsConfigurationSource corsConfigurationSource() {CorsConfiguration configuration = new CorsConfiguration();configuration.setAllowedOrigins(Arrays.asList("*"));configuration.setAllowedMethods(Arrays.asList("*"));configuration.setAllowedHeaders(Arrays.asList("*"));UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", configuration);return source;}/** 密码加密器*/
@Beanpublic PasswordEncoder passwordEncoder(){return new BCryptPasswordEncoder();
}}

在security的配置类中,设置了跨域问题、拦截器链的配置(并将一些需要放行的接口放行,将我们自定义的Jwt拦截器加入了security拦截链)、密码编译器、AuthenticationManager 验证管理等等一系列配置;

Usercontroller控制器:

@RestController
@RequestMapping("/user")
public class UserController {@Autowiredprivate UserService userService;@Autowiredprivate PasswordEncoder passwordEncoder;@PostMapping("/login")public Result<String> login(@RequestBody DtoLogin dtoLogin) {System.out.println(dtoLogin);String token = userService.login(dtoLogin);return Result.successData(token);}@PostMapping("/register")public Result register(@RequestBody DtoLogin dtoLogin) {System.out.println(dtoLogin);TUser user = new TUser();user.setLoginAct(dtoLogin.getUsername());user.setLoginPwd(passwordEncoder.encode(dtoLogin.getPassword()));userService.save(user);return Result.success();}@Autowiredprivate RedisTemplate<String,String> redisTemplate;@Autowiredprivate JwtUtil jwtUtil;@GetMapping("/logout")public Result logout(@RequestHeader("token")String token){Integer id = jwtUtil.getUsernameFromToken(token);redisTemplate.delete(String.valueOf(id));return Result.success();}@GetMapping("/info")public Result info(@RequestHeader("token")String token){System.out.println("controller层获取到的token=======>"+token);Integer id = jwtUtil.getUsernameFromToken(token);String redisUser = redisTemplate.opsForValue().get(String.valueOf(id));MyTUserDetail myTUserDetail = JSON.parseObject(redisUser, MyTUserDetail.class);return Result.successData(myTUserDetail);}}

在UserController控制器中,由于登录方法比较复杂,我将登录方法重新在service中重写了,剩下的获取用户信息、用户注册、退出登录都直接在UseController中实现了;

service中重写的登录方法:
 

@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {@Autowiredprivate RedisTemplate<String,String> redisTemplate;@AutowiredAuthenticationManager authenticationManager;@Autowiredprivate JwtUtil jwtUtil;@Overridepublic String login(DtoLogin dtoLogin) {String codeRedis = redisTemplate.opsForValue().get(dtoLogin.getCodeKey());if (!dtoLogin.getCodeValue().equals(codeRedis)){throw new ResultException(400,"验证码错误");}// 验证码正确,删除redis中的验证码redisTemplate.delete(dtoLogin.getCodeKey());UsernamePasswordAuthenticationToken authenticationToken = new UsernamePasswordAuthenticationToken(dtoLogin.getUsername(),dtoLogin.getPassword());Authentication authenticate = authenticationManager.authenticate(authenticationToken);if(authenticate==null){throw new  ResultException(400,"用户名或密码错误");}
//        获取返回的用户信息Object principal = authenticate.getPrincipal();MyTUserDetail myTUserDetail=(MyTUserDetail) principal;System.out.println(myTUserDetail);
//        使用Jwt生成token,并将用户的id传入String token = jwtUtil.generateToken(myTUserDetail.getTUser().getId());redisTemplate.opsForValue().set(String.valueOf(myTUserDetail.getTUser().getId()), JSON.toJSONString(myTUserDetail),1, TimeUnit.DAYS);return token;}}

由于我们还是用了验证码,所以在这个登录方法中先判断了验证码、如果验证码正确。那么在判断传回来的用户名和密码。如果都正确,那么用Jwt返回一个token,token中携带的是用户的id;

至此,我们所有的前后端代码都已经写完了。那么,让我们具体的实验一下;

运行:

由于我刚创建的表,还没有添加数据,那么我现在前端点击注册,写入几条用户信息;

写入信息之后,我使用刚注册过的用户来登录一下:

注册成功之后,就会进入到我们自定义个Layout.vue组件内:

现在,我点击“获取用户信息”按钮,因为这个路径我们并没有放行,那么他访问时就会被我们自定义的Jwt拦截器拦截,并验证它请求头中携带的token是否正确。如果正确,则放行。如果不正确,那么就会放行到登录拦截器中。

可以看到,在控制台中打印出了用户的信息。这是肯定的,因为它这次请求携带的token是正确的,那么如果我们修改一下token的值,他还能正常访问到用户信息这个接口吗?

我修改了请求头中的token信息,可以看到立马这个请求就被拦截了。并爆出了403错误;

现在,我点击“退出登录”按钮,它应该删除useToken中的token值,并且跳转到登录页面。后端也会删除redsi中存储的用户数据;

现在,我们所有的任务都已经完成了。

我再整体理一下具体的思路:

前端发送请求后端,如果是登录请求,那么直接走登录接口即可,我将登录接口进行了方行,任何人都可以访问到登录接口,并且执行登录接口的逻辑;如果登录成功,会返回一个token,前后会将这个token存到useToken中,并且再以后的每次请求中都携带token;如果登录失败,返回一个报错信息即可。

如果前端发送的不是登录接口,但是前端携带可正确的token,那么会被我们自定义的Jwt拦截器拦截,并从中读取用户信息,放到security中共后续的拦截器使用;如果没有携带token,或者token不正确,那么后端会直接返回403的状态码提示;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/639731.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法每日一题: 分割数组的最大值 | 动归 | 分割数组 | 贪心+二分

Hello&#xff0c;大家好&#xff0c;我是星恒 呜呜呜&#xff0c;今天给大家带来的又是一道经典的动归难题。 题目&#xff1a;leetcode 410给定一个非负整数数组 nums 和一个整数 k &#xff0c;你需要将这个数组分成 k_ 个非空的连续子数组。设计一个算法使得这 k _个子数组…

Mybatis 动态SQL(set)

我们先用XML的方式实现 : 把 id 为 13 的那一行的 username 改为 ip 创建一个接口 UserInfo2Mapper ,然后在接口中声明该方法 package com.example.mybatisdemo.mapper; import com.example.mybatisdemo.model.UserInfo; import org.apache.ibatis.annotations.*; import jav…

mybatis的缓存机制

视频教程_免费高速下载|百度网盘-分享无限制 (baidu.com) MyBatis 有一套灵活而强大的缓存机制&#xff0c;主要分为两级缓存&#xff1a;一级缓存&#xff08;本地缓存&#xff09;和二级缓存&#xff08;全局缓存&#xff09;。 一级缓存&#xff08;本地缓存&#xff09;&a…

【网络奇遇记】揭秘计算机网络性能指标:全面指南

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;网络奇遇记、数据结构 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. 速率1.1 数据量1.2 速率 二. 带宽三. 吞吐量四. 时延4.1 发送时延4.2 传播时延…

PCIe-6328 八口USB3.0图像采集卡:专为工业自动化和机器视觉设计

PCIe-6328一块8口USB 3.0主控卡&#xff0c;专为工业自动化和机器视觉相关应用设计。USB 3.0或称作高速USB&#xff0c;是一项新兴总线技术&#xff0c;10倍于USB2.0的传输速度&#xff0c;尤其适用于高速数据存储和图 像设备。 绝大多数现有USB 3.0卡兼用多个接口于一个USB 3…

5. 函数调用过程汇编分析

函数调用约定 __cdecl 调用方式 __stdcall 调用方式 __fastcall 调用方式 函数调用栈帧分析 补充说明 不同的编译器实现不一样&#xff0c;上述情况只是VC6.0的编译实现即便是在同一个编译器&#xff0c;开启优化和关闭优化也不一样即便是同一个编译器同一种模式&#xff0c;3…

光催化专用设备太阳光模拟器装置

什么是光催化材料&#xff1f; 光催化材料是指通过该材料、在光的作用下发生的光化学反应所需的一类半导体催化剂材料。半导体是一种介于导体和绝缘体之间的物质&#xff0c;它有一个特殊的能带结构&#xff0c;即价带和导带之间有一个禁带&#xff0c;禁带的宽度决定了半导体…

linux压缩包形式安装mysql5.7

1. 下载 MySQL 压缩包 在官方网站或者镜像站下载 MySQL 压缩包。mysql-5.7.29-linux-glibc2.12.tar 下载地址&#xff1a; MySQL :: Download MySQL Community Server (Archived Versions) 2. 解压缩文件 使用以下命令解压 MySQL 压缩包&#xff1a; tar xvf mysql-5.7.29…

软考高项论文范文 | 进度管理

2017年5月&#xff0c;受某政府部门的委托&#xff0c;我单位承接了某信息共享与服务系统的建设工作&#xff0c;在本项目中我担任项目经理&#xff0c;负责项目的整体规划、组织实施和管理控制。某政府部门拥有多年积累的大量工作资源&#xff0c;这些信息是其开展各项行业服务…

南南合作里程碑!批量苏州金龙纯电公交正式交付哥斯达黎加

1月17日&#xff0c;哥斯达黎加电力研究所&#xff08;ICE&#xff09;收到了中国援助的批量苏州金龙海格纯电公交&#xff0c;该批车是中国应对气候变化南南合作援助哥斯达黎加项目的重要物资之一。中国驻哥斯达黎加特命全权大使汤恒出席交付仪式。 中国驻哥斯达黎加大使汤恒&…

esp8266小车智能wifi小车寒假营实战背篼酥老师

esp8266小车智能wifi小车寒假营实战 10节课 整车效果图如下 第一课 esp8266开发环境搭建和库文件加载 课程如下&#xff1a; 环境搭建 库文件下载链接&#xff1a;见文章末尾 第二课 小车模块组成和例程简介 课程如下&#xff1a; 车身PCB 小车电机 esp8266扩展板 esp8…

Flink实战之DataStream API

接上文&#xff1a;Flink实战之运行架构 Flink的计算功能非常强大&#xff0c;提供的应用API也非常丰富。整体上来说&#xff0c;可以分为DataStreamAPI&#xff0c;DataSet API 和 Table与SQL API三大部分。 其中DataStream API是Flink中主要进行流计算的模块。 DateSet API是…

vue3-组件通信

1. 父传子-defineProps 父组件&#xff1a; <script setup> import { ref } from vueimport SonCom from /components/Son-com.vueconst message ref(parent)</script><template><div></div><SonCom car"沃尔沃" :message"…

ctfshow-反序列化(web267-web270)

目录 web267 web268 web269 web270 总结 web267 页面用的什么框架不知道 看源码看一下 框架就是一种软件工具&#xff0c;它提供了一些基础功能和规范&#xff0c;可以帮助开发者更快地构建应用程序。比如Yii框架和ThinkPHP框架就是两个流行的PHP框架&#xff0c;它们提供…

Golang 中如何实现 Set

在Go编程中&#xff0c;数据结构的选择对解决问题至关重要。本文将探讨如何在 GO 中实现 set 和 bitset 两种数据结构&#xff0c;以及它们在Go中的应用场景。 Go 的数据结构 Go 内置的数据结构并不多。工作中&#xff0c;我们最常用的两种数据结构分别是 slice 和 map&#…

如何本地安装Python Flask并结合内网穿透实现远程开发

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

flutter 实现定时滚动的公告栏的两种不错方式

相同的部分 自定义一个类继承StatefulWidget 所有公告信息存放在list里 第一种 scrollControllerAnimatedContainer 逻辑如下 我们可以发现启动了一个timer计时器计时5秒&#xff0c;hasClients检查其目标对象&#xff08;我们用的是listview&#xff09;是否被渲染&#x…

HarmonyOS鸿蒙应用开发(三、轻量级配置存储dataPreferences)

在应用开发中存储一些配置是很常见的需求。在android中有SharedPreferences&#xff0c;一个轻量级的存储类&#xff0c;用来保存应用的一些常用配置。在HarmonyOS鸿蒙应用开发中&#xff0c;实现类似功能的也叫首选项&#xff0c;dataPreferences。 相关概念 ohos.data.prefe…

【操作系统】实验一 Linux操作系统安装

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的很重要&…

Simulink之Signal

Simulink.Signal 指定信号的属性 描述 此类使您能够创建工作区对象,用于分配或验证信号或离散状态的属性,如其数据类型、数字类型、维度等。您可以使用信号对象来: 将值指定给信号源未指定的信号属性(值为-1或auto)。 验证其值由信号源显式指定的信号属性。此类属性的…