1.背景

2.菜单导航实现

代码:

<template>

  <el-breadcrumb separator-class="el-icon-arrow-right">

    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>

    <el-breadcrumb-item>用户管理</el-breadcrumb-item>

    <el-breadcrumb-item>用户列表列表</el-breadcrumb-item>

  </el-breadcrumb>

</template>

<script>

  export default {

    name: "User"

  }

</script>

<style scoped>

</style>

3.实现搜索输入框

代码:

<template>

  <div>

    <!--  导航区域-->

    <el-breadcrumb separator-class="el-icon-arrow-right">

      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>

      <el-breadcrumb-item>用户管理</el-breadcrumb-item>

      <el-breadcrumb-item>用户列表列表</el-breadcrumb-item>

    </el-breadcrumb>

    <!--卡片视图区-->

    <el-card>

      <el-row :gutter="20">

        <el-col :span="8">

          <el-input placeholder="请输入查询的用户名">

            <el-button slot="append" icon="el-icon-search"></el-button>

          </el-input>

        </el-col>

        <el-col :span="4">

          <el-button type="primary">添加</el-button>

        </el-col>

      </el-row>

    </el-card>

  </div>

</template>

<script>

  export default {

    name: "User"

  }

</script>

<style scoped>

</style>

4.简单列表显示

<template>

  <div>

    <!--  导航区域-->

    <el-breadcrumb separator-class="el-icon-arrow-right">

      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>

      <el-breadcrumb-item>用户管理</el-breadcrumb-item>

      <el-breadcrumb-item>用户列表列表</el-breadcrumb-item>

    </el-breadcrumb>

    <!--卡片视图区-->

    <el-card>

      <el-row :gutter="20">

        <el-col :span="8">

          <el-input placeholder="请输入查询的用户名">

            <el-button slot="append" icon="el-icon-search"></el-button>

          </el-input>

        </el-col>

        <el-col :span="4">

          <el-button type="primary">添加</el-button>

        </el-col>

      </el-row>

    </el-card>

    <!-- 表格区-->

    <el-table

      :data="tableData"

      stripe

      border

      style="width: 100%">

      <el-table-column prop="username" label="用户名" ></el-table-column>

      <el-table-column prop="role_name" label="角色" ></el-table-column>

      <el-table-column prop="mobile" label="手机" ></el-table-column>

      <el-table-column prop="email" label="邮箱" ></el-table-column>

      <el-table-column prop="mg_state" label="状态" ></el-table-column>

      <el-table-column  label="操作" ></el-table-column>

    </el-table>

  </div>

</template>

<script>

  export default {

    name: "User",

    created() {

      this.getTableData()

    },

    data() {

      return {

        // 数据列表

        tableData: [],

        // 总共条数

        total:0,

        // 查询对象

        queryObj: {

          query: '',

          pagenum: 1,

          pagesize: 10

        }

      }

    },

    methods: {

      // 获取列表数据

      async getTableData() {

        const {data: result} = await this.$http.get('users', {params: this.queryObj})

        console.log(result)

        if (result.meta.status !== 200) return this.$message.error(result.meta.msg)

        this.tableData = result.data.users

        this.total= result.data.total

      }

    }

  }

</script>

<style scoped>

</style>

5.编号显示

6.状态显示

代码:

<template>

  <div>

    <!--  导航区域-->

    <el-breadcrumb separator-class="el-icon-arrow-right">

      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>

      <el-breadcrumb-item>用户管理</el-breadcrumb-item>

      <el-breadcrumb-item>用户列表列表</el-breadcrumb-item>

    </el-breadcrumb>

    <!--卡片视图区-->

    <el-card>

      <el-row :gutter="20">

        <el-col :span="8">

          <el-input placeholder="请输入查询的用户名">

            <el-button slot="append" icon="el-icon-search"></el-button>

          </el-input>

        </el-col>

        <el-col :span="4">

          <el-button type="primary">添加</el-button>

        </el-col>

      </el-row>

    </el-card>

    <!-- 表格区-->

    <el-table

      :data="tableData"

      stripe

      border

      style="width: 100%">

      <el-table-column label="序号" type="index"></el-table-column>

      <el-table-column prop="username" label="用户名" ></el-table-column>

      <el-table-column prop="role_name" label="角色" ></el-table-column>

      <el-table-column prop="mobile" label="手机" ></el-table-column>

      <el-table-column prop="email" label="邮箱" ></el-table-column>

      <el-table-column label="状态" >

        <template slot-scope="scope">

          <el-switch v-model="scope.row.mg_state" >

          </el-switch>

        </template>

      </el-table-column>

      <el-table-column  label="操作" ></el-table-column>

    </el-table>

  </div>

