JavaWeb：vue、AJax、ELement、maven、SpringBoot、、Http、Tomcat、请求响应、分层解耦

news2024/10/7 10:13:14

1 Vue

1.1 Vue介绍

VUE是前端框架，基于MVVM，实现数据双向绑定

框架是半基础软件，可重用的代码模型

f5aa5f91afbc4dc6821b1f8bef094523.png

1.2 Vue指令

<script src="js/vue.js"></script>
 
</head>
<body>

    <div id="id">
      <!-- 绑定了一个数据模型，vue双向绑定 -->
      <input type="text" v-model="url">
      <!-- v-bind绑定属性值 -->
      <!-- v-model在表单元素创建双向数据绑定 -->
      <a :href="url">链接1</a>
      <a v-bind:href="url">链接2</a>
      <!-- 插值表达式 -->
      {{msg}}
      <input type="button" value="按钮" v-on:click="handle()">
      <!-- 简化写法 -->
      <input type="button" value="按钮" @click="handle()">
      <!-- 判定为true就渲染 -->
      <span v-if="msg <= 30">30</span>
      <span v-else-if="msg> 30&&msg<50">30</span>
      <!-- 不管条件都渲染，不满足条件display隐藏 -->
      <span v-show="msg <= 30">340</span>
      <div v-for="ar in arr">{{ar}}</div>
      <div v-for="(ar1,in1) in arr">{{in1}}:{{ar1}}</div>



    </div>
</body>
<script >
  // 在new vue传递一个对象，el表示接管<div id="id"></div>区域
    new Vue({
      el:"#id",
      data:{
        url:"https://www.bilibili.com/",
        msg:20,
        arr:[1,2]
      },
      methods:{
          handle:function(){
            alert('hanle');
          }
        }

    })

</script>

1.3 生命周期

156dc2d74715449d97129a4ced2d1096.png

    <div id="id"></div>
</body>
<script >
  // 在new vue传递一个对象，el表示接管<div id="id"></div>区域
    new Vue({
      el:"#id",
      data:{
        url:"https://www.bilibili.com/",
        msg:20,
        arr:[1,2]
      },
      mounted(){
          alert('vue初始化成功， HTML页面渲染成功，发送请求到服务端，加载数据')
      }

    })
</script>

326ef1a974754a199dd23d2fe5cb3c76.png

1.4 Vue-cli

 Vue-cli 是Vue官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板

1 统一的目录结构

2 本地调试

3 热部署：代码变动，不需要重新运行，就可以加载最新的程序

4 单元测试

5 集成打包上线

1.5 目录结构 

be3f0020464f40d6803fe3fc0619a007.png

 1.6 前端工程化

Day03-05. 前端工程化-Vue项目_哔哩哔哩_bilibili创建vue文件

启动vue文件

3280f3ee0b54476d85d1db080f5fa832.png

vue.config.js

  //修改端口号由8080到7000
    devServer: {
        port: 7000,
      }

main.js

import Vue from 'vue'
//import App from './App.vue'表示要把App.vue导入当前js文件，命名为App
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  //ES6语法，router：router两个属性名一致，可以简写为一个router
  router,
  //render函数作用：将上面导入的app创建的视图创建虚拟DOM元素挂载到#app区域，这部分DOM元素是在App.vue的根组件定义的
  render: h => h(App)
}).$mount('#app')


// 相当于一下代码
new Vue({
  el:"#app",
  router:router,
  render:h=>h(App)
})

1.7 制作组件文件

App.vue

<!-- 模板部分，生成html代码 -->
<template>
  <div>{{ msg }}</div>
</template>
<!-- 控制模板的数据来源和行为 -->
<script>
//export导出一个模块，那么其他地方也可以导入
export default  {
  data:function(){
    // {}是对象，msg是数据模型
    return{
      msg:"haha"
    }
  }
}
</script>
<style>
</style>

2343f3ee46924e4e87de92a42466601e.png

2 Element

Element - 网站快速成型工具

配置Element后：

elementView.vue

<template>
    <div>
        <el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>
    </div>
</template>
<script>
export default{
    
}</script>
<style></style>

main.js新增：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

App.vue 

<template>
  <div>
    <element-view></element-view>
    </div>
