运维自动化bingo前端

项目目录结构介绍

项目创建完成之后,我们会看到bingo_web项目其实是一个文件夹,我们进入到文件夹内部就会发现一些目录和文件,我们简单回顾一下里面的部分核心目录与文件。

├─node_modules/   # node的包目录,项目运行的依赖包存储目录,package.json和package-lock.json文件中会自动记录了这个目录下所有的包以及包的版本信息,
├─public/  # 静态资源目录,项目中的静态资源(css,js,图片等文件)放在这个文件夹
├─src/       # 主开发目录,要开发的客户端代码文件(单文件组件,css样式、工具函数等等)全部在这个目录下├─assets/  # 静态资源存储目录,与public目录作用类似。├─router/  # 路由存储目录,是我们创建项目的时候,如果选择安装vue-router,就自动会生成这个目录。├─views/   # 组件页面存储目录,就是浏览器中用户看到的页面内容,views往往会加载并包含components中的组件进来├─components/  # 组件存储目录,就是浏览器中用户看到的页面的一部分内容。├─App.vue├─main.js└─style.css
├─index.html
└─package.json   #  如果node_modules没有,但是有package.json,则可以在终端下,通过npm install进行恢复node_modules所有内容。

2.3、项目执行流程图

在这里插入图片描述
要在Vue.js项目中指定域名和端口,你通常需要配置Vue CLI提供的devServer,而不是直接在defineConfig里面指定域名和端口。devServer配置通常用于开发环境,它允许你定义开发服务器的参数,比如端口号、代理设置等。不过,如果你想要在生产环境中配置一个特定的域名和端口,这通常需要在部署到服务器时,通过服务器配置(例如Nginx或Apache)来实现,而不是在Vue CLI的配置中直接设置。

如果你的目的是为了开发环境,想要Vue CLI开发服务器运行在www.bingo.com域名和80端口,你可以试着修改vue.config.js文件(如果文件不存在,你需要手动创建这个文件):

首先,确认你的电脑上hosts文件已经将www.bingo.com指向了127.0.0.1(本地开发环境)。

然后,编辑vue.config.js文件来包含devServer配置,类似下面这样:

const { defineConfig } = require('@vue/cli-service');module.exports = defineConfig({transpileDependencies: true,// 配置开发服务器devServer: {host: 'www.bingo.com', // 指定开发服务器监听的域名port: 80, // 指定开发服务器的端口},
});

请注意,由于80端口是一个标准的HTTP端口,通常需要管理员权限才能让应用监听在80端口上。在Linux或macOS上,你可能需要使用sudo来启动应用。在Windows上,可能需要以管理员权限运行命令行工具。

此外,使用80端口有可能和系统上已经运行的其他服务发生冲突,确保80端口没有被其他应用占用。

使用www.bingo.com进行项目访问:
在这里插入图片描述

最后,因为我们是在本地开发环境配置,所以实际上并不会直接影响到生产环境的域名和端口设置。生产环境的域名和端口设置依赖于你的服务器和DNS配置。

