09---Vue使用路由

news2025/2/24 0:11:04

由于之前数据、主页全部放在Home.vue中，不能够实现复用，于是，现在进行拆分，拆分出数据主体（user.vue），侧边栏（aside），顶部栏（Header），这样就可以实现复用，并且可以通过路由实现跳转

1、Aside.vue

  1. 把侧边栏拿出来

Aside.vue

<template>
     <el-menu :default-openeds="['1', '3']" style="min-height:100%;overflow-x:hidden" 
   background-color="rgb(48,65,86)"
   text-color="#fff"
   active-text-color="ffd04b"
   :collapse-transition="false"
   :collapse="isCollapse"
   router
   class="el-menu-vertical-demo"
   >
   <div style="height:60px;line-height:60px;text-align:center">
     <img src="../assets/logo.png" alt="" style="width:20px;position:relative;top:5px;margin-right: 5px;">
     <b style="color:#ccc" v-show="logoTextShow">后台管理系统</b>

   </div>
    
       <el-menu-item index="/"> 
        <template slot="title">
        <i class="el-icon-house"></i>
        <span slot="title">主页</span>
      </template>
    </el-menu-item>
     <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-menu"></i>
        <span slot="title">系统管理</span>
      </template>
         <el-menu-item index="/user">
        <i class="el-icon-s-custom"></i>
        <span slot="title">用户管理</span>
         </el-menu-item>
     </el-submenu>
   </el-menu>
</template>
<script>


export default {
    name:"Aside",
    props:{
        isCollapse:Boolean,
        logoTextShow:Boolean
    }

}
</script>

<style scoped>

</style>
  1. 在Manager.vue中使用
 <!-- 侧边栏 -->
    <el-aside :width="sideWidth+'px'" style="background-color: rgb(238, 241, 246);height: 100%;" >
    <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow" ></Aside>
  </el-aside>

<script>
import Aside from '@/components/Aside.vue'
  export default {
 name:'Manage',
 components: {Aside},

</script>
  • 这样就做到把一些共同的样式拆分出来，并且在页面中引用
  • 下面把Header.vue拆出来也是一样

2、Header.vue

  1. 把顶部栏提取出来

Header.vue

<template>
    <div style="font-size: 12px;line-height:60px;display: flex;">
        <div style="flex:1;font-size:18px">
       <span :class="collapseBtnClass" style="cursor:pointer" @click="collapse"></span>
       <el-breadcrumb separator="/" style="display:inline-block;margin-left: 10px;">
        <el-breadcrumb-item :to="'/'">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{currentPathName}}</el-breadcrumb-item>
       </el-breadcrumb> 
     </div>
     <el-dropdown style="width:70px;cursor:pointer" >
       <span>ForU</span><i class="el-icon-arrow-down" style="margin-left:5px"></i>
       <el-dropdown-menu slot="dropdown" style="width:100px; text-align:center">
         <el-dropdown-item style="font-size:14px;padding:5px 0">个人信息</el-dropdown-item>
         <el-dropdown-item style="font-size:14px;padding:5px 0">退出</el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
    </div>
</template>

<script>
export default{
    name:"Header",
    props:{
        collapseBtnClass:String,
        collapse:Function
    },
    computed:{
        currentPathName(){
            return this.$store.state.currentPathName;  //需要监听的数据
        }
    },
    watch:{
        currentPathName(newVal,oldVal) {
            console.log(newVal)
        }
    }

}

</script>

<style scoped>

</style>
  1. 在Manage.vue中引用
 <el-header style="border-bottom: 1px solid #ccc">
    <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse"></Header>
   </el-header>

