Vue框架底层

一、前端框架的由来

1、服务端渲染

sequenceDiagram
浏览器->>+服务器: https://www.bilibili.com/
Note right of 服务器: 组装页面(服务端渲染)
服务器->>-浏览器: 完整页面

image.png

2、前后端分离


sequenceDiagram
浏览器->>服务器: https://www.bilibili.com/
服务器->>浏览器: 无内容的html
activate 浏览器
浏览器-->>服务器: ajax
服务器-->>浏览器: 各种业务数据
Note left of 浏览器: 运行js，创建元素，渲染页面
deactivate 浏览器

image.png

3、单页应用

sequenceDiagram
浏览器->>服务器: https://www.bilibili.com/
服务器->>浏览器: 无内容的html
activate 浏览器
Note left of 浏览器: 运行js，创建元素，渲染页面
浏览器-->>服务器: ajax
服务器-->>浏览器: 各种业务数据
Note left of 浏览器: 跳转页面
浏览器-->>服务器: ajax
服务器-->>浏览器: 各种业务数据
Note left of 浏览器: JS重新构建页面元素
deactivate 浏览器

image.png

4、vue

sequenceDiagram
浏览器->>服务器: https://www.bilibili.com/
服务器->>浏览器: 无内容的html
activate 浏览器
Note left of 浏览器: 运行包含vue的js，使用框架渲染页面
浏览器-->>服务器: ajax
服务器-->>浏览器: 各种业务数据
Note left of 浏览器: 使用vue-router跳转页面
deactivate 浏览器

image.png

二、vue的一些底层原理

1、注入

image.png

vue会将以下配置注入到vue实例：

  • data：和界面相关的数据
  • computed：通过已有数据计算得来的数据
  • methods：方法

模板中可以使用vue实例中的成员

2、虚拟DOM树

直接操作真实的DOM会引发严重的效率问题，vue使用虚拟DOM（vnode）的方式来描述要渲染的内容
vnode是一个普通的js对象，用于描述界面上应该有什么，比如：

 var vnode = {
            tag: "h1",
            children: [{
                tag: undefined,
                text: "Hello"
            }]
        }

上面的对象描述了：

有一个标签名为h1的节点，它有一个子节点，该子节点是一个文本，内容为【Hello】

vue模板并不是真实的DOM，它会编译为虚拟DOM

<div id="app">
  <h1>第一个vue应用：{{title}}</h1>
  <p>作者：{{author}}</p>
</div>

上面的模板会被编译为类似下面结构的虚拟DOM

var vnode = {
            tag: "div",
            children: [{
                tag: "h1",
                children: [{
                    text: "第一个vue应用：Hello World"
                }]
            }, {
                tag: "p",
                children: [{
                    text: "作者：siuser"
                }]
            }]
        }

虚拟DOM树会最终成为真实的DOM树
image.png

当数据变化后，将引发重新渲染，vue会比较新旧两棵vnode tree，找出差异，然后仅把差异部分应用到真实dom tree中

image.png

可见，在vue中，要得到最终的界面，必须要生成一个vnode tree

vue通过以下逻辑生成vnode tree：

image.png

注意：虚拟节点树必须是单根的

3、挂载

将生成的真实DOM树，放置到某个元素位置，称之为挂载

挂载的方式：

  1. 通过el:"css选择器"进行配置
  2. 通过vue实例.$mount(“css选择器”)进行配置

4、完整流程

image.png

三、组件开发

1、创建组件

组件是根据一个普通的配置对象创建的，所以要开发一个组件，只需要写一个配置对象即可

该配置对象和vue实例的配置是几乎一样的

//组件配置对象
var myComp = {
  data(){
    return {
      // ...
    }
  },
  template: `....`
}

值得注意的是，组件配置对象和vue实例有以下几点差异：

  • 无el
  • data必须是一个函数，该函数返回的对象作为数据
  • 由于没有el配置，组件的虚拟DOM树必须定义在template或render中