</template>

<script>

  export default {

    name: "User",

    created() {

      this.getTableData()

    },

    data() {

      return {

        // 数据列表

        tableData: [],

        // 总共条数

        total:0,

        // 查询对象

        queryObj: {

          query: '',

          pagenum: 1,

          pagesize: 10

        }

      }

    },

    methods: {

      // 获取列表数据

      async getTableData() {

        const {data: result} = await this.$http.get('users', {params: this.queryObj})

        console.log(result)

        if (result.meta.status !== 200) return this.$message.error(result.meta.msg)

        this.tableData = result.data.users

        this.total= result.data.total

      }

    }

  }

</script>

<style scoped>

</style>

7.操作栏按钮显示

8.按钮提示

9.分页实现

代码:

<template>

  <div>

    <!--  导航区域-->

    <el-breadcrumb separator-class="el-icon-arrow-right">

      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>

      <el-breadcrumb-item>用户管理</el-breadcrumb-item>

      <el-breadcrumb-item>用户列表列表</el-breadcrumb-item>

    </el-breadcrumb>

    <!--卡片视图区-->

    <el-card>

     <!-- 条件查询-->

      <el-row :gutter="20">

        <el-col :span="8">

          <el-input placeholder="请输入查询的用户名">

            <el-button slot="append" icon="el-icon-search"></el-button>

          </el-input>

        </el-col>

        <el-col :span="4">

          <el-button type="primary">添加</el-button>

        </el-col>

      </el-row>

      <!-- 表格区-->

      <el-table

        :data="tableData"

        stripe

        border

        style="width: 100%">

        <el-table-column label="序号" type="index"></el-table-column>

        <el-table-column prop="username" label="用户名"></el-table-column>

        <el-table-column prop="role_name" label="角色"></el-table-column>

        <el-table-column prop="mobile" label="手机"></el-table-column>

        <el-table-column prop="email" label="邮箱"></el-table-column>

        <el-table-column label="状态">

          <template slot-scope="scope">

            <el-switch v-model="scope.row.mg_state">

            </el-switch>

          </template>

        </el-table-column>

        <el-table-column label="操作">

          <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>

          <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>

          <!-- 按钮文字提示-->

          <el-tooltip class="item" effect="dark" content="权限修改" placement="top" :enterable="false">

            <el-button type="warning" icon="el-icon-star-off" size="mini"></el-button>

          </el-tooltip>

        </el-table-column>

      </el-table>

     <!-- 分页-->

      <el-pagination

        @size-change="handleSizeChange"

        @current-change="handleCurrentChange"

        :current-page="pagenum"

        :page-sizes="[2, 3, 10, 20]"

        :page-size="pagesize"

        layout="total, sizes, prev, pager, next, jumper"

        :total="total">

      </el-pagination>

    </el-card>

  </div>

</template>

<script>

  export default {

    name: "User",

    created() {

      this.getTableData()

    },

    data() {

      return {

        // 数据列表

        tableData: [],

        // 总共条数

        total: 0,

        // 查询对象

        queryObj: {

          query: '',

          pagenum: 1,

          pagesize: 10

        }

      }

    },

    methods: {

      // 获取列表数据

      async getTableData() {

        const {data: result} = await this.$http.get('users', {params: this.queryObj})

        console.log(result)

        if (result.meta.status !== 200) return this.$message.error(result.meta.msg)

        this.tableData = result.data.users

        this.total = result.data.total

      },

      // 每页显示条数改变

      handleSizeChange(newSize){

        this.queryObj.pagesize=newSize

        this.getTableData()

      },

      // 当前页改变

      handleCurrentChange(newPage){

        this.queryObj.pagenum=newPage

        this.getTableData()

      }

    }

  }

</script>

<style scoped>

</style>

10.高级查询条件实现

1.绑定查询参数

2.点击图标触发事件

3.添加清除数据库按钮

4.清除数据时触发查询

11.状态修改实现