<script>
import Aside from '@/components/Aside.vue'
  export default {
 name:'Manage',
 components: {Header},

</script>

3、User.vue

  1. 把用户数据提取出来，单独做成一个vue，User，实现点击用户管理跳转到User路由

User.vue

<template>
    <div>
     <div style="padding:10px 0">
       <el-input style="width:200px" placeholder="请输入用户名" suffix-icon="el-icon-search" v-model="username"></el-input>
        <el-input style="width:200px" placeholder="请输入邮箱" suffix-icon="el-icon-message" class="ml-5" v-model="email"></el-input>
       <el-input style="width:200px" placeholder="请输入地址" suffix-icon="el-icon-position" class="ml-5" v-model="address"></el-input>
       <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
       <el-button  type="warning" @click="reset">重置</el-button>
      
     </div>

     <div style="margin:10px 0">
       <el-button type="primary" @click="handleAdd">新增<i class="el-icon-circle-plus-outline"></i></el-button>
       <el-popconfirm
                class="ml-5"
                confirm-button-text='确定'
                cancel-button-text='我再想想'
                icon="el-icon-info"
                icon-color="red"
                title="您确定要删除这些内容吗？"
                @confirm="delBatch"
          >
          <el-button type="danger"  slot="reference">批量删除<i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
       <el-button type="primary">导入<i class="el-icon-top"></i></el-button>
       <el-button type="primary">导出<i class="el-icon-bottom"></i></el-button>
     </div>






     <el-table :data="tableData" border stripe :header-cell-calss-name="'headerBg'"    @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
       <el-table-column prop="username" label="用户名" width="140"></el-table-column>
       <el-table-column prop="nickname" label="昵称" width="120"></el-table-column>
       <el-table-column prop="email" label="邮箱" ></el-table-column>
       <el-table-column prop="phone" label="电话" ></el-table-column>
       <el-table-column prop="address" label="地址"></el-table-column>
       <el-table-column label="操作" width="200" align="center">
         <template slot-scope="scope" >
           <el-button type="success" @click="handleUpdate(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
          <el-popconfirm
                class="ml-5"
                confirm-button-text='确定'
                cancel-button-text='我再想想'
                icon="el-icon-info"
                icon-color="red"
                title="您确定要删除吗？"
                @confirm="handleDelete(scope.row.id)"
          >
          <el-button type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
         </template>
       </el-table-column>
     </el-table>
     <div style="padding:10px 0">
       <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
         :current-page="pageNum"
         :page-sizes="[2, 4, 6, 10]"
         :page-size="pageSize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total">
       </el-pagination>
     </div>

      <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%">
        <el-form label-width="80px" size="small">
          <el-form-item label="用户名" >
            <el-input v-model="form.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="昵称" >
            <el-input v-model="form.nickname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" >
            <el-input v-model="form.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话" >
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址" >
            <el-input v-model="form.address" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
export default{
    name:"User",
    data() {
     return {
       tableData:[],
       total: 0 ,
       pageNum:1,
       pageSize:2,
       username:"",
       email:"",
       address:"",
       form:{},
       dialogFormVisible:false,
       multipleSelection:[]
     }
    },
    created(){
        this.load()

    },
    methods:{
        load(){
      this.request.get("/user/page",{
        params:{
        pageNum:this.pageNum,
        pageSize:this.pageSize,
        username:this.username,
        email:this.email,
        address:this.address

      }
        }).then(res=>{
        console.log(res)
        this.tableData=res.records
        this.total=res.total 
      })
     },
     save(){
      this.request.post("/user",this.form).then(res=>{
        if(res){
          this.$message.success("保存成功!")
          this.dialogFormVisible=false
          this.load()
        }else{
          this.$message.error("保存失败！")
        }
      })


     },
     handleAdd(){

      this.dialogFormVisible=true
      this.form={}

     },
     handleUpdate(row){
      this.form={...row}
      this.dialogFormVisible=true
     
     },
     handleDelete(id){
      this.request.delete("/user/" + id).then(res=>{
        if(res){
          this.$message.success("删除成功!")
          this.load()
        }else{
          this.$message.error("删除失败！")
        }
      })
     },
     delBatch(){
      let ids=this.multipleSelection.map(v=>v.id)  //把对象数组转化为id数组【1,2,3】
      request.post("/user/del/batch",ids).then(res=>{
        if(res){
          this.$message.success("批量删除成功!")
          this.load()
        }else{
          this.$message.error("批量删除失败！")
        }
      })

     },
     handleSelectionChange(val){
      this.multipleSelection=val



     },
     reset(){
      this.username=""
      this.email=""
      this.address=""
      this.load()

     },
    
     handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.load()
     },
     handleCurrentChange(pageNum){
      this.pageNum=pageNum
      this.load()
     }

    }
}

</script>

<style>
.headerBg{
    background: #eee!important;
}
</style>
  1. 在manage.vue中使用路由控制
<el-main>
    <!-- 页面主体 -->
    <!-- 表示当前页面的子路由(在children中设置)会在router-view里面展示 -->
    <router-view />
   </el-main>
  1. 去注册路由

