03 前后端数据交互【小白入门SpringBoot + Vue3】

news2024/11/16 11:48:59

项目笔记，教学视频来源于B站青戈
https://www.bilibili.com/video/BV1H14y1S7YV

  • 前两个笔记。是把前端页面大致做出来，接下来，把后端项目搞一下。

  • 后端项目，使用IDEA软件、jdk1.8、springboot2.x 。基本上用的是稳定版。

  • 还有Mysql5.7+、Navicat。

  • IDEA软件、jdk1.8要在电脑上安装配置好，springboot2.x是待会要创建的。

创建后端项目

打开IDEA，点击“新建项目”，出来一个新页面、

左侧选择Spring initializr，右侧是项目的多项信息配置。以下是我根据up讲解配置的信息。

注意，[位置]的路径，最好是跟前端项目处在同一文件夹下，即前端项目当前的路径为 D:\Projects\B站青戈vue3\vue3-demo ；

[工件] 英文名是artifact，默认与名称一致即可；

  • 名称：springboot-vue3
  • 位置：D:\Projects\B站青戈vue3\
  • 语言：Java
  • 类型：Maven
  • 组：com.example
  • 工件：springboot-vue3
  • 软件包名称：com.example.springboot
  • JDK：1.8
  • Java：8
  • 打包：Jar

上面的配置完毕，点击“下一步”，就会切换到下一个配置页面。

补充：

Springboot若选择3.0以上的版本，只能选择JDK17版本。所以，若使用了JDK8，springboot只能选择2.7系列版本；

MyBatis 是一个OM框架，基于java和数据库之间数据交互而设计的框架，常见的增删查改数据库操作就可以借助MyBatis，必须要有MyBatis 基础才行。

  • Springboot ：2.7.6

  • 依赖项

    • Web：Spring Web

    • SQL：MySQL Driver + MyBatis Framework

​ 选好上面的三项以后，就可以点击“创建”了。

创建好后，就会自动打开新页面，但是，后台还在下载依赖，默认是从官网上下载，速度会较慢。

  1. 可以考虑配置私服？？？在设置里面，搜索“Maven”，右侧有几个路径，up设置了阿里云？？？（怎么弄的？）
  2. 百度搜索 “pom配置阿里云”，搜索到相应代码后，直接复制，然后粘贴到pom.xml文件中的<build> 标签中。
  3. 有个情况，如果复制过去后，刷新依赖下载，若爆红说明用不了，删掉就行了。

找到这个路径下的文件，src\main\java\com\example\springboot\SpringbootVue3Application.java ，这个文件是启动文件，可以运行试试看，启动文件的左侧有个绿色三角箭头，点这里启动。

报错，如下。

Description:

Failed to configure a DataSource: ‘url’ attribute is not specified and no embedded datasource could be configured.

Reason: Failed to determine a suitable driver class

Action:

Consider the following:
If you want an embedded database (H2, HSQL or Derby), please put it on the classpath.
If you have database settings to be loaded from a particular profile you may need to activate it (no profiles are currently active).

  • 这个报错是说，没有配置数据库依赖，需要在application.yml里配置数据库。
  • 找到这个路径下的文件，src\main\resources\application.properties ，把这个文件的后缀由"properties"，改成"yml"
  • 具体重命名步骤。选中这个文件，右键，选择“重构”，然后再选“重命名”

配置数据库

然后在这个文件内

  • 配置服务器端口，默认是8080，但是up改成9090
  • 配置数据库依赖信息（要与自己电脑的数据库路径一致、账号密码也要一致）

server:
port: 9090

spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/springboot-vue3
username: root
password: 123456

注意，up的application.yml文件，只有上面这些内容


打开navicat软件。

up打算在localhost_3306 连接，新建数据库。

若无法成功打开数据库连接，可以试试这篇文章（主要是没启动MYSQL）

在这里插入图片描述

于是，如上图红框处，选中这个，右键，“新建数据库”，然后弹出来一个数据库信息配置页面，需要配置的具体信息如下图。