在Vue CLI中,vue.config.js是一个可选的配置文件,如果项目的构建和开发过程中需要自定义选项,可以在项目根目录下创建这个文件。vue.config.js提供了很多配置项可以帮助你优化和调整开发以及构建的过程。以下是一些常用的配置项:

  1. publicPath: 类型:string,部署应用包时的基本 URL。用法如下:

    module.exports = {publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/'
    }
    
  2. outputDir: 类型:string,构建时生成的生产环境构建文件的目录。默认在项目根目录下生成一个dist目录。用法如下:

    module.exports = {outputDir: 'dist'
    }
    
  3. assetsDir: 类型:string,放置生成的静态资源 (js、css、img、fonts) 的目录。相对于outputDir

    module.exports = {assetsDir: 'assets'
    }
    
  4. indexPath: 类型:string,指定生成的index.html的输出路径,相对于outputDir

    module.exports = {indexPath: 'index.html'
    }
    
  5. filenameHashing: 类型:boolean,默认情况下,生成的静态资源文件名中包含了hash以控制缓存,你可以通过这个选项关闭。

    module.exports = {filenameHashing: false
    }
    
  6. pages: 类型:Object,在多页面应用下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。

    module.exports = {pages: {index: {// page 的入口entry: 'src/index/main.js',// 模板来源template: 'public/index.html',// 在 dist/index.html 的输出filename: 'index.html',},// 当使用只有入口的字符串格式时,默认会使用`public/subpage.html`作为模板,如果不存在,则回退到`public/index.html`模板。subpage: 'src/subpage/main.js'}
    }
    
  7. lintOnSave: 类型:boolean | 'warning' | 'default' | 'error',是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会默认取[process.env.NODE_ENV] 的值,是生产构建时禁用。

    module.exports = {lintOnSave: process.env.NODE_ENV !== 'production'
    }
    
  8. runtimeCompiler: 类型:boolean,是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了。

    module.exports = {runtimeCompiler: true
    }
    
  9. transpileDependencies: 类型:Array<string | RegExp>,默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来。

    module.exports = {transpileDependencies: [/my-dependency/]
    }
    

这些是vue.config.js中比较常见和有用的配置项。对于更详细的配置和更高级的用法,建议查看Vue CLI官方文档。

安装axios模块
npm install axios --save --registry https://registry.npmjs.org/

view.HomeView.vue内容详解:

<template><div class="home"><img alt="Vue logo" src="../assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"/></div>
</template><script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'HomeView',components: {HelloWorld}
}
</script>

在 Vue 组件中,name 选项用于指定组件的名称。虽然这个选项不是必须的,但它在某些场景下扮演了重要的角色,提供了以下几个好处:

  1. 调试:当你在开发工具(如 Vue Devtools)中调试应用时,有名字的组件会更容易识别和跟踪。没有名称的组件可能仅显示为 <AnonymousComponent>,这使得调试变得更加困难。

  2. 递归组件:如果一个组件需要在其模板内递归地调用自己,那么为这个组件指定一个 name 是必须的。这样组件就可以通过其名称引用自己,实现递归渲染。

  3. keep-alive<keep-alive> 是 Vue 提供的一个抽象组件,用于保留组件状态或避免重新渲染。在使用 <keep-alive> 时,includeexclude 属性允许你指定哪些组件应该被缓存或忽略。这两个属性接受组件 name 作为参数,因此在这种场景下 name 选项非常有用。

  4. Vue 组件库:在创建可复用的组件库时,为每个组件指定一个 name 选项可以更方便地管理和使用这些组件。特别是在全局注册组件的时候,Vue 将使用组件的 name 选项作为组件的标识。

示例中的 name: 'App' 表示将这个根组件的名称设为 “App”。这对调试非常有帮助,因为如果出现错误或需要在 Vue Devtools 中查看组件层次结构时,你可以轻松找到名为 “App” 的根组件。

总之,name 选项虽不是必须的,但在实践中为组件指定名称是一个好习惯,尤其是在以上提到的几种场景中。它有助于提升代码可读性和维护性,并且在开发、调试以及构建可重用组件时,使得工作流程更加顺畅。

在JavaScript(包括用于开发Vue应用的ES6标准)中,除了export default之外,还有export关键字用于导出模块的其他成员。export defaultexport共同构成了ES6的模块导出机制,它们之间有几个关键的区别:

export default

  • 每个模块可以有一个default导出。
  • 使用export default时,导入时可以为其指定任意名称。
  • 主要用于导出模块的“主要”功能或值。

例如,导出一个函数:

export default function() { console.log("Hello World!"); }

导入时:

import myFunction from './myModule';

export

  • 一个模块可以导出多个(非默认)成员。
  • 导入时需要使用相同的名称,或者使用as关键字重命名。
  • 用于导出一个模块的多个功能或值。

例如,导出多个函数或变量:

export const myConstant = 123;
export function myFunction() { console.log("Hello World!"); }
export class MyClass {}

导入时:

import { myFunction, myConstant, MyClass as RenamedClass } from './myModule';

结合使用export defaultexport:

一个模块中可以同时使用export defaultexport来导出多个成员,其中一个作为默认导出,而其他则作为具名导出。

// myModule.js
export default function() { console.log("Default Function"); }
export function myFunction() { console.log("My Function"); }
export const myConstant = 123;

导入时:

// 引入默认导出的函数,可以任意命名
import defaultFunction, { myFunction, myConstant } from './myModule';

注意事项:

  • export default允许你导出模块时不必使用大括号,而export导出的成员则需要在导入时放在大括号内。
  • 当使用export导出多个成员时,导入这些成员必须使用它们原有的名字,除非使用as关键字进行重命名。
  • export default的主要优势在于简化了默认导出成员的导入语法,因为你不需要使用大括号并且可以自由命名导入的成员。

这种模块化机制极大地增强了JavaScript代码的组织性和可维护性,使开发者可以轻松地在不同的文件和模块之间共享功能和值。

总结 export default与export

  1. export default: 由于每个模块文件只能有一个默认导出,因此在导入时可以随意命名。这意味着无论在导出时成员被命名为什么,在导入时都可以自定义命名,而 JavaScript 会理解你指的是该文件的默认导出成员。这就是为什么export default能使导入语法变得简化和灵活。

  2. export: 允许一个模块导出多个成员。由于可能同时导出多个成员,每个成员都有自己的名字,所以在导入这些成员时需要明确指出导入成员的具体名称。这样做是为了保证明确性和一致性,确保在导入时 JavaScript 知道你指的是哪个具体成员。

    如果需要,在导入时改变名称,可以使用as关键词来重命名,这样做即可以保持导入成员的明确性,又能提供一定程度的灵活性。

综上所述,这两种导出(exportexport default)方式提供了不同级别的灵活性和明确性,以适应不同的使用场景。选择哪一种方式取决于你的具体需求,例如,当模块只提供一个主要功能或值时,使用export default比较方便;而当模块提供多个函数、变量或组件时,使用export可以同时导出它们,使得导入这些成员时更加清晰明确。

从 Vue 3.0 开始,<script setup> 是为了简化组合式 API 的使用而提出的一个编译时语法糖。当使用 <script setup> 时,您不能以传统的方式(export default {})导出组件选项。<script setup> 标签内部的代码被视为组件的顶层代码,因此直接定义变量、函数以及其他响应式状态即可,无需封装在 export default {} 里。

  1. 移除 export default 声明。
  2. 直接在 <script setup> 内部声明组件的逻辑。
  3. 如果需要定义组件的 name,可以通过 defineComponent 的方式。
    将天气预报的代码进行vue-cli的修改
    view.ShowCenter.vue

<template><h1 class="showcenter">Show Center</h1><input type="text" v-model="city"><button @click="getque" class="table-bordered">查询城市天气</button><div>当前查询城市: {{city}}</div><p></p><table  v-if="data1!=''"><tr><th>序号</th><th>城市</th><th>日期</th><th>白天天气</th><th>夜间天气</th><th>最高温度</th><th>最低温度</th><th>相对湿度</th><th>能见度</th></tr><tr v-for="(tq,index) in data1"><td>{{index+1}}</td><td>{{city}}</td><td>{{tq.fxDate}}</td><td>{{tq.textDay}}</td><td>{{tq.textNight}}</td><td>{{tq.tempMax}}</td><td>{{tq.tempMin}}</td><td>{{tq.humidity}}</td><td>{{tq.vis}}</td></tr></table>
</template><script setup>
import { defineComponent, ref, onMounted } from 'vue';
import axios from "axios";defineComponent({ name: 'show-center' });// 以 ref 创建响应式变量
const data1 = ref([]);
const id = ref('');
const city = ref('北京');// 定义获取数据的方法
const getque = async () => {try {const { data: locationData } = await axios.get(`https://geoapi.qweather.com/v2/city/lookup?location=${city.value}&key=dc7728d14dfb4c6eb3eadc070a5839&lang=zh`);console.log(locationData.location);// 省略业务逻辑city.value = locationData.location[0].name;id.value = locationData.location[0].id;console.log(data1.value, id.value);const { data: weatherData } = await axios.get(`https://devapi.qweather.com/v7/weather/7d?location=${id.value}&key=dc7728d14dfb4c6eb3eadc070a5839&lang=zh`);console.log(weatherData.daily);data1.value = weatherData.daily;} catch(error) {console.error("请求时发生错误:", error);}
};
// 使用 onMounted 生命周期钩子
onMounted(() => {getque();
});
</script>
<style scoped>
table,tr,th,td{border: 3px solid red;border-collapse: collapse;
}
th ,td{width: 200px;text-align: center;height: 30px;line-height: 30px;
}.co{background-color: orange;
}
</style>

在这段代码中,我们通过 defineComponent({ name: 'showcenter' }) 来定义组件名称,使用 ref 创建响应式变量来替代原有的 data(){} 定义方式。函数和生命周期钩子直接定义在 <script setup> 的顶级作用域中,这样既符合 <script setup> 的使用规范,又保持了原有逻辑的完整性。

请注意,当使用 <script setup> 时,组件的大部分功能都可以通过直接在脚本中声明来实现,无需包裹在 export default {} 里。另外,如果您的项目中还未启用 <script setup>,或不打算使用它的特性,建议回归到传统 Vue 组件的写法。

const { data: locationData } = await axios.get(`https://geoapi.qweather.com/v2/city/lookup?location=${city.value}&key=dc7728d14dfb4c6eb3eadc070a5839&lang=zh`);

这行代码使用了几个JavaScript和Vue.js中常见的技术点,包括解构赋值、模板字符串、await关键字以及axios库的使用。下面我会逐一解释这些技术点:

  1. axios库
    axios是一个基于Promise的HTTP客户端,用于浏览器和node.js环境中发送HTTP请求。在这段代码中,axios.get方法用于向指定的URL发送GET请求。

  2. 模板字符串
    使用反引号括起来的字符串称为模板字符串,它允许你在字符串中嵌入变量或表达式。${city.value}这部分代码会被替换为city.value变量的实际值,变量city可能是一个响应式变量,通过Vue的refreactive函数创建。

  3. await关键字
    await关键字用于等待一个Promise对象的结果。它只能在异步函数(通过async定义的函数)中使用。在这里,它用于等待axios.get发送请求并返回响应的过程完成。

  4. 解构赋值
    解构赋值允许你将数组或对象的属性/值“解构”到不同的变量中。在这个例子中,const { data: locationData } = ...从axios返回的响应对象中解构出data属性,并将其重命名为locationData。这意味着你可以直接使用locationData变量访问原响应对象中data属性的值。

综上所述,这行代码的执行流程如下:

  1. 使用axios.gethttps://geoapi.qweather.com/v2/city/lookup发送GET请求,请求参数包括location(其值取自city.value)、key(API密钥)和lang(语言偏好)。
  2. 请求发送后,await会暂停当前异步函数的执行,直到Promise解决并返回响应结果。
  3. axios的Promise解决后,其返回的响应对象中的data属性被解构并赋值给locationData变量。
  4. 现在,locationData包含了从天气API获得的、关于请求位置的信息,可以在后续代码中使用这些数据。

错误处理
通过 try-catch 捕捉错误,但由于 Axios 请求使用的是 Promise(并且被 .then 方法处理),错误不会被 try-catch 捕获到,除非 Axios 请求中使用 await
const getque = async () => {} 是一个使用 ES6 箭头函数语法和 async 关键字定义的异步函数。这个函数可以进行异步操作,比如网络请求、读写文件等不会立即完成的操作,并使用 await 关键字以同步的方式写异步代码。这种语法提供了一种更简洁和直观的方式来处理 JavaScript 中的异步编程。下面将分步骤详细介绍这一语法。

const getque = async () => {}语法详解

1. 箭头函数 (() => {})

箭头函数是一种在 ES6 (ECMAScript 2015) 中引入的简写形式,用于定义函数。与传统的函数定义方式相比,箭头函数提供了更简洁的语法。

  • 基本语法
(parameters) => { statements }

如果函数只有一个参数,可以省略参数周围的括号:

parameter => { statements }

如果函数体只有一条语句,且是返回值的话,可以省略大括号和 return 关键字:

parameter => expression
// 等价于
parameter => { return expression; }
  • 没有自己的 this

箭头函数没有自己的 this 值,它会捕获其所在上下文的 this 值为自己的 this,使得在回调函数中的 this 行为变得更加可预测。

2. async 关键字

async 是一个在函数定义前使用的关键字,表明该函数是异步的。async 函数总是返回一个 Promise 对象。如果 async 函数显式返回一个非 Promise 值,这个值会被自动包裹在一个 Promise 中。

async function myFunction() {return 'Hello';
}
myFunction().then(alert); // 弹出 'Hello'

使用箭头函数定义异步函数的形式如下:

const myAsyncFunction = async () => {// 异步操作
};

3. await 关键字

async 函数内部,可以使用 await 关键字来等待一个 Promise 完成。它会暂停 async 函数的执行,直到 Promise 完成(即 Promise 被 “resolve” 或 “reject”),然后继续执行 async 函数,并返回结果。

  • 基本用法
const data = await someAsyncOperation();

await 只能在 async 函数内部使用,如果在普通函数中使用 await,会引发语法错误。

总结

const getque = async () => {} 定义了一个名为 getque 的异步函数,该函数内部可以包含异步操作,如进行网络请求或者执行其他返回 Promise 对象的操作。通过 asyncawait 的组合使用,可以以更接近同步编程的方式写出清晰、简洁的异步代码。

route.index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue';
import showcenter from  '../views/ShowCenter.vue'const routes = [{path: '/',name: 'showcenter',component: showcenter},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')}
]const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
})export default router

