Vue3基础2

news2024/9/20 12:33:16

1.Hooks

就是进行数据的封装，同一种类型的 数据 方法 计算属性 ，放在一起

命名规范 use+'功能名称'.ts 或.js

创建一个文件夹 hooks

1.useDog.ts

import { reactive,onMounted } from "vue";
import axios from "axios";


export default function () {
    //数据
    let dogList = reactive([
        "https://images.dog.ceo/breeds/pembroke/n02113023_14262.jpg",
    ]);
    //方法
    async function addDog() {
        try {
            let result = await axios.get("https://dog.ceo/api/breeds/image/random");

            dogList.unshift(result.data.message);
        } catch (error) {
            alert(error.message);
        }
    }


    onMounted(()=>{
        addDog();
    })
    
    return { dogList, addDog };
}

 2.useSum.ts

import { ref ,onMounted,computed} from "vue";

export default function () {
    //数据
    let sum = ref(0);
    let bigSum = computed(()=>{
        return sum.value*10;
    })
    
    //方法
    function changeSUM() {
        sum.value++;
    }



    onMounted(()=>{
        sum.value+=10;
    })
    

    //向外部提供东西
    return {
        sum,
        changeSUM,
        bigSum
    }

}

3.person.vue

<template>
  <div class="person">
    <h2>求和为:{{ sum }}  计算出十倍后的数:{{ bigSum }}</h2>
    <button @click="changeSUM">点我sum+1</button>

    <hr />
    <img v-for="item in dogList" :key="item" :src="item" alt="" />
    <br />
    <button @click="addDog">再来一只小狗</button>
  </div>
</template>



<!-- 会自动暴露出去 -->
<script  lang="ts" setup  name="Person">
    import useSum from '@/hooks/useSum';
    import useDog from '@/hooks/useDog';

    let {sum,changeSUM,bigSum} = useSum();
    let {dogList,addDog} = useDog();

</script>



<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}

img {
  height: 100px;
  margin-right: 10px;
}
</style>

2.Vue3 的路由

1.安装路由器

npm i vue-router

2.创建文件

3.router.ts

//创建一个路由器，并暴露出去

// 第一步：引入createRouter
import {createRouter,createWebHistory} from 'vue-router'

//引入一个一个可能要呈现的组件
import Home from '@/components/Home.vue'
import News from '@/components/News.vue'
import About from '@/components/About.vue'

//第二步： 创建路由器
const router = createRouter({
    history:createWebHistory(),//路由器的工作模式(稍后讲解)
    routes:[
        {
            path:'/home',
            component: Home
        },
        {
            path:'/news',
            component: News
        },
        {
            path:'/about',
            component: About
        }
    ]
})

//暴露出去
export default router

4.app.vue

<template>
  <div class="app">
    <h2 class="title">Vue 路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">
      <RouterLink to="/home" active-class="xiaozhupeiqi">首页</RouterLink>
      <RouterLink  to="/news" active-class="xiaozhupeiqi">新闻</RouterLink>
      <RouterLink to="/about" active-class="xiaozhupeiqi">关于</RouterLink>
    </div>

    <!-- 展示区 -->
     <div class="main-content">
          <RouterView></RouterView>
     </div>
  </div>
</template>

<script lang="ts" setup name="App">
import { RouterView,RouterLink } from 'vue-router';




</script>

<style scoped>

  /* App */
  .title {
    text-align: center;
    word-spacing: 5px;
    margin: 30px 0;
    height: 70px;
    line-height: 70px;
    background-image: linear-gradient(45deg, gray, white);
    border-radius: 10px;
    box-shadow: 0 0 2px;
    font-size: 30px;
  }
  .navigate {
    display: flex;
    justify-content: space-around;
    margin: 0 100px;
  }
  .navigate a {
    display: block;
    text-align: center;
    width: 90px;
    height: 40px;
    line-height: 40px;
    border-radius: 10px;
    background-color: gray;
    text-decoration: none;
    color: white;
    font-size: 18px;
    letter-spacing: 5px;
  }
  .navigate a.xiaozhupeiqi {
    background-color: #64967E;
    color: #ffc268;
    font-weight: 900;
    text-shadow: 0 0 1px black;
    font-family: 微软雅黑;
  }
  .main-content {
    margin: 0 auto;
    margin-top: 30px;
    border-radius: 10px;
    width: 90%;
    height: 400px;
    border: 1px solid;
  }

  .active{
     background-color: #ffc268;
  }