</template>
<!-- 控制模板的数据来源和行为 -->
<script>
import elementView from './views/element/elementView.vue';
//export导出一个模块，那么其他地方也可以导入
export default  {
  components:{elementView},
  
}
</script>
<style>
</style>

ec5f11ce30cf4162a518012892d5473d.png

3 vue-router

VueRouter路由器类

router/index.js 改变：

const routes = [
  {
    path: '/',
    redirect:'/ele'
  },
  {
    path: '/ele',
    name: 'ele',
    component: () => import(/* webpackChunkName: "about" */ '../views/element/elementView.vue')
  }
]

elementView.vue新增： 

<template>
    <div>
//router-link解析成a
 <router-link to="/ele">点我试试？</router-link>
//渲染相对应组件
<router-view></router-view>
</el-row>
    </div>
</template>

4 ngnix

594af69ce9f340e89014389fda5e7c41.png

打包后放在dist文件夹里

将dist文件夹里面的东西放入fa8a51bb802143179b99172ebe2cd68d.png

c47efba7d02d4ce4a40c9c17e9a6b785.png 打开nginx.exe

输入http://localhost:90/

5 Ajax

5.1 作用

1 异步交互：不重新加载页面，与服务器交换数据并更新网页，比如搜索联想

2 数据交换：通过Ajax可以给服务器发送请求，并获取数据

5.2 原生Ajax

<body>
    <input type="button" value="获取数据" onclick="getData()">
    <div id="div1"></div></body>

<script>
    function getData(){
        //1. 创建XMLHttpRequest 
        var xmlHttpRequest  = new XMLHttpRequest();
        //2. 发送异步请求
        xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
        xmlHttpRequest.send();//发送请求
        //3. 获取服务响应数据
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
            //获取响应的数据，然后放到div1这个区域中
    document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
            }
        }
    }
</script>

5.3 Axios

对原生Ajax进行封装

Axios中文文档 | Axios中文网 (axios-http.cn)

<body>
  <input type="button" value="获取数据" onclick="get()">
  <input type="button" value="提交数据" onclick="post()">
  <script>
      function get(){
        // 通过axios发送异步请求get
        axios({
              method: "get",
// 传递数据可以在url后面"？key=word"
    url: "https://yapi.pro/mock/293482/User/id"
//想获取服务器端相应回来的数据，用成功回调函数then((result) =>xxx
}).then((result) => {
    console.log(result.data);
});

// 简化版本
// axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) => {
//     console.log(result.data);
// });
  
        }
      function post(){
        axios({
    method: "post",
    url: "https://yapi.pro/mock/293482/User/id",
    data: "height=199"
}).then((result) => {
    console.log(result.data);
});

// 简化版本
// axios.post( "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then((result) => {
//     console.log(result.data);
// });

        }
         
    </script>
</body>

点击获取数据：

370f0e8792f24ef38662ec2f6b5a8947.png

api接口文档管理平台Yapi

YApi Pro-高效、易用、功能强大的可视化接口管理平台

作用：1 api接口管理 2Mock：模拟真实接口，生成模拟测试数据

创建了我的api：
8dee7bbde89846db995686426e2cc3f2.png

6 Maven

6.1 介绍

1 依赖管理，管理jar包

2 统一结构，不同编译器生成的结构可能不同

3 自动化项目构建，根据指令快速完成清理、编译、测试、打包、发布

2b47838aa34546699ba0c0ca128a2216.png

不同阶段有不同文件产生，编译时有编译字节码文件，打包有jar文件 

70cb8c2fbd204ffe9c4b3beec1aba8fa.png

项目对象模型POM,或者称为坐标

6e9ec2aa63934cd185ba49c979a5f9d1.png

d9a6617560ed4d9e8bba9c8677f3de92.png

 依赖管理模型

6.2 依赖管理

6.2.1 创建依赖

Maven Repository: Search/Browse/Explore (mvnrepository.com)

pom.xml

<dependencies>
            <dependency>
//依赖ch.qos.logback下的logback-classic
                <groupId>ch.qos.logback</groupId>
                <artifactId>logback-classic</artifactId>
                <version>1.2.3</version>
            </dependency>
        </dependencies>

6.2.2 依赖传递

9d231441accb49e2941003850b1f7a88.png

