搞点事情 02-系统管理

已于 2022-07-08 09:41:12 修改
阅读量169 收藏
点赞数
分类专栏： 搞点事情 文章标签： vue.js 前端 java
于 2022-06-17 13:56:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leiyu930803/article/details/118696627
版权

说明

主要包括用户管理，角色管理，系统管理

一、后端

代码: https://gitee.com/leiyuee/manage.git
在这里插入图片描述
先通过manage.sql生成数据库表
其余内容:建议使用mybatis代码生成器

二、前端

1 菜单列表修改

前往src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
import Layout from '@/layout'
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: '管理系统',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '管理系统', icon: 'dashboard' }
    }]
  },
  {
    path: '/sys',
    component: Layout,
    redirect: '/sys',
    name: '系统管理',
    meta: { title: '系统管理', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'UserMange',
        name: 'UserMange',
        component: () => import('@/views/sys/UserManage'),
        meta: { title: '用户管理', icon: 'table' }
      },
      {
        path: 'RoleManage',
        name: 'RoleManage',
        component: () => import('@/views/sys/RoleManage'),
        meta: { title: '角色管理', icon: 'table' }
      },
      {
        path: 'MenuManage',
        name: 'MenuManage',
        component: () => import('@/views/sys/MenuManage'),
        meta: { title: '功能管理', icon: 'tree' }
      }
    ]
  },
  { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})
const router = createRouter()
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}
export default router

2 用户管理模块

在src/views 下新建sys文件夹及文件如下
在这里插入图片描述
在src/api文件夹下新建文件如下
在这里插入图片描述

2.1 用户管理

UserManage.vue

<template>
<div>
<el-card class="box-card">
  <div slot="header">
       <el-row>
        <el-button type="primary" @click=" addForm = true ">新增</el-button>
        <el-button type="primary" @click=" toUpdate ">修改</el-button>
        <el-button type="primary" @click="toDel">删除</el-button>
        <el-button type="primary" @click="toQue">查询</el-button>
    </el-row>
  </div>
  <div >
    <el-table
    :data="tableData"
    highlight-current-row
    @current-change="handleCurrentChange"
    border
    style="width: 100%">
    <el-table-column
      prop="userName"
      label="用户名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="nickName"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="password"
      label="密码">
    </el-table-column>
  </el-table>
  </div>
   <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page= searchData.pageNum
      :page-sizes="[10, 20, 30, 40]"
      :page-size= searchData.pageSize
      layout="total, sizes, prev, pager, next, jumper"
      :total= "total">
    </el-pagination>
</el-card>
<!-- 分页 -->
<el-dialog title="新增用户" :visible.sync="addForm">
  <el-form :model="add">
    <el-form-item label="用户名" :label-width="formWidth">
      <el-input v-model="add.userName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="别名" :label-width="formWidth">
    <el-input v-model="add.nickName" autocomplete="off"></el-input>
    </el-form-item>
       <el-form-item label="用户密码" :label-width="formWidth">
      <el-input v-model="add.password" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="addForm = false">取 消</el-button>
    <el-button type="primary" @click="toAdd">确 定</el-button>
  </div>
</el-dialog>

<el-dialog title="修改用户" :visible="updateForm">
  <el-form :model="currentRow">
    <el-form-item label="用户名" :label-width="formWidth">
      <el-input v-model="currentRow.userName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="别名" :label-width="formWidth">
    <el-input v-model="currentRow.nickName" autocomplete="off"></el-input>
    </el-form-item>
       <el-form-item label="用户密码" :label-width="formWidth">
      <el-input v-model="currentRow.password" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="updateForm = false">取 消</el-button>
    <el-button type="primary" @click="updateU">修 改</el-button>
  </div>