// 状态改变是触发

      async changeState(rowObj) {

        const {data: result} = await this.$http.put(`users/${rowObj.id}/state/${rowObj.mg_state}`)

        console.log(result)

        if (result.meta.status !== 200) {

          // 重置状态

          rowObj.mg_state = !rowObj.mg_state

          // 消息提示

          return this.$message.error(result.meta.msg)

        }

        // 状态修改成功

        return this.$message.success('状态修改成功')

      }

12.删除实现

1.确认是否删除

2.执行删除

代码：

<template>

  <div>

    <!--  导航区域-->

    <el-breadcrumb separator-class="el-icon-arrow-right">

      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>

      <el-breadcrumb-item>用户管理</el-breadcrumb-item>

      <el-breadcrumb-item>用户列表列表</el-breadcrumb-item>

    </el-breadcrumb>

    <!--卡片视图区-->

    <el-card>

      <!-- 条件查询-->

      <el-row :gutter="20">

        <el-col :span="8">

          <el-input v-model="queryObj.query" placeholder="请输入查询的用户名" @clear="getTableData" clearable>

            <el-button slot="append" icon="el-icon-search" @click="getTableData"></el-button>

          </el-input>

        </el-col>

        <el-col :span="4">

          <el-button type="primary">添加</el-button>

        </el-col>

      </el-row>

      <!-- 表格区-->

      <el-table

        :data="tableData"

        stripe

        border

        style="width: 100%">

        <el-table-column label="序号" type="index"></el-table-column>

        <el-table-column prop="username" label="用户名"></el-table-column>

        <el-table-column prop="role_name" label="角色"></el-table-column>

        <el-table-column prop="mobile" label="手机"></el-table-column>

        <el-table-column prop="email" label="邮箱"></el-table-column>

        <el-table-column label="状态">

          <template slot-scope="scope">

            <el-switch v-model="scope.row.mg_state" @change="changeState(scope.row)">

            </el-switch>

          </template>

        </el-table-column>

        <el-table-column label="操作">

          <template slot-scope="scope">

            <!-- 修改-->

            <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>

            <!-- 删除-->

            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteById(scope.row.id)"></el-button>

            <!-- 按钮文字提示-->

            <el-tooltip class="item" effect="dark" content="权限修改" placement="top" :enterable="false">

              <!-- 权限修改-->

              <el-button type="warning" icon="el-icon-star-off" size="mini"></el-button>

            </el-tooltip>

          </template>

        </el-table-column>

      </el-table>

      <!-- 分页-->

      <el-pagination

        @size-change="handleSizeChange"

        @current-change="handleCurrentChange"

        :current-page="pagenum"

        :page-sizes="[2, 3, 10, 20]"

        :page-size="pagesize"

        layout="total, sizes, prev, pager, next, jumper"

        :total="total">

      </el-pagination>

    </el-card>

  </div>

</template>

<script>

  export default {

    name: "User",

    created() {

      this.getTableData()

    },

    data() {

      return {

        // 数据列表

        tableData: [],

        // 总共条数

        total: 0,

        // 查询对象

        queryObj: {

          query: '',

          pagenum: 1,

          pagesize: 10

        }

      }

    },

    methods: {

      // 获取列表数据

      async getTableData() {

        const {data: result} = await this.$http.get('users', {params: this.queryObj})

        console.log(result)

        if (result.meta.status !== 200) return this.$message.error(result.meta.msg)

        this.tableData = result.data.users

        this.total = result.data.total

      },

      // 每页显示条数改变

      handleSizeChange(newSize) {

        this.queryObj.pagesize = newSize

        this.getTableData()

      },

      // 当前页改变

      handleCurrentChange(newPage) {

        this.queryObj.pagenum = newPage

        this.getTableData()

      },

      // 状态改变是触发

      async changeState(rowObj) {

        const {data: result} = await this.$http.put(`users/${rowObj.id}/state/${rowObj.mg_state}`)

        console.log(result)

        if (result.meta.status !== 200) {

          // 重置状态

          rowObj.mg_state = !rowObj.mg_state

          // 消息提示

          return this.$message.error(result.meta.msg)

        }

        // 状态修改成功

        return this.$message.success('状态修改成功')

      },

      // 删除用户

      async deleteById(id) {

        // 确认是否删除

        const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {

          confirmButtonText: '确定',

          cancelButtonText: '取消',

          type: 'warning'

        }).catch(err => err);

        // 如果用户确认删除，则返回值为字符串 confirm

        // 如果用户取消了删除，则返回值为字符串 cancel

        if (confirmResult !== 'confirm') return this.$message.error('取消删除')

        const {data: result} = await this.$http.delete(`users/` + id)

        console.log(result)

        if (result.meta.status !== 200) {

          // 消息提示

          return this.$message.error(result.meta.msg)

        }

        // 重新查询列表

        this.getTableData()

        // 删除成功

        return this.$message.success('删除成功')

      }

    }

  }