2、注册组件

注册组件分为两种方式，一种是全局注册，一种是局部注册

2.1、全局注册

一旦全局注册了一个组件，整个应用中任何地方都可以使用该组件

image.png

全局注册的方式是：

// 参数1：组件名称，将来在模板中使用组件时，会使用该名称
// 参数2：组件配置对象
// 该代码运行后，即可在模板中使用组件
Vue.component('my-comp', myComp)

在模板中，可以使用组件了

<my-comp />
<!-- 或 -->
<my-comp></my-comp>

但在一些工程化的大型项目中，很多组件都不需要全局使用
比如一个登录组件，只有在登录的相关页面中使用，如果全局注册，将导致构建工具无法优化打包
因此，除非组件特别通用，否则不建议使用全局注册

2.2、局部注册

局部注册就是哪里要用到组件，就在哪里注册

image.png

局部注册的方式是，在要使用组件的组件或实例中加入一个配置：

// 这是另一个要使用my-comp的组件
var otherComp = {
  components:{
    // 属性名为组件名称，模板中将使用该名称
    // 属性值为组件配置对象
    "my-comp": myComp
  },
  template: `
    <div>
      <!-- 该组件的其他内容 -->
      <my-comp></my-comp>
    </div>
  `;
}

3、应用组件

在模板中使用组件特别简单，把组件名当作HTML元素名使用即可
但要注意以下几点：

  1. 组件必须有结束

组件可以自结束，也可以用结束标记结束，但必须要有结束
下面的组件使用是错误的：

<my-comp>
  1. 组件的命名

无论你使用哪种方式注册组件，组件的命名需要遵循规范。

组件可以使用kebab-case 短横线命名法，也可以使用PascalCase 大驼峰命名法

下面两种命名均是可以的

var otherComp = {
  components:{
    "my-comp": myComp,  // 方式1
    MyComp: myComp //方式2
  }
}

实际上，使用小驼峰命名法 camelCase也是可以识别的，只不过不符合官方要求的规范

使用PascalCase方式命名还有一个额外的好处，即可以在模板中使用两种组件名

var otherComp = {
  components:{
    MyComp: myComp
  }
}

模板中：

<!-- 可用 -->
<my-comp />
<MyComp />

因此，在使用组件时，为了方便，往往使用以下代码：

var MyComp = {
  //组件配置
}

var OtherComp = {
  components:{
    MyComp // ES6速写属性
  }
}

四、组件树

一个组件创建好后，往往会在各种地方使用它。它可能多次出现在vue实例中，也可能出现在其他组件中

于是就形成了一个组件树

image.png

五、向组件传递数据（基础）

大部分组件要完成自身的功能，都需要一些额外的信息

比如一个头像组件，需要告诉它头像的地址，这就需要在组件时向组件传递数据

传递数据的方式有很多种，很常见的一种是使用组件属性component props

首先在组件中申明可以接收哪些属性：

var MyComp = {
  props:["p1", "p2", "p3"],
  // 和vue实例一样，使用组件时也会创建组件的实例
  // 而组件的属性会被提取到组件实例中，因此可以在模板中使用
  template: `
    <div>
      {{p1}}, {{p2}}, {{p3}}
    </div>
  `
}

在使用组件时，向其传递属性：

var OtherComp = {
  components: {
    MyComp
  },
  data(){
    return {
      a:1
    }
  },
  template: `
    <my-comp :p1="a" :p2="2" p3="3"/>
  `
}

注意：在组件中，属性是只读的，绝不可以更改，这叫做单向数据流
image.png

六、v-if和v-show

image.png

image.png

面试题：v-if和v-show有什么区别？

v-if能够控制是否生成vnode，也就间接控制了是否生成对应的dom。
当v-if为true时，会生成对应的vnode，并生成对应的dom元素；当其为false时，不会生成对应的vnode，自然不会生成任何的dom元素