router/index.js

import store from '../store';
import Vue from 'vue'
import VueRouter from 'vue-router'

    
Vue.use(VueRouter)


const routes = [
  {
    path: '/',
    component: () => import('../views/Manage.vue'),
    redirect:"/home",
    children:[
      {
        path:'home',
        name:'首页',
        component:()=>import('../views/Home.vue')
      },
      {
        path: 'user',
        name:'用户管理',
        component: () => import('../views/User.vue')
      }
    ]
  },
  {
    path: '/about',
    name: 'About',
    component: ()=>import('../views/AboutView.vue')
  }
];
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
//路由守卫
router.beforeEach((to,from,next)=>{
  localStorage.setItem("currentPathName",to.name)  //设置当前路由名称
  store.commit("setPath")
  next()
})
export default router

用户管理和首页均为Manage的子路由，一打开localhost：8080，首先会redirect到/home，也就是首页。点击用户管理的时候，因为**<el-menu-item index=“/user” ** 所以会跳转到user路由，即显示数据

在这里插入图片描述

4、完整Vue代码

  1. components/Aside.vue
<template>
     <el-menu :default-openeds="['1', '3']" style="min-height:100%;overflow-x:hidden" 
   background-color="rgb(48,65,86)"
   text-color="#fff"
   active-text-color="ffd04b"
   :collapse-transition="false"
   :collapse="isCollapse"
   router
   class="el-menu-vertical-demo"
   >
   <div style="height:60px;line-height:60px;text-align:center">
     <img src="../assets/logo.png" alt="" style="width:20px;position:relative;top:5px;margin-right: 5px;">
     <b style="color:#ccc" v-show="logoTextShow">后台管理系统</b>

   </div>
    
       <el-menu-item index="/"> 
        <template slot="title">
        <i class="el-icon-house"></i>
        <span slot="title">主页</span>
      </template>
    </el-menu-item>
     <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-menu"></i>
        <span slot="title">系统管理</span>
      </template>
         <el-menu-item index="/user">
        <i class="el-icon-s-custom"></i>
        <span slot="title">用户管理</span>
         </el-menu-item>
     </el-submenu>
   </el-menu>
</template>
<script>


export default {
    name:"Aside",
    props:{
        isCollapse:Boolean,
        logoTextShow:Boolean
    }

}
</script>

<style scoped>

</style>
  1. components/Header.vue
<template>
    <div style="font-size: 12px;line-height:60px;display: flex;">
        <div style="flex:1;font-size:18px">
       <span :class="collapseBtnClass" style="cursor:pointer" @click="collapse"></span>
       <el-breadcrumb separator="/" style="display:inline-block;margin-left: 10px;">
        <el-breadcrumb-item :to="'/'">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{currentPathName}}</el-breadcrumb-item>
       </el-breadcrumb> 
     </div>
     <el-dropdown style="width:70px;cursor:pointer" >
       <span>ForU</span><i class="el-icon-arrow-down" style="margin-left:5px"></i>
       <el-dropdown-menu slot="dropdown" style="width:100px; text-align:center">
         <el-dropdown-item style="font-size:14px;padding:5px 0">个人信息</el-dropdown-item>
         <el-dropdown-item style="font-size:14px;padding:5px 0">退出</el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
    </div>
</template>

<script>
export default{
    name:"Header",
    props:{
        collapseBtnClass:String,
        collapse:Function
    },
    computed:{
        currentPathName(){
            return this.$store.state.currentPathName;  //需要监听的数据
        }
    },
    watch:{
        currentPathName(newVal,oldVal) {
            console.log(newVal)
        }
    }

}

</script>

<style scoped>

</style>
  1. router/index.js
import store from '../store';
import Vue from 'vue'
import VueRouter from 'vue-router'

    
Vue.use(VueRouter)


const routes = [
  {
    path: '/',
    component: () => import('../views/Manage.vue'),
    redirect:"/home",
    children:[
      {
        path:'home',
        name:'首页',
        component:()=>import('../views/Home.vue')
      },
      {
        path: 'user',
        name:'用户管理',
        component: () => import('../views/User.vue')
      }
    ]
  },
  {
    path: '/about',
    name: 'About',
    component: ()=>import('../views/AboutView.vue')
  }
];
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
//路由守卫
router.beforeEach((to,from,next)=>{
  localStorage.setItem("currentPathName",to.name)  //设置当前路由名称
  store.commit("setPath")
  next()
})
export default router
  1. store/index.js
