Vue 整合 Element UI 、路由嵌套、参数传递、重定向、404和路由钩子（五）

一、整合 Element UI

1.1 工程初始化

        使用管理员的模式进入 cmd 的命令行模式，创建一个名为 hello-vue 的工程，命令为：

# 1、目录切换
cd F:\idea_home\vue

# 2、项目的初始化，记得一路的 no
vue init webpack hello-vue

1.2 安装依赖

        我们需要安装 vue-router、element-ui、sass-loader 和 node-sass 四个插件

# 1、进入工程目录
cd hello-vue

# 2、安装 vue-router
npm install i vue-router@3.5.2 --save-dev

# 3、安装 element-ui
npm i element-ui -S

# 4、安装工程依赖
npm install

# 5、安装 NODE-SASS 加载器
cnpm install node-sass@4.12.0 --save-dev

# 6、按照 SASS-LOADER
cnpm install sass-loader@7.3.1 --save-dev

# 7、启动测试
npm run dev

1.3 npm 命令解释

        npm install moduleName：安装模块到项目目录下

        npm install -g moduleName：意思是将模块安装到全局，具体安装到磁盘哪个位置要看 npm config prefix 的位置。

        npm install -save moduleName：--save 的意思是将模块安装到项目目录下，并在 package 文件的 dependencies 节点写入依赖，-S 为该命令的缩写。

        npm install -save-dev moduleNam e：--save-dev 的意思是将模块安装到项目目录下，并在 package 文件的 devDependencies 节点写入依赖，-D 为该命令的缩写。

1.4 删除文件和目录

        删除掉生成的基础工程的配置文件，目录结构和文件内容如下所示：

<template>
  <div id="app">
  </div>
</template>
<script>