v-show始终会生成vnode，也就间接导致了始终生成dom。
它只是控制dom的display属性，当v-show为true时，不做任何处理；当其为false时，生成的dom的display属性为none

使用v-if可以有效的减少树的节点和渲染量，但也会导致树的不稳定；
而使用v-show可以保持树的稳定，但不能减少树的节点和渲染量

因此，在实际开发中，显示状态变化频繁的情况下应该使用v-show，以保持树的稳定；
显示状态变化较少时应该使用v-if，以减少树的结点和渲染量

七、组件事件

image.png

  • 抛出事件：子组件在某个时候发生了一件事，但自身无法处理，于是通过事件的方式通知父组件处理
  • 事件参数：子组件抛出事件时，传递给父组件的数据
  • 注册事件：父组件申明，当子组件发生某件事的时候，自身将做出一些处理

八、插槽

在某些组件模板中，有一部分区域需要父组件来指定

<!-- message组件：一个弹窗消息 -->
<div class="message-container">
  <div class="content">
    <!-- 这里是消息内容，可以是一个文本，也可能是一段html，具体是什么不知道，需要父组件指定 -->
  </div>
  <button>确定</button>
  <button>关闭</button>
</div>

1、插槽的简单用法

此时，就需要使用插槽来定制组件的功能

<!-- message组件：一个弹窗消息 -->
<div class="message-container">
  <div class="content">
    <!-- slot是vue的内置组件 -->
    <slot></slot>
  </div>
  <button>确定</button>
  <button>关闭</button>
</div>

<!-- 父组件App -->
<Message>
	<div class="app-message">
    <p>App Message</p>
    <a href="">detail</a>
  </div>
</Message>

<!-- 最终的结果 -->
<div class="message-container">
  <div class="content">
    <div class="app-message">
      <p>App Message</p>
      <a href="">detail</a>
    </div>
  </div>
  <button>确定</button>
  <button>关闭</button>
</div>

image.png

2、具名插槽

如果某个组件中需要父元素传递多个区域的内容，也就意味着需要提供多个插槽
为了避免冲突，就需要给不同的插槽赋予不同的名字

<!-- Layout 组件 -->
<div class="layout-container">
  <header>
    <!-- 我们希望把页头放这里，提供插槽，名为header -->
    <slot name="header"></slot>
  </header>
  <main>
    <!-- 我们希望把主要内容放这里，提供插槽，名为default -->
    <slot></slot>
  </main>
  <footer>
    <!-- 我们希望把页脚放这里，提供插槽，名为footer -->
    <slot name="footer"></slot>
  </footer>
</div>

<!-- 父组件App -->
<BaseLayout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  <template v-slot:default>
    
  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</BaseLayout>

image.png

九、路由

vue-router官网：https://router.vuejs.org/zh/

image.png

1、路由插件

npm i vue-router

路由插件的使用

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter); // Vue.use(插件)  在Vue中安装插件

const router = new VueRouter({
  // 路由配置
})
new Vue({
  ...,
  router
})

2、基本使用

// 路由配置
const router = new VueRouter({
  routes: [ // 路由规则
    // 当匹配到路径 /foo 时，渲染 Foo 组件
    { path: '/foo', component: Foo },
    // 当匹配到路径 /bar 时，渲染 Bar 组件
  	{ path: '/bar', component: Bar }
  ]
})

<!-- App.vue -->
<div class="container">
  <div>
    <!-- 公共区域 -->
  </div>
  <div>
    <!-- 页面区域 -->
    <!-- vue-router 匹配到的组件会渲染到这里 -->
    <RouterView />
  </div>
</div>

3、路由模式

  1. 路由从哪里获取访问路径
  2. 路由如何改变访问路径

vue-router提供了三种路由模式：

  • hash：默认值。路由从浏览器地址栏中的hash部分获取路径，改变路径也是改变的hash部分。该模式兼容性最好
