vue+springboot登录与注册功能的实现

①首先写一个登录页面

<template>
<div style="background-color: #42b983;display: flex;align-items: center;justify-content: center;height: 100vh"><div style="background-color: white;display: flex;width: 50%;height: 50%;overflow: hidden;border-radius: 5px"><div style="flex:1"><img src="@/assets/login.png" style="width: 100%"></div><div style="flex: 1;display: flex;justify-content: center;align-items: center"><el-form style="width: 80%" :model="user"><div style="font-weight: bold;font-size: 20px;margin-bottom: 20px">欢迎登录后台管理系统</div><el-form-item><el-input placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="user.username"></el-input></el-form-item><el-form-item><el-input placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="user.password" show-password></el-input></el-form-item><el-form-item><el-input placeholder="请输入验证码" prefix-icon="el-icon-circle-check" v-model="user.validcode"></el-input></el-form-item><el-form-item><el-button type="primary" style="width: 100%">登录</el-button></el-form-item><div style="display: flex"><div style="flex: 1">还没账号？去<span style="color: #42b983;cursor: pointer">注册</span></div><div style="text-align: right;flex: 1;color: #42b983;cursor:pointer;">忘记密码</div></div></el-form></div></div>
</div>
</template>
<script>
export default {data(){return{user:{username:'',password:'',validcode:''}}}
}
</script>
<style scoped></style>

 大致效果：

 ②引入验证码组件

在component目录下新建一个ValidCode.vue：