import store from '../store';
import Vue from 'vue'
import VueRouter from 'vue-router'

    
Vue.use(VueRouter)


const routes = [
  {
    path: '/',
    component: () => import('../views/Manage.vue'),
    redirect:"/home",
    children:[
      {
        path:'home',
        name:'首页',
        component:()=>import('../views/Home.vue')
      },
      {
        path: 'user',
        name:'用户管理',
        component: () => import('../views/User.vue')
      }
    ]
  },
  {
    path: '/about',
    name: 'About',
    component: ()=>import('../views/AboutView.vue')
  }
];
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
//路由守卫
router.beforeEach((to,from,next)=>{
  localStorage.setItem("currentPathName",to.name)  //设置当前路由名称
  store.commit("setPath")
  next()
})
export default router
  1. views/Home.vue
<template>
    <div>

        <h1>这是主页</h1>

    </div>
</template>

<script>
export default{
    name:"Home"
}

</script>
  1. views/Manage.vue
<template>
  <el-container style="height: 100vh; border: 1px solid #eee">
    <!-- 侧边栏 -->
    <el-aside :width="sideWidth+'px'" style="background-color: rgb(238, 241, 246);height: 100%;" >
    <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow" ></Aside>
  </el-aside>

 <el-container>
  <!-- 菜单栏 -->
   <el-header style="border-bottom: 1px solid #ccc">
    <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse"></Header>
   </el-header>
   <el-main>
    <!-- 页面主体 -->
    <!-- 表示当前页面的子路由(在children中设置)会在router-view里面展示 -->
    <router-view />
   </el-main>
 </el-container>
</el-container>
</template>

<script>
import Aside from '@/components/Aside.vue'
import Header from '@/components/Header.vue'

export default {
 name:'Manage',
 components: {Aside,Header},
 data() {
     return {
       collapseBtnClass:'el-icon-s-fold' ,
       isCollapse:false,
       sideWidth:200 ,
       logoTextShow:true
     }
   },
   methods:{
     collapse(){ //点击收缩按钮触发
       this.isCollapse=!this.isCollapse
       if(this.isCollapse){  //收缩
         this.sideWidth=64
         this.collapseBtnClass='el-icon-s-unfold'
         this.logoTextShow=false
       }else{  //展开
         this.sideWidth = 200 
         this.collapseBtnClass='el-icon-s-fold'
         this.logoTextShow=true 
       }
     }
   }
}
</script>
  1. views/User.vue
<template>
    <div>
     <div style="padding:10px 0">
       <el-input style="width:200px" placeholder="请输入用户名" suffix-icon="el-icon-search" v-model="username"></el-input>
        <el-input style="width:200px" placeholder="请输入邮箱" suffix-icon="el-icon-message" class="ml-5" v-model="email"></el-input>
       <el-input style="width:200px" placeholder="请输入地址" suffix-icon="el-icon-position" class="ml-5" v-model="address"></el-input>
       <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
       <el-button  type="warning" @click="reset">重置</el-button>
      
     </div>

     <div style="margin:10px 0">
       <el-button type="primary" @click="handleAdd">新增<i class="el-icon-circle-plus-outline"></i></el-button>
       <el-popconfirm
                class="ml-5"
                confirm-button-text='确定'
                cancel-button-text='我再想想'
                icon="el-icon-info"
                icon-color="red"
                title="您确定要删除这些内容吗？"
                @confirm="delBatch"
          >
          <el-button type="danger"  slot="reference">批量删除<i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
       <el-button type="primary">导入<i class="el-icon-top"></i></el-button>
       <el-button type="primary">导出<i class="el-icon-bottom"></i></el-button>
     </div>






     <el-table :data="tableData" border stripe :header-cell-calss-name="'headerBg'"    @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
       <el-table-column prop="username" label="用户名" width="140"></el-table-column>
       <el-table-column prop="nickname" label="昵称" width="120"></el-table-column>
       <el-table-column prop="email" label="邮箱" ></el-table-column>
       <el-table-column prop="phone" label="电话" ></el-table-column>
       <el-table-column prop="address" label="地址"></el-table-column>
       <el-table-column label="操作" width="200" align="center">
         <template slot-scope="scope" >
           <el-button type="success" @click="handleUpdate(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
          <el-popconfirm
                class="ml-5"
                confirm-button-text='确定'
                cancel-button-text='我再想想'
                icon="el-icon-info"
                icon-color="red"
                title="您确定要删除吗？"
                @confirm="handleDelete(scope.row.id)"
          >
          <el-button type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
         </template>
       </el-table-column>
     </el-table>
     <div style="padding:10px 0">
       <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
         :current-page="pageNum"
         :page-sizes="[2, 4, 6, 10]"
         :page-size="pageSize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total">
       </el-pagination>
     </div>

      <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%">
        <el-form label-width="80px" size="small">
          <el-form-item label="用户名" >
            <el-input v-model="form.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="昵称" >
            <el-input v-model="form.nickname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" >
            <el-input v-model="form.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话" >
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址" >
            <el-input v-model="form.address" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