</style>

5.main.ts

//引入 createApp用于创建应用
import {createApp} from 'vue';
//引入 App 根组件
import App from './App.vue';

//引入路由器
import router from './router';


//创建一个应用
const app = createApp(App);


//使用一个插件
app.use(router);

//挂载整个应用到app容器中
app.mount('#app');

6.两个注意点

7.路由器的工作模式

 解决history模式404问题

 

8.to的两种写法

9.嵌套路由

1.Detail.vue

//创建一个路由器，并暴露出去

// 第一步：引入createRouter
import {createRouter,createWebHistory,createWebHashHistory} from 'vue-router'

//引入一个一个可能要呈现的组件
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'
import Detail from '@/pages/Detail.vue'

//第二步： 创建路由器
const router = createRouter({
    history:createWebHistory(),//History模式
    // history:createWebHashHistory(),//Hash模式
    routes:[
        {
            name: 'zhuye',
            path:'/home',
            component: Home
        },
        {
            name:'xinwen',
            path:'/news',
            component: News,
            children:[
                {
                    path:'detail',
                    component:Detail

                }
            ]
        },
        {
            name:'guanyu',
            path:'/about',
            component: About
        }
    ]
})

//暴露出去
export default router

 2.News.vue

<template>
    <div class="news">
      <!-- 导航区 -->
      <ul>
        <li v-for="news in newsList" :key="news.id"><RouterLink :to="{path:'/news/detail'}">{{ news.title }}</RouterLink></li>
      </ul>
        <!-- 展示取 -->
     <div class="news-content">
      <RouterView></RouterView>
     </div>
    </div>
  
  </template>
  
  <script setup lang="ts" name="News">
    import { nanoid } from 'nanoid';
    import { reactive } from 'vue';
    import { RouterView } from 'vue-router';

    const newsList = reactive([
      {id:nanoid(),title:'一种游戏',content:'西兰花'},
      {id:nanoid(),title:'一种水果',content:'学IT'},
      {id:nanoid(),title:'如何一夜暴富',content:'明天是周一'},
      {id:nanoid(),title:'震惊，玩玩没想到',content:'快过年了'},
    ]);
    


  </script>
  
  <style scoped>
  /* 新闻 */
  .news {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    height: 100%;
  }
  .news ul {
    margin-top: 30px;
    list-style: none;
    padding-left: 10px;
  }
  .news li>a {
    font-size: 18px;
    line-height: 40px;
    text-decoration: none;
    color: #64967E;
    text-shadow: 0 0 1px rgb(0, 84, 0);
  }
  .news-content {
    width: 70%;
    height: 90%;
    border: 1px solid;
    margin-top: 20px;
    border-radius: 10px;
  }
  </style>

10.query参数