export default {
  name: 'App'
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

1.5 创建 views 组件

        在 src 目录下创建 views 文件夹来存储视图类的组件，在 views 文件夹下创建两个组件： Main.vue 组件来充当首页和 Login.vue 组件来充当登录页，内容如下所示：

<template>
  <h1>首页</h1>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style scoped>

</style>
<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="8px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="温馨提示"
               :visible.sync="dialogVisible"
               width="30%"
               :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary"@click="dialogVisible = false">确 定</el-button></span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Login",
  data(){
    return {
      form:{
        username:'',
        password:''
      },
      rules:{
        username:[
          {required: true,message:'账号不可为空',trigger:'blur'}
        ],
        password:[
          {required: true,message:'密码不可为空',trigger:'blur'}
        ]
      },
      // 对话框的显示和隐藏
      dialogVisible:false
    }
  },
  methods:{
    onSubmit(formName){
      // 为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if(valid){
          // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
          this.$router.push("/main");
        }else{
          this.dialogVisible =true;
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.login-box {
  border: 1px solid #DCDFE6;
  width: 350px;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}
.login-title{
  text-align: center;
  margin:0 auto 40px auto;
  color:#303133;
}
</style>

1.6 创建 router 路由        

        在 src 目录下创建 router 文件夹用于存储路由的配置信息，并在 router 文件夹里创建 index.js 来配置路由信息 ，内容如下所示：

import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'

Vue.use(Router);

export default new Router({
  routes:[
    {
      path:'/main',
      component:Main
    },
    {
      path:'/Login',
      component:Login
    }
  ]
})

1.7 修改 main.js 和App.vue 

        修改 main.js 文件，将路由信息配置进去

import Vue from 'vue'
import App from './App'
import router from './router'

// 官方规定的引入写法
import ElementUI from "element-ui";
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(router);
Vue.use(ElementUI)

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

        修改 App.vue，添加路由的组件信息，内容如下所示：

<template>
  <div id="app">
    <router-link to="/login"></router-link>
    <router-link to="/main"></router-link>
    <router-view></router-view>
  </div>
</template>
<script>

export default {
  name: 'App'
}
</script>

1.8 测试

        启动工程，如下所示：

        在地址栏的后缀输入login 如下所示：

        随便输入账号和密码，点击登录，即可跳转到首页，如下所示:

1.9 总结 

        vue 整合 ElementUI，分为两步：

        第一步：安装依赖

npm i element-ui -S

        第二步：在 main.js 中写入以下内容：

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

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

二、路由嵌套

2.1 简介

        嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径按某种结构对应嵌套的各层组件，说白了就是 vue 界面的部分内容发生变化，例如：

2.2 创建 user 目录

        在 views 文件夹下新创建一个文件夹 user，并创建两个 vue 组件，List.vue 和 Profile.vue，内容如下所示：

<template>
  <h1>用户列表</h1>
</template>

<script>
export default {
  name: "List"
}
</script>

<template>
  <h1>个人信息</h1>
</template>

<script>
export default {
  name: "Profile"
}
</script>

2.3 修改 Main.vue

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <router-link to="/user/profile">个人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/user/list">用户列表</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">分类管理</el-menu-item>
              <el-menu-item index="2-2">内容列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style  scoped lang="scss">
.el-header {
  background-color: yellow;
  color: blue;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

2.4 修改 router 路由

        需要将新添加的两个 vue 组件配置到 router 的路由里面，即修改 router 文件夹下的 index.js，内容如下所示：

import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
import List from '../views/user/List'
import Profile from '../views/user/Profile'

Vue.use(Router);

export default new Router({
  routes:[
    {
      path:'/main',
      component:Main,
      // 配置嵌套路由
      children:[
        { path:'/user/list',component:List},
        { path:'/user/profile',component:Profile}
      ]

    },
    {
      path:'/Login',
      component:Login
    }
  ]
})

2.5 测试

   启动工程，如下所示：

        在地址栏的后缀输入 main 如下所示：

三、参数传递

3.1 修改 App.vue 

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <!--name 传组件名，params 传递参数，v-bind 进行对象绑定-->
                <router-link v-bind:to="{name:'Profile222',params:{id:1}}">个人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/user/list">用户列表</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">分类管理</el-menu-item>
              <el-menu-item index="2-2">内容列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style  scoped lang="scss">
.el-header {
  background-color: yellow;
  color: blue;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

3.2 修改 router 路由

        修改 router 文件夹下的 index.js，内容如下所示：

import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
import List from '../views/user/List'
import Profile from '../views/user/Profile'

Vue.use(Router);

export default new Router({
  routes:[
    {
      path:'/main',
      component:Main,
      // 配置嵌套路由
      children:[
        {
          path:'/user/list',
          component:List
        },
        {
          // 使用:id 进行参数接收
          path:'/user/profile/:id',
          name:'Profile222',
          component:Profile
        }
      ]

    },
    {
      path:'/Login',
      component:Login
    }
  ]
})

3.3 修改 Profile.vue 文件

<template>
  <!--所有的元素必须不能在根节点下，必须被div 包裹-->
  <div>
    <h1>个人信息</h1>
    {{$route.params.id}}
  </div>

</template>

<script>
export default {
  name: "Profile"
}
</script>

3.4 测试

   启动工程，如下所示：

         在地址栏的后缀输入 main 如下所示：

3.5 第二种传参方式

        App.vue 内容不用改动，修改 router 目录下的 index.js 内容如下所示：

import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
import List from '../views/user/List'
import Profile from '../views/user/Profile'

Vue.use(Router);

export default new Router({
  routes:[
    {
      path:'/main',
      component:Main,
      // 配置嵌套路由
      children:[
        {
          path:'/user/list',
          component:List
        },
        {
          // 第一种方式：使用:id 进行参数接收
          path:'/user/profile/:id',
          name:'Profile222',
          component:Profile,
          // 第二种方式：使用 props 来接收参数
          props:true
        }
      ]

    },
    {
      path:'/Login',
      component:Login
    }
  ]
})

        修改 Profile.vue 文件，内容如下所示：

<template>
  <!--所有的元素必须不能在根节点下，必须被div 包裹-->
  <div>
    <h1>个人信息</h1>
    {{id}}
  </div>

</template>

<script>
export default {
  props: ['id'],
  name: "Profile"
}
</script>

四、重定向

4.1 修改 Main.vue

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <!--name 传组件名，params 传递参数，v-bind 进行对象绑定-->
                <router-link v-bind:to="{name:'Profile222',params:{id:1}}">个人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/user/list">用户列表</router-link>
              </el-menu-item>
              <!--用于测试重定向-->
              <el-menu-item index="1-3">
                <router-link to="/goHome">回到首页</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">分类管理</el-menu-item>
              <el-menu-item index="2-2">内容列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style  scoped lang="scss">
.el-header {
  background-color: yellow;
  color: blue;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

4.2 修改 router 路由

        修改 router 文件夹下的 index.js，内容如下所示：

import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
import List from '../views/user/List'
import Profile from '../views/user/Profile'

Vue.use(Router);

export default new Router({
  routes:[
    {
      path:'/main',
      component:Main,
      // 配置嵌套路由
      children:[
        {
          path:'/user/list',
          component:List
        },
        {
          // 使用:id 进行参数接收
          path:'/user/profile/:id',
          name:'Profile222',
          component:Profile,
          props:true
        },
        {
          // 配置重定向信息
          path:'/goHome',
          redirect:'/main'
        }
      ]

    },
    {
      path:'/Login',
      component:Login
    }
  ]
})

4.3 测试

   启动工程，如下所示：

         在地址栏的后缀输入 main ，显示的内容如下所示，先点击个人信息，再点击回到首页，就可以发现地址栏发生了跳转。

五、显示当前登录的用户姓名

5.1 修改 Login.vue

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="8px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="温馨提示"
               :visible.sync="dialogVisible"
               width="30%"
               :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary"@click="dialogVisible = false">确 定</el-button></span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Login",
  data(){
    return {
      form:{
        username:'',
        password:''
      },
      rules:{
        username:[
          {required: true,message:'账号不可为空',trigger:'blur'}
        ],
        password:[
          {required: true,message:'密码不可为空',trigger:'blur'}
        ]
      },
      // 对话框的显示和隐藏
      dialogVisible:false
    }
  },
  methods:{
    onSubmit(formName){
      // 为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if(valid){
          // 传递当前用户输入的用户名参数
          this.$router.push("/main/"+this.form.username);
        }else{
          this.dialogVisible =true;
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.login-box {
  border: 1px solid #DCDFE6;
  width: 350px;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}
.login-title{
  text-align: center;
  margin:0 auto 40px auto;
  color:#303133;
}
</style>

5.2 修改 router 路由

        修改 router 文件夹下的 index.js，内容如下所示：

import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
import List from '../views/user/List'
import Profile from '../views/user/Profile'

Vue.use(Router);

export default new Router({
  routes:[
    {
      // 接收 login 传过来的参数
      path:'/main/:name',
      component:Main,
      // 允许接收参数
      props:true,
      // 配置嵌套路由
      children:[
        {
          path:'/user/list',
          component:List
        },
        {
          // 使用:id 进行参数接收
          path:'/user/profile/:id',
          name:'Profile222',
          component:Profile,
          props:true
        },
        {
          // 配置重定向信息
          path:'/goHome',
          redirect:'/main'
        }
      ]

    },
    {
      path:'/Login',
      component:Login
    }
  ]
})

5.3 修改 Main.vue

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <!--name 传组件名，params 传递参数，v-bind 进行对象绑定-->
                <router-link v-bind:to="{name:'Profile222',params:{id:1}}">个人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/user/list">用户列表</router-link>
              </el-menu-item>
              <!--用于测试重定向-->
              <el-menu-item index="1-3">
                <router-link to="/goHome">回到首页</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">分类管理</el-menu-item>
              <el-menu-item index="2-2">内容列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!--显示当前的用户信息-->
          <span>{{name}}</span>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  // 接收 name 参数
  props:['name'],
  name: "Main"
}
</script>

<style  scoped lang="scss">
.el-header {
  background-color: yellow;
  color: blue;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

5.4 测试

        启动工程，网址后缀输入 login，并随便登录，如下所示：

六、路由钩子

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

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

相关文章

【代码】表格封装 + 高级查询 + 搜索 +分页器 （极简）

【代码】表格封装 + 高级查询 + 搜索 +分页器 （极简）

一、标题 查询条件按钮&#xff08;Header&#xff09; <!-- Header 标题搜索栏 --> <template><div><div class"header"><div class"h-left"><div class"title"><div class"desc-test">…
阅读更多...
Flutter系列文章-实战项目

Flutter系列文章-实战项目

在本篇文章中&#xff0c;我们将通过一个实际的 Flutter 应用来综合运用最近学到的知识&#xff0c;包括保存到数据库、进行 HTTP 请求等。我们将开发一个简单的天气应用&#xff0c;可以根据用户输入的城市名获取该城市的天气信息&#xff0c;并将用户查询的城市列表保存到本地…
阅读更多...
语音同声翻译软件到底谁更胜一筹呢

语音同声翻译软件到底谁更胜一筹呢

嘿&#xff01;你是否曾经遇到过需要在不同语言之间进行实时翻译的情况&#xff1f;别担心&#xff0c;现在有许多翻译软件可供选择&#xff0c;让你的沟通变得更加简便和愉快。无论你是旅行者、国际商务人士还是语言爱好者&#xff0c;这些软件都将成为你的得力助手&#xff0…
阅读更多...
领航优配：暑期旅游市场热度持续攀升，相关公司业绩有望持续释放

领航优配：暑期旅游市场热度持续攀升，相关公司业绩有望持续释放

到发稿&#xff0c;海看股份涨停&#xff0c;中广天择、探路者、众信旅行等涨幅居前。 8月8日&#xff0c;在线旅行板块震动上涨&#xff0c;到发稿&#xff0c;海看股份涨停&#xff0c;中广天择、探路者、众信旅行等涨幅居前。 今年以来&#xff0c;国内旅行商场逐渐恢复。文…
阅读更多...
arcgis--数据库构建网络数据集

arcgis--数据库构建网络数据集

1、打开arcmap软件&#xff0c;导入数据&#xff0c;如下&#xff1a; 该数据已经过处理&#xff0c;各交点处均被打断&#xff0c;并进行了拓扑检查。 2、在文件夹下新建文件数据库&#xff0c;名称为路网&#xff0c;在数据库下新建要素类&#xff0c;并导入道路shp文件&…
阅读更多...
网络编程的使用

网络编程的使用

文章目录 基础代码URL类进行传输编码解码 协议TCPUDPhttp PORT端口协议的实现TCPUDP 模拟服务器 基础代码 最后一个是&#xff1a;只要再timeout时间内连接上就是true URL类 导了一个common-iojar包&#xff0c;那个IOUtils就是那个里面的工具类 进行传输编码解码 协议 TC…
阅读更多...
应用在室外LED电子显示屏中的MiniLED背光

应用在室外LED电子显示屏中的MiniLED背光

LED电子显示屏是一种通过控制半导体发光二极管的显示方式&#xff0c;是由几万–几十万个半导体发光二极管像素点均匀排列组成。它利用不同的材料可以制造不同色彩的LED像素点&#xff0c;以显示文字、图形、图像、动画、行情、视频、录像信号等各种信息的显示屏幕。 LED显示屏…
阅读更多...
前端进阶html+css04----盒子模型

前端进阶html+css04----盒子模型

1.一个盒子由content&#xff08;文本内容)&#xff0c;padding,border,margin组成。 2.盒子的大小指的是盒子的宽度和高度。一般由box-sizing属性来控制。 1&#xff09;默认情况下, 也就是box-sizing: content-box时&#xff0c;盒子的宽高计算公式如下&#xff1a; 盒子宽…
阅读更多...
rocketMq消息队列详细使用与实践整合spring

rocketMq消息队列详细使用与实践整合spring

文章目录 一、RocketMQ原生API使用1、测试环境搭建2、RocketMQ的编程模型3、RocketMQ的消息样例3.1 基本样例3.2 顺序消息3.3 广播消息3.4 延迟消息3.5 批量消息3.6 过滤消息3.7 事务消息3.8 ACL权限控制 二、SpringBoot整合RocketMQ1、快速实战2、其他更多消息类型&#xff1a…
阅读更多...
axios接受文件流并下载

axios接受文件流并下载

需求场景 前端发送请求&#xff0c;后端传回文件流&#xff0c;前端接受到后立刻打开下载窗口下载文件 注意事项 请求api需要添加&#xff1a;responseType:blob&#xff0c; axios拦截器拦截错误状态码 (假设是code) 那里的if从res.code ! 200改为res.code && res.…
阅读更多...
AI和GPT的崛起，对未来项目管理的影响与变革︱原微软项目经理陆敏

AI和GPT的崛起，对未来项目管理的影响与变革︱原微软项目经理陆敏

原微软项目经理和产品经理人才顾问陆敏先生受邀为由PMO评论主办的2023第十二届中国PMO大会演讲嘉宾&#xff0c;演讲议题&#xff1a;AI和GPT的崛起&#xff0c;对未来项目管理的影响与变革。大会将于8月12-13日在北京举办&#xff0c;敬请关注&#xff01; 议题简要&#xff1…
阅读更多...
Not All Features Matter:Enhancing Few-shot CLIP with Adaptive Prior Refinement

Not All Features Matter:Enhancing Few-shot CLIP with Adaptive Prior Refinement

APE是ICCV2023的一篇文章&#xff0c;也是我在这个领域里接触的第一篇文章&#xff0c;这里主要做一下记录。 论文链接&#xff1a;2304.01195.pdf (arxiv.org) 代码链接&#xff1a;yangyangyang127/APE: [ICCV 2023] Code for "Not All Features Matter: Enhancing Fe…
阅读更多...
Java多线程（七）

Java多线程（七）

目录 一、线程池参数介绍 二、线程池的工作流程 三、使用Executors创建常见的线程 一、线程池参数介绍 为了深入的了解线程池&#xff0c;这里就需要明白线程中的各种参数的含义。下述的图片中是来自于Java标准库中对线程池描述。 1.corePoolSize 与 maximumPoolSize 其中core…
阅读更多...
pytorch模型转化为tensorflow模型

pytorch模型转化为tensorflow模型

前言 目前大多数模型都是pytorch格式&#xff0c;部署上很多tfserving用的比较多&#xff0c;因此模型格式需要是save_model.pb的格式&#xff0c;本篇文章介绍将pytorch转化为tensorflow格式模型方式。 核心过程&#xff1a;pytorch>onnx>tensorflow 一、pytorch转onn…
阅读更多...
git clean 命令

git clean 命令

git clean -n //显示要删除的文件&#xff0c;clean的演习&#xff0c;告诉哪些文件删除&#xff0c;只是一个提醒。 git clean -dn //显示要删除的文件和目录 git clean -f //删除未追踪的文件 git clean -dff //删除未追踪的目录 git clean -df //清除所有未跟踪文件&#xf…
阅读更多...
开源数据集分类汇总（医学，卫星，分割，分类，人脸，农业，姿势等）

开源数据集分类汇总（医学，卫星，分割，分类，人脸，农业，姿势等）

本文汇总了医学图像、卫星图像、语义分割、自动驾驶、图像分类、人脸、农业、打架识别等多个方向的数据集资源&#xff0c;均附有下载链接。 该文章仅用于学习记录&#xff0c;禁止商业使用&#xff01; 1.医学图像 疟疾细胞图像数据集 下载链接&#xff1a;http://suo.nz/2V…
阅读更多...
Java基础（七）排序算法

Java基础（七）排序算法

排序 1. 冒泡排序 >> 冒泡排序的思想 冒泡排序是一种简单的排序算法&#xff0c;其基本思想是通过多次遍历待排序序列&#xff0c;依次比较相邻的元素并交换位置&#xff0c;使得每次遍历后最大&#xff08;或最小&#xff09;的元素冒泡到序列的末尾。具体步骤如下&a…
阅读更多...
uniapp发布插件显示components/xxx文件没找到，插件格式不正确

uniapp发布插件显示components/xxx文件没找到，插件格式不正确

uniapp发布插件显示components/xxx文件没找到&#xff0c;插件格式不正确 将插件文件这样一起选中&#xff0c;然后右键压缩成zip文件&#xff0c;而不是外层文件压缩
阅读更多...
构建Docker容器监控系统 （1）（Cadvisor +InfluxDB+Grafana）

构建Docker容器监控系统 （1）（Cadvisor +InfluxDB+Grafana）

目录 Cadvisor InfluxDBGrafana 1. Cadvisor 2.InfluxDB 3.Grafana 开始部署&#xff1a; 下载组件镜像 创建自定义网络 创建influxdb容器 创建数据库和数据库用户 创建Cadvisor 容器 准备测试镜像 创建granafa容器 访问granfana 添加数据源 Add data source 新建 …
阅读更多...
[HDBits] Exams/m2014 q4h

[HDBits] Exams/m2014 q4h

Implement the following circuit: module top_module (input in,output out);assign outin; endmodule
阅读更多...
最新文章

Copyright @ 2022~2023