http://localhost:8081/#/blog  -->  /blog
http://localhost:8081/about#/blog  --> /blog
  • history：路由从浏览器地址栏的location.pathname中获取路径，改变路径使用的H5的history api。该模式可以让地址栏最友好，但是需要浏览器支持history api
http://localhost:8081/#/blog  -->  /
http://localhost:8081/about#/blog  --> /about
http://localhost:8081/blog  --> /blog
  • abstract：路由从内存中获取路径，改变路径也只是改动内存中的值。这种模式通常应用到非浏览器环境中
内存： /			-->   /
内存： /about	--> /about
内存： /blog	  --> /blog

4、导航

vue-router提供了全局的组件RouterLink，它的渲染结果是一个a元素

<RouterLink to="/blog">文章</RouterLink>
<!-- mode:hash 生成 -->
<a href="#/blog">文章</a>
<!-- mode:history 生成 -->
<!-- 为了避免刷新页面，vue-router实际上为它添加了点击事件，并阻止了默认行为，在事件内部使用hitory api更改路径 -->
<a href="/blog">文章</a>

image.png

image.png

激活状态

默认情况下，vue-router会用当前路径匹配导航路径

  • 如果当前路径是以导航路径开头，则算作匹配，会为导航的a元素添加类名router-link-active
  • 如果当前路径完全等于导航路径，则算作精确匹配，会为导航的a元素添加类名router-link-exact-active

例如，当前访问的路径是/blog，则：

导航路径类名
/router-link-active
/blogrouter-link-active   router-link-exact-active
/about无
/message无

可以为组件RouterLink添加bool属性exact，将匹配规则改为：必须要精确匹配才能添加匹配类名router-link-active

例如，当前访问的路径是/blog，则：

导航路径exact类名
/true无
/blogfalserouter-link-active   router-link-exact-active
/abouttrue无
/messagetrue无

例如，当前访问的路径是/blog/detail/123，则：

导航路径exact类名
/true无
/blogfalserouter-link-active
/abouttrue无
/messagetrue无

另外，可以通过active-class属性更改匹配的类名，通过exact-active-class更改精确匹配的类名

5、命名路由

使用命名路由可以解除系统与路径之间的耦合

// 路由配置
const router = new VueRouter({
  routes: [ // 路由规则
    // 当匹配到路径 /foo 时，渲染 Foo 组件
    { name:"foo", path: '/foo', component: Foo },
    // 当匹配到路径 /bar 时，渲染 Bar 组件
  	{ name:"bar", path: '/bar', component: Bar }
  ]
})

<!-- 向to属性传递路由信息对象 RouterLink会根据你传递的信息以及路由配置生成对应的路径 -->
<RouterLink :to="{ name:'foo' }">go to foo</RouterLink>

十、vue的一些边角知识

1、css module

当在main.js使用纯dom操作，需要引用css module

需要将样式文件命名为xxx.module.ooo
xxx为文件名

ooo为样式文件后缀名，可以是css、less

// 测试一下纯DOM操作
import styles from "./styles/message.module.less";
console.log(styles);
const div = document.createElement("div");
div.className = styles.message;
div.innerText = "asdfasdf";
document.body.appendChild(div);

2、得到组件渲染的Dom

  /**
    获取某个组件渲染的Dom根元素
  */
function getComponentRootDom(comp, props){
  const vm = new Vue({
    render: h => h(comp, {props})
  })
  vm.$mount();
  return vm.$el;
}

3、扩展vue实例

image.png

prototype的知识点延申

4、ref

<template>
	<div>
    <p ref="para">some paragraph</p>
    <ChildComp ref="comp" />
    <button @click="handleClick">查看所有引用</button>
  </div>
</template>

<script>
  import ChildComp from "./ChildComp"
	export default {
    components:{
      ChildComp
    },
    methods:{
      handleClick(){
        // 获取持有的所有引用
        console.log(this.$refs);
        /*
        {
        	para: p元素（原生DOM）,
        	comp: ChildComp的组件实例
        }
        */
      }
    }
  }