查看依赖关系 

c7c20e331c784ed5a63cc8cb9b88678d.png

解除依赖：

<dependencies>
            <dependency>

    <exclusions>
        <groupId>ch.qos.logback</groupId>
        <artifactId>logback-classic</artifactId>
    </exclusions>
            </dependency>
        </dependencies>

 6.2.3 依赖范围

513697b5b27148ef93cdb5ed6bec5b53.png

<dependencies>
            <dependency>
//依赖ch.qos.logback下的logback-classic
                <groupId>ch.qos.logback</groupId>
                <artifactId>logback-classic</artifactId>
                <version>1.2.3</version>
                <scope>test</scope>
            </dependency>
        </dependencies>

6.2.3 生命阶段

050fb392ae7f4f0c99b9d3a94a7b3229.png

7 SpringBoot 

创建一个SpringBoot工程

2d538b4296354a4685dea7d0522044ed.png

HelloController
//请求处理类
@RestController
public class HelloController {
    //访问/hello会使用以下方法
    @RequestMapping("/hello")
    public String Hello(){
        System.out.println("hello1");
        return "hello";
    }
}

运行Springbootdemo1Application

f7da921d36e04a52bc26cfe7ca35751f.png

ea1d5813ac224c4abed91a11cc287b3a.png

成功！

8 HTTP协议

 Hyper Text Transfer Protocol，超文本传输协议，规定了浏览器和服务器之间数据传输的规则。

HTTP协议是无状态的协议：每次请求-响应都是独立的

1aa1e84689644a8eb209c97b13bf72cb.png

11fe05bd604b439288ef9175121f7ec8.png HTTP响应格式ca16bf7bf6d74a02b61dfd578afcd610.png

Web服务器是一个软件程序，对HTTP协议的操作进行封装 

9 Tomcat

Tomcat（Web容器、Servlet容器）是轻量级Web服务器，支持Servlet/JSP少量JavaEE规
JavaEE：Java企业版
Servlet程序需要依赖于 Tomcat才能运行
72653b4f4abb4956802aa66e87e8e2dc.png

解决乱码：tomcat文件夹 

91d7770bac9f4ccb8b89062650a74e38.png

bf8dea50277f4e1eacdd32cf357df32d.png 解决占用端口

f834e013547942cf8fce1dbab7bcec6e.png

 cmd

netstat -ano | findstr 8080 
taskkill -pid LISTENING占用的pid的数字 -f

53df8a9b71a94863b73bd7cf2e48890b.png

 HTTP协议默认端口号为80，如果将Tomcat端口号改为80，则将来访问Tomcat时，将不用输入端口号

改端口号

588aa0e3ddb64385bcc5f40d2e4a2136.png

39ee496820054fe8aeb89f1a916b71c7.png

Tomcat 部署项目：将项目放置到 webapps 目录下
访问方法：localhost：8080/文件夹中的html文件

起步依赖：

1.spring-boot-starter-web：包含了web应用开发所需要的常见依赖

2.spring-boot-starter-test：包含了单元测试所需要的常见依赖

不需要加version,因为在<parent>父工程定义好了

https://docs.spring.io/spring-boot/docs/2.7.4/reference/htmlsingle/#using.build-systems.starters

 基于Springboot开发的web应用程序，内置了tomcat服务器，当启动类运行时，会自动启动内嵌的tomcat服务器

10 请求响应

10.1 请求HttpServletRequest

@RestController
public class simpleParam {
    @RequestMapping("/simpleParam")
    public String param(HttpServletRequest request){
        String name=request.getParameter("name");
        String  ageStr=request.getParameter("age");
        int age=Integer.parseInt(ageStr);
        System.out.println(name+"---"+age);
        return "ok";
    }
}

postman：

2fd2c4eb213f46d0921ce382e1904b3c.png

10.2 获取实体参数

原始程序获取参数：

@RestController
public class simpleParam {
    @RequestMapping("/simpleParam")
    public String param(HttpServletRequest request){
        String name=request.getParameter("name");
        String  ageStr=request.getParameter("age");
        int age=Integer.parseInt(ageStr);
        System.out.println(name+"---"+age);
        return "ok";
    }
}

3f6a73d703f34c809742109d6dc46e0e.png

基于springboot方法：