在这里插入图片描述

  • 数据库名：springboot-vue3
  • 字符集：utf8mb4
  • 排序规则：utf8mb4_unicode_ci

好奇为什么字符集和排序规则要用上面两个，所以我去搜了相关的解析。

mysql使用utf8mb4经验吐血总结_mysql utf8mb4-CSDN博客

简要总结一下

  • utf8mb4 >> utf8 。前者是新版本，能容纳更多特殊字，即前者包含后者前者兼容量更大。
  • utf8mb4_unicode_ci 基于标准的Unicode来排序和比较，能够在各种语言之间精确排序。

数据库新建成功后，运行IDEA的项目，若出现下图，则表示该项目运行成功
在这里插入图片描述


浏览器访问尝试

之后，打开浏览器，输入 localhost:9090 ，尝试打开后端项目，如下图所示，成功了。

在这里插入图片描述


下一步，弄个页面试试，即接口。

在此路径下，src\main\java\com\example\springboot ，选中末尾的文件夹，右键，新建一个package(软件包)，出现下图的弹窗，直接在末尾加上controller
在这里插入图片描述

接着，在这个controller软件包下，右键，新建Java类，如下图，命名为 WebController

在这里插入图片描述

于是，在这个 WebController文件下写代码。

先写入注解@RestController ，首先controller层是一个对外开放的接口层。当他里面的所有方法暴露出去后，可以通过getMapping或者postMapping获取方法。

举例说明。写一个hello方法，返回值是一个字符串"Hello World"，让浏览器可以访问到，借助@getMapping(“/HI”)的注解，在浏览器输入"localhost:9090/HI"，页面上就能看到字符串"Hello World"。

package com.example.springboot.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class WebController {
    @GetMapping("/HI")
    public String hello(){
        return "Hello World";
    }
}

但是，不知道为啥，按照up的步骤操作，但是访问错误。怀疑是启动类没配置好？？还是说，具体配置有什么讲究？？？

为了跟up的讲解视频保持一致，我把一个（默认启动的demo）文件夹删除了。操作记录如下图。
在这里插入图片描述

然后，神奇的事情发生了，浏览器可以访问 http://localhost:9090/HI，出现对应的字符串了。玛德，服了。


数据库建表 增删改查语句

下一步，数据库建表。

打开Navicat软件，然后localhost_3306找到数据库springboot-vue3，选中下面的“表”，右键，“新建表”，设计的表基础信息如下。注意，id是要勾选自增长。
在这里插入图片描述

建好后，就可尝试增删改查的SQL语句，先在数据库里面插两条数据。

补充：

  • limit子句用于限制查询结果返回的数量，常用于分页查询
  • SELECT * FROM user WHERE address like ‘%合肥%’ LIMIT 1,2; limit在此处的意思是，查出的记录，从表格中序号为1的记录开始展示，每页展示一条记录
INSERT INTO `user`(name, date, address) VALUES('张三', '2023-06-11', '安徽省合肥市');
INSERT INTO `user`(name, date, address) VALUES('李四', '2023-11-24', '江苏省南京市');
UPDATE `user` SET name = '青哥哥' WHERE id = 1;
DELETE FROM `user` WHERE id = 1;
SELECT * FROM `user` WHERE address like '%合肥%' LIMIT 1,2;

创建 实体类

数据库有数据了，需要借助代码进行增删改查，前提，需要创建实体类（entity），步骤如下。

在此路径下，src\main\java\com\example\springboot ，选中末尾的文件夹，右键，新建一个package(软件包)，在末尾加上entity。

接着在 entity路径下，新建一个Java类，命名"User"，参考下图。

在这里插入图片描述

创建好后，在User文件里面写代码，把数据库user表的实体创建出来，代码如下。

package com.example.springboot.entity;

public class User {
    private Integer id;
    private String date;
    private String name;
    private String address;
}

