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.Driver
    url: jdbc:mysql://localhost:3306/honey2024?useSSL=false&useUnicode=true&characterEncoding=UTF-8&serverTimezone=GMT%2b8
    username: root
    password: 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;

    @Bean
    public 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 {
    @Resource
    UserService 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)
    @ResponseBody
    public 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 {
    @Autowired
    UserMapper 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:port
    timeout: 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 debug
    return 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 debug
        return 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>

最终效果：

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

力扣题目训练（13）

力扣题目训练（13）

2024年2月6日力扣题目训练 2024年2月6日力扣题目训练492. 构造矩形495. 提莫攻击500. 键盘行166. 分数到小数199. 二叉树的右视图85. 最大矩形 2024年2月6日力扣题目训练 2024年2月6日第十三天编程训练&#xff0c;今天主要是进行一些题训练&#xff0c;包括简单题3道、中等题…
阅读更多...
【Redis】深入理解 Redis 常用数据类型源码及底层实现(4.详解Hash数据结构)

【Redis】深入理解 Redis 常用数据类型源码及底层实现(4.详解Hash数据结构)

Hash数据结构 看过前面的介绍，大家应该知道 Redis 的 Hash 结构的底层实现在 6 和 7 是不同的，Redis 6 是 ziplist 和 hashtable，Redis 7 是 listpack 和 hashtable。 我们先使用config get hash*看下 Redis 6 和 Redis 7 的 Hash 结构配置情况（在Redis客户端的命令行界面…
阅读更多...
图数据库 之 Neo4j - Cypher语法基础(5)

图数据库 之 Neo4j - Cypher语法基础(5)

节点(Nodes) Cypher使用()来表示一个节点。 () # 最简单的节点形式&#xff0c;表示一个任意无特征的节点&#xff0c;其实就是一个空节点(movie) # 如果想指向一个节点在其他地方&#xff0c;我们可以给节点添加一个变量名(如movie)&#xff0c;表示一个变量名为 movie的节点…
阅读更多...
后端扫盲系列 - vue入门指南

后端扫盲系列 - vue入门指南

vue特点 组件化&#xff1a;用户界面分解为可重用的组件&#xff0c;这些组件可以使开发的页面更加模块化和可维护双向数据绑定&#xff1a;vue提供了一种轻松绑定数据和DOM元素之间的机制&#xff0c;意味着数据发送变化时&#xff0c;视图会自动更新&#xff0c;反之亦然虚拟…
阅读更多...
阿里云香港轻量应用服务器怎么样，建站速度快吗？

阿里云香港轻量应用服务器怎么样，建站速度快吗？

阿里云香港服务器中国香港数据中心网络线路类型BGP多线精品&#xff0c;中国电信CN2高速网络高质量、大规格BGP带宽&#xff0c;运营商精品公网直连中国内地&#xff0c;时延更低&#xff0c;优化海外回中国内地流量的公网线路&#xff0c;可以提高国际业务访问质量。阿里云服务…
阅读更多...
华为配置旁挂二层组网直接转发示例

华为配置旁挂二层组网直接转发示例

配置旁挂二层组网直接转发示例 组网图形 图1 配置旁挂二层组网直接转发示例组网图 业务需求组网需求数据规划配置思路配置注意事项操作步骤配置文件扩展阅读 业务需求 企业用户通过WLAN接入网络&#xff0c;以满足移动办公的最基本需求。且在覆盖区域内移动发生漫游时&#xff…
阅读更多...
基于51/STM32单片机的智能药盒 物联网定时吃药 药品分类

基于51/STM32单片机的智能药盒 物联网定时吃药 药品分类

功能介绍 以51/STM32单片机作为主控系统&#xff1b; LCD1602液晶显示当前时间、温湿度、药品重量 3次吃药时间、药品类目和药品数量 HX711压力采集当前药品重量 红外感应当前药盒是否打开 DS1302时钟芯片显示当前年月日、时分秒、星期 DHT11采集当前环境温度和湿度 …
阅读更多...
STM32学习·HAL库·STM32CubeMX系列学习（安装和使用）

STM32学习·HAL库·STM32CubeMX系列学习（安装和使用）

目录 ​编辑 1. STM32CubeMX简介 2. STM32CubeMX安装 2.1 STM32CubeMX软件获取 2.1.1 获取Java软件 2.1.2 STM32CubeMX软件获取 2.2 搭建Java运行环境 2.3 安装STM32CubeMX软件 2.4 下载和关联STM32cube固件包 1. STM32CubeMX简介 STM32CubeMX 是 ST 微电子公…
阅读更多...
HarmonyOS router页面跳转

HarmonyOS router页面跳转

默认启动页面index.ets import router from ohos.router import {BusinessError} from ohos.baseEntry Component struct Index {State message: string Hello World;build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)//添加按钮&am…
阅读更多...
nginx upstream server主动健康检测模块添加https检测功能[完整版]

nginx upstream server主动健康检测模块添加https检测功能[完整版]

目录 1 缘起1.1 功能定义2. 实现后的效果2.1 配置文件2.2 运行效果3. 代码实现3.1 配置指令3.1.1 配置指令定义：3.1.2 配置指令结构体：3.1.3 配置指令源码定义：3.2 模块的初始化3.3 添加新的健康检测类型的定义3.4 握手完成后的处理3. 5 发送http请求3.6 接收http响应3.7 连…
阅读更多...
[Angular 基础] - 生命周期函数

[Angular 基础] - 生命周期函数

[Angular 基础] - 生命周期函数 之前的笔记&#xff1a; [Angular 基础] - Angular 渲染过程 & 组件的创建 [Angular 基础] - 数据绑定(databinding) [Angular 基础] - 指令(directives) 以上为静态页面&#xff0c;即不涉及到跨组件交流的内容 以下涉及到组件内的沟通&a…
阅读更多...
Halcon 元组/数组基本操作

Halcon 元组/数组基本操作

Halcon 元组/数组基本操作 ** 元组/数组 tuple *******数组创建与字典******* ** 创建一个数组 A : [1,3,45,6] A[0] : 1 A[1] : 2** 定义一个key value字典类型create_dict (DictHandle) set_dict_tuple (DictHandle, test_tuple, A) set_dict_tuple (DictHandle, test_obj, …
阅读更多...
CrossOver 24.0 让Mac可以运行Windows程序的工具

CrossOver 24.0 让Mac可以运行Windows程序的工具

CrossOver 24.0最新版重点添加了对 DirectX 12 支持&#xff0c;从而在 Mac 上更好地模拟运行 Windows 游戏&#xff0c;开发者在 CrossOver 23 中可以调用 DirectX 12&#xff0c;在模拟游戏的过程中同时调用所有 GPU 核心&#xff0c;从而实现更优秀的渲染效果。 目前CrossOv…
阅读更多...
android中实现底部导航栏

android中实现底部导航栏

1、引言 底部导航栏在app应用中是十分常见了&#xff0c;大部分的安卓应用中也都实现了底部导航栏的功能&#xff0c;这里我就以我以前做的一个简单小说阅读软件为例&#xff0c;为大家演示一下底部导航栏的使用&#xff0c;需要的朋友直接复制代码过去改写就行了。 2、代码实…
阅读更多...
Spark---环境搭建---入门概念

Spark---环境搭建---入门概念

目录 环境搭建 测试 Apache Spark是用于大规模数据处理的统一分析引擎&#xff1b; spark 仅仅替代了hadoop的mapraduce&#xff1b; spark比hadoop快一百倍&#xff1b; 环境搭建 1&#xff1a;解压&#xff1b; 2&#xff1a;配置spark环境变量&#xff1a; vim /etc/pro…
阅读更多...
Quartz---JobDataMap使用的两种方式

Quartz---JobDataMap使用的两种方式

任务调度执行原理图&#xff1a; JobDataMap的使用 JobDataMap是Quartz调度器中的一个重要组件&#xff0c;主要用于存储和传递与作业&#xff08;Job&#xff09;相关的数据。它是一个实现了Java Map接口的对象&#xff0c;可以用来保存一系列的序列化的对象。这些对象在作业执…
阅读更多...
51_蓝桥杯_数码管静态显示

51_蓝桥杯_数码管静态显示

一 电路 二 数码管静态显示工作原理 三 代码 代码1 实现第一个数码管显示数字6的功能 #include "reg52.h"unsigned char code SMG_Duanma[18] {0xc0,0xf9.0xa4,0x99,0x92,0x82,0xf8,0x80,0x90,0x88,0x80,0xc0,0x86,0x8e,0xbf,0x7f};void Delay(unsignde int t) {wh…
阅读更多...
Android下SF合成流程重学习之GPU合成

Android下SF合成流程重学习之GPU合成

Android下SF合成流程重学习之GPU合成 引言 SurfaceFlinger中的图层选择GPU合成(CLIENT合成方式)时&#xff0c;会把待合成的图层Layers通过renderengine(SkiaGLRenderEngine)绘制到一块GraphicBuffer中&#xff0c;然后把这块GraphicBuffer图形缓存通过调用setClientTarget传递…
阅读更多...
Python中基于匹配项的子列表列表串联

Python中基于匹配项的子列表列表串联

正常我们在使用python爬虫时候&#xff0c;尤其在用python开发时&#xff0c;想要基于匹配项将子列表串联成一个列表&#xff0c;我们可以使用列表推导式或循环来实现&#xff0c;这两种方法都可以根据匹配项将子列表串联成一个列表。请根据你的实际需求选择适合的方法。具体情…
阅读更多...
推荐彩虹知识付费商城免授权7.0源码

推荐彩虹知识付费商城免授权7.0源码

彩虹知识付费商城免授权7.0源码&#xff0c;最低配置环境 PHP7.2 1、上传源码到网站根目录&#xff0c;导入数据库文件&#xff1a;xydai.sql 2、修改数据库配置文件&#xff1a;/config.php 3、后台&#xff1a;/admin 账号&#xff1a;admin 密码&#xff1a;123456 4、前…
阅读更多...
最新文章

Copyright @ 2022~2023