Vue2项目练手——通用后台管理项目第六节

2023-11-10

Vue2项目练手——通用后台管理项目

用户管理页
- table表格

用户管理页

table表格

使用的组件和前面的表格使用的一致。

获取表格数据

目录列表

在这里插入图片描述

user.js

import Mock from 'mockjs'

// get请求从config.url获取参数，post从config.body中获取参数
function param2Obj (url) {
    const search = url.split('?')[1]
    if (!search) {
        return {}
    }
    return JSON.parse(
        '{"' +
        decodeURIComponent(search)
            .replace(/"/g, '\\"')
            .replace(/&/g, '","')
            .replace(/=/g, '":"') +
        '"}'
    )
}

let List = []
const count = 200

for (let i = 0; i < count; i++) {
    List.push(
        Mock.mock({
            id: Mock.Random.guid(),
            name: Mock.Random.cname(),
            addr: Mock.mock('@county(true)'),
            'age|18-60': 1,
            birth: Mock.Random.date(),
            sex: Mock.Random.integer(0, 1)
        })
    )
}

export default {
    /**
     * 获取列表
     * 要带参数 name, page, limt; name可以不填, page,limit有默认值。
     * @param name, page, limit
     * @return {{code: number, count: number, data: *[]}}
     */
    getUserList: config => {
        const { name, page = 1, limit = 20 } = param2Obj(config.url)
        console.log('name:' + name, 'page:' + page, '分页大小limit:' + limit)
        const mockList = List.filter(user => {
            if (name && user.name.indexOf(name) === -1 && user.addr.indexOf(name) === -1) return false
            return true
        })
        const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
        return {
            code: 20000,
            count: mockList.length,
            list: pageList
        }
    },
    /**
     * 增加用户
     * @param name, addr, age, birth, sex
     * @return {{code: number, data: {message: string}}}
     */
    createUser: config => {
        const { name, addr, age, birth, sex } = JSON.parse(config.body)
        console.log(JSON.parse(config.body))
        List.unshift({
            id: Mock.Random.guid(),
            name: name,
            addr: addr,
            age: age,
            birth: birth,
            sex: sex
        })
        return {
            code: 20000,
            data: {
                message: '添加成功'
            }
        }
    },
    /**
     * 删除用户
     * @param id
     * @return {*}
     */
    deleteUser: config => {
        const { id } = JSON.parse(config.body)
        if (!id) {
            return {
                code: -999,
                message: '参数不正确'
            }
        } else {
            List = List.filter(u => u.id !== id)
            return {
                code: 20000,
                message: '删除成功'
            }
        }
    },
    /**
     * 批量删除
     * @param config
     * @return {{code: number, data: {message: string}}}
     */
    batchremove: config => {
        let { ids } = param2Obj(config.url)
        ids = ids.split(',')
        List = List.filter(u => !ids.includes(u.id))
        return {
            code: 20000,
            data: {
                message: '批量删除成功'
            }
        }
    },
    /**
     * 修改用户
     * @param id, name, addr, age, birth, sex
     * @return {{code: number, data: {message: string}}}
     */
    updateUser: config => {
        const { id, name, addr, age, birth, sex } = JSON.parse(config.body)
        const sex_num = parseInt(sex)
        List.some(u => {
            if (u.id === id) {
                u.name = name
                u.addr = addr
                u.age = age
                u.birth = birth
                u.sex = sex_num
                return true
            }
        })
        return {
            code: 20000,
            data: {
                message: '编辑成功'
            }
        }
    }
}

mock.js

新增代码：

import user from '@/api/mockServeData/user'

//用户列表的数据
Mock.mock('/api/user/add','post',user.createUser)
Mock.mock('/api/user/edit','post',user.updateUser)
Mock.mock('/api/user/del','post',user.deleteUser)
Mock.mock('/api/user/getUser',user.getUserList)

全部代码：

import Mock from 'mockjs'
import homeApi from "@/api/mockServeData/home";
import user from '@/api/mockServeData/user'
/*//定义请求拦截
Mock.mock('/api/home/getData',function (){
    //拦截到请求后处理的逻辑
    console.log("拦截到了")
})*/
//定义请求拦截
Mock.mock('/api/home/getData',homeApi.getStatisticalData)

//用户列表的数据
Mock.mock('/api/user/add','post',user.createUser)
Mock.mock('/api/user/edit','post',user.updateUser)
Mock.mock('/api/user/del','post',user.deleteUser)
Mock.mock('/api/user/getUser',user.getUserList)

index.js

新增代码

export const getUser=(params)=>{
    //返回用户列表  axios的get请求是在params中
    return http.get('/user/getUser',params)
}

export const addUser=(data)=>{
    //新增用户  axios的post请求是在data中
    return http.post('/user/add',data)
}

export const editUser=(data)=>{
    //编辑用户  axios的post请求是在data中
    return http.post('/user/edit',data)
}
export const delUser=(data)=>{
    //删除用户  axios的post请求是在data中
    return http.post('/user/del',data)
}

全部代码：

import http from "@/utils/request";

//请求首页数据
export const getData=()=>{
    //返回一个promise对象
    return http.get('/home/getData')
}

export const getUser=(params)=>{
    //返回用户列表  axios的get请求是在params中
    return http.get('/user/getUser',params)
}

export const addUser=(data)=>{
    //新增用户  axios的post请求是在data中
    return http.post('/user/add',data)
}

export const editUser=(data)=>{
    //编辑用户  axios的post请求是在data中
    return http.post('/user/edit',data)
}
export const delUser=(data)=>{
    //删除用户  axios的post请求是在data中
    return http.post('/user/del',data)
}

Users.vue

新增代码

 <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="name"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="age"
            label="年龄">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别">
          <!--自定义列，使用插槽的方式，element-ui上面有提供-->
          <template slot-scope="scope">
            <span>{{ scope.row.sex===1?'男':'女' }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="birth"
            label="出生日期">
        </el-table-column>
        <el-table-column
              prop="addr"
              label="地址">
        </el-table-column>
        <el-table-column
          prop="action"
          label="操作">
          <!--自定义列，使用插槽的方式，element-ui上面有提供-->
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" @click="handleDelete(scope.row)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

import {getUser} from "@/api";
 methods:{
    handleEdit(row){

    },
    handleDelete(row){

    }
  },
  mounted() {
    getUser().then(({data})=>{
      console.log(data);
      this.tableData=data.list
    })
  }

全部代码：

<template>
  <div class="manage">
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose">
<!--      用户的表单信息-->
      <el-form ref="form" :inline="true" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age" placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" prop="birth">
          <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.birth" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="地址" prop="addr">
          <el-input v-model="form.addr" placeholder="请输入地址"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <div class="manage-header">
      <el-button type="primary" @click="dialogVisible=true">+新增</el-button>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="name"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="age"
            label="年龄">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别">
          <!--自定义列，使用插槽的方式，element-ui上面有提供-->
          <template slot-scope="scope">
            <span>{{ scope.row.sex===1?'男':'女' }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="birth"
            label="出生日期">
        </el-table-column>
        <el-table-column
              prop="addr"
              label="地址">
        </el-table-column>
        <el-table-column
          prop="action"
          label="操作">
          <!--自定义列，使用插槽的方式，element-ui上面有提供-->
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" @click="handleDelete(scope.row)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>

<script>
import {getUser} from "@/api";

export default {
  name: "Users",
  data(){
    return {
      dialogVisible:false,
      form: {
        name: '',
        age: '',
        sex: '',
        birth: '',
        addr: '',
      },
      rules: {
        name: [{required: true, message: "请输入姓名"}],
        age: [{required: true, message: "请输入年龄"}],
        sex: [{required: true, message: "请选择性别"}],
        birth: [{required: true, message: "请选择出生日期"}],
        addr: [{required: true, message: "请输入地址"}],
      },
      tableData: [],
    }
  },
  methods:{
    //提交用户表单
    submit(){
      this.$refs.form.validate((valid)=>{
        if(valid){
        //  后续对表单数据的处理
          console.log(this.form)

          //清空表单数据
          this.$refs.form.resetFields()
          //关闭弹窗
          this.dialogVisible=false
        }
      })
    },
    //弹窗关闭的时候
    handleClose(){
      //清空表单
      this.$refs.form.resetFields()
      this.dialogVisible=false
    },
    cancel(){
      this.handleClose()
    },
    handleEdit(row){

    },
    handleDelete(row){

    }
  },
  mounted() {
    getUser().then(({data})=>{
      console.log(data);
      this.tableData=data.list
    })
  }
}
</script>

<style scoped>

</style>

新增和编辑功能

Users.vue

新增代码：

<el-select v-model="form.sex" placeholder="请选择">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="0"></el-option>
          </el-select>

<el-form-item label="出生日期" prop="birth">
          <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.birth" style="width: 100%;"
              value-format="yyyy-MM-DD">
            <!--              日期格式转变-->
          </el-date-picker>
        </el-form-item>
 
 <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>

<el-button type="primary" @click="handleAdd">+新增</el-button>

methods:{
//提交用户表单
    submit(){
      this.$refs.form.validate((valid)=>{
        if(valid){
          //  后续对表单数据的处理
          console.log(this.form)
          if(this.modalType===0){
            //新增
            addUser(this.form).then(()=>{
              //  重新获取列表结果
              this.getList()
            })
          }else{
            //  编辑处理
            editUser(this.form).then(()=>{
              //  重新获取列表结果
              this.getList()
            })
          }
          //清空表单数据
          this.$refs.form.resetFields()
          //关闭弹窗
          this.dialogVisible=false
        }
      })
    },
 handleEdit(row){
      console.log("row",row)
      this.modalType=1
      this.dialogVisible=true
      //注意需要对当前行数据进行深拷贝，否则会出错
      this.form=JSON.parse(JSON.stringify(row))
    },
//新增的功能
    handleAdd(){
      this.modalType=0
      this.dialogVisible=true
 }
  },
mounted() {
    this.getList()
  }

全部代码：

<template>
  <div class="manage">
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose">
      <!--      用户的表单信息-->
      <el-form ref="form" :inline="true" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age" placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" prop="birth">
          <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.birth" style="width: 100%;"
              value-format="yyyy-MM-DD">
            <!--              日期格式转变-->
          </el-date-picker>
        </el-form-item>
        <el-form-item label="地址" prop="addr">
          <el-input v-model="form.addr" placeholder="请输入地址"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <div class="manage-header">
      <el-button type="primary" @click="handleAdd">+新增</el-button>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="name"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="age"
            label="年龄">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别">
          <!--自定义列，使用插槽的方式，element-ui上面有提供-->
          <template slot-scope="scope">
            <span>{{ scope.row.sex===1?'男':'女' }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="birth"
            label="出生日期">
        </el-table-column>
        <el-table-column
            prop="addr"
            label="地址">
        </el-table-column>
        <el-table-column
            prop="action"
            label="操作">
          <!--自定义列，使用插槽的方式，element-ui上面有提供-->
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" @click="handleDelete(scope.row)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>

<script>
import {addUser, getUser,editUser} from "@/api";

export default {
  name: "Users",
  data(){
    return {
      dialogVisible:false,
      form: {
        name: '',
        age: '',
        sex: '',
        birth: '',
        addr: '',
      },
      rules: {
        name: [{required: true, message: "请输入姓名"}],
        age: [{required: true, message: "请输入年龄"}],
        sex: [{required: true, message: "请选择性别"}],
        birth: [{required: true, message: "请选择出生日期"}],
        addr: [{required: true, message: "请输入地址"}],
      },
      tableData: [],
      modalType:0  //0表示新增的弹窗，1表示的是编辑
    }
  },
  methods:{
    //提交用户表单
    submit(){
      this.$refs.form.validate((valid)=>{
        if(valid){
          //  后续对表单数据的处理
          console.log(this.form)
          if(this.modalType===0){
            //新增
            addUser(this.form).then(()=>{
              //  重新获取列表结果
              this.getList()
            })
          }else{
            //  编辑处理
            editUser(this.form).then(()=>{
              //  重新获取列表结果
              this.getList()
            })
          }
          //清空表单数据
          this.$refs.form.resetFields()
          //关闭弹窗
          this.dialogVisible=false
        }
      })
    },
    //弹窗关闭的时候
    handleClose(){
      //清空表单
      this.$refs.form.resetFields()
      this.dialogVisible=false
    },
    cancel(){
      this.handleClose()
    },
    handleEdit(row){
      console.log("row",row)
      this.modalType=1
      this.dialogVisible=true
      //注意需要对当前行数据进行深拷贝，否则会出错
      this.form=JSON.parse(JSON.stringify(row))
    },
    handleDelete(row){

    },
    //封装获取列表的数据
    getList(){
      //获取列表数据
      getUser().then(({data})=>{
        console.log(data);
        this.tableData=data.list
      })
    },
    //新增的功能
    handleAdd(){
      this.modalType=0
      this.dialogVisible=true
    }
  },
  mounted() {
    this.getList()
  }
}
</script>

<style scoped>

</style>

请添加图片描述

删除功能

使用的组件

在这里插入图片描述

Users.vue

新增代码：

handleDelete(row){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delUser({id:row.id}).then(()=>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //  重新获取列表结果
          this.getList()
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

全部代码：

<template>
  <div class="manage">
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose">
      <!--      用户的表单信息-->
      <el-form ref="form" :inline="true" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age" placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" prop="birth">
          <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.birth" style="width: 100%;"
              value-format="yyyy-MM-DD">
            <!--              日期格式转变-->
          </el-date-picker>
        </el-form-item>
        <el-form-item label="地址" prop="addr">
          <el-input v-model="form.addr" placeholder="请输入地址"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <div class="manage-header">
      <el-button type="primary" @click="handleAdd">+新增</el-button>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="name"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="age"
            label="年龄">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别">
          <!--自定义列，使用插槽的方式，element-ui上面有提供-->
          <template slot-scope="scope">
            <span>{{ scope.row.sex===1?'男':'女' }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="birth"
            label="出生日期">
        </el-table-column>
        <el-table-column
            prop="addr"
            label="地址">
        </el-table-column>
        <el-table-column
            prop="action"
            label="操作">
          <!--自定义列，使用插槽的方式，element-ui上面有提供-->
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" @click="handleDelete(scope.row)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>

<script>
import {addUser, getUser,editUser,delUser} from "@/api";

export default {
  name: "Users",
  data(){
    return {
      dialogVisible:false,
      form: {
        name: '',
        age: '',
        sex: '',
        birth: '',
        addr: '',
      },
      rules: {
        name: [{required: true, message: "请输入姓名"}],
        age: [{required: true, message: "请输入年龄"}],
        sex: [{required: true, message: "请选择性别"}],
        birth: [{required: true, message: "请选择出生日期"}],
        addr: [{required: true, message: "请输入地址"}],
      },
      tableData: [],
      modalType:0  //0表示新增的弹窗，1表示的是编辑
    }
  },
  methods:{
    //提交用户表单
    submit(){
      this.$refs.form.validate((valid)=>{
        if(valid){
          //  后续对表单数据的处理
          console.log(this.form)
          if(this.modalType===0){
            //新增
            addUser(this.form).then(()=>{
              //  重新获取列表结果
              this.getList()
            })
          }else{
            //  编辑处理
            editUser(this.form).then(()=>{
              //  重新获取列表结果
              this.getList()
            })
          }
          //清空表单数据
          this.$refs.form.resetFields()
          //关闭弹窗
          this.dialogVisible=false
        }
      })
    },
    //弹窗关闭的时候
    handleClose(){
      //清空表单
      this.$refs.form.resetFields()
      this.dialogVisible=false
    },
    cancel(){
      this.handleClose()
    },
    handleEdit(row){
      console.log("row",row)
      this.modalType=1
      this.dialogVisible=true
      //注意需要对当前行数据进行深拷贝，否则会出错
      this.form=JSON.parse(JSON.stringify(row))
    },
    handleDelete(row){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delUser({id:row.id}).then(()=>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //  重新获取列表结果
          this.getList()
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //封装获取列表的数据
    getList(){
      //获取列表数据
      getUser().then(({data})=>{
        console.log(data);
        this.tableData=data.list
      })
    },
    //新增的功能
    handleAdd(){
      this.modalType=0
      this.dialogVisible=true
    }
  },
  mounted() {
    this.getList()
  }
}
</script>

<style scoped>

</style>

请添加图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue基础

前端

javascript

开发语言

ECMAScript

Vue2项目练手——通用后台管理项目第六节的相关文章

如果字符串不匹配，.split() 返回什么？

在此 JavaScript 代码中如果变量data没有那个角色那么 split 会返回什么呢 x data split 它会是原始字符串的数组吗是的根据ECMA262 15 5 4 14 String prototype split
使用通过 (document.getElementById('ID')) 添加到数组的元素

为什么这段代码不起作用 var all obj element new Array all obj element 0 document getElementById Img3 alert all obj element 0 style w
如果列表中的某个字符位于该字符之前，请选择该字符

我有这个正则表达式 a z s gmi 该正则表达式选择从我的文字中 sme a eliezovce 2015 Spolo ne pre Eur pu Osl vili aj 940 但我只想选择没有如果列表中的某些字符 a z 之前
Heroku 上重启后 Better-SQLite3 数据库重置

我有一个 Discord 机器人better sqlite3 https github com JoshuaWise better sqlite3硬币和 XP 数据库直到两周前它一直工作得很好现在每次重新启动后它只会恢复 XP 和硬
firebase.storage() 不是玩笑测试用例中的函数

我正在使用 Jest 来测试我的 firebase 功能这一切都在浏览器中进行因此我与服务器端的 firebase 没有任何冲突当我使用firebase auth or firebase database 一切正常当我尝试使用时fi
如何使用 CSS 或 javascript 创建圆角

复制使用 CSS 创建圆角的最佳方法是什么 https stackoverflow com questions 7089 what is the best way to create rounded corners using css 7
Google javascript 登录 api：无法离线访问

我正在尝试为服务器端应用程序实现 Google 登录如 Google 文档中所示服务器端应用程序的 Google 登录 https developers google com identity sign in web server si
如何设置黄瓜环境变量

我有以下 package json name newcucumber version 1 0 0 main index js scripts test node modules bin cucumber js firefox node mo
确定用户是否在shadow dom之外单击

我正在尝试实现一个下拉菜单您可以单击外部将其关闭下拉列表是自定义日期输入的一部分并且封装在输入的影子 DOM 内我想写一些类似的东西 window addEventListener mousedown function evt if
递归链接 Promise

我正在开发一个简单的 Windows 8 应用程序我需要在其中从网站获取一组数据我正在使用 WinJS xhr 来检索此数据它返回一个 Promise 然后我将回调传递到此 Promise 的 then 方法中该方法为我的回调提供
如何使用 Eclipse 作为 Javascript IDE？

我从官方下载页面下载了 eclipse Javascript IDE 但是当我启动应用程序时它显示必须提供 Java 运行时环境或 Java 开发工具包才能运行 eclipse 我已经有一个运行良好的 eclipse 的 java I
JavaScript - 类根据条件扩展

事情是这样的我有一个名为 A 的主课我希望这个班级能够扩展 B 级 class A extends B 但事实上我希望 B 类在特定条件下扩展 C D 或 E class B extends B1 or class B extends
如何比较两个对象数组并更改两个数组中找到的对象的值？

假设我有两个对象数组 let array1 id 1 name snow id 4 name jo id 8 name bran id 12 name gondo id 13 name peter
Chrome：window.print() 打印对话框仅在页面重新加载后打开 (javascript)

我面临着一个非常奇怪的问题我正在从 javascript 文件调用 window print 这在 Safari IE Firefox 中运行良好直到两小时前它在 Chrome 中也运行良好版本29 0 1547 57 我没有更改我
有没有办法显示嵌套在 Grid 组件内的 Material-UI 抽屉？

我正在使用 Material UI 创建一个 Web 应用程序主页分为 3 个网格每个网格有一个height of 500px 我想在中间网格内显示一个带有一些操作选项的抽屉那可能吗到目前为止我只能在整个屏幕上显示它这是我的主要
Array.indexOf 如何比 Array.some 更高效

这个问题的灵感来自于这个问题的竞争答案具有多个参数的indexOf https stackoverflow com questions 39000151 indexof with multiple arguments 用户想知道一种有效的
通过ajax POST提交两次表单

插入到mysql using php通过文件调用AJAX 前insert语句php代码执行select查询到查找重复记录并继续insert statement Issue 从ajax调用php文件时它执行了两次并得到作为重复记录的响应好
使用 Lodash 循环 JavaScript 对象中的属性

是否可以循环访问 JavaScript 对象中的属性例如我有一个 JavaScript 对象定义如下 myObject options property1 value 1 property2 value 2 属性将动态添加到该对象有没
关于 Node.js Promise then 和 return？

我对承诺感到困惑 I use 那么就答应没有返回像这样 new Promise resolve reject gt resolve 1 then v1 gt console log v1 new Promise resolve reject
用于检查字符串是否至少包含 3 个字母数字字符的最有效的正则表达式

我有这个正则表达式 a zA Z0 9 3 我用它来查看字符串中是否至少包含 3 个字母数字字符似乎有效它应该匹配的字符串示例 a3c 0 c 8 9 9d 但是我需要它更快地工作有没有更好的方法使用正则表达式来匹配相同的模式编辑

随机推荐

linux获取ipv6公网ip,Linux 获取IPv6网关

基于hisi3536实现的 ubuntu下只要找到对应的配置文件 ipv6 route 即可 include include include include include include include include include i
#ifdef #if defined #ifndef和#if !defined区别详解-覆盖所有说明

首先让我们先从头文件开始在很多头文件里我们会看到这样的语句 ifndef MYHEADFILE H define MYHEADFILE H 语句 endif MYHEADFILE H 为了避免同一个文件被include多次我们常使用
浅谈构建iOS一个动态化页面的思路

随着产品的不断迭代功能的不断完善我们的项目的中会给用户分成区域呈现出越来越多的东西咕咚的精选给用户一种信息广场的概念让用户可以快速的抵达我们感兴趣的点既然如此那么每一个项目的综合信息的页面经常会被改动出现位置的调整出现新的模
STM32中断与事件的理解

推荐文档事件与中断区别目录事件与中断区别举例膝跳反射人们看见火灾之后打119 事件与中断区别很多时候我们经常使用到中断但是STM32还有一个东西叫做事件那么这个事件是什么呢看了上面这个文档我们知道 1 中断是需要CPU
MyBatis的Mapper接口以及Example的实例函数及详解

一 mapper接口中的方法解析 mapper接口中的函数及方法方法功能说明 int countByExample UserExample example thorws SQLException 按条件计数 int deleteByPr
c#中函数参数中的this（扩展方法）

首先和大家说一下最近参加实习了所以更新可能比较少而且对于大家提出的问题可能不能及时回复希望大家理解在我看完大佬的项目之后感觉自己啥也不会于是不出意外之后再csdn上我就会更新我在项目中遇到的问题希望对大家也有些帮助 c 函
Web前端vueDemo—实现简单计数器功能（一）

系列文章目录 Web前端vueDemo 实现简单计数器功能一 Web前端vueDemo 实现图片切换功能二 Web前端vueDemo 实现记事本功能三 Web前端vueDemo 实现天气预报功能四文章目录系列文章目录前言一
mysql数据库登录失败次数_mysql数据库限制多次登录失败，限定用户重试时间

前言最近的项目开始进行安全测试其中有一个安全问题是这样的应该增加用户登录失败处理功能限制非法登录次数建议是增加mysql数据库的登陆失败的锁定功能相信大家也都会遇到这样的问题在这里写一下方便大家直接使用设置方法登录mys
封装、继承、多态详解

面向对象的三个基本特征封装继承多态 1 封装 1 封装是实现面向对象的第一步封装就是将数据或函数等集合在一个单元中类被封装的对象通常被称为抽象数据类型 2 类具有封装性类能够把数据和算法操作数据的函数组合在一起构成一个不
【C++】虚函数

2023年8月23日周三上午目录虚函数在派生类中重写虚函数纯虚函数示例程序虚函数在函数返回值前面加上关键字virtual 虚函数必须在类中声明否则会报错 Error virtual outside class declar
SpringBoot整合MyBatis分页组件PageHelper

介绍 SpringBoot整合MyBatis插件PageHelper实现业务分页逻辑 POM 添加MyBatis PageHelper FastJSON MySQL依赖
selenium webdriver一种解决打开chrome浏览器的过程

1 下载59或58版本的Chrome浏览器下载地址 http www pc6 com SoftView SoftView 22726 html 2 下载对应的驱动驱动下载地址如下当前我使用的版本是2 32 http npm taoba
Redis安装与源码调试

linux版本 64位CentOS 6 5 Redis版本 redis 3 0 6 更新到2016年1月22日 Redis官网 http redis io Redis常用命令 http redis io commands 1 安装Redis
https://github.com/gfto/mptsd

https github com gfto mptsd Tvheadend is a TV streaming server and digital video recorder It supports the following inpu
理解React页面渲染原理，如何优化React性能？

React JSX转换成真实DOM过程当使用React编写应用程序时可以使用JSX语法来描述用户界面的结构 JSX是一种类似于HTML的语法但实际上它是一种JavaScript的扩展用于定义React元素 React元素描述了我们想
面对CUDA报错的种种解决办法

面对CUDA报错的种种解决办法 1 cuda failure 4 1 cuda failure 4 检查是否被docker容器所挂载完
ESP32学习笔记（1）—— 搭建开发环境、编译烧录 hello world 工程（基于rtos sdk 3.3.2）

前言 ESP32 是一套 Wi Fi 2 4 GHz 和蓝牙 4 2 双模解决方案 sdk版本 v3 3 2 此次实验是在 Windows 10 系统下利用虚拟机安装 Ubuntu 16 04系统并在此系统中进行开发编译和下载固件一准
数据结构：递归算法

记得小时候经常讲的一个故事从前有座山山上有座庙庙里有一个老和尚和一个小和尚一天老和尚给小和尚讲了一个故事故事内容是从前有座山山上有座庙庙里有一个老和尚和一个小和尚一天老和尚给小和尚讲了一个故事故事内容什么是递归上
计算机开不了机反复重启,电脑一直反复重启,就是开不了机,怎么处理

无法开机的情况比较多总体来讲大概有几种硬件原因导致系统无法开机 1 电脑电源故障导致无法正常为主机供电通常表现为主机电源不亮 2 内存条原因出现此类故障一般是因为内存条与主板内存插槽接触不良造成还有就是内存损坏或主板内存槽有问题也会
Vue2项目练手——通用后台管理项目第六节

Vue2项目练手通用后台管理项目用户管理页 table表格获取表格数据目录列表 user js mock js index js Users vue 新增和编辑功能 Users vue 删除功能使用的组件 Users vue 用户

Vue2项目练手——通用后台管理项目第六节

Vue2项目练手——通用后台管理项目

用户管理页

table表格

获取表格数据

目录列表

user.js

mock.js

index.js

Users.vue

新增和编辑功能

Users.vue

删除功能

使用的组件

Users.vue

Vue2项目练手——通用后台管理项目第六节 的相关文章

随机推荐

热门标签

Vue2项目练手——通用后台管理项目第六节的相关文章