这里额外补充了，如果数据库里面的列名，有下划线，比如user_no，但是在Java规范中，实体类的命名不允许出现下划线，只能驼峰命名，即userNo。那么该怎么解决这个下划线问题？

先留着，后面解决。

下一步，对实体类生成get和set方法，有个快捷键，同时点击 “Alt” 和 “Insert” 两个键。

出现一个“生成”弹窗，选择 “Setter 和 Getter”，之后，新出一个弹窗，选中所有实体类（快捷键：点击 “Shift” + 方向键 "向下 "），最后点击“确定”，即可生成所有实体类的set和get函数。


实现 接口类+控制类

光有实体类还不行，还需要一个接口类，对实体类进行操作，即mapper类，步骤如下。

在此路径下，src\main\java\com\example\springboot ，选中末尾的文件夹，右键，新建一个package(软件包)，在末尾加上mapper。

接着在 mapper路径下，新建一个Java 接口类，命名"UserMapper"，参考下图。

在这里插入图片描述

创建好后，在UserMapper文件里面写代码，想实现，在路由上，加上某个字，对user表进行模糊查询，把查询到的数据显示在浏览器页面上。

补充

  • 加入注解 @Mapper 声明这是一个Mapper对象
  • 先写一个函数，来查询user表的数据

emmm，运用了javaweb和mybatis的知识，up没有细说，默认看视频的都会…没办法，只能搬代码了

src\main\java\com\example\springboot\mapper\UserMapper.java

package com.example.springboot.mapper;

import com.example.springboot.entity.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper  //????
public interface UserMapper { //接口类
    @Select("select * from user where name like '%#{name}%'")  
    List<User> selectAll(String name); //接口类，声明函数及其参数
}

为了在浏览器页面上显示查询效果，在 controller 层新建一个Java文件，命名 UserController"

package com.example.springboot.controller;

import com.example.springboot.entity.User;
import com.example.springboot.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController  //??
@RequestMapping("/user")  //??应该是路由
public class UserController {

    @Autowired  //??
    UserMapper userMapper;

    @GetMapping("/all")    //都是路由，为什么名字不完全一样
    //表示访问到这个函数返回值，其路径是【localhost:9090/user/all/name?=xxx】
    public List<User> selectAll(@RequestParam String name){  //@RequestParam?? 实现接口
        return userMapper.selectAll(name);//读不懂？
    }
}

感觉要自己去网上找知识点去梳理一下因果。

上面的代码写好后，需要验证一下，代码写出的sql语句是否能正确访问到。故需要打印出I代码生成的sql语句

在此路径下src\main\resources\application.yml ，添加下面的代码。

logging:
  level:
    com.example.springboot.mapper: debug

运行项目，在下面红框处可以看到打印的sql语句

在这里插入图片描述

然后继续测试，在浏览器输入 localhost:9090/user/all/name?=张 ，这样是为了实现模糊查询，user表中，name列中是否含有“张”的记录。

//为什么 路由后缀要这样写 ？？？

但是运行项目，发现报错如下。

Parameter index out of range (1 > number of parameters,which is 0).

这个报错大致意思是说，不支持上面方法生成的SQL语句。

所以需要修改生成SQL语句的方法。

修改的第一种方法，能实现模糊查询。（把多余的代码省略了）

public interface UserMapper {
    @Select("select * from user where name like '#{name}'")  //删掉这里的%
}


public class UserController {
    //表示访问到这个函数返回值，其路径是【localhost:9090/user/all/name?=xxx】
    public List<User> selectAll(@RequestParam String name){
        return userMapper.selectAll(  "%"+ name + "%") ; //修改这里的拼接，在这里加上%
    }
}

修改的第二种方法，能实现正确查询（把多余的代码省略了）【我试了，自己的项目不得行……………】

补充：MySQL中CONCAT函数：将多个字符串连接成一个字符串。

public interface UserMapper {
    @Select("select * from user where name like concat('%',#{name},'%')") 
    //修改这里的拼接，增加%
}