</el-dialog>
</div>
</template>
<script>
import {getUserPages,addUser,updateUser,deleteUser} from '@/api/user'
export default {
  data() {
    return {
        // 分页相关
        total:0 ,
        // 查询条件,分页数据
        searchData: {
          pageNum: 1, // 当前页
          pageSize: 10,// 页面大小
        },
        tableData: null,
        addForm: false,
        updateForm: false,
        formWidth: '120px',
        add: {},
        currentRow: {},
    }
  },
 created() {
      this.init()
  },
  methods: {
      init(){
          getUserPages(this.searchData).then(res=>{
            this.tableData = res.data.records
            this.total  = res.data.total
          })
      },
    toAdd(){
        addUser(this.add).then(res =>{
            if(res.code == 200){
                this.$message.success(res.msg)
                this.addForm = false
                this.init()
            }else{
                this.$message(res.msg)
            }
        })
    },
     toUpdate(){
        if(this.currentRow == null){
            this.$message.error("请选择要修改的用户")
        }else{
            this.updateForm = true
        }
    },
    updateU(){
        updateUser(this.currentRow.userId,this.currentRow).then(res=>{
            if(res.code == 200){
                this.$message.success(res.msg)
                this.updateForm = false
                this.init()
            }else{
                this.$message(res.msg)
            }
        })
    },
     toDel(){
     if(this.currentRow == null){
            this.$message.error("请选择要删除的用户")
        }
       deleteUser(this.currentRow.userId).then (res =>{
        if(res.code == 200){
                this.$message.success(res.msg)
                this.init()
            }else{
                this.$message(res.msg)
            }
     })
    },
     toQue(){
        this.$message('查询')
    },
     //选择：
    handleCurrentChange(val){
        this.currentRow = val
    },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
  },
}
</script>
<style scoped>
.line{
  text-align: center;
}
</style>

user.js

import request from '@/utils/request'
export function login(data) {
  return request({
    url: '/api/login',
    method: 'post',
    data
  })
}
export function getInfo(token) {
  return request({
    url: '/api/info',
    method: 'get',
    params: { token }
  })
}
export function logout() {
  return request({
    url: '/api/logout',
    method: 'post'
  })
}
// 查询所有用户
export function getUserList() {
  return request({
    url: '/api/user/getUserList',
    method: 'get',
  })
}
export function getUserPages(data) {
  return request({
    url: '/api/user',
    method: 'get',
    params: data
  })
}
export function addUser(data) {
  return request({
    url: '/api/user',
    method: 'post',
    data
  })
}
export function updateUser(id, data) {
  return request({
    url: `/api/user/${id}`,
    method: 'put',
    data
  })
}
export function deleteUser(id) {
  return request({
    url: `/api/user/${id}`,
    method: 'delete'
  })
}

在这里插入图片描述

2.2 角色管理

RoleManage.vue

<template>
<div>
<el-card class="box-card">
  <div slot="header">
       <el-row>
        <el-button type="primary" @click=" addForm = true ">新增</el-button>
        <el-button type="primary" @click=" toUpdate ">修改</el-button>
        <el-button type="primary" @click="toDel">删除</el-button>
        <el-button type="primary" @click="toQue">查询</el-button>
    </el-row>
  </div>
  <div >
    <el-table
    :data="tableData"
    highlight-current-row
    @current-change="handleCurrentChange"
    border
    style="width: 100%">
    <el-table-column
      prop="name"
      label="名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="code"
      label="编码"
      width="180">
    </el-table-column>
  <el-table-column
      prop="type"
      label="类型"
      width="180">
    </el-table-column>
     <el-table-column
      prop="status"
      label="状态"
      width="180">
    </el-table-column>
  </el-table>
  </div>
   <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page= searchData.pageNum
      :page-sizes="[10, 20, 30, 40]"
      :page-size= searchData.pageSize
      layout="total, sizes, prev, pager, next, jumper"
      :total= "total">
    </el-pagination>
</el-card>
<!-- 分页 -->
<el-dialog title="新增" :visible.sync="addForm">
  <el-form :model="add">
    <el-form-item label="名称" :label-width="formWidth">
      <el-input v-model="add.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="编码" :label-width="formWidth">
    <el-input v-model="add.code" autocomplete="off"></el-input>
    </el-form-item>
      <!-- <el-select v-model="form.nikeName" placeholder="请选择活动区域">
        <el-option label="密码" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select> -->
    <el-form-item label="英文名称" :label-width="formWidth">
    <el-input v-model="add.ename" autocomplete="off"></el-input>
    </el-form-item>
       <el-form-item label="层级" :label-width="formWidth">
    <el-input v-model="add.layer" autocomplete="off"></el-input>
    </el-form-item>
       <el-form-item label="父节点" :label-width="formWidth">
    <el-input v-model="add.pid" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="类型" :label-width="formWidth">
    <el-input v-model="add.type" autocomplete="off"></el-input>
    </el-form-item>
   <el-form-item label="状态" :label-width="formWidth">
    <el-input v-model="add.status" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="addForm = false">取 消</el-button>
    <el-button type="primary" @click="toAdd">确 定</el-button>
  </div>