</script>

通过ref可以直接操作dom元素，甚至可能直接改动子组件，这些都不符合vue的设计理念。
除非迫不得已，否则不要使用ref

十一、远程获取数据的意义

image.png

1、开发环境有跨域问题

sequenceDiagram
浏览器->>前端开发服务器: http://localhost:8080/
前端开发服务器->>浏览器: 页面
浏览器->>后端测试服务器: ajax 跨域：http://test-data:3000/api/news
后端测试服务器->>浏览器: JSON数据
rect rgb(224,74,74)
Note right of 浏览器: 浏览器阻止数据移交
end

image.png

2、生产环境没有跨域问题

sequenceDiagram
浏览器->>服务器: http://www.my-site.com/
服务器->>浏览器: 页面
浏览器->>服务器: ajax：http://www.my-site.com/api/news
服务器->>浏览器: JSON数据

image.png

sequenceDiagram
浏览器->>静态资源服务器: http://www.my-site.com/
静态资源服务器->>浏览器: 页面
浏览器->>数据服务器: ajax 跨域：http://api.my-site.com/api/news
数据服务器->>浏览器: [允许www.my-site.com]JSON数据

image.png

3、解决开发环境的跨域问题

sequenceDiagram
浏览器->>前端开发服务器: http://localhost:8080/
前端开发服务器->>浏览器: 页面
浏览器->>前端开发服务器: ajax：http://localhost:8080/api/news
前端开发服务器->>后端测试服务器: 代理请求：http://test-data:3000/api/news
后端测试服务器->>前端开发服务器: JSON数据
前端开发服务器->>浏览器: JSON数据

image.png

4、为什么要用mock数据

sequenceDiagram
浏览器->>前端开发服务器: http://localhost:8080/
前端开发服务器->>浏览器: 页面
浏览器->>前端开发服务器: ajax：http://localhost:8080/api/news
前端开发服务器->>后端测试服务器: 代理请求：http://test-data:3000/api/news
后端测试服务器->>前端开发服务器: 404 （后端正在开发中）
前端开发服务器->>浏览器: 404

image.png

sequenceDiagram
participant 浏览器
participant MockJS
participant 前端开发服务器
activate MockJS
Note left of MockJS: 定义ajax拦截规则
deactivate MockJS
浏览器->>前端开发服务器: http://localhost:8080/
前端开发服务器->>浏览器: 页面
浏览器->>MockJS: ajax：http://localhost:8080/api/news
MockJS->>浏览器: 模拟的JSON数据

image.png

十二、组件生命周期

image.png
image.png

1、常见应用

1.1、加载远程数据

export default {
  data(){
    return {
      news: []
    }
  },
  async created(){
    this.news = await getNews();
  }
}

1.2、直接操作DOM

export default {
  data(){
    return {
      containerWidth:0,
    	containerHeight:0
    }
  },
  mounted(){
    this.containerWidth = this.$refs.container.clientWidth;
    this.containerHeight = this.$refs.container.containerHeight;
  }
}

1.3、启动和清除计时器

export default {
  data(){
    return {
      timer: null
    }
  },
  created(){
    this.timer = setInterval(()=>{
     ... 
    }, 1000)
  },
  destroyed(){
    clearInterval(this.timer);               
  }
}

十三、自定义指令

1、全局定义

// 指令名称为：mydirec1
Vue.directive('mydirec1', {
  // 指令配置
})

// 指令名称为：mydirec2
Vue.directive('mydirec2', {
  // 指令配置
})

之后，所有的组件均可以使用mydirec1和mydirec2指令

<template>
  <!-- 某个组件代码 -->
  <div>
    <MyComp v-mydirec1="js表达式" />
    <div v-mydirec2="js表达式">
      ...
    </div>
    <img v-mydirec1="js表达式" />
  </div>
</template>