public class UserController {
    //表示访问到这个函数返回值，其路径是【localhost:9090/user/all/name?=xxx】
    public List<User> selectAll(@RequestParam String name){
        return userMapper.selectAll(   name ) ;//修改这里的拼接，删掉%
    }
}

解决下划线转驼峰

遗留问题：如果数据库里面的列名，有下划线，比如user_no，但是在hava规范中，实体类的命名不允许出现下划线，只能驼峰命名，即userNo。那么该怎么解决这个下划线问题？

在此路径下src\main\resources\application.yml ，添加下面的代码，利用mybatis开启下划线自动转驼峰。

mybatis:
  configuration:
    map-underscore-to-camel-case: true  #  开启下划线自动转驼峰

比如说，这个user表添加user_no的列名，并添加相应数据，那么如何反馈到前端页面上。

在这里插入图片描述

来到后端项目的entity/user路径下，添加这个属性及相关方法，代码如下

    private String userNo;

    public User(Integer id, String date, String name, String address, String userNo) {
        this.id = id;
        this.date = date;
        this.name = name;
        this.address = address;
        this.userNo = userNo;
    }

    public String getUserNo() {
        return userNo;
    }

    public void setUserNo(String userNo) {
        this.userNo = userNo;
    }

然后，userMapper文件的SQL语句也要相应修改，这样可以通过其他关键字查询信息

    @Select("select * from user where name like concat('%',#{name},'%')  or date like concat('%',#{name},'%') or address like concat('%',#{name},'%') or user_no like concat('%',#{name},'%')")

接着改前端项目HomeView.vue的

      <el-table-column prop="userNo" label="用户编号" width="150"/>
      
      <el-form-item label="用户编号">
          <el-input v-model="state.form.userNo" autocomplete="off"/>
      </el-form-item>

测试 浏览器获得数据库信息

比如AJAX,axious这些工具，是前端向后端请求数据的方式。

但是返回的数据那么多，需要做一个统一，所以写一个统一数据格式的函数，步骤如下。

新建一个软件包。

在此路径下，src\main\java\com\example\springboot ，选中末尾的文件夹，右键，新建一个package(软件包)，直接在末尾加上common 。然后在此软件包下，新建一个Java文件，命名Result 。

接着编写代码。

package com.example.springboot;

public class Result {
    private String code;  //返回的状态码。告诉前端这次请求成功还是失败
    private String msg;  //错误信息
    private Object data;   //包装的数据。对象类型！！！！
}

然后

  • 快捷键ALT + Insert ，选择所有变量，生成setter 和getter 。//为什么要生生成set。get?

  • 快捷键ALT + Insert ，选择“构造函数”，选择所有变量，“确定”

  • 快捷键ALT + Insert ，选择“构造函数”，选择code和msg，“确定”

  • 快捷键ALT + Insert ，选择“构造函数”，什么都不选，“确定” //这种是默认的

然后增加两个返回状态，成功或失败。

    private static final String SUCCESS_CODE = "200"; //成功
    private static final String ERROR_CODE = "500";  //失败
    
    public static Result success(Object data){
        return new Result(SUCCESS_CODE, "", data) ;
    }
    public static Result success(){
        return new Result(SUCCESS_CODE, "");
    }
    public static Result error(String msg) {
        return new Result(ERROR_CODE,msg);
    }

修改相应函数（在Mapper路径那里）

    public Result selectAll(@RequestParam String name){  //为什么改成result？？
//        return userMapper.selectAll(  "%"+ name + "%") ;
//        return userMapper.selectAll(   name ) ;
        List<User> userList = userMapper.selectAll(name);
        return Result.success(userList);
    }

运行项目，在浏览器再次输入 localhost:9090/user/all?name=张 ，然后局可以看到统一包装的返回数据。

在这里插入图片描述


对接 前后端项目

打开前端vue项目，进行环境配置，有两种方案。先看介绍，后实操。

方案

方案一如下【较麻烦】

.env.dev