export default{
    name:"User",
    data() {
     return {
       tableData:[],
       total: 0 ,
       pageNum:1,
       pageSize:2,
       username:"",
       email:"",
       address:"",
       form:{},
       dialogFormVisible:false,
       multipleSelection:[]
     }
    },
    created(){
        this.load()

    },
    methods:{
        load(){
      this.request.get("/user/page",{
        params:{
        pageNum:this.pageNum,
        pageSize:this.pageSize,
        username:this.username,
        email:this.email,
        address:this.address

      }
        }).then(res=>{
        console.log(res)
        this.tableData=res.records
        this.total=res.total 
      })
     },
     save(){
      this.request.post("/user",this.form).then(res=>{
        if(res){
          this.$message.success("保存成功!")
          this.dialogFormVisible=false
          this.load()
        }else{
          this.$message.error("保存失败！")
        }
      })


     },
     handleAdd(){

      this.dialogFormVisible=true
      this.form={}

     },
     handleUpdate(row){
      this.form={...row}
      this.dialogFormVisible=true
     
     },
     handleDelete(id){
      this.request.delete("/user/" + id).then(res=>{
        if(res){
          this.$message.success("删除成功!")
          this.load()
        }else{
          this.$message.error("删除失败！")
        }
      })
     },
     delBatch(){
      let ids=this.multipleSelection.map(v=>v.id)  //把对象数组转化为id数组【1,2,3】
      request.post("/user/del/batch",ids).then(res=>{
        if(res){
          this.$message.success("批量删除成功!")
          this.load()
        }else{
          this.$message.error("批量删除失败！")
        }
      })

     },
     handleSelectionChange(val){
      this.multipleSelection=val



     },
     reset(){
      this.username=""
      this.email=""
      this.address=""
      this.load()

     },
    
     handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.load()
     },
     handleCurrentChange(pageNum){
      this.pageNum=pageNum
      this.load()
     }

    }
}

</script>

<style>
.headerBg{
    background: #eee!important;
}
</style>
  1. 这些就是所有的前端代码，慢慢的调试，慢慢的找错误，最后一定可以达到这样的页面效果。

5、store/index.js

  1. 因为使用到了监听，如果没有store这个文件夹的，可以下载一个vuex

npm install vuex --save

  1. 创建一个文件夹 store
  2. 在store里创建文件 index.js

index.js

import Vue from "vue";
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store(
    {
        state:{
            currentPathName:''
        },
        mutations:{
            setPath(state){
                state.currentPathName=localStorage.getItem("currentPathName")
            }
        }
    }
)

export default store
  1. 在main.js中引入
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"
import './assets/global.css'
import request from "@/utils/request"
import store from './store'





Vue.config.productionTip = false
Vue.use(ElementUI,{size:"mini"});

Vue.prototype.request=request


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

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

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

相关文章

SpringCloudAlibaba 学习笔记

SpringCloudAlibaba 学习笔记

❤ 作者主页&#xff1a;Java技术一点通的博客 ❀ 个人介绍&#xff1a;大家好&#xff0c;我是Java技术一点通&#xff01;(&#xffe3;▽&#xffe3;)~* &#x1f34a; 记得关注、点赞、收藏、评论⭐️⭐️⭐️ &#x1f4e3; 认真学习&#xff0c;共同进步&#xff01;&am…
阅读更多...
疫情卷土重来,如何利用SRM系统打造数字化的“免疫系统”

疫情卷土重来,如何利用SRM系统打造数字化的“免疫系统”