2、局部定义

局部定义是指在某个组件中定义指令，和局部注册组件类似。

定义的指令仅在该组件中有效。

<template>
  <!-- 某个组件代码 -->
  <div>
    <MyComp v-mydirec1="js表达式" />
    <div v-mydirec2="js表达式">
      ...
    </div>
    <img v-mydirec1="js表达式" />
  </div>
</template>

<script>
export default {
  // 定义指令
  directives: {
    // 指令名称：mydirec1
    mydirec1: {
      // 指令配置
    },
    // 指令名称：mydirec2
    mydirec2: {
      // 指令配置
    }
  }
}
</script>

和局部注册组件一样，为了让指令更加通用，通常我们会把指令的配置提取到其他模块。

<template>
  <!-- 某个组件代码 -->
  <div>
    <MyComp v-mydirec1="js表达式" />
    <div v-mydirec2="js表达式">
      ...
    </div>
    <img v-mydirec1="js表达式" />
  </div>
</template>

<script>
  // 导入当前组件需要用到的指令配置对象
  import mydirec1 from "@/directives/mydirec1";
  import mydirec2 from "@/directives/mydirec2";
	export default {
    // 定义指令
    directives: {
      mydirec1,
      mydirec2
    }
  }
</script>

指令配置对象

没有配置的指令，就像没有配置的组件一样，毫无意义

vue支持在指令中配置一些钩子函数，在适当的时机，vue会调用这些钩子函数并传入适当的参数，以便开发者完成自己想做的事情。

常用的钩子函数：