VITE_ENV = dev
VITE_BASE_URL = 'http://localhost:9090'

.env.prod

VITE_ENV = prod
VITE_BASE_URL = 'http://qing.vue.com'

修改 package.json

"scripts": {
    "dev": "vite --mode dev",
    "prod": "vite --mode prod",
    "build": "vite build -- mode prod",
    "preview": "vite preview"
  },

使用：import.meta.env.VITE_BASE_URL

方案二如下【推荐且使用】更简单的方式配置全局后台URL。

在前端项目，在 public文件夹新建config.json

image.png

里面的代码如下（直接复制粘贴，若报错，直接手敲）

{
    "serverUrl": "http://localhost:9090"
}

main.js 里使用axios读取配置：

/* 读取外部配置文件 */
axios.get('/config.json').then((res) => {
    app.config.globalProperties.$config = res.data
})
export const globals = app.config.globalProperties

axious安装和使用

上面摘取自up的笔记，下面开始具体记录方案二的实施过程。

在前端项目，打开终端，输入下面的命令（若下载失败，可以退出，用管理员身份运行的方式打开项目），全局安装axious，当时up的版本是1.4.0

npm install axios -g

下一步，在前端项目，src路径下，新建文件夹，命名utils ，然后新建一个文件，命名 request.js ，具体代码复制粘贴如下

import axios from "axios";

const request = axios.create({
    baseURL: 'http://localhost:9090',
    timeout: 30000    //超时时间为30秒
})

// 请求拦截器
// 所有的请求都会到这里来,会去执行第一个参数，同时自动传入config
request.interceptors.request.use(
  config => { // 在发送请求之前做些什么
    config.headers['Content-Type'] = 'application/json;charset=utf-8'
    return config
}, error => {  // 对请求错误做些什么
    console.log('request error: ' + error) // for error debug
    return Promise.reject(error)
})

//响应拦截器
//所有的响应都会到这里来,会去执行第一个参数，同时自动传入response
request.interceptors.response.use(
 response => {  // 对响应数据做点什么
    let res = response.data
    //  res.code  //错误的状态码
    return res
}, error => {   //对响应错误做点什么
    console.log('response error: ' + error) // for error debug
    return Promise.reject(error)
})

export default request

前端数据对接配置

接下来，开始尝试对接。

前提保证后端项目正常运行。

首先来到前端项目的src/views/HomeView.vue文件中，up说，若想轻松使用数据，更推荐使用reactive类型的数据，但是，前端项目的tableDta是ref数据，而且up推荐把复杂的多项数据，都封装到统一的变量中。

详情看代码