<template><div class="ValidCode disabled-select" style="width: 100%; height: 100%" @click="refreshCode"><span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">{{item.code}}</span></div>
</template><script>
export default {name: 'validCode',data () {return {length: 4,codeList: []}},mounted () {this.createdCode()},methods: {refreshCode () {this.createdCode()},createdCode () {let len = this.length,codeList = [],chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789',charsLen = chars.length// 生成for (let i = 0; i < len; i++) {let rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]codeList.push({code: chars.charAt(Math.floor(Math.random() * charsLen)),color: `rgb(${rgb})`,padding: `${[Math.floor(Math.random() * 10)]}px`,transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`})}// 指向this.codeList = codeList// 将当前数据派发出去this.$emit('update:value', codeList.map(item => item.code).join(''))},getStyle (data) {return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`}}
}
</script><style>
.ValidCode{display: flex;justify-content: center;align-items: center;cursor: pointer;
}
.ValidCode span {display: inline-block;font-size: 18px;
}
</style>

在登录页引入：

<template>
<div style="background-color: #42b983;display: flex;align-items: center;justify-content: center;height: 100vh"><div style="background-color: white;display: flex;width: 50%;height: 50%;overflow: hidden;border-radius: 5px"><div style="flex:1"><img src="@/assets/login.png" style="width: 100%"></div><div style="flex: 1;display: flex;justify-content: center;align-items: center"><el-form style="width: 80%" :model="user"><div style="font-weight: bold;font-size: 20px;margin-bottom: 20px">欢迎登录后台管理系统</div><el-form-item><el-input placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="user.username"></el-input></el-form-item><el-form-item><el-input placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="user.password" show-password></el-input></el-form-item><el-form-item><div style="display: flex"><el-input placeholder="请输入验证码" prefix-icon="el-icon-circle-check" v-model="user.validCode" style="flex: 1"></el-input><div style="flex: 1;height: 32px"><valid-code @update:value="getCode"></valid-code></div></div></el-form-item><el-form-item><el-button type="primary" style="width: 100%">登录</el-button></el-form-item><div style="display: flex"><div style="flex: 1">还没账号？去<span style="color: #42b983;cursor: pointer">注册</span></div><div style="text-align: right;flex: 1;color: #42b983;cursor:pointer;">忘记密码</div></div></el-form></div></div>
</div>
</template>
<script>
import ValidCode from "@/components/ValidCode.vue";export default {name:'login-demo',components:{ValidCode},data(){return{code:'',user:{username:'',password:'',validCode:''}}},methods:{getCode(code){this.code=code}}
}
</script>
<style scoped></style>

 效果图（可以看到多了验证码）：

③springboot搭建后端接口

首先准备数据库：

CREATE TABLE `user` (`id` int(11) NOT NULL AUTO_INCREMENT,`username` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '用户名',`password` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '密码',`name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '姓名',`phone` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '电话',`email` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '邮箱',`address` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '地址',`avatar` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '头像',PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='用户表';

 用IDEA创建springboot工程：

创建springboot教程

连接数据库：

application.yml：

server:port: 9090
spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/honey2024?useSSL=false&useUnicode=true&characterEncoding=UTF-8&serverTimezone=GMT%2b8username: rootpassword: 123456

目录结构：

按照该目录创建文件夹

 CorsConfig：解决跨域问题

package com.example.springboot.common;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;@Configuration
public class CorsConfig {// 当前跨域请求最大有效时长。这里默认1天private static final long MAX_AGE = 24 * 60 * 60;@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法corsConfiguration.setMaxAge(MAX_AGE);source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置return new CorsFilter(source);}
}

Result：返回数据

package com.example.springboot.common;import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;/*** 接口统一返回包装类* 作者：程序员青戈*/
@Data
@AllArgsConstructor
@NoArgsConstructor
@Builder
public class Result {public static final String CODE_SUCCESS = "200";public static final String CODE_AUTH_ERROR = "401";public static final String CODE_SYS_ERROR = "500";private String code;private String msg;private Object data;public static Result success() {return new Result(CODE_SUCCESS, "请求成功", null);}public static Result success(Object data) {return new Result(CODE_SUCCESS, "请求成功", data);}public static Result error(String msg) {return new Result(CODE_SYS_ERROR, msg, null);}public static Result error(String code, String msg) {return new Result(code, msg, null);}public static Result error() {return new Result(CODE_SYS_ERROR, "系统错误", null);}}

WebController（controller文件夹下只用写这个）：控制登录和注册接口

package com.example.springboot.controller;import cn.hutool.core.util.StrUtil;
import com.example.springboot.common.Result;
import com.example.springboot.entity.User;
import com.example.springboot.exception.ServiceException;
import com.example.springboot.service.UserService;
import org.springframework.web.bind.annotation.*;import javax.annotation.Resource;@RestController
public class WebController {@ResourceUserService userService;@GetMapping("/")public Result hello(){return Result.success("success");}@PostMapping("/login")public Result login(@RequestBody User user){if(StrUtil.isBlank(user.getUsername())||StrUtil.isBlank(user.getPassword())){return Result.error("数据输入错误");}user=userService.login(user);return Result.success(user);}@PostMapping("/register")public Result register(@RequestBody User user){if(StrUtil.isBlank(user.getUsername())||StrUtil.isBlank(user.getPassword())){throw new ServiceException("输入不合法");}if(user.getUsername().length()>10||user.getPassword().length()>20){throw new ServiceException("长度过长");}user=userService.register(user);return Result.success(user);}
}

User：用户实体类，用来承接数据

package com.example.springboot.entity;import lombok.AllArgsConstructor;
import lombok.Data;@Data
public class User {private Integer id;private String username;private String password;private String name;private String phone;private String email;private String address;private String avatar;
}

GlobalException：引入自定义并使用

package com.example.springboot.exception;import com.example.springboot.common.Result;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseBody;@ControllerAdvice
public class GlobalExeception {@ExceptionHandler(ServiceException.class)@ResponseBodypublic Result serviceException(ServiceException e){return Result.error("500",e.getMessage());}
}

ServiceException： 自定义异常

package com.example.springboot.exception;public class ServiceException extends RuntimeException{public ServiceException(String msg){super(msg);}
}

UserMapper：定义接口，对数据库进行增删改查

package com.example.springboot.mapper;import com.example.springboot.entity.User;
import org.apache.ibatis.annotations.*;import java.util.List;@Mapper
public interface UserMapper {@Insert("insert into `user` (username, password, name, phone, email, address, avatar) " +"values (#{username}, #{password}, #{name}, #{phone}, #{email}, #{address}, #{avatar})")void insert(User user);@Update("update `user` set username = #{username} , password = #{password} , name = #{name} , phone=#{phone} , email = #{email} , avatar=#{avatar} where id = #{id}")void updateUser(User user);@Delete("delete from `user` where id=#{id}")void deleteUser(Integer id);@Select("select * from `user` order by id desc")List<User> selectall();@Select("select * from `user` where id =#{id} order by id desc")User selectbyid(Integer id);@Select("select * from `user` where name = #{name} order by id desc")List<User> selectbyname(String name);@Select("select * from `user` where username = #{username} and name = #{name} order by id desc")List<User> selectbymore(@Param("username") String username,@Param("name") String name);@Select("select * from `user` where username like  concat('%',#{username},'%') or name like concat('%',#{name},'%') order by id desc")List<User> selectbymo(@Param("username") String username,@Param("name") String name);@Select("select * from `user` where username = #{username} order by id desc")User selectbyUsername(String username);
}

Userservice：给接口编写实体方法

package com.example.springboot.service;import com.example.springboot.entity.User;
import com.example.springboot.exception.ServiceException;
import com.example.springboot.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.bind.annotation.RequestBody;import java.util.List;@Service
public class UserService {@AutowiredUserMapper userMapper;public void insertUser(User user){userMapper.insert(user);}public void updateUser(User user) {userMapper.updateUser(user);}public void deleteUser(Integer id) {userMapper.deleteUser(id);}public void batchdeleteUser(List<Integer> ids) {for(Integer id : ids){userMapper.deleteUser(id);}}public List<User> selectall() {return userMapper.selectall();}public User selectbyid(Integer id) {return userMapper.selectbyid(id);}public List<User> selectbyname(String name) {return userMapper.selectbyname(name);}public List<User> selectbymore(String username, String name) {return userMapper.selectbymore(username,name);}public List<User> selectbymo(String username, String name) {return userMapper.selectbymo(username,name);}public User login(User user) {User dbuser=userMapper.selectbyUsername(user.getUsername());if(dbuser == null){throw new ServiceException("账号不存在");}if(!user.getPassword().equals(dbuser.getPassword())){throw new ServiceException("账号或者密码错误");}return dbuser;}public User register(User user) {User dbuser=userMapper.selectbyUsername(user.getUsername());if(dbuser != null){throw new ServiceException("用户名已存在");}userMapper.insert(user);return user;}
}

 引入hutool：在pom.xml引进依赖

<dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.18</version>
</dependency>

 ④封装vue的网络请求

在vue终端安装依赖：

npm i axios

在vue中新建utils文件夹，该文件夹下新建request.js文件：

import axios from 'axios'// 创建可一个新的axios对象
const request = axios.create({baseURL: 'http://localhost:9090',   // 后端的接口地址  ip:porttimeout: 30000
})// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {config.headers['Content-Type'] = 'application/json;charset=utf-8';// let user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : null// config.headers['token'] = 'token'  // 设置请求头return config
}, error => {console.error('request error: ' + error) // for debugreturn Promise.reject(error)
});// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(response => {let res = response.data;// 兼容服务端返回的字符串数据if (typeof res === 'string') {res = res ? JSON.parse(res) : res}return res;},error => {console.error('response error: ' + error) // for debugreturn Promise.reject(error)}
)export default request

main.js引入：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import request from "@/utils/request";
Vue.config.productionTip = false
Vue.use(ElementUI,{size:'small'});
Vue.prototype.$request=request //引入request
new Vue({router,render: h => h(App)
}).$mount('#app')

登录页补充登录函数：

<template>
<div style="background-color: #42b983;display: flex;align-items: center;justify-content: center;height: 100vh"><div style="background-color: white;display: flex;width: 50%;height: 50%;overflow: hidden;border-radius: 5px"><div style="flex:1"><img src="@/assets/login.png" style="width: 100%"></div><div style="flex: 1;display: flex;justify-content: center;align-items: center"><el-form style="width: 80%" :model="user"><div style="font-weight: bold;font-size: 20px;margin-bottom: 20px">欢迎登录后台管理系统</div><el-form-item><el-input placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="user.username"></el-input></el-form-item><el-form-item><el-input placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="user.password" show-password></el-input></el-form-item><el-form-item><div style="display: flex"><el-input placeholder="请输入验证码" prefix-icon="el-icon-circle-check" v-model="user.validCode" style="flex: 1"></el-input><div style="flex: 1;height: 32px"><valid-code @update:value="getCode"></valid-code></div></div></el-form-item><el-form-item><el-button type="primary" style="width: 100%" @click="login">登录</el-button></el-form-item><div style="display: flex"><div style="flex: 1">还没账号？去<span style="color: #42b983;cursor: pointer">注册</span></div><div style="text-align: right;flex: 1;color: #42b983;cursor:pointer;">忘记密码</div></div></el-form></div></div>
</div>
</template>
<script>
import ValidCode from "@/components/ValidCode.vue";export default {name:'login-demo',components:{ValidCode},data(){return{code:'',user:{username:'',password:'',validCode:''}}},methods:{getCode(code){this.code=code},login(){this.$request.post('/login',this.user).then(res=>{console.log(res)})}}
}
</script>
<style scoped></style>

效果图：

⑤表单验证

 填写完表单验证规则后就是最终代码：

<template>
<div style="background-color: #42b983;display: flex;align-items: center;justify-content: center;height: 100vh"><div style="background-color: white;display: flex;width: 50%;height: 50%;overflow: hidden;border-radius: 5px"><div style="flex:1"><img src="@/assets/login.png" style="width: 100%"></div><div style="flex: 1;display: flex;justify-content: center;align-items: center"><el-form style="width: 80%" :model="user" :rules="rules" ref="loginRef"><div style="font-weight: bold;font-size: 20px;margin-bottom: 20px">欢迎登录后台管理系统</div><el-form-item prop="username"><el-input placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="user.username"></el-input></el-form-item><el-form-item prop="password"><el-input placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="user.password" show-password></el-input></el-form-item><el-form-item prop="code"><div style="display: flex"><el-input placeholder="请输入验证码" prefix-icon="el-icon-circle-check" v-model="user.code" style="flex: 1"></el-input><div style="flex: 1;height: 32px"><valid-code @update:value="getCode"></valid-code></div></div></el-form-item><el-form-item><el-button type="primary" style="width: 100%" @click="login">登录</el-button></el-form-item><div style="display: flex"><div style="flex: 1">还没账号？去<span style="color: #42b983;cursor: pointer">注册</span></div><div style="text-align: right;flex: 1;color: #42b983;cursor:pointer;">忘记密码</div></div></el-form></div></div>
</div>
</template>
<script>
import ValidCode from "@/components/ValidCode.vue";export default {name:'login-demo',components:{ValidCode},data(){const validateCode = (rule, value, callback) => {if (value === '') {callback(new Error('请输入验证码'));} else if(value.toLowerCase() !== this.code){callback(new Error('验证码错误'));} else {callback();}};return{code:'',user:{username:'',password:'',code:''},rules:{username:[{required:true,trigger:'blur',message:'请输入用户名'}],password:[{required:true,trigger:'blur',message:'请输入密码'}],code:[{validator:validateCode,trigger:'blur'}],}}},methods:{getCode(code){this.code=code.toLowerCase()},login(){this.$refs['loginRef'].validate((valid)=>{if(valid){this.$request.post("/login",this.user).then(res=>{if(res.code === '200'){this.$router.push('/')this.$message.success('登录成功')localStorage.setItem('honey-user',JSON.stringify(res.data))}else{this.$message.error(res.msg)}console.log(res);})}})}}
}
</script>
<style scoped></style>

注册页面与登录页面代码逻辑相似：

<template><div style="display: flex;align-items: center;justify-content: center;background-color: #669fefff;height: 100vh;"><div style="display: flex;width: 50%;background-color: white;border-radius: 5px;overflow: hidden;"><div style="flex: 1;"><img src="@/assets/register.png" alt="" style="width: 100%;"></div><div style="flex: 1;display: flex;align-items: center;justify-content: center;"><el-form :model="user" style="width: 80%;" :rules="rules" ref="registerRef"><div style="font-weight: bold; font-size: 20px;margin-bottom: 20px;text-align: center;">欢迎注册后台管理系统</div><el-form-item prop="username"><el-input placeholder="请输入用户名" v-model="user.username" prefix-icon="el-icon-user"></el-input></el-form-item><el-form-item prop="password"><el-input placeholder="请输入密码" v-model="user.password" show-password prefix-icon="el-icon-lock"></el-input></el-form-item><el-form-item prop="confirmPass"><el-input placeholder="请确认密码" v-model="user.confirmPass"></el-input></el-form-item><el-form-item><el-button type="primary" style="width: 100%;" @click="register">注册</el-button></el-form-item><div style="display: flex;"><div style="flex: 1;text-align: left">已没有账号？去<span style="color:aquamarine;cursor: pointer;" @click="$router.push('/login')">登录</span></div></div></el-form></div></div></div>
</template><script>
export default {name:'register',data() {const validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('请输入确认密码'));} else if(value !== this.user.password){callback(new Error('两次密码不一致'));} else {callback();}};return {code:'',user: {code:'',username: '',password: '',confirmPass:''},rules:{username:[{required:'true',message:'请输入账号',trigger:'blur'}],password:[{required:'true',message:'请输入密码',trigger:'blur'}],confirmPass:[{validator:validatePass,trigger:'blur'}],},}},methods:{getCode(code){this.code=code.toLowerCase()},register(){this.$refs['registerRef'].validate((valid=>{if(valid){this.$request.post("/register",this.user).then(res=>{if(res.code === '200'){this.$router.push('/login')this.$message.success('注册成功')}else{this.$message.error(res.msg)}console.log(res);})}}))}}
}
</script><style scoped></style>

最终效果：

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

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

相关文章

驶向未来：3D可视化模型重塑我们的道路认知

驶向未来：3D可视化模型重塑我们的道路认知

在科技的浪潮中&#xff0c;每一个革新都是对人类未来生活的深度洞察。而今&#xff0c;当可视化这一技术走进我们的视野&#xff0c;它不仅是一场视觉盛宴&#xff0c;更是一次对未来出行方式的全新探索。 一、从平面到立体&#xff0c;解锁道路新视角 你是否曾站在十字路口&…
阅读更多...
NS安装-CentOS服务器安装Nightscout CGM

NS安装-CentOS服务器安装Nightscout CGM

NS CGM 安装必要条件 有自己的云服务器好像没有2&#xff0c;有云服务器就行了 安装顺序 先安装数据库&#xff0c;目前支持的是 MongoDB &#xff0c;官方推荐4&#xff0c;其实目前最新版本就行。可以用宝塔安装&#xff0c;比较简单克隆代码&#xff0c;我是放到 /opt/ns…
阅读更多...
PHP小程序 获取二维码

PHP小程序 获取二维码

//获取token public function getAccessToken($appId,$appSecret) {// 请求API获取 access_token$url "https://api.weixin.qq.com/cgi-bin/token?grant_typeclient_credential&appid{$this->appId}&secret{$this->appSecret}";$result $this->g…
阅读更多...
抖音关键词搜索爬虫，抖音API数据接口，抖音商品详情数据采集

抖音关键词搜索爬虫，抖音API数据接口，抖音商品详情数据采集

抖音商品API接口抖音关键词搜索抖音直播间小黄车抖店商品数据采集 除了微博&#xff0c;小红书&#xff0c;抖音也是一个巨大的流量池。 除了评论&#xff0c;其实关键词搜索视频是更为常见的一个需求&#xff0c;于是上周末抽空开发了下&#xff0c;完成了 mvp。
阅读更多...
MQTT协议-ISO标准下基于发布/订阅范式的消息协议

MQTT协议-ISO标准下基于发布/订阅范式的消息协议

MQTT(消息队列遥测传输)是ISO 标准(ISO/IEC PRF 20922)下基于发布/订阅范式的消息协议。它工作在 TCP/IP协议族上&#xff0c;是为硬件性能低下的远程设备以及网络状况糟糕的情况下而设计的发布/订阅型消息协议&#xff0c;为此&#xff0c;它需要一个消息中间件 。 MQTT是一个…
阅读更多...
【单链表反转】图文解析 链表反转

【单链表反转】图文解析 链表反转

目录 例题描述&#x1f4a1; 思路一 &#xff08;推荐&#xff09; 代码实现 &#x1f4a1; 思路二 代码实现 引申1. 局部反转单链表2. k个一组反转链表 例题描述 反转一个链表 示例&#xff1a; 输入: 1->2->3->4->5->NULL输出: 5->4->3->2->1-…
阅读更多...
海外大带宽服务器连接失败：原因与解决策略

海外大带宽服务器连接失败：原因与解决策略

​随着全球互联网的发展&#xff0c;越来越多的企业和个人选择使用海外大带宽服务器来满足数据传输和业务需求。然而&#xff0c;在实际使用中&#xff0c;有时会出现服务器连接失败的问题。本文将为您分析原因并提供相应的解决策略。 一、海外大带宽服务器连接失败的原因 网络…
阅读更多...
Java三大框架简介与比较

Java三大框架简介与比较

一、引言 在Java开发领域&#xff0c;三大框架——Spring、Hibernate和MyBatis&#xff0c;各自扮演着重要的角色。它们为开发者提供了不同的解决方案&#xff0c;使得开发者能够更高效地构建企业级应用。本文将分别介绍这三大框架的特点、优势以及适用场景&#xff0c;并对它…
阅读更多...
PCL 计算点云AABB包围盒的体积

PCL 计算点云AABB包围盒的体积

目录 一、AABB包围盒二、代码实现三、结果展示四、相关链接本文由CSDN点云侠原创，原文链接。爬虫自重，把自己当个人。 一、AABB包围盒 AABB包围盒又称了 轴对齐包围盒，是点云包围盒里最简单的一种，其计算方法也极其简单。获取包围盒之后，根据包围盒的长宽高进行体积计算即…
阅读更多...
MySQL性能分析1——查看频次

MySQL性能分析1——查看频次

1、查看执行频次 查看当前数据库的INSERT,UPDATE,DELETE,SELECT的访问频次&#xff0c;得到当前数据库是以插入&#xff0c;更新和删除为主还是以查询为主&#xff0c;如果是以插入&#xff0c;更新和删除为主的话&#xff0c;那么优化比重可以轻一点儿。 语法&#xff1a; …
阅读更多...
武汉融资融券利率最低目前是多少？4.5%！如何计算的？

武汉融资融券利率最低目前是多少？4.5%！如何计算的？

融资融券利率是指证券公司提供的融资融券服务的费率&#xff0c;由证券公司根据市场行情情况而定&#xff0c;该费率由两部分组成&#xff0c;即融资利率和融券利率。目前市场上的融资利率最低一般是在4.5%~5%之间。 融资利率是指投资者从证券公司融资时需要按照利率支付一定的…
阅读更多...
大路灯怎么选？五款顶级落地台灯揭秘，深度测评推荐！

大路灯怎么选？五款顶级落地台灯揭秘，深度测评推荐！

现在很多家长都担心孩子的视力&#xff0c;其实孩子夜间的读写光源问题是家长很容易忽略的视力“隐形杀手”。许多家长都选择入手了大路灯来帮助孩子改善读写用眼时的光线环境&#xff0c;从而能够达到提高学习效率的同时还能够很好的保护眼睛视力&#xff0c;但随之照明市场的…
阅读更多...
温湿度如何精准监测？教你一招秒速搞定！

温湿度如何精准监测？教你一招秒速搞定！

随着科技的不断发展&#xff0c;温湿度监控系统在各个领域中变得越来越重要。为了满足不同行业的需求&#xff0c;温湿度监控系统不断创新和进化&#xff0c;提供更为精准、可靠的监测方案。 传统的温湿度监测手段已经无法满足当今复杂的需求&#xff0c;而现代的监控系统以其高…
阅读更多...
0成本部署github前端项目流程

0成本部署github前端项目流程

0成本部署github纯前端项目流程 对业内来说应该是一个比较常规的操作&#xff0c;对于新手来说进行过一次应该就很难忘记了&#xff0c;但很多人仍然是不会的&#xff0c;认为部署项目很难&#xff0c;很专业&#xff0c;其实现在由于这些厂商的努力&#xff0c;大众&#xff…
阅读更多...
Python兼职跳过血泪史直接分享干货及平台推荐

Python兼职跳过血泪史直接分享干货及平台推荐

文章目录 Python兼职种类&#xff1a;接私活注意事项&#xff1a;接单报价方式&#xff1a;简单公式&#xff1a;项目工时\*日薪&#xff0b;紧急程度&#xff0b;报价国内远程工作平台 学python能兼职挣钱吗&#xff1f;怎么挣钱&#xff1f; Python兼职种类&#xff1a; …
阅读更多...
PyCharm 主题和字体 (Scheme Editor Font)

PyCharm 主题和字体 (Scheme Editor Font)

PyCharm 主题和字体 [Scheme & Editor Font] References Scheme & Editor Font File -> Settings -> Editor -> Colors & Fonts -> Font Show only monospaced fonts&#xff1a; 只显示等宽字体。编程时使用等宽字体效果较好。 References [1] Yon…
阅读更多...
DockerFile的应用

DockerFile的应用

DockerFile的应用 一、介绍1 构建的三步骤2 构建的过程 二、常用命令三、DockerFile案例1 创建DockerFile文件2 使用DockerFile文件构建镜像3 启动容器并验证 四 DockerFile添加数据卷 一、介绍 DockerFile是用来构建Docker镜像的构建文件&#xff0c;是由一系列命令和参数构成…
阅读更多...
负载均衡下webshell连接nginx解析漏洞、sql注入第一关

负载均衡下webshell连接nginx解析漏洞、sql注入第一关

首先搭建环境找到php较低的版本改一下账号密码输入?id1 正常 输入?id1 报错 .0 输入?id1-- 正常 判断是字符型注入&#xff0c;闭合方式是 id是1后台看是数据表里第一行 查询id1出错前端打印出了报错信息语法错误这里是找到了库名&#xff0c;接下来是找表名这个方法是…
阅读更多...
php基础学习之匿名函数

php基础学习之匿名函数

匿名函数 描述 允许临时创建一个没有指定名称的函数&#xff0c;使用匿名函数可以方便地创建一次性或临时的功能块。 语法 function (){ //函数体 }; 样例 &#xff08;注&#xff1a;匿名函数定义后&#xff0c;需要将其赋值给一个变量&#xff0c;然后通过该变量来调用 这种调…
阅读更多...
Navicat连接openGauss 5.0.0 企业版数据库

Navicat连接openGauss 5.0.0 企业版数据库

引言 在当今互联网时代&#xff0c;数据成为企业和组织的重要资产。为了更好地管理和分析数据&#xff0c;数据库管理工具起到至关重要的作用。openGauss是一款开源关系型数据库管理系统&#xff0c;提供了高性能、高可用性和可扩展性&#xff0c;它还具有安全性和数据保护的特…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023