实现效果:
在这里插入图片描述

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

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

相关文章

【漏洞库】O2OA系统

O2OA invoke 后台远程命令执行漏洞 CNVD-2020-18740 漏洞描述 O2OA是一款开源免费的企业及团队办公平台,提供门户管理、流程管理、信息管理、数据管理四大平台,集工作汇报、项目协作、移动OA、文档分享、流程审批、数据协作等众多功能,满足企业各类管理和协作需求。 O2OA系…

LeetCode:2.两数相加

目录 题目&#xff1a;​编辑2. 两数相加 - 力扣&#xff08;LeetCode&#xff09; 分析问题&#xff1a; 官方的优秀代码博主的注释&#xff1a; 博主的辣眼代码&#xff0c;无注释&#xff0c;拉出来拷打自己&#xff1a; 每日表情包&#xff1a; 2. 两数相加 - 力扣&am…

面试经典150题——文本左右对齐(困难)

​"It always seems impossible until it’s done." - Nelson Mandela 1. 题目描述&#xff1a; 这个题目标为困难题目&#xff0c;但是如果我们静下心来把题目读懂了&#xff0c;其实无非就是不同情况下不同考虑而已&#xff0c;也没什么思维上的复杂&#xff0c;还…

Linux openKylin(开放麒麟)系统SSH服务安装配置与公网远程连接