</el-dialog>
<el-dialog title="修改" :visible="updateForm">
  <el-form :model="currentRow">
    <el-form-item label="名称" :label-width="formWidth">
      <el-input v-model="currentRow.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="编码" :label-width="formWidth">
    <el-input v-model="currentRow.code" autocomplete="off"></el-input>
    </el-form-item>
      <el-form-item label="英文名称" :label-width="formWidth">
    <el-input v-model="currentRow.ename" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="层级" :label-width="formWidth">
    <el-input v-model="add.layer" autocomplete="off"></el-input>
    </el-form-item>
       <el-form-item label="父节点" :label-width="formWidth">
    <el-input v-model="add.pid" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="类型" :label-width="formWidth">
    <el-input v-model="add.type" autocomplete="off"></el-input>
    </el-form-item>
   <el-form-item label="状态" :label-width="formWidth">
    <el-input v-model="add.status" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="updateForm = false">取 消</el-button>
    <el-button type="primary" @click="updateR">修 改</el-button>
  </div>
</el-dialog>
</div>
</template>
<script>
import {getRolePages,addRole,updateRole,deleteRole} from '@/api/role'
export default {
  data() {
    return {
        // 分页相关
        total:0 ,
        // 查询条件,分页数据
        searchData: {
          pageNum: 1, // 当前页
          pageSize: 10,// 页面大小
        },
        tableData: null,
        addForm: false,
        updateForm: false,
        formWidth: '120px',
        add: {},
        currentRow: {}, 
    }
  },
 created() {
      this.init()
  },
  methods: {
      init(){
          getRolePages(this.searchData).then(res=>{
            this.tableData = res.data.records
            this.total  = res.data.total
          })
      },
    toAdd(){
        addRole(this.add).then(res =>{
            if(res.code == 200){
                this.$message.success(res.msg)
                this.addForm = false
                this.init()

            }else{
                this.$message(res.msg)
            }
        })
    },
     toUpdate(){
        if(this.currentRow == null){
            this.$message.error("请选择要修改的用户")
        }else{
            this.updateForm = true
        }
    },
    updateR(){
        updateRole(this.currentRow.roleId,this.currentRow).then(res=>{
            if(res.code == 200){
                this.$message.success(res.msg)
                this.updateForm = false
                this.init()

            }else{
                this.$message(res.msg)
            }
        })
    },

     toDel(){
     if(this.currentRow == null){
            this.$message.error("请选择要删除的用户")
        }
       deleteRole(this.currentRow.roleId).then (res =>{
        if(res.code == 200){
                this.$message.success(res.msg)
                this.init()

            }else{
                this.$message(res.msg)
            }
     })
    },
     toQue(){
        this.$message('查询')
    },
     //选择：
    handleCurrentChange(val){
        this.currentRow = val
    },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
  },
}
</script>
<style scoped>
.line{
  text-align: center;
}
</style>

role.js

import request from '@/utils/request'
export function getRolePages(data) {
  return request({
    url: '/api/role',
    method: 'get',
    params: data
  })
}
export function addRole(data) {
  return request({
    url: '/api/role',
    method: 'post',
    data
  })
}
export function updateRole(id, data) {
  return request({
    url: `/api/role/${id}`,
    method: 'put',
    data
  })
}
export function deleteRole(id) {
  return request({
    url: `/api/role/${id}`,
    method: 'delete'
  })
}

在这里插入图片描述

2.3 菜单管理

MenuManage.vue