</script>

<style scoped>

</style>

13.新增实现

1.弹出新增对话框

2.执行新增

3.回到列表

代码:

<template>

  <div>

    <!--  导航区域-->

    <el-breadcrumb separator-class="el-icon-arrow-right">

      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>

      <el-breadcrumb-item>用户管理</el-breadcrumb-item>

      <el-breadcrumb-item>用户列表列表</el-breadcrumb-item>

    </el-breadcrumb>

    <!--卡片视图区-->

    <el-card>

      <!-- 条件查询-->

      <el-row :gutter="20">

        <el-col :span="8">

          <el-input v-model="queryObj.query" placeholder="请输入查询的用户名" @clear="getTableData" clearable>

            <el-button slot="append" icon="el-icon-search" @click="getTableData"></el-button>

          </el-input>

        </el-col>

        <el-col :span="4">

          <el-button type="primary" @click="addUser">添加</el-button>

        </el-col>

      </el-row>

      <!-- 表格区-->

      <el-table

        :data="tableData"

        stripe

        border

        style="width: 100%">

        <el-table-column label="序号" type="index"></el-table-column>

        <el-table-column prop="username" label="用户名"></el-table-column>

        <el-table-column prop="role_name" label="角色"></el-table-column>

        <el-table-column prop="mobile" label="手机"></el-table-column>

        <el-table-column prop="email" label="邮箱"></el-table-column>

        <el-table-column label="状态">

          <template slot-scope="scope">

            <el-switch v-model="scope.row.mg_state" @change="changeState(scope.row)">

            </el-switch>

          </template>

        </el-table-column>

        <el-table-column label="操作">

          <template slot-scope="scope">

            <!-- 修改-->

            <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>

            <!-- 删除-->

            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteById(scope.row.id)"></el-button>

            <!-- 按钮文字提示-->

            <el-tooltip class="item" effect="dark" content="权限修改" placement="top" :enterable="false">

              <!-- 权限修改-->

              <el-button type="warning" icon="el-icon-star-off" size="mini"></el-button>

            </el-tooltip>

          </template>

        </el-table-column>

      </el-table>

      <!-- 分页-->

      <el-pagination

        @size-change="handleSizeChange"

        @current-change="handleCurrentChange"

        :current-page="queryObj.pagenum"

        :page-sizes="[2, 3, 10, 20]"

        :page-size="queryObj.pagesize"

        layout="total, sizes, prev, pager, next, jumper"

        :total="total">

      </el-pagination>

    </el-card>

    <!-- 增加用户对话框-->

    <el-dialog title="新增用户" :visible.sync="dialogVisibleAddUser" width="50%" @close="resetForm('addFormRef')">

      <!-- 输入框-->

      <el-form ref="addFormRef" :model="addForm" :rules="addRules" label-width="70px">

        <!-- 用户名 prop="username" 与表单验证属性对应-->

        <el-form-item label="用户名" prop="username">

          <el-input v-model="addForm.username"></el-input>

        </el-form-item>

        <!-- 密码 -->

        <el-form-item label="密码" prop="password">

          <el-input v-model="addForm.password"></el-input>

        </el-form-item>

        <!-- 邮箱 -->

        <el-form-item label="邮箱" prop="email">

          <el-input v-model="addForm.email"></el-input>

        </el-form-item>

        <!-- 手机 -->

        <el-form-item label="手机" prop="mobile">

          <el-input v-model="addForm.mobile"></el-input>

        </el-form-item>

        <!-- 按钮区域 -->

        <el-form-item>

          <el-button type="primary" @click="addUserData">新建</el-button>

          <el-button type="info" @click="dialogVisibleAddUser=false">取消</el-button>

        </el-form-item>

      </el-form>

    </el-dialog>

  </div>

</template>