// 指令配置对象
{
  bind(){
    // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  },
  inserted(){
    // 被绑定元素插入父节点时调用。
  },
  update(){
    // 所在组件的 VNode 更新时调用
  }
}

查看更多的钩子函数

每个钩子函数在调用时，vue都会向其传递一些参数，其中最重要的是前两个参数

// 指令配置对象
{
  bind(el, binding){
    // el 是被绑定元素对应的真实DOM
    // binding 是一个对象，描述了指令中提供的信息
  }
}

bingding 对象

查看更多bingding对象的属性

配置简化

比较多的时候，在配置自定义指令时，我们都会配置两个钩子函数

{
  bind(el, bingding){
    
  },
  update(el, bingding){
    
  }
}

这样，在元素绑定和更新时，都能运行到钩子函数

如果这两个钩子函数实现的功能相同，可以直接把指令配置简化为一个单独的函数：

function(el, bingding){
  // 该函数会被同时设置到bind和update中
}

利用上述知识，可满足大部分自定义指令的需求

更多的自定义指令用法见官网

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

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

相关文章

算法基础之合并果子

算法基础之合并果子

合并果子 核心思想&#xff1a; 贪心 Huffman树(算法): 每次将两个最小的堆合并 然后不断向上合并 #include<iostream>#include<algorithm>#include<queue> //用小根堆实现找最小堆using namespace std;int main(){int n;cin>>n;priority_queue&l…
阅读更多...
支持 input 函数的在线 python 运行环境 - 基于队列

支持 input 函数的在线 python 运行环境 - 基于队列

支持 input 函数的在线 python 运行环境 - 基于队列 思路两次用户输入三次用户输入 实现前端使用 vue element uiWindows 环境的执行器子进程需要执行的代码 代码仓库参考 本文提供了一种方式来实现支持 input 函数&#xff0c;即支持用户输的在线 python 运行环境。效果如下图…
阅读更多...
查询json数组

查询json数组

步骤一&#xff1a;创建表格 首先&#xff0c;我们需要创建一个表格来存储包含JSON对象数组的数据。可以使用以下代码创建一个名为 my_table 的表格&#xff1a; CREATE TABLE my_table (id INT PRIMARY KEY AUTO_INCREMENT,json_data JSON ); 上述代码创建了一个包含两个列的…
阅读更多...
算法实验T15——POJ1636 Prison rearrangement

算法实验T15——POJ1636 Prison rearrangement

题目描述 Prison rearrangement Time Limit: 3000MSMemory Limit: 10000KTotal Submissions: 6415Accepted: 2718 Description&#xff1a; In order to lower the risk of riots and escape attempts, the boards of two nearby prisons of equal prisoner capacity, have dec…
阅读更多...
计算机毕业设计 SpringBoot的中小型制造企业质量管理系统 Javaweb项目 Java实战项目 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 SpringBoot的中小型制造企业质量管理系统 Javaweb项目 Java实战项目 前后端分离 文档报告 代码讲解 安装调试

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…
阅读更多...
Kafka安全认证机制详解之SASL_PLAIN

Kafka安全认证机制详解之SASL_PLAIN

一、概述 官方文档&#xff1a; https://kafka.apache.org/documentation/#security 在官方文档中&#xff0c;kafka有五种加密认证方式&#xff0c;分别如下&#xff1a; SSL&#xff1a;用于测试环境SASL/GSSAPI (Kerberos) &#xff1a;使用kerberos认证&#xff0c;密码是…
阅读更多...
Ubuntu 本地部署 ChatGPT-Next-Web

Ubuntu 本地部署 ChatGPT-Next-Web

Ubuntu 本地部署 ChatGPT-Next-Web 文章目录 Ubuntu 本地部署 ChatGPT-Next-Web ChatGPT-Next-Web 项目地址&#xff1a;https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web 本文主要演示如何在 Ubuntu 本地&#xff08;默认是端口 3000&#xff09;部署 ChatGPT-Next-Web&am…
阅读更多...
差分约束算法

差分约束算法

差分约束 差分约束系统包含 m m m个涉及 n n n个变量的差额限制条件&#xff0c;这些差额限制条件每个都是形式为 x i − x j ≤ b ∈ [ 1 , m ] x_i-x_j\leq b_{\in[1,m]} xi​−xj​≤b∈[1,m]​的简单线性不等式。 通常我们要求解出一组可行解。 最短路差分约束 如果我们…
阅读更多...
ejs默认配置 造成原型链污染

ejs默认配置 造成原型链污染

文章目录 ejs默认配置 造成原型链污染漏洞背景漏洞分析漏洞利用 例题 [SEETF 2023]Express JavaScript Security ejs默认配置 造成原型链污染 参考文章 漏洞背景 EJS维护者对原型链污染的问题有着很好的理解&#xff0c;并使用非常安全的函数清理他们创建的每个对象 利用Re…
阅读更多...
苹果macOS 14.3开发者预览版Beta 2发布 修复API会意外失败的问题

苹果macOS 14.3开发者预览版Beta 2发布 修复API会意外失败的问题

1 月 4 日消息&#xff0c;苹果向 Mac 电脑用户推送了 macOS 14.3 开发者预览版 Beta 2 更新&#xff08;内部版本号&#xff1a;23D5043d&#xff09;&#xff0c;本次更新距离上次发布隔了 22 天。 macOS Sonoma 14.3 Beta 2 主要以修复 BUG、提高安全性为主。根据苹果官方更…
阅读更多...
VS+QT五子棋游戏开发

VS+QT五子棋游戏开发

1、首先安装好VS软件和QT库&#xff0c;将其配置好&#xff0c;具体不在此展开说明。 2、文件结构如下图&#xff1a; 3、绘制棋盘代码&#xff0c;如下&#xff1a; void Qwzq::paintEvent(QPaintEvent* event) {QPainter painter(this);painter.setRenderHint(QPainter::An…
阅读更多...
线性代数第一课+第二课总结

线性代数第一课+第二课总结

第一课 第一课是简单的行列式计算&#xff0c;主要就是要把左下角的数字全部转换为0&#xff0c;通过减去其他行的式子即可实现&#xff0c;最后把对角线的所有数字相乘&#xff0c;得到的结果是最后行列式的答案 第二课 例题1 硬算理论上其实也是可行的&#xff0c;但是使…
阅读更多...
遇见狂神说 Spring学习笔记（完整笔记+代码）

遇见狂神说 Spring学习笔记（完整笔记+代码）

简介 Spring是一个开源的免费的框架&#xff08;容器&#xff09;Spring是一个轻量级的、非入侵式的框架控制反转(IOC&#xff09;&#xff0c;面向切面编程 (AOP)支持事务的处理&#xff0c;支持对框架进行整合 Spring就是一个轻量级的控制反转&#xff08;IOC&#xff09;和…
阅读更多...
亚马逊云科技基于 listmonk 的电子邮件营销解决方案

亚马逊云科技基于 listmonk 的电子邮件营销解决方案

本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 亚马逊云科技开发者社区, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道。 背景 电子邮件营销&#xff08;EDM&#xff09;在广告、电商、供应链物流等行业应用…
阅读更多...
Linux操作系统基础(10)：Linux的特殊权限

Linux操作系统基础(10)：Linux的特殊权限

1. 特殊权限是什么 在Linux中&#xff0c;特殊权限是指针对文件或目录的特殊权限设置&#xff0c;包括SetUID、SetGID和Sticky Bit。 SetUID&#xff08;Set User ID&#xff09;&#xff1a; 当一个可执行文件被设置了SetUID权限后&#xff0c;当任何用户执行该文件时&#x…
阅读更多...
UI5与后端的文件交互（二）

UI5与后端的文件交互（二）

文章目录 前言一、开发Action1. 创建Structure2. BEDF添加Action3. class中实现Action 二、修改UI5 项目1. 添加一个按钮2. 定义事件函数 三、测试及解析1. 测试2. js中提取到的excel流数据3. 后端解析 前言 这系列文章详细记录在Fiori应用中如何在前端和后端之间使用文件进行…
阅读更多...
数字图像处理（图像灰度变换、图像直方图及均衡、图像中值滤波、图像空域锐化增强、图像频域滤波）

数字图像处理（图像灰度变换、图像直方图及均衡、图像中值滤波、图像空域锐化增强、图像频域滤波）

数字图像处理&#xff08;图像灰度变换、图像直方图及均衡、图像中值滤波、图像空域锐化增强、图像频域滤波&#xff09; 目录 1 图像灰度变换 1.1 灰度线性变换 1.2 图像二值化 1.3 负象变换 1.4 灰度非线性变换 1.5 程序设计流程图 2 图像直方图及均衡 2.1 直方图 2…
阅读更多...
了解单元测试

了解单元测试

一&#xff0c;测试分类 1.1 E2E测试&#xff08;end to end端到端测试&#xff09; 属于黑盒测试。 主要通过测试框架&#xff0c;站在用户测试人员的角度&#xff0c;模拟用户的操作进行页面功能的验证&#xff0c;不管内部实现机制&#xff0c;完全模拟浏览器的行为。&am…
阅读更多...
Pytest——Fixture夹具的使用

Pytest——Fixture夹具的使用

一、什么是Fixture 在测试开展的过程中&#xff0c;会需要考虑到测试前的准备工作&#xff0c;以及测试后的释放操作行为。这些在Pytest中&#xff0c;会通过Fixture的方式来实现。如果说在运行pytest的测试用例的时候&#xff0c;需要调用一些数据来实现测试行为&#xff0c;…
阅读更多...
thingsboard规则节点功能记录（自用）

thingsboard规则节点功能记录（自用）

本文是对【ThingsBoard源码级分析规则节点使用第一季】 https://www.bilibili.com/video/BV1CT411e7vt/?p4&share_sourcecopy_web&vd_source9a5ca7ed3cff97385fdab4b6188e485c 学习的一些记录&#xff0c;加深自己的理解&#xff0c;在此声明。 asset profile switch…
阅读更多...
最新文章

Copyright @ 2022~2023