文章目录 前言1. 安装SSH服务2. 本地SSH连接测试3. openKylin安装Cpolar4. 配置 SSH公网地址5. 公网远程SSH连接6. 固定SSH公网地址7. SSH固定地址连接8. 结语 前言 openKylin是中国首个基于Linux 的桌面操作系统开发者平台&#xff0c;通过开放操作系统源代码的方式&#xff…

C++:第十五讲高精度算法

每日C知识 system("color xx);是改变字体及背景颜色&#xff0c;前一个x代表一个数字&#xff0c;可以改变背景颜色&#xff0c;后一个x代表一个数字&#xff0c;可以改变字体颜色 &#xff0c;但都是根据颜色表来的。 记住&#xff1a;要加头文件&#xff1a;#include&l…

手写分布式存储系统v0.3版本

引言 承接 手写分布式存储系统v0.2版本 &#xff0c;今天开始新的迭代开发。主要实现 服务发现功能 一、什么是服务发现 由于咱们的服务是分布式的&#xff0c;那从服务管理的角度来看肯定是要有一个机制来知道具体都有哪些实例可以提供服务。举个例子就是&#xff0c;张三家…

DevOps落地笔记-07|案例分析:如何有效管理第三方组件

上一讲主要介绍了如何通过代码预检查的方式提高入库代码的质量&#xff0c;将代码检查尽可能前置&#xff0c;降低修复问题的成本&#xff0c;从而提高交付软件的质量。除了代码本身的问题&#xff0c;依赖组件也是经常困扰开发者的一个问题。比如&#xff0c;依赖组件的某个版…

认识Tomcat (一)

认识Tomcat &#xff08;一&#xff09; 一、服务器 1.1 服务器简介 ​ 硬件服务器的构成与一般的PC比较相似&#xff0c;但是服务器在稳定性、安全性、性能等方面都要求更高&#xff0c;因为CPU、芯片组、内存、磁盘系统、网络等硬件和普通PC有所不同。 ​ 软件服务器&…

深度学习(生成式模型)—— Consistency Models

文章目录 前言预备知识&#xff1a;SDE与ODEMethod实验结果 前言 Diffusion model需要多次推断才能生成最终的图像&#xff0c;这将耗费大量的计算资源。前几篇博客我们已经介绍了加速Diffusion model生成图像速率的DDIM和Stable Diffusion&#xff0c;本节将介绍最近大火的Co…

【Matplotlib】figure方法 你真的会了吗!?

&#x1f388;个人主页&#xff1a;甜美的江 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;matplotlib &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进…

解放双手!ChatGPT助力编写JAVA框架!

摘要 本文介绍了使用 ChatGPT逐步创建 一个简单的Java框架&#xff0c;包括构思、交流、深入优化、逐步完善和性能测试等步骤。 亲爱的Javaer们&#xff0c;在平时编码的过程中&#xff0c;你是否曾想过编写一个Java框架去为开发提效&#xff1f;但是要么编写框架时感觉无从下…

Tauri:相比Electron,还有很长路要走的。

一、Tauri是什么 Tauri是一个开源的框架&#xff0c;用于构建跨平台的桌面应用程序。它允许开发者使用Web技术&#xff08;如HTML、CSS和JavaScript&#xff09;来构建高性能的本地应用程序&#xff0c;同时提供了访问底层操作系统功能的能力。 Tauri的设计目标是提供一种简单…

第97讲:MHA高可用集群模拟主库故障以及修复过程

文章目录 1.分析主库故障后哪一个从库会切换为主库2.模拟主库故障观察剩余从库的状态2.1.模拟主库故障2.3.当前主从架构 3.修复故障的主库3.1.修复主库3.2.当前主从架构3.3.恢复MHA 1.分析主库故障后哪一个从库会切换为主库 在模拟MHA高可用集群主库故障之前&#xff0c;我们先…

【JavaSE篇】——抽象类和接口

目录 &#x1f393;抽象类 &#x1f388;抽象类语法 &#x1f388;抽象类特性 &#x1f388;抽象类的作用 &#x1f393;接口 &#x1f388;语法规则 &#x1f388;接口特性 &#x1f388;接口使用(实现USB接口&#xff09; &#x1f388;实现多个接口 &#x1f388;…

力扣刷题之旅:进阶篇(一)

力扣&#xff08;LeetCode&#xff09;是一个在线编程平台&#xff0c;主要用于帮助程序员提升算法和数据结构方面的能力。以下是一些力扣上的入门题目&#xff0c;以及它们的解题代码。 --点击进入刷题地址 题目1&#xff1a;三数之和 题目描述&#xff1a; 给定一个包含n个…

代码随想录算法训练营第41天 | 343.整数拆分 + 96.不同的二叉搜索树

今日任务 343. 整数拆分 96.不同的二叉搜索树 343.整数拆分 - Medium 题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 给定一个正整数 n &#xff0c;将其拆分为 k 个 正整数 的和&#xff08; k > 2 &#xff09;&#xff0…

springboot+vue实现excel导出

后端 导入pom依赖 <dependency>x<groupId>cn.afterturn</groupId><artifactId>easypoi-spring-boot-starter</artifactId><version>4.2.0</version> </dependency> Entity实体类 这里以User为例&#xff0c;可按照自己实际…

vulhub中AppWeb认证绕过漏洞(CVE-2018-8715)

AppWeb是Embedthis Software LLC公司负责开发维护的一个基于GPL开源协议的嵌入式Web Server。他使用C/C来编写&#xff0c;能够运行在几乎先进所有流行的操作系统上。当然他最主要的应用场景还是为嵌入式设备提供Web Application容器。 AppWeb可以进行认证配置&#xff0c;其认…

【CSS】css如何实现字体大小小于12px?

【CSS】css如何实现字体大小小于12px? 问题解决方案transform: scale(0.5)&#xff08;常用&#xff09;SVG 矢量图设置text 问题 文字需要显示为12px&#xff0c;但是小于12px的&#xff0c;浏览器是显示不来的 解决方案 transform: scale(0.5)&#xff08;常用&#xff0…

树莓派-Ubuntu22.04

树莓派 1 安装Ubuntu系统2 ssh登录3 配置3.1 安装软件3.2 换源3.3 安装桌面3.4 开机脚本 1 安装Ubuntu系统 通过制作sdk&#xff0c;使系统在sdk中运行&#xff1a; 下载制作软件&#xff1a;https://www.raspberrypi.com/software/ 下载Ubuntu镜像&#xff1a;https://cn.ub…