<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <!-- 第一种写法 -->
        <!-- <RouterLink :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`">{{ news.title }}</RouterLink> -->
         <!-- 第二种写法 -->
        <RouterLink :to="{
          // path: '/news/detail',
          name: 'xiangqing',
          query: {
            id: news.id,
            title: news.title,
            content: news.content
          }
        }">{{ news.title }}</RouterLink>
      </li>
    </ul>
    <!-- 展示取 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
  
  <script setup lang="ts" name="News">
import { nanoid } from "nanoid";
import { reactive } from "vue";
import { RouterView } from "vue-router";

const newsList = reactive([
  { id: nanoid(), title: "一种游戏", content: "西兰花" },
  { id: nanoid(), title: "一种水果", content: "学IT" },
  { id: nanoid(), title: "如何一夜暴富", content: "明天是周一" },
  { id: nanoid(), title: "震惊，玩玩没想到", content: "快过年了" },
]);
</script>
  
  <style scoped>
/* 新闻 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.news ul {
  margin-top: 30px;
  /* list-style: none; */
  padding-left: 10px;
}


.news li::marker {
    color: #64967E;
  }
.news li > a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967e;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>
<template>
  <ul class="news-list">
    <li>编号：{{ query.id }}</li>
    <li>标题：{{ query.title }}</li>
    <li>内容：{{ query.content }}</li>
  </ul>
</template>
  
  <script setup lang="ts" name="Detail">
// 这是一个hooks,向这个组件实例暴露了一个函数
import { useRoute } from "vue-router";
import { toRefs } from "vue";

const route = useRoute();

const {query} = toRefs(route);
// console.log(route.query);



</script>
  
  <style scoped>
.news-list {
  list-style: none;
  padding-left: 20px;
}

.news-list > li {
  line-height: 30px;
}
</style>

11.params参数

<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <!-- 第一种写法 纯字符串  -->
        <!-- <RouterLink :to="`/news/detail/${news.id}/${news.title}/${news.content}`">{{ news.title }}</RouterLink> -->
        <!-- 第二种写法 -->
        <RouterLink
          :to="{
            name: 'xiangqing',//params不允许path传参，只能用name  而且参数只能是基本类型
            params: {
              id: news.id,
              title: news.title,
              // content: news.content,
            },
          }"
          >{{ news.title }}</RouterLink
        >
      </li>
    </ul>
    <!-- 展示取 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
  
  <script setup lang="ts" name="News">
import { nanoid } from "nanoid";
import { reactive } from "vue";
import { RouterView } from "vue-router";

const newsList = reactive([
  { id: nanoid(), title: "一种游戏", content: "西兰花" },
  { id: nanoid(), title: "一种水果", content: "学IT" },
  { id: nanoid(), title: "如何一夜暴富", content: "明天是周一" },
  { id: nanoid(), title: "震惊，玩玩没想到", content: "快过年了" },
]);
</script>
  
  <style scoped>
/* 新闻 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.news ul {
  margin-top: 30px;
  /* list-style: none; */
  padding-left: 10px;
}

.news li::marker {
  color: #64967e;
}
.news li > a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967e;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>
<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <!-- 第一种写法 纯字符串  -->
        <!-- <RouterLink :to="`/news/detail/${news.id}/${news.title}/${news.content}`">{{ news.title }}</RouterLink> -->
        <!-- 第二种写法 -->
        <RouterLink
          :to="{
            name: 'xiangqing',//params不允许path传参，只能用name  而且参数只能是基本类型
            params: {
              id: news.id,
              title: news.title,
              // content: news.content,
            },
          }"
          >{{ news.title }}</RouterLink
        >
      </li>
    </ul>
    <!-- 展示取 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
  
  <script setup lang="ts" name="News">
import { nanoid } from "nanoid";
import { reactive } from "vue";
import { RouterView } from "vue-router";

const newsList = reactive([
  { id: nanoid(), title: "一种游戏", content: "西兰花" },
  { id: nanoid(), title: "一种水果", content: "学IT" },
  { id: nanoid(), title: "如何一夜暴富", content: "明天是周一" },
  { id: nanoid(), title: "震惊，玩玩没想到", content: "快过年了" },
]);
</script>
  
  <style scoped>
/* 新闻 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.news ul {
  margin-top: 30px;
  /* list-style: none; */
  padding-left: 10px;
}

.news li::marker {
  color: #64967e;
}
.news li > a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967e;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>

12.Props路由配置

//创建一个路由器，并暴露出去

// 第一步：引入createRouter
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

//引入一个一个可能要呈现的组件
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'
import Detail from '@/pages/Detail.vue'

//第二步： 创建路由器
const router = createRouter({
    history: createWebHistory(),//History模式
    // history:createWebHashHistory(),//Hash模式
    routes: [
        {
            name: 'zhuye',
            path: '/home',
            component: Home
        },
        {
            name: 'xinwen',
            path: '/news',
            component: News,
            children: [
                {
                    name: 'xiangqing',
                    path: 'detail',//问号代表可传可不传
                    component: Detail,
                    //第一种写法，将路由收到的所有params参数作为props传给路由组件
                    // props:true //params参数全部变成 params 

                    //第二种写法 函数写法 可以自己决定将什么作为props给路由组件
                    props(route){
                        // console.log(route)
                        return route.query
                    }

                    //第三种写法 写死了 
                    // props: {
                    //     a: 100,
                    //     b: 200
                    // }
                }
            ]
        },
        {
            name: 'guanyu',
            path: '/about',
            component: About
        }
    ]
})

//暴露出去
export default router
<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <!-- 第一种写法 纯字符串  -->
        <!-- <RouterLink :to="`/news/detail/${news.id}/${news.title}/${news.content}`">{{ news.title }}</RouterLink> -->
        <!-- 第二种写法 -->
        <RouterLink
          :to="{
            name: 'xiangqing',//params不允许path传参，只能用name  而且参数只能是基本类型
            query: {
              id: news.id,
              title: news.title,
              content: news.content,
            },
          }"
          >{{ news.title }}</RouterLink
        >
      </li>
    </ul>
    <!-- 展示取 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
  
  <script setup lang="ts" name="News">
import { nanoid } from "nanoid";
import { reactive } from "vue";
import { RouterView } from "vue-router";

const newsList = reactive([
  { id: nanoid(), title: "一种游戏", content: "西兰花" },
  { id: nanoid(), title: "一种水果", content: "学IT" },
  { id: nanoid(), title: "如何一夜暴富", content: "明天是周一" },
  { id: nanoid(), title: "震惊，玩玩没想到", content: "快过年了" },
]);
</script>
  
  <style scoped>
/* 新闻 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.news ul {
  margin-top: 30px;
  /* list-style: none; */
  padding-left: 10px;
}

.news li::marker {
  color: #64967e;
}
.news li > a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967e;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>
<template>
  <ul class="news-list">
    <li>编号：{{ id }}</li>
    <li>标题：{{ title }}</li>
    <li>内容：{{ content }}</li>
  </ul>
</template>
  
  <script setup lang="ts" name="Detail">
// import { useRoute } from 'vue-router';
// import { toRefs } from 'vue';
// const route = useRoute();
// const {params} =toRefs(route);

defineProps(["id", "title", "content"]);
</script>
  
  <style scoped>
.news-list {
  list-style: none;
  padding-left: 20px;
}

.news-list > li {
  line-height: 30px;
}
</style>

13.replace属性

<template>
  <div class="app">
    <h2 class="title">Vue 路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">
      <!-- 对象写法 路径跳转 -->
      <RouterLink :to="{path:'/home'}" active-class="active" replace>首页</RouterLink>
      <!-- 对象写法 名字跳转 --> 
      <RouterLink  :to="{name:'xinwen'}" active-class="active" replace>新闻</RouterLink>
      <!-- 字符串写法 -->
      <RouterLink to="/about" active-class="active" replace>关于</RouterLink>
    </div>

    <!-- 展示区 -->
     <div class="main-content">
          <RouterView></RouterView>
     </div>
  </div>
</template>

<script lang="ts" setup name="App">
import { RouterView,RouterLink } from 'vue-router';




</script>

<style scoped>

  /* App */
  .title {
    text-align: center;
    word-spacing: 5px;
    margin: 30px 0;
    height: 70px;
    line-height: 70px;
    background-image: linear-gradient(45deg, gray, white);
    border-radius: 10px;
    box-shadow: 0 0 2px;
    font-size: 30px;
  }
  .navigate {
    display: flex;
    justify-content: space-around;
    margin: 0 100px;
  }
  .navigate a {
    display: block;
    text-align: center;
    width: 90px;
    height: 40px;
    line-height: 40px;
    border-radius: 10px;
    background-color: gray;
    text-decoration: none;
    color: white;
    font-size: 18px;
    letter-spacing: 5px;
  }
  .navigate a.active {
    background-color: #64967E;
    color: #ffc268;
    font-weight: 900;
    text-shadow: 0 0 1px black;
    font-family: 微软雅黑;
  }
  .main-content {
    margin: 0 auto;
    margin-top: 30px;
    border-radius: 10px;
    width: 90%;
    height: 400px;
    border: 1px solid;
  }

  .active{
     background-color: #ffc268;
  }
</style>

14.编程式路由导航

脱离<RouterLink> 实现路由跳转

<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <button @click="showNewsDetail(news)">查看新闻</button>
        <!-- 第二种写法 -->
        <RouterLink
          :to="{
            name: 'xiangqing',//params不允许path传参，只能用name  而且参数只能是基本类型
            query: {
              id: news.id,
              title: news.title,
              content: news.content,
            },
          }"
          
          >{{ news.title }}</RouterLink
        >
      </li>
    </ul>
    <!-- 展示取 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
  
  <script setup lang="ts" name="News">
import { nanoid } from "nanoid";
import { reactive } from "vue";
import { RouterView,useRouter } from "vue-router";

const newsList = reactive([
  { id: nanoid(), title: "一种游戏", content: "西兰花" },
  { id: nanoid(), title: "一种水果", content: "学IT" },
  { id: nanoid(), title: "如何一夜暴富", content: "明天是周一" },
  { id: nanoid(), title: "震惊，玩玩没想到", content: "快过年了" },
]);

const router = useRouter();

function showNewsDetail(news){
//对象写法 和 to同理
  router.push({
    name:'xiangqing',
    query:{
     ...news
    }
  })
  // router.replace({
  //   name:'xiangqing',
  //   query:{
  //    ...news
  //   }
  // })
}



</script>
  
  <style scoped>
/* 新闻 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.news ul {
  margin-top: 30px;
  /* list-style: none; */
  padding-left: 10px;
}

.news li::marker {
  color: #64967e;
}
.news li > a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967e;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>

15.重定向

//创建一个路由器，并暴露出去

// 第一步：引入createRouter
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

//引入一个一个可能要呈现的组件
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'
import Detail from '@/pages/Detail.vue'

//第二步： 创建路由器
const router = createRouter({
    history: createWebHistory(),//History模式
    // history:createWebHashHistory(),//Hash模式
    routes: [
        {
            name: 'zhuye',
            path: '/home',
            component: Home
        },
        {
            name: 'xinwen',
            path: '/news',
            component: News,
            children: [
                {
                    name: 'xiangqing',
                    path: 'detail',//问号代表可传可不传
                    component: Detail,
                    //第一种写法，将路由收到的所有params参数作为props传给路由组件
                    // props:true //params参数全部变成 params 

                    //第二种写法 函数写法 可以自己决定将什么作为props给路由组件
                    props(route){
                        // console.log(route)
                        return route.query
                    }

                    //第三种写法 写死了 
                    // props: {
                    //     a: 100,
                    //     b: 200
                    // }
                }
            ]
        },
        {
            name: 'guanyu',
            path: '/about',
            component: About
        },
        {
            path:'/',//重定向
            redirect:'/home'
        }
    ]
})

//暴露出去
export default router

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

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

相关文章

Golang | Leetcode Golang题解之第375题猜数字大小II

Golang | Leetcode Golang题解之第375题猜数字大小II

题目&#xff1a; 题解&#xff1a; func getMoneyAmount(n int) int {f : make([][]int, n1)for i : range f {f[i] make([]int, n1)}for i : n - 1; i > 1; i-- {for j : i 1; j < n; j {f[i][j] j f[i][j-1]for k : i; k < j; k {cost : k max(f[i][k-1], f[…
阅读更多...
Linux命令：创建新的目录的工具mkdir命令详解

Linux命令：创建新的目录的工具mkdir命令详解

目录 一、概述 二、语法 1、基本语法 2、常用选项 3、获取帮助 三、示例 1. 创建单个目录 2. 创建多个目录 3. 使用 -p 选项创建多级目录 4. 设置目录权限 5. 显示创建目录的信息 &#xff08;1&#xff09;一般目录创建 &#xff08;2&#xff09;复杂目录创建 …
阅读更多...
大数据技术之Flume 企业开发案例——负载均衡和故障转移（6）

大数据技术之Flume 企业开发案例——负载均衡和故障转移（6）

目录 负载均衡和故障转移 1&#xff09;案例需求 2&#xff09;需求分析 3&#xff09;实现步骤 负载均衡和故障转移 1&#xff09;案例需求 使用 Flume1 监控一个端口&#xff0c;其 sink 组中的 sink 分别对接 Flume2 和 Flume3&#xff0c;采用 FailoverSinkProcessor…
阅读更多...
裁员后的逆袭：程序员变外卖小哥，AI绘画成就全新职业生涯

裁员后的逆袭：程序员变外卖小哥，AI绘画成就全新职业生涯

一、初代程序员的困境 曾几何时&#xff0c;我是一名初代程序员&#xff0c;投身于互联网行业&#xff0c;为我国信息化建设贡献自己的力量。然而&#xff0c;随着年龄的增长和行业竞争的加剧&#xff0c;我不可避免地遭遇了裁员。面对突如其来的变故&#xff0c;我不得不重新审…
阅读更多...
Nginx反向代理B

Nginx反向代理B

http协议反向代理 反向代理配置参数 proxy_pass; #用来设置将客户端请求转发给的后端服务器的主机 #可以是主机名(将转发至后端服务做为主机头首部)、IP地址&#xff1a;端口的方式 #也可以代理到预先设置的主机群组&#xff0c;需要模块ngx_http_upstream_module支持 #示例:…
阅读更多...
机械学习—零基础学习日志（如何理解概率论9）

机械学习—零基础学习日志（如何理解概率论9）

大数定律与中心定律 来看一道习题&#xff1a; 这个题目看看&#xff0c;应该是什么呢~下一章来看看解析~ 《概率论与数理统计期末不挂科|考研零基础入门4小时完整版&#xff08;王志超&#xff09;》学习笔记 王志超老师 &#xff08;UP主&#xff09;
阅读更多...
构造，CF 1290B - Irreducible Anagrams

构造，CF 1290B - Irreducible Anagrams

目录 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 二、解题报告 1、思路分析 2、复杂度 3、代码详解 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 1290B - Irreducible Anagrams 二、解题报告 1、思路分析 首先根据样例特…
阅读更多...
系统编程-消息队列

系统编程-消息队列

消息队列 目录 消息队列 引入 一、消息队列的特点 二、使用指令查看消息队列 三、使用消息队列进行通信的步骤 1、获取键值 2、创建或获取消息队列 id 3、使用消息队列进行数据的传输 4、msgrcv -- 从消息队列中读取数据 5、消息队列的多种操作函数 引入 -- 进程间…
阅读更多...
一、undo log、Buffer Pool、WAL、redo log

一、undo log、Buffer Pool、WAL、redo log

目录 1、undo log2、Buffer Pool3、WAL4、redo log5、总结6、问题 1、undo log undo log日志是一种用于撤销回退的逻辑日志&#xff0c;在事务未提交前会记录相反的操作到undo log&#xff0c;当事务回滚&#xff0c;使用undo log 进行回滚&#xff0c;保证了事务的原子性。MV…
阅读更多...
Golang 深入理解 GC

Golang 深入理解 GC

垃圾是指程序向堆栈申请的内存空间&#xff0c;随着程序的运行已经不再使用这些内存空间&#xff0c;这时如果不释放他们就会造成垃圾也就是内存泄漏。 垃圾回收 (Garbage Collection&#xff0c;GC) 是编程语言中提供的自动的内存管理机制&#xff0c;自动释放不需要的内存对象…
阅读更多...
【Qt】Qt系统 | Qt事件 | 定时器

【Qt】Qt系统 | Qt事件 | 定时器

文章目录 定时器QTimerEventQTimer获取系统日期及时间 定时器 Qt 中在进行窗口程序的处理过程中&#xff0c;经常要周期性的执行某些动作&#xff0c;或者制作一些动画效果&#xff0c;使用定时器可以实现这些需求。 定时器&#xff0c;会在间隔一定时间后&#xff0c;执行某一…
阅读更多...
八岁编程小天才：45分钟挑战AI极限，聊天机器人一鸣惊人

八岁编程小天才：45分钟挑战AI极限，聊天机器人一鸣惊人

一位8岁的小女孩&#xff0c;用短短45分钟就搭建出了一个聊天机器人&#xff0c;吸引了180万人的在线围观。 Cursor&#xff0c;这款被Cloudflare副总裁家8岁女儿青睐的AI代码编辑器&#xff0c;成为全网热议的焦点。 甚至许多网友出来发话力挺。 AI编程&#xff0c;从复杂到简…
阅读更多...
swagger,Knife4j和Yapi

swagger,Knife4j和Yapi

目录 swagger swagger的作用 swagger的使用 一.导入依赖 二.创建swagger配置类&#xff0c;交给SpringIoC容器管理 三.使用swagger依赖的注解来给接口层(controller)的各种方法进行注释 Api ApiOperation ApiImplicitParam ApiModel ApiModelProperty 四&#xff1a;…
阅读更多...
【layUI】点击导出按钮，导出excel文件

【layUI】点击导出按钮，导出excel文件

要实现的功能如下&#xff1a;根据执行状态判断是否可以导出。如果可以导出&#xff0c;点击导出&#xff0c;在浏览器里下载对应的文件。 代码实现 html里&#xff1a; <table class"layui-hide" id"studentTable" lay-filter"studentTable&…
阅读更多...
vue2表单校验：添加自定义el-form表单校验规则

vue2表单校验：添加自定义el-form表单校验规则

前言 在vue2表单校验&#xff1a;el-form表单绑定数组并使用rules进行校验_vue2 rules校验-CSDN博客中&#xff0c;使用form原生的rules对表单中每个控件的必填、格式等做了校验。但是保存时&#xff0c;除了验证每一个控件的输入合乎要求外&#xff0c;还需要验证控件之间的数…
阅读更多...
八、DMA直接存储器存取

八、DMA直接存储器存取

1、DMA简介 DMA是一个数据转运小助手&#xff0c;用来协助CPU完成转运的工作 2、存储器映像 计算机系统的5大组成部分&#xff1a;运算器、控制器、存储器、输入设备、输出设备 运算器和控制器&#xff0c;合称CPU 计算机的核心关键部分是CPU和存储器 存储器涉及&#xff…
阅读更多...
带你深入浅出新面经：十五、十大排序之堆排序

带你深入浅出新面经：十五、十大排序之堆排序

此为面经第十五谈&#xff01;关注我&#xff0c;每日带你深入浅出一个新面经。 我们要了解面经要如何“说”&#xff01; 很重要&#xff01;很重要&#xff01;很重要&#xff01; 我们通常采取总-分-总方式来阐述&#xff01;&#xff08;有些知识点&#xff0c;你可以去…
阅读更多...
Linux--find命令-搜索

Linux--find命令-搜索

find 命令 用来在指定目录下查找文件 如果使用该命令时&#xff0c;不设置任何参数&#xff0c;则find命令将在当前目录下查找子目录与文件&#xff0c;并且将查找到的子目录和文件全部进行显示 find <指定目录> <指定条件> <指定动作> 默认是搜索当前目录…
阅读更多...
C语言：编程世界的基石

C语言：编程世界的基石

在计算机科学的世界里&#xff0c;C语言就像一座坚固的桥梁&#xff0c;连接着硬件和软件的两端。自从20世纪70年代诞生以来&#xff0c;C语言以其简洁、高效和强大的特性&#xff0c;成为了编程领域的经典之作。本文将探讨C语言在不同工作领域中的应用&#xff0c;以及它为何能…
阅读更多...
opensatck上windows云主机上java服务的端口调用问题处理

opensatck上windows云主机上java服务的端口调用问题处理

文章目录 前言一、思路二、解决步骤1.将安全组规则全部放开2.云主机内部防火墙关闭3.尝试telnet4.查看代码&#xff0c;修改IP配置 总结 前言 opensatck上windows云主机上java服务的端口调用问题处理。同事在window10的云主机中用idea起了调试中的服务&#xff0c;端口在8000&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023