原来
let tableDate = ref([
  {
    date: '2017-05-03',
    name: 'Jerry',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])

let form = reactive({})



修改
const state = reactive({
  form :{},  //注意，把等号改为冒号！！！
  tableData : [
    {
      date: '2017-05-03',
      name: 'Jerry',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
  ]
})

    <el-table :date="state.tableData" style="width: 100%;">  
     <el-form :model="state.form" label-width="80px" style="padding-right: 40px">
     <el-input v-model="state.form.date" autocomplete="off"/>
     <el-input v-model="state.form.name" autocomplete="off"/>
     <el-input v-model="state.form.address" autocomplete="off"/>

把js里面所有涉及form和tableData的变量，加上前缀state.
state.form

state.tableData  //把后面的 .value 删掉因为已经不是ref类型了

前端项目的src/views/HomeView.vue文件中，接下来，在js，添加一个加载函数。就是通过路由，向后端请求数据，显示在前端页面上。注意是input.value而不是name.value

import request from "../../utils/request";

const state = reactive({
  form :{},  //注意，把等号改为冒号！！！
  tableData : []
})


const load = () =>{
	request.get('user/all?name=' + input.value).then(res =>{ //不是name
	console.log(res)
	})
}

load()

运行前端项目，但是报错

image.png

up解释，这个报错意思是，没有返回 request的config 。

emmmm又重新刷新，就没有这个bug了。

跨域配置

然后出现新的错误，跨域错误，如下图。

image.png

解决方案一：在后端的src\main\java\com\example\springboot\controller\UserController.java加个注解@CrossOrigin 【不建议】

@CrossOrigin
@RestController
@RequestMapping("/user")
public class UserController {
//省略代码
}

解决方案二：在全局配置跨域【推荐】

新建一个软件包。

在此路径下，src\main\java\com\example\springboot ，选中末尾的文件夹，右键，新建一个package(软件包)，直接在末尾加上config 。然后在此软件包下，新建一个Java文件，命名CrossOriginConfig 。

接着复制粘贴代码。注意，粘贴代码进去之后，需要导入包，不要导错了，一定要与下面给代码的导入包名一致。有个“Web”，导错的话，会导致return new CorsFilter(source);这句代码出现错误。若导入正确则不会。

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 CrossOriginConfig {

    // 当前跨域请求最大有效时长。这里默认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);
    }
}

对接进展

确认浏览器运行的前端页面，控制台打印出正确的数据后，接着修改，如下代码。注意是input.value而不是name.value

const load = () =>{
	request.get('user/all?name=' + input.value).then(res =>{ //name改为input
		state.tableData = res.data //改这里
	})
}

若前端页面显示出数据库的信息，则前后端对接成功了！

接着，在前端页面的搜索框，输入关键字，点击“查询按钮”，发现没反应，在需要进行相应修改，如下（按钮的其他属性带代码 省略）

<el-button  @click="load()">查询数据</el-button>

当然，以上只是根据name这一列进行查询，若想任意关字都进行查询，则需要，更改后端项目中的SQL语句以及相关代码

public interface UserMapper {

    @Select("select * from user where name like concat('%',#{name},'%') or date like concat('%',#{name},'%') or address like concat('%',#{name},'%')  ") 
    List<User> selectAll(String name);

}

下一个功能。

加一个重置按钮，回到前端项目的HomeView.vue

<el-button class="button" type="primary" round @click="load" style="margin: 5px 10px">重置数据</el-button>

const  reset = ()=>{
  input.value = ''
  load()
}

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

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

相关文章

【Linux】动静态库的使用与软链接的结合

【Linux】动静态库的使用与软链接的结合

文章目录 前言一、静态库1.静态库的创建2.静态库的链接3.将库进行打包4.链接方法&#xff1a;1.直接链接2.拷贝到系统路径里面3.采用软链接方法 二、动态库1.解决加载找不到动态库的方法1.直接拷贝2.建立软链接3.建立自己的动态路径配置文件 2.为什么动态库权限需可执行而静态库…
阅读更多...
C#入门（1）：程序结构、数据类型

C#入门（1）：程序结构、数据类型

一、C#程序结构 第一个C#程序 using System;namespace base_01 {class Program{#region 代码折叠块static void Main(string[] args){//控制台输出Console.WriteLine("Hello World!");Console.Write("C#是微软的编程语言"); //不换行输出//Console.Rea…
阅读更多...
相机内参及其内参影响因素的几点思考

相机内参及其内参影响因素的几点思考

目录 理论推导之从相机坐标系到像素坐标系 机械参数对相机内参的影响 Resize与Crop对相机内参的影响 参考文献 理论推导之从相机坐标系到像素坐标系 相机内参的意义即从相机坐标系到像素坐标系的表达&#xff0c;其中共涉及到三个坐标系&#xff1a;相机坐标系、成像坐标系…
阅读更多...
2023年【安全员-A证】报名考试及安全员-A证新版试题

2023年【安全员-A证】报名考试及安全员-A证新版试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 安全员-A证报名考试是安全生产模拟考试一点通总题库中生成的一套安全员-A证新版试题&#xff0c;安全生产模拟考试一点通上安全员-A证作业手机同步练习。2023年【安全员-A证】报名考试及安全员-A证新版试题 1、【多选…
阅读更多...
AIGC ChatGPT4 读取接口文件并进行可视化分析

AIGC ChatGPT4 读取接口文件并进行可视化分析

数据分析的过程中，对数据文件进行可视化分析是每个数据分析师必备的技能。如下图数据源。 现在需要对各地区的销量进行汇总，使用Python来进行分析。 但是又不想写代码，或者不会Python代码，可以用ChatGPT4来帮我们完成代码的编写。 完整的Python代码： import pandas as p…
阅读更多...
【深度学习实验】注意力机制（一）：注意力权重矩阵可视化（矩阵热图heatmap）

【深度学习实验】注意力机制（一）：注意力权重矩阵可视化（矩阵热图heatmap）

文章目录 一、实验介绍二、实验环境1. 配置虚拟环境2. 库版本介绍 三、实验内容0. 理论介绍a. 认知神经学中的注意力b. 注意力机制&#xff1a; 1. 注意力权重矩阵可视化&#xff08;矩阵热图&#xff09;a. 导入必要的库b. 可视化矩阵热图&#xff08;show_heatmaps&#xff0…
阅读更多...
Linux：补充一些常用命令

Linux：补充一些常用命令

Linux&#xff1a;补充一些常用命令 1. free -h2. df -lh3. du -sh *4. uname -a5. which6. mvn install 编译打包7. find -name *.jar8. cd -9. nohup java -jar *.jar &10. ps -ef|grep java11. netstat -ntlp 1. free -h free 命令显示系统使用和空闲的内存情况&#x…
阅读更多...
3DMAX森林树木植物插件ForestPackLite教程

3DMAX森林树木植物插件ForestPackLite教程

3DMAX森林树木植物插件ForestPackLite教程 Forest Pack是世界上最受欢迎的散布插件。它提供了一个完整的解决方案来创建大面积的物体&#xff0c;从树木和植物到建筑、人群、骨料、地面覆盖物、岩石等等。如果你能为它建模&#xff0c;森林包就能把它分散开来。 无数工作室依靠…
阅读更多...
windows排除故障工具pathping、MTR、sysinternals

windows排除故障工具pathping、MTR、sysinternals

pathping 基本上可以认为它是ping和tracert的功能合体。 pathping首先对目标执行tracert&#xff0c;然后使用ICMP对每一跳进行100次ping操作。 如图&#xff0c;是一个对8.8.8.8进行pathing操作。 MTR MTR是另一个多工具合体工具。 winmtr是mtr的windows版本。 这个工具…
阅读更多...
数据分析思维与模型：群组分析法

数据分析思维与模型：群组分析法

群组分析法&#xff0c;也称为群体分析法或集群分析法&#xff0c;是一种研究方法&#xff0c;用于分析和理解群体内的动态、行为模式、意见、决策过程等。这种方法在社会科学、心理学、市场研究、组织行为学等领域有广泛应用。它可以帮助研究人员或组织更好地理解特定群体的特…
阅读更多...
Java多线程核心技术第一阶段-Java多线程基础 02

Java多线程核心技术第一阶段-Java多线程基础 02

接上篇&#xff1a;Java多线程核心技术第一阶段-Java多线程基础 01 3.3 清除中断状态的使用场景 this.interrupted()方法具有清除状态标志值的功能&#xff0c;借用此特性可以实现一些效果。 【示例3.3.1】在MyThread4线程中向list1和list2存放数据&#xff0c;基于单一职责原…
阅读更多...
Docker中的RabbitMQ已经启动运行，但是管理界面打不开

Docker中的RabbitMQ已经启动运行，但是管理界面打不开

文章目录 前言一、解决方法方法一方法二 总结 前言 肯定有好多小伙伴在学习RabbitMQ的过程中&#xff0c;发现镜像运行&#xff0c;但是我的管理界面怎么进不去&#xff0c;或者说我第一天可以进去&#xff0c;怎么第二天进不去了&#xff0c;为什么每次重新打开虚拟机都进不去…
阅读更多...
Linux 基本语句_11_无名管道文件复制

Linux 基本语句_11_无名管道文件复制

父子进程&#xff1a; 父子进程的变量之间存在着读时共享&#xff0c;写时复制原则 无名管道&#xff1a; 无名管道仅能用于有亲缘关系的进程之间通信如父子进程 代码&#xff1a; #include <stdio.h> #include <unistd.h> #include <sys/types.h> #inc…
阅读更多...
IDEA 搭建 SpringCloud 项目【超详细步骤】

IDEA 搭建 SpringCloud 项目【超详细步骤】

文章目录 一、前言二、项目搭建1. 数据库准备2. 创建父工程3. 创建注册中心4. 服务注册5. 编写业务代码6. 服务拉取 一、前言 所谓微服务&#xff0c;就是要把整个业务模块拆分成多个各司其职的小模块&#xff0c;做到单一职责原则&#xff0c;不会重复开发相同的业务代码&…
阅读更多...
HC-SR501传感器制作一个报警系统

HC-SR501传感器制作一个报警系统

接线图&#xff1a; 引脚连接&#xff1a; 1. 将 PIR 信号引脚连接到 arduino 数字 引脚 13。 2. 将 PIR V 引脚连接 到 arduino 5v 引脚。 3. 将 PIR GND 引脚连接到 arduino GND 引脚。 4. 将arduino数字 引脚12连接 到220欧姆电阻&#xff0c;并将该电阻连接到 LED V …
阅读更多...
用户增长模型：3A3R策略模型

用户增长模型：3A3R策略模型

一、概述 A - A - A - R - R - R 增长模型&#xff0c;即3A3R策略模型&#xff0c;由海盗模型演变而来&#xff0c;是目前使用最多、适用范围最广的增长策略模型。原始的海盗模型由 Acquisition &#xff08;获客&#xff09;、 Activation &#xff08;活跃&#xff09;、 Re…
阅读更多...
mfc140.dll是什么文件？如何修复mfc140.dll丢失的方法分享

mfc140.dll是什么文件？如何修复mfc140.dll丢失的方法分享

​mfc140.dll丢失的原因 未正确安装Microsoft Visual C Redistributable&#xff1a;mfc140.dll是Visual C库的一部分&#xff0c;如果没有正确安装Visual C Redistributable&#xff0c;可能导致mfc140.dll丢失。 系统文件损坏&#xff1a;由于病毒感染、系统错误或其他原因…
阅读更多...
Java面向对象（高级）-- 单例(Singleton)设计模式

Java面向对象（高级）-- 单例(Singleton)设计模式

文章目录 一、单例设计模式&#xff08;1&#xff09; 设计模式概述&#xff08;2&#xff09; 何为单例模式&#xff08;3&#xff09; 实现思路&#xff08;4&#xff09; 单例模式的两种实现方式1. 饿汉式2. 懒汉式3. 饿汉式 vs 懒汉式 &#xff08;5&#xff09; 单例模式的…
阅读更多...
SQL零基础入门教程，贼拉详细！贼拉简单！ 速通数据库期末考！（九）

SQL零基础入门教程，贼拉详细！贼拉简单！ 速通数据库期末考！（九）

UNION ALL UNION ALL 用于合并两个或多个 SELECT 语句的结果。 请注意&#xff0c;UNION ALL 合并的每个 SELECT 语句必须是查询相同数量&#xff0c;相同数据类型的字段&#xff0c;且顺序也必须一致。另外结果集中的列名总是等于 UNION ALL 中第一个 SELECT 语句中的列名。 …
阅读更多...
PyQt（学习笔记）

PyQt（学习笔记）

学习资料来源&#xff1a; PyQt快速入门——b站王铭东老师 PyQt&#xff08;学习笔记&#xff09; Pycharm环境准备运行第一个程序QPushButtonQLabelQLineEdit调整窗口大小、位置、图标布局信号与槽PyQt引入多线程 Pycharm环境准备 新建环境——添加PyQt5模块——验证版本 如果…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023