2022年末&#xff0c;国内疫情再次卷土重来&#xff0c;形势严峻。国内企业也再次面临业务发展的压力。但实际上&#xff0c;在疫情常态化后&#xff0c;我国许多大中型企业都建立了全面的数字化“免疫系统”&#xff0c;增强了抗风险和跨周期的能力&#xff0c;大大增强了抵御…
阅读更多...
【B站】Presto + Alluxio：B站数据库系统性能提升实践

【B站】Presto + Alluxio：B站数据库系统性能提升实践

欢迎来到【微直播间】&#xff0c;2min纵览大咖观点 在日常线上生产环境中有大量的数据需要被访问&#xff0c;为了保证数据同步以及查询效率&#xff0c;需要耗费较大的资源&#xff0c;同时&#xff0c;很多被查询和访问的数据是重复的&#xff0c;这对数据库系统造成极大压…
阅读更多...
C++类和对象概念及实现详解（下篇）

C++类和对象概念及实现详解（下篇）

文章目录 一、类的六个默认成员函数详解 1、拷贝构造 1、1 拷贝构造的引入及概念 1、2 拷贝构造函数的特征 2、赋值运算符重载 2、1 运算符重载 2、2 赋值运算符重载 3、普通对象取地址 4、const对象取地址 二、类和对象重点知识点 1、初始化列表 2、static成员 3、友元函数 4、…
阅读更多...
一文带你走进MySQL索引

一文带你走进MySQL索引

文章目录索引1. 索引的介绍2. 索引的本质3. 索引的结构3.1 Hash3.2 B树3.3 常见面试题之为什么用B树4. 索引的分类4.1 功能逻辑层次4.2 存储形式层次5. 索引的失效5.1 最左前缀原则5.2 索引失效的场景6. 索引常见面试题7. 总结及参考文献索引 1. 索引的介绍 索引是通过某种算…
阅读更多...
潘多拉-视频播放器,一个轻量的视频播放器

潘多拉-视频播放器,一个轻量的视频播放器

潘多拉-视频播放器 轻量视频播放器,该项目是从https://github.com/getActivity/AndroidProject-Kotlin 中抽离出的一个视频播放器,之前没有 单独设置项目,我在使用过程中觉得这个挺方便好用的,所以为了方便使用,单独剥离出来,可以单独在项目中使用,后续我也会基于这个项目进行…
阅读更多...
【数据结构】Leetcode旋转数组

【数据结构】Leetcode旋转数组

目录 一、题目说明 二、题目解析 一、题目说明 题目链接&#xff1a;leetcode旋转数组 给你一个数组&#xff0c;将数组中的元素向右轮转k个位置&#xff0c;其中k是非负数。 示例1&#xff1a; 输入&#xff1a;nums [1,2,3,4,5,6,7],k 3 输出&#xff1a;[5,6,7,1,2,3,4…
阅读更多...
给大家分享5款轻便小巧的好软件

给大家分享5款轻便小巧的好软件

随着网络信息技术的发展&#xff0c;越来越多的人在办公时需要用到电脑了。如果你想提高办公效率&#xff0c;那么就少不了工具的帮忙&#xff0c;今天给大家分享5款办公必备的好软件。 1.开源分享工具——ShareX ShareX 是一款 Windows 上开源的截图、文件共享和生产力工具&…
阅读更多...
IB 生申请德国大学的条件

IB 生申请德国大学的条件

Hallo! 你是IB生吗&#xff1f;是否有去德国读大学的意愿&#xff1f;来看看IB生申请德国大学的条件吧~ 01IB课程简介 IB课程包括六个学科组&#xff0c;其中一个必须从 IBO 指定的第 1 到第 5 个科目组中选修&#xff0c;另外还有一个可选科目&#xff0c;可以从六个科目组中选…
阅读更多...
华为智能基座【计算机组成原理】

华为智能基座【计算机组成原理】

华为智能基座【计算机组成原理】前言推荐华为智能基座实验1 基于QEMU的鲲鹏开发环境搭建1.1 QEMU的安装配置1.1.1 QEMU下载安装1.1.2 环境变量配置1.2 openEuler操作系统安装1.2.1 环境准备1.2.2 openEuler虚拟机创建1. 打开虚拟机2. 修改串口并登录1.3 网络配置1.3.1 参数设置…
阅读更多...
骨传导耳机到底好不好用，五款好用的骨传导蓝牙耳机分享