<script>

  export default {

    name: "User",

    created() {

      this.getTableData()

    },

    data() {

      return {

        // 添加用户对象

        addForm: {

          username: '',

          password: '',

          email: '',

          mobile: ''

        },

        // 用户规则

        addRules: {

          username: [

            {required: true, message: '请输入用户名称', trigger: 'blur'},

            {min: 3, max: 15, message: '长度在 3 到 5 个字符', trigger: 'blur'}

          ],

          password: [

            {required: true, message: '请输入密码', trigger: 'blur'},

            {min: 3, max: 15, message: '长度在 3 到 5 个字符', trigger: 'blur'}

          ],

          email: [

            {required: true, message: '请输入邮箱', trigger: 'blur'},

            {min: 3, max: 25, message: '长度在 3 到 5 个字符', trigger: 'blur'}

          ],

          mobile: [

            {required: true, message: '请输入手机号', trigger: 'blur'},

            {min: 11, max: 11, message: '长度为11位', trigger: 'blur'}

          ],

        },

        // 是否显示新增对话框

        dialogVisibleAddUser: false,

        // 数据列表

        tableData: [],

        // 总共条数

        total: 0,

        // 查询对象

        queryObj: {

          query: '',

          pagenum: 1,

          pagesize: 10

        }

      }

    },

    methods: {

      // 获取列表数据

      async getTableData() {

        const {data: result} = await this.$http.get('users', {params: this.queryObj})

        console.log(result)

        if (result.meta.status !== 200) return this.$message.error(result.meta.msg)

        this.tableData = result.data.users

        this.total = result.data.total

      },

      // 每页显示条数改变

      handleSizeChange(newSize) {

        this.queryObj.pagesize = newSize

        this.getTableData()

      },

      // 当前页改变

      handleCurrentChange(newPage) {

        this.queryObj.pagenum = newPage

        this.getTableData()

      },

      // 状态改变是触发

      async changeState(rowObj) {

        const {data: result} = await this.$http.put(`users/${rowObj.id}/state/${rowObj.mg_state}`)

        console.log(result)

        if (result.meta.status !== 200) {

          // 重置状态

          rowObj.mg_state = !rowObj.mg_state

          // 消息提示

          return this.$message.error(result.meta.msg)

        }

        // 状态修改成功

        return this.$message.success('状态修改成功')

      },

      // 删除用户

      async deleteById(id) {

        // 确认是否删除

        const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {

          confirmButtonText: '确定',

          cancelButtonText: '取消',

          type: 'warning'

        }).catch(err => err);

        // 如果用户确认删除，则返回值为字符串 confirm

        // 如果用户取消了删除，则返回值为字符串 cancel

        if (confirmResult !== 'confirm') return this.$message.error('取消删除')

        const {data: result} = await this.$http.delete(`users/` + id)

        console.log(result)

        if (result.meta.status !== 200) {

          // 消息提示

          return this.$message.error(result.meta.msg)

        }

        // 重新查询列表

        this.getTableData()

        // 删除成功

        return this.$message.success('删除成功')

      },

      // 显示添加用户弹框

      addUser() {

        // 打开弹框

        this.dialogVisibleAddUser = true

      },

      // 保存用户数据

      addUserData() {

        // 数据校验

        this.$refs.addFormRef.validate(async (valid) => {

          if (!valid) return ;

          // 发出请求

          let {data: result} = await this.$http.post('users', this.addForm)

          console.log(result)

          if (result.meta.status !== 201){

            this.$message.error(result.meta.msg)

            return

          }

          this.$message.success("新增成功")

          // 关闭弹框

          this.dialogVisibleAddUser=false

          // 查询数据

          this.getTableData()

        })

      },

      // 表单重置

      resetForm(formName) {

        this.$refs[formName].resetFields();

      }

    }

  }

</script>

<style scoped>

</style>

14.修改实现

完美!

vue项目之菜单管理项目实现的更多相关文章

  1. saltstack主机管理项目：主机管理项目架构设计(二)

    1.salt架构图 https://docs.saltstack.com/en/getstarted/system/plugins.html plug-ins(左边):场景可插拔 subsystem- ...

  2. saltstack主机管理项目：主机管理项目需求分析（一）

    1.场景: 我现在又一台裸机要实现一下任务 2.配置管理: 1.装上nginx,mysql 2.nginx用我指定的配置文件 3.mysql用户 4.设置一个默认的数据库访问权限 5.启动mysql ...

  3. vue，vuex的后台管理项目架子structure-admin，后端服务nodejs

    之前写过一篇vue初始化项目,构建vuex的后台管理项目架子,这个structure-admin-web所拥有的功能 接下来,针对structure-admin-web的不足,进行了补充,开发了具有登 ...

  4. vue初始化项目，构建vuex的后台管理项目架子

    构架vuex的后台管理项目源码:https://github.com/saucxs/structure-admin-web 一.node安装 可以参考这篇文章http://www.mwcxs.top/ ...

  5. 【vue】MongoDB+Nodejs+express+Vue后台管理项目Demo

    ¶项目分析 一个完整的网站服务架构,包括:   1.web frame ---这里应用express框架   2.web server ---这里应用nodejs   3.Database ---这里 ...

  6. 关于vue项目管理项目的架构管理平台

    关于vue项目管理项目的架构管理平台 https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/faq 31.4k 次浏览 完整项目地址: ...

  7. vue项目导航菜单实现

    vue项目导航菜单问题 目标:横向菜单点击跳转,颜色变换,刷新可保持状态 // 模板template中通过循环菜单列表生成,动态类名改变颜色 <li v-for="(item, ind ...

  8. 前端架构之路：使用Vue.js开始第一个项目

    Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发.   一.技术准备 笔者建议在开始项目前,对以下两个技术点进行了解. ...

  9. Vue.js开始第一个项目

    前端架构之路:使用Vue.js开始第一个项目   Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发. 一.技术准备 使用 ...

  10. luffy项目：基于vue与drf前后台分离项目（2）

    user模块User表 创建user模块 前提:在 luffy 虚拟环境下 1.终端从项目根目录进入apps目录 >: cd luffyapi & cd apps 2.创建app > ...

随机推荐

  1. nordic—RTC+PPI定时驱动某外设做非单次触发（本次测试为驱动GPIO口做电平翻转）

    简介:在nordic的开发中使用到RTC时,对于比较通道0/1/2/3的中断来说,如果不进行相关配置(如SDK中例子,使用的RTC比较通道就只能触发一次,不能多次触发),会导致比较中断只进入一次,如果 ...

  2. StringUtils.join()方法使用

    * StringUtils.join()方法使用 打印输出: * 使用 StringBuilder 进行拼接:张三,李四,王五 * 使用 StringUtils.join 进行拼接:张三,李四,王五 ...

  3. Navicat 连接SQL Server LocalDB的方法

    截止2021年11月,Sql Server LocalDB的资料网上并不多见,出来了其实也有一段年头了. SqlServerManagerStudio自带的工具进行查询使用体验并不好,Navicat是 ...

  4. Golang基于Mysql分布式锁实现集群主备

    背景 集群中如果需要主备,可以基于Redis.zk的分布式锁等实现,本文将介绍如何利用Mysql分布式锁进行实现. 原理 数据库中包含数据字段(此处为Master的主机名).版本号和上一次更新时间. ...

  5. Debezium-Flink-Hudi：实时流式CDC

    1. 什么是Debezium Debezium是一个开源的分布式平台,用于捕捉变化数据(change data capture)的场景.它可以捕捉数据库中的事件变化(例如表的增.删.改等),并将其转为 ...

  6. 基于TI Sitara系列AM5728工业开发板——FPGA视频开发案例分享

    前 言 3 1 cameralink_display案例 4 1.1 案例功能 4 1.2 操作说明 4 1.3 关键代码(MicroBlaze) 11 1.4 Vivado工程说明 16 1.5 模 ...

  7. linux常见终端命令和一些小问题的解决

    此文章为linux常见终端命令汇总和一些小问题的解决方法,会不定期更新. [常见指令] 1. 误按 Ctrl+s 锁住终端. ubuntu16命令行误按 Ctrl + s 导致终端锁定,Ctrl + ...

  8. Mybatis 中 foreach 的四种用法

    foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合. foreach元素的属性主要有 item,index,collection,open,separator,close. ...

  9. axios和AJAX的区别

    axios和ajax的区别 Axios和Ajax都是用于处理网络请求和与服务器进行通信的技术,但它们之间存在一些关键的区别:12 一.技术基础:Ajax(Asynchronous JavaScript ...

  10. mysql 临时表的好处

    客户端新建了一个会话,这个会话只是服务器与客户端1对1的关系,客户端可能在服务端建立一个临时表,满足客户端处理某些事务的需求,当客户端退出会话后,这个临时表自动drop,没有任何数据信息占用数据库空间 ...