@RestController
public class simpleParam {
    @RequestMapping("/simpleParam")
    public String param(String name,Integer age){
        System.out.println(name+"---"+age);
        return "ok";
    }
}
    @RequestMapping("/simpleParam")
//    方法形参与请求参数名不一致，可以用@RequestParam映射
    public String param(@RequestParam(name="name")String username, Integer age){
        System.out.println(username+"---"+age);
        return "ok";

Dog.java

public class Dog {
    private String name;
    private String age;
    // ptg生成
xx
}

User.java

public class user {
    private String name;
    private Integer age;
    private Dog do1;
ptg

}

simpleParam
    @RequestMapping("/simplepolo")
    public String param(user u){
        System.out.println(u);
        return "ook";
    }

 96a058f4b4d84801b2a25aec760dd552.png

10.3 数组集合参数

 @RequestMapping("/arrayParam")
    public String param(String[] arr){
        System.out.println(Arrays.toString(arr));
        return "ook";
    }

f9b27c26f6c949b78e73f2fd1e2bc724.png

e6971ee337144584b3115bfe6dbc28dc.png

集合参数 

   @RequestMapping("/listParam")
    public String param(@RequestParam List<String> arr){
        System.out.println(arr);
        return "ook";
    }

10.4 日期参数

    @RequestMapping("/dataParam")
//    pattern与value必须一致，ldt必须与名字保持一致
    public String param(@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss") LocalDateTime ldt){
        System.out.println(ldt);
        return "ook";
    }

4c828b94b99e4ad8b5b0a57ef315da38.png

10.5 json参数

   @RequestMapping("/jsonParam")
    public String param(@RequestBody user u){
        System.out.println(u);
        return "ook";
    }

14e451e03eb6482daf14dc8c7ae2341e.png

c3829b7c1178442b985abc9798d6b27e.png

10.6 路径参数

    @RequestMapping("/path/{id}/{name}")
    public String param(@PathVariable Integer id,@PathVariable String name){
        System.out.println(id+name);
        return "ook";
    }

5d570e312c364cb8bb58bf83221523aa.png

10.7响应HttpServletResponse

@RestController = @Controller + @ResponseBody
@ResponseBody：将方法返回值直接响应，如果返回值类型是 实体对象/集合 ，将会转换为JSON格式响应
统一响应结果：用一个类节省返回值的编写 
/**
 * 统一响应结果封装类
 */
public class Result {
    private Integer code ;//1 成功 , 0 失败
    private String msg; //提示信息
    private Object data; //数据 data

    public Result() {
    }
    public Result(Integer code, String msg, Object data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
    }
    public Integer getCode() {
        return code;
    }
    public void setCode(Integer code) {
        this.code = code;
    }
    public String getMsg() {
        return msg;
    }
    public void setMsg(String msg) {
        this.msg = msg;
    }
    public Object getData() {
        return data;
    }
    public void setData(Object data) {
        this.data = data;
    }

    public static Result success(Object data){
        return new Result(1, "success", data);
    }
    public static Result success(){
        return new Result(1, "success", null);
    }
    public static Result error(String msg){
        return new Result(0, msg, null);
    }

    @Override
    public String toString() {
        return "Result{" +
                "code=" + code +
                ", msg='" + msg + '\'' +
                ", data=" + data +
                '}';
    }
}

应用：

    @RequestMapping("/path/{id}/{name}")
    public Result param(@PathVariable Integer id, @PathVariable String name){
        System.out.println(id+name);
        return Result.success("ook");
    }

 7a8619c35b9c45eea3d0f36557d3ce39.png

10.8 案例

获取员工数据，返回统一响应结果，在页面渲染展示

3ed006c6ec1f4cfcbee00f8e8949b0f3.png

引入数据：

EmpController
@RestController
public class EmpController {
    @RequestMapping("/listEmp")
    //@RequestBody处理将返回对象变为json
    public Result  list(){
//        1.加载并解析emp.xml
        //拿到文件路径
        String file=this.getClass().getClassLoader().getResource("emp.xml").getFile();
//        解析的file文件，往emp对象封装，解析出list集合
        List<Emp> emplist= XmlParserUtils.parse(file, Emp.class);
//        2.对数据进行转换处理
        //基于stream流遍历
        emplist.stream().forEach(emp->{
                    String gender=emp.getGender();
                    if("1".equals(gender))
                    {
                        emp.setGender("男");
                    }else if("2".equals(gender)){
                        emp.setGender("女");
                    }
                }

                );
        return Result.success(emplist);
    }

}

bfa4776a422c4d0295b6efccc4420d47.png

优化：分层解耦 

6a952b9550b94171b36de3210101e247.png

controller层：获取(调用service层)、返回数据

@RestController
public class EmpController {

        //高耦合
//    private EmpService empService=new EmpServiceA();
   @Autowired
   private EmpService empService;
    @RequestMapping("/listEmp")
    //@RequestBody处理将返回对象变为json
    public Result  list(){
        List<Emp> emplist=empService.listEmp();
        return Result.success(emplist);
    }
}

service层：业务逻辑处理：将gender的1变为男，2变为女

EmpService.interface

public interface EmpService {
//    获取员工列表
    public List<Emp> listEmp();
}
EmpServiceA.java
//@Component表示交给IOC容器管理，称为IOC容器的bean
@Component
public class EmpServiceA implements EmpService {
    //高耦合
    // private EmpDao empDao=new EmpDaoA();
    //依赖注入，IOC容器会提供该类型bean对象，并赋值给该变量
@Autowired
   private EmpDao empDao;
    List<Emp> emplist=empDao.listemp();
    @Override
    public List<Emp> listEmp() {
        //        2.对数据进行转换处理
        //基于stream流遍历
        emplist.stream().forEach(emp->{
                    String gender=emp.getGender();
                    if("1".equals(gender))
                    {
                        emp.setGender("男");
                    }else if("2".equals(gender)){
                        emp.setGender("女");
                    }
                }

        );
        return emplist;
    }
}

Dao层：加载并解析emp.xml

EmpDao

public interface EmpDao {
//    获取员工列表
    public List<Emp> listemp();
}
EmpDaoA
//@Component表示交给IOC容器管理，称为IOC容器的bean
@Component
public class EmpDaoA implements EmpDao {
    @Override
    public List<Emp> listemp() {
        //1.加载并解析emp.xml
        //拿到文件路径
        String file=this.getClass().getClassLoader().getResource("emp.xml").getFile();
//        解析的file文件，往emp对象封装，解析出list集合
        List<Emp> emplist= XmlParserUtils.parse(file, Emp.class);
        return emplist;
    }
}

11 分层解耦 

controller：控制层，接收前端发送的请求，对请求进行处理，并响应数据。

service：业务逻辑层，处理具体的业务逻辑。

dao：数据访问层(Data Access Object)（持久层），负责数据访问操作，包括数据的增、删、改、查

dao接口：dao层处理的数据有很多，为了灵活切换各种实现

高内聚：service层仅存放与员工有关的业务逻辑处理

低耦合：降低层与层的关联

使用以上四个注解都可以声明bean，但是在springboot集成web开发中，声明控制器bean只能用@Controller

@ComponentScan注解虽然没有显式配置，但是实际上已经包含在了启动类声明注解 @SpringBootApplication 中，默认扫描的范围是启动类所在包及其子包。

如果dao包不和controller在同一个文件夹，那么在启动页可以用：@ComponentScan("dao","所在包名")

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

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

相关文章

使用 VS Code + Github 搭建个人博客

使用 VS Code + Github 搭建个人博客

搭建个人博客的方案 现在&#xff0c;搭建个人博客的方式有很多&#xff0c;门槛也很低。 可以选择已有平台&#xff1a; 掘金语雀知乎简书博客园SegmentFault… 也可以选择一些主流的博客框架&#xff0c;自行搭建。 HexoGitBookVuePressdumi… 如何选择&#xff1f; 我…
阅读更多...
es索引操作命令

es索引操作命令

索引操作 index 创建索引 put 方法创建索引 使用 put 创建索引时必须指明文档id&#xff0c;否则报错 # PUT 创建命令 # test1 索引名称 # type1 类型名称&#xff0c;默认为_doc&#xff0c;已经被废弃 # 1 文档id PUT /test1/type1/1 {"name":"zhangsan&…
阅读更多...
【C语言】内存函数~

【C语言】内存函数~

一、前言 上期我们讲解了与字符相关的函数&#xff1a;其中就有strcmp()字符串比较函数&#xff1b;strcpy()字符串拷贝函数&#xff1b;他们都能对内存进行一定的操作&#xff0c;可是却无法处理一些非字符串的数据。而这里我将介绍这四个函数&#xff1a;分别是memcpy()&…
阅读更多...
Ubuntu 16.04 设置 root 密码

Ubuntu 16.04 设置 root 密码

Ubuntu 16.04 设置 root 密码 1. sudo2. parserReferences 1. sudo sudo (/ˈsuːduː/ or /ˈsuːdoʊ/) is a program for Unix-like computer operating systems that allows users to run programs with the security privileges of another user, by default the superus…
阅读更多...
Linux下进程的调度与切换

Linux下进程的调度与切换

&#x1f30e;进程的调度与切换 文章目录&#xff1a; 进程的调度与切换 进程切换 进程调度       活动状态进程队列       位图判断       过期队列 总结 前言&#xff1a; 在Linux操作系统中&#xff0c;进程的调度与切换是操作系统核心功能之一&#xff…
阅读更多...
ViT如何支持变长序列（patches）输入？

ViT如何支持变长序列（patches）输入？

问题&#xff1a;当增加输入图像的分辨率时&#xff0c;例如DeiT 从 224 到 384&#xff0c;一般来说会保持 patch size&#xff08;例如9&#xff09;&#xff0c;因此 patch 的数量 N 会发生了变化。那么视觉transformer是如何处理变长序列输入的? 回答&#xff1a; 在讨论…
阅读更多...
鸿蒙开发学习：【驱动子系统】

鸿蒙开发学习：【驱动子系统】

OpenHarmony驱动子系统采用C面向对象编程模型构建&#xff0c;通过平台解耦、内核解耦&#xff0c;兼容不同内核&#xff0c;提供了归一化的驱动平台底座&#xff0c;旨在为开发者提供更精准、更高效的开发环境&#xff0c;力求做到一次开发&#xff0c;多系统部署。 为了缩减…
阅读更多...
go rabbitmq 操作

go rabbitmq 操作

go rabbitmq 操作 go 依赖包github.com/streadway/amqp docker快速部署 docker pull rabbitmq:management docker run -d rabbitmq:management # 先跑一个看看监听了哪些端口 docker run -d --name rabbitmq -p 5672:5672 -p 15672:15672 rabbitmq #5672 go 程序连接&#x…
阅读更多...
Linux：系统初始化，内核优化，性能优化（3）

Linux：系统初始化，内核优化，性能优化（3）

优化系统的文件句柄数&#xff08;全局&#xff09; 也就是系统的最大文件数量 查看最大数量 cat /proc/sys/fs/file-max 当我们的服务器有非常大的一个数据并发的时候十几二十万的文件需要去配置&#xff0c;可能这个是远远不够的&#xff0c;我们就要去修改 vim /etc/sy…
阅读更多...
栈和队列（Java实现）

栈和队列（Java实现）

栈和队列&#xff08;Java实现&#xff09; 栈 栈(Stack)&#xff1a;栈是先进后出&#xff08;FILO, First In Last Out&#xff09;的数据结构。Java中实现栈有以下两种方式&#xff1a; stack类LinkedList实现&#xff08;继承了Deque接口&#xff09; &#xff08;1&am…
阅读更多...
使用 GitHub Actions 通过 CI/CD 简化 Flutter 应用程序开发

使用 GitHub Actions 通过 CI/CD 简化 Flutter 应用程序开发

在快节奏的移动应用程序开发世界中&#xff0c;速度、可靠性和效率是决定项目成功或失败的关键因素。持续集成和持续部署 (CI/CD) 实践已成为确保满足这些方面的强大工具。当与流行的跨平台框架 Flutter 和 GitHub Actions 的自动化功能相结合时&#xff0c;开发人员可以创建无…
阅读更多...
【GPT-SOVITS-04】SOVITS 模块-鉴别模型解析

【GPT-SOVITS-04】SOVITS 模块-鉴别模型解析

说明&#xff1a;该系列文章从本人知乎账号迁入&#xff0c;主要原因是知乎图片附件过于模糊。 知乎专栏地址&#xff1a; 语音生成专栏 系列文章地址&#xff1a; 【GPT-SOVITS-01】源码梳理 【GPT-SOVITS-02】GPT模块解析 【GPT-SOVITS-03】SOVITS 模块-生成模型解析 【G…
阅读更多...
正则表达式与re模块

正则表达式与re模块

目录 正则表达式 简介 语法&#xff1a; 常用元字符&#xff1a; 量词: 贪婪匹配和惰性匹配&#xff1a; re模块 简介&#xff1a; 常用的几个模块&#xff1a; 1.findall 2.search 3.finditer 4.compile 案例展示&#xff1a; 需求&#xff1a; 思路分析&#…
阅读更多...
Blocks —— 《Objective-C高级编程 iOS与OS X多线程和内存管理》

Blocks —— 《Objective-C高级编程 iOS与OS X多线程和内存管理》

目录 Blocks概要什么是BlocksOC转C方法关于几种变量的特点 Blocks模式Block语法Block类型 变量截获局部变量值__block说明符截获的局部变量 Blocks的实现Block的实质 Blocks概要 什么是Blocks Blocks是C语言的扩充功能&#xff0c;即带有局部变量的匿名函数。 顾名思义&#x…
阅读更多...
u盘文件损坏怎么恢复数据？分享三个数据恢复方法

u盘文件损坏怎么恢复数据？分享三个数据恢复方法

随着科技的飞速发展&#xff0c;U盘已成为我们日常生活和工作中不可或缺的数据存储工具。然而&#xff0c;由于各种原因&#xff0c;如不当操作、病毒感染或硬件故障等&#xff0c;U盘中的文件可能会受到损坏。那么&#xff0c;当U盘文件损坏时&#xff0c;我们该如何恢复数据呢…
阅读更多...
mac下Appuim环境安装

mac下Appuim环境安装

参考资料 Mac安装Appium_mac电脑安装appium-CSDN博客 安卓测试工具&#xff1a;Appium 环境安装&#xff08;mac版本&#xff09;_安卓自动化测试mac环境搭建-CSDN博客 1. 基本环境依赖 1 node.js 2 JDK&#xff08;Java JDK&#xff09; 3 Android SDK 4 Appium&#x…
阅读更多...
深度学习-基于机器学习的语音情感识别系统的设计

深度学习-基于机器学习的语音情感识别系统的设计

概要 语音识别在现实中有着极为重要的应用&#xff0c;现在语音内容的识别技术已日趋成熟。当前语音情感识别是研究热点之一&#xff0c;它可以帮助AI和人更好地互动、可以帮助心理医生临床诊断、帮助随时随地高效测谎等。本文采用了中科院自动化所的CASIA语料库作为样本&#…
阅读更多...
Qt文件以及文件夹相关类（QDir、QFile、QFileInfo）的使用

Qt文件以及文件夹相关类（QDir、QFile、QFileInfo）的使用

关于Qt相关文件读写操作以及文件夹的一些知识&#xff0c;之前也写过一些博客&#xff1a; Qt关于路径的处理&#xff08;绝对路径、相对路径、路径拼接、工作目录、运行目录&#xff09;_qt 相对路径-CSDN博客 C/Qt 读写文件_qt c 读取文本文件-CSDN博客 C/Qt读写ini文件_…
阅读更多...
【GPT-SOVITS-01】源码梳理

【GPT-SOVITS-01】源码梳理

说明&#xff1a;该系列文章从本人知乎账号迁入&#xff0c;主要原因是知乎图片附件过于模糊。 知乎专栏地址&#xff1a; 语音生成专栏 系列文章地址&#xff1a; 【GPT-SOVITS-01】源码梳理 【GPT-SOVITS-02】GPT模块解析 【GPT-SOVITS-03】SOVITS 模块-生成模型解析 【G…
阅读更多...
react中hooks使用限制

react中hooks使用限制

只能在最顶层使用Hook 不要在循环、条件中调用hook&#xff0c;确保总是在React函数最顶层使用它们 只能React函数中调用Hook 不要在普通的js函数中调用 在React的函数组件中调用Hook 在自定义hook中调用其他hook 原因&#xff1a; 我们每次的状态值或者依赖项存在哪里&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023