骨传导耳机到底好不好用，五款好用的骨传导蓝牙耳机分享

很多人刚接触骨传导耳机&#xff0c;都会有一个疑问&#xff0c;骨传导耳机到底好不好用&#xff0c;下面我就为大家解答疑惑&#xff0c;骨传导耳机开放式的佩戴方式&#xff0c;更加舒适&#xff0c;使用更加安全&#xff0c;在平常使用都是很好用的&#xff0c;还不知道选择…
阅读更多...
JAVA生成二维码QRcode

JAVA生成二维码QRcode

JAVA生成二维码QRcode1 : 配置集成1.1、配置maven1.2、配置文件1.3、logo文件2 : 代码集成2.1、加载配置文件2.2、工具类2.3、测试类3 : 测试结果3.1、生成二维码3.2、扫描结果3.3、资源1 : 配置集成 1.1、配置maven pom文件中添加一下配置 <!-- QR code --> <depe…
阅读更多...
立根铸魂 崛起数智时代 欧拉部署超300万套

立根铸魂 崛起数智时代 欧拉部署超300万套

操作系统产业峰会2022于12月28日在线上举办。本次峰会由开放原子开源基金会、中国软件行业协会、CCF&#xff08;中国计算机学会&#xff09;开源专委会、绿色计算产业联盟、中关村科学城管委会共同主办&#xff0c;以“立根铸魂 崛起数智时代”为主题&#xff0c;汇聚全产业链…
阅读更多...
Day842.Future -Java 并发编程实战

Day842.Future -Java 并发编程实战

Future Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于Future的内容。 ThreadPoolExecutor 的 void execute(Runnable command) 方法&#xff0c;利用这个方法虽然可以提交任务&#xff0c;但是却没有办法获取任务的执行结果&#xff08;execute() 方法没有返回值&…
阅读更多...
Java Web高级面试题（二）

Java Web高级面试题（二）

✅作者简介&#xff1a;热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏&#xff1a;Java面试题…
阅读更多...
总体分布、样本分布、抽样分布的区别

总体分布、样本分布、抽样分布的区别

总体分布、样本分布、抽样分布的区别 参考自&#xff1a;THREE DISTRIBUTIONS 1.总体分布 The population is the whole set of values, or individuals, you are interested in. The population which consists of a set of scores (5, 6, 7, 8) which distribute around a …
阅读更多...
比Hive还快10倍的大数据计算引擎

比Hive还快10倍的大数据计算引擎

最近几年&#xff0c;Presto这个大数据组件越来越多地出现在程序员的岗位需求中&#xff0c;很多应届同学一番自我检查后发现&#xff0c;在学校都没怎么接触过&#xff0c;更不用说了解了。 某游戏公司岗位需求 Presto到底是个啥&#xff1f; 有什么用&#xff1f; 适合哪些…
阅读更多...
月薪9K！前台测试男生偷偷努力，工资翻倍转行5G网络优化工程师，“卷死”所有人！

月薪9K！前台测试男生偷偷努力，工资翻倍转行5G网络优化工程师，“卷死”所有人！

你是否有过这样的生活&#xff1f; 每天重复着外场测试&#xff0c;抱着电脑&#xff0c;手机在户外验证基站信号;长期的出差&#xff0c;频繁的更换城市;每个月领着3500块钱的工资&#xff0c;可能再工作2-3年会涨到4000元&#xff0c;技术也不可能有任何的突破。生活重复单调…
阅读更多...
Ubuntu 上安装conan + Cmake

Ubuntu 上安装conan + Cmake

目录 1. 在用户目录下创建共享目录&#xff0c;然后将共享目录挂载到上去 2. 安装新版本的cmake 3. 安装conan 4. 配置CONAN环境 5. 配置conan的访问服务器URL 6. Linux 平台需要切换gcc编译器版本为c11以及version 7. 安装opengl开发库 1. 在用户目录下创建共享目录&…
阅读更多...
springboot+mybatis如何快速插入大量数据

springboot+mybatis如何快速插入大量数据

在公司业务开发过程中&#xff0c;我们经常会遇到往数据库表中插入大量数据的场景&#xff0c;比如excel批量导入数据。那么该如何快速地插入数据呢&#xff1f;我们可以考虑使用批量插入来实现&#xff0c;该方案实测每秒能达到35000条&#xff0c;后附具体实现代码。接下来我…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023