<template>
<div>
<el-card class="box-card">
  <div slot="header">
       <el-row>
        <el-button type="primary" @click=" addForm = true ">新增</el-button>
        <el-button type="primary" @click=" toUpdate ">修改</el-button>
        <el-button type="primary" @click="toDel">删除</el-button>
        <el-button type="primary" @click="toQue">查询</el-button>
  </el-row>
  </div>
    <el-table
    :data="treeData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="menuId"
    border
    highlight-current-row
    @current-change ="handleCurrentChange"
    default-expand-all
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
       prop="menuName"
        label="菜单"
        width="180">
      </el-table-column>
      <el-table-column
        prop="path"
        label="地址"
        width="180">
      </el-table-column>
      <el-table-column
        prop="menuType"
        label="类型">
      </el-table-column>
  </el-table>
</el-card>
  <el-dialog title="新增" :visible.sync="addForm">
      <el-form :model="add">
          <el-form-item label="菜单名称" :label-width="formWidth">
            <el-input v-model="add.menuName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="父节点" :label-width="formWidth">
             <treeselect v-model="add.parentId"
                            disable
                            :options="treeData"
                            placeholder="功能组菜单"
                            :normalizer="normalizer"/>
          </el-form-item>
          <el-form-item label="地址" :label-width="formWidth">
            <el-input v-model="add.path" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="类型" :label-width="formWidth">
            <el-input v-model="add.meunType" autocomplete="off"></el-input>
          </el-form-item>
      </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="addForm = false">取 消</el-button>
      <el-button type="primary" @click="toAdd">确 定</el-button>
    </div>
  </el-dialog>

<el-dialog title="修改" :visible.sync="updateForm">
      <el-form :model="currentRow">
          <el-form-item label="菜单名称" :label-width="formWidth">
            <el-input v-model="currentRow.menuName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="父节点" :label-width="formWidth">
             <treeselect v-model="add.parentId"
                            disable
                            :options="treeData"
                            placeholder="菜单"
                            :normalizer="normalizer"/>
          </el-form-item>
          <el-form-item label="地址" :label-width="formWidth">
            <el-input v-model="currentRow.path" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="类型" :label-width="formWidth">
            <el-input v-model="currentRow.meunType" autocomplete="off"></el-input>
          </el-form-item>
      </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="updateForm = false">取 消</el-button>
      <el-button type="primary" @click="updateM">确 定</el-button>
    </div>
  </el-dialog>
  </div>
</template>
<script>
import {addMenu,updateMenu,deleteMenu,menuTree} from '@/api/menu'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
   components: {
    Treeselect
    },
  data() {
    return {
        tableData: null,
        addForm: false,
        updateForm: false,
        formWidth: '120px',
        add: {},
        currentRow: {},
        treeData:[],
        // normalizer(node) {
        // return {
        //   id: node.menuId,
        //   label: node.menuName,
        //   children: node.children,
        //   }
        // },
       
    }
  },
 created() {
      this.init()
  },
  methods: {
      init(){
          menuTree().then(res=>{
            console.log(res)
            this.treeData = res.data
          })
      },

       normalizer(node) {
        return {
          id: node.menuId,
          label: node.menuName,
          children: node.children,
          }
        },
       
    toAdd(){
       console.log("add",this.add)
        addMenu(this.add).then(res =>{
            if(res.code == 200){
                this.$message.success(res.msg)
                this.addForm = false
                this.init()
            }else{
                this.$message(res.msg)
            }
        })
    },
     toUpdate(){
        if(this.currentRow == null){
            this.$message.error("请选择要修改的菜单")
        }else{
            this.updateForm = true
        }
    },
    updateM(){
        updateMenu(this.currentRow.menuId,this.currentRow).then(res=>{
            if(res.code == 200){
                this.$message.success(res.msg)
                this.updateForm = false
                this.init()
            }else{
                this.$message(res.msg)
            }
        })
    },
     toDel(){
     if(this.currentRow == null){
            this.$message.error("请选择要删除的菜单")
        }
       deleteMenu(this.currentRow.menuId).then (res =>{
        if(res.code == 200){
                this.$message.success(res.msg)
                this.init()
            }else{
                this.$message(res.msg)
            }
     })
    },
     toQue(){
        this.$message('查询')
    },
     //选择：
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(val)
     // console.log(`当前页: ${val}`);
    },
      handleNodeClick(data) {
      console.log(data);
    }
  },
}
</script>
<style scoped>
.line{
  text-align: center;
}
</style>

menu.js

import request from '@/utils/request'
  export function addMenu(data) {
    return request({
      url: '/api/menu',
      method: 'post',
      data
    })
  }
  export function updateMenu(id, data) {
    return request({
      url: `/api/menu/${id}`,
      method: 'put',
      data
    })
  }
  export function deleteMenu(id) {
    return request({
      url: `/api/menu/${id}`,
      method: 'delete'
    })
  }
  export function menuTree() {
    return request({
      url: `/api/menu/tree`,
      method: 'get'
    })
  }
重点：选择树的使用

使用 vue-treeselect，

  1. 项目中安装
    命令行 npm install --save @riophae/vue-treeselect
  2. 页面使用
    import Treeselect from ‘@riophae/vue-treeselect’
    import ‘@riophae/vue-treeselect/dist/vue-treeselect.css’
  3. normalizer 来设置自定义的id 和lable

更详细内容可以查看官方文档

leiyuee
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
若依框架的入门介绍及使用
weixin_49185262的博客
06-29 1万+
若依框架的入门介绍及使用
解决树形结构菜单勾选，半勾选显示问题
cheng_zhang_zhong的博客
06-18 3833
问题：对菜单进行部分勾选，其中后台需要将半选的子节点保存到后台，但是在获取反选的时候，因为父节点中存在，所以需要将父节点进行排除。 1.需要满足如下这种情况。 1.解决的问题有：将半选的节点也获取到 let checkedList = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes()); 下面是我的业务代码，将所有节点的id存储在以逗号隔开的字符串 authIds（例如authIds =
Element table树状表格选中，父级与子级关联显示
xyj19990301的博客
11-15 1585
根据返回数据格式不同修改代码相关值，若要存值提交到接口请求在对应if里进行push和splice删除操作即可。.toggleRowSelection(参数1, 参数2)
筛选树形菜单时关联其父节点和子节点
wnhyang的博客
04-02 413
文章介绍了在树形菜单搜索时如何带上父菜单和子菜单的问题，并提供了后端实现方案。通过查询满足条件的菜单，再去查这些菜单的父菜单和子菜单，同时避免重复节点和死循环的问题。
关于管理系统中的菜单管理问题——树形结构+是否被选中
huxiutao的博客
06-26 1827
最近做了菜单管理的功能，之前对这个功能了解的比较少，也没有仔细想过这个问题。刚开始面对这个问题时，想法很简单，有几层菜单就新建几张DB表，然后通过主键关联起来就行了。但是，当做到新增时就遇到问题了——没法垂直扩展！也就是说，如果菜单层级数是变化的，现有的表就没办法满足需求了，坦白的说，如果层级数变了，我总不能动态生成DB表吧（当然Hibernate动态生成，很显然这不是解决问题的方法）。 在网上一...
java餐饮管理系统源码6-2020-:网赚项目打卡记录
06-05
java餐饮管理系统源码6 断离舍，唯有断舍离方能解救我心 减法- 精简 - 目标与事件，时间铺排放入可控范围。 2020网赚项目打卡记录 每一个零撸项目的推广都是一个项目的开始。只要我做推广我就有无限的项目。 以后 ...
小游戏源码-国庆去哪儿，秋高气爽搞点事情吧！.rar
09-16
本压缩包文件名为"小游戏源码-国庆去哪儿，秋高气爽搞点事情吧！.rar"，其中包含的是一份与国庆节相关的小游戏的完整源代码，这为我们提供了一个绝佳的学习和研究平台，尤其是对于那些对游戏开发感兴趣或正在学习...
github-admin：vue和element-ui构建一个后台管理系统，使用github提供的api搞事情。输入您的github账号名自动帮你生成基本的github信息哦:hushed_face:
02-04
github管理员介绍本仓库是使用vue和element-ui建造的一个后台管理系统。目的是通过github提供的api展示人（拥有github账号的人）的github活动等状况。线上效果请查看 。怎么运行# 进入目录cd github-admin/core# ...
H5小游戏源码 国庆去哪儿，秋高气爽搞点事情吧！.zip
10-14
“H5小游戏源码 国庆去哪儿，秋高气爽搞点事情吧！”这个标题表明这是一个与国庆节主题相关的H5小游戏的源代码。H5小游戏是基于HTML5技术开发的轻量级游戏，通常适用于网页和移动端，具有跨平台的特性。标题中的...
awesome-macos-command-line-zh：用你的macOS终端搞事情。（使用macOS终端外壳做一些很棒的事情。）
02-05
"用你的macOS终端搞事情"意味着这个项目包含了大量实用的命令、工具和技巧，能够使用户更高效地利用macOS的终端外壳，提升日常工作效率。 **标签解析** 1. **macos** - 这个标签表明资源是针对苹果公司的操作系统...
话费充值 php,话费充值示例代码
weixin_31467557的博客
03-09 365
require_once 'curl.func.php';$appkey = 'your_appkey_here';//你的appkey$mobile = '15158825888';//手机号$amount = '30';//充值金额$outorderno = '66522311111';//外部订单号$appsecret = 'ssssssssssss';$sign = makeSign(ar...
easyui中点击菜单树中的某个选项，右边的窗口显示该选项对应的iframe窗口内容
王和平的第三个果园
03-12 432
<div id="div1" class="easyui-layout" data-options="fit:true"> <div data-options="region:'north',title:'头部',split:true" style="height:100px"></div> <div data-options="regio...
前端学习（2478）：请求提交
歌谣的博客
10-27 185
request.js <template> <div class="artical-container"> <!--卡片--> <el-card class="filter-card"> <div slot="header" class="clearfix"> <!--面包屑导航--> <el-breadcrumb separator-class="el-icon-arrow-right
JavaScriptAPI之定时循环接口（requestAnimationFrame）
上善若泪
05-11 1697
目录 1 requestAnimationFrame概述 2 cancelAnimationFrame方法 3 实例 1 requestAnimationFrame概述 requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。 设置这个API的目的是为了让各种网页动画效果（DOM动画、Canvas动画、SV...
进销存系统_系统权限管理-用户&角色管理（6）
付之一笑的专栏
09-12 1316
一、学习目标 二、权限概念 2.1、RBAC模型 RBAC是基于角色的访问控制（Role-Based Access Control），在RBAC中，权限与角色相关联，用户通过扮演适当的角色从而得到这些角色的权限。这样管理都是层级相互依赖的，权限赋予给角色，角色又赋予用户，这样的权限设计很清楚，管理起来很方便。 RBAC授权实际上是who、what、how三元组之间的关系，说白了就是谁登录了系统，对什么资源进行了怎样的操作！ 2.2、数据库设计 2.2.1、实体关系映射图 2.2.2、核心表设计 三、核
详解Vue中nextTick的原理与作用
最新发布
fengjing81的专栏
07-24 766
Vue中的nextTick是一个非常重要的API，它允许开发者延迟回调函数的执行直到下次DOM更新循环之后。这一机制在Vue开发中非常有用，特别是在处理DOM更新和异步操作时。下面将详细解释nextTick的原理与作用。
vue实现电子签名、图片合成、及预览功能
weixin_58572700的博客
07-23 1071
本文介绍了电子签名、图片合成、及预览功能
Vue系列面试题
qq_44186810的博客
07-23 937
Vue2中采用Object.defineProperty来实现数据响应式，Object.definePropery虽然可以监听到数组的变化，但是由于在性能和体验的性价比上考虑，Vue2放弃了这个特性。1）v-for优先于v-if被解析，从源码中发现，先处理静态节点，在处理once，在处理for，在处理if，代码显示for的优先级比if高，断点调试也证实for优先于if。v-if：是惰性渲染机制，在属性初始为false时，组件就不会被渲染，直到条件为true，并且切换条件时会触发销毁/挂载组件。
搞一个图书馆管理借阅系统
04-23
好的，您需要一个图书馆管理借阅系统，这是一个相当复杂的系统。在这个系统中，您需要能够管理图书的信息（如书名、作者、分类、ISBN 等），管理借阅者的信息（如姓名、借阅时间、归还时间等），控制图书馆的库存和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值