根据id删除localstorage数据_教程38——删除文章功能的实现【中】（项目）

最新推荐文章于 2024-04-21 02:44:43 发布
最新推荐文章于 2024-04-21 02:44:43 发布
阅读量306 收藏
点赞数
文章标签： 根据id删除localstorage数据

e3b05780c2829d10130d841177a4b3f1.png

有些公司会有支持度问题，所以这里我们用传统的方式。

RAP2​rap2.taobao.org

10e1688284208f011e2a3a6929aa0280.png

81e4bd54318d392678d5e349e6092828.png
编辑删除文章的接口

1ad2657e5b6d1ea167029ca2abe171be.png
删除文章的基本数据

保存！！

有些时候，后端会说删除的是那篇文章，就是id。

后端的删除是分为：逻辑删除和物理删除的。

逻辑删除的话，会做一个标识，会有一个回收站。

物理删除的话，直接从数据库里面删除。

在 requests 文件下的 index.js ：

//通过id删除文章

//第一种方式
export const deleteArticle = (id) => {
  return service.post(`/api/vi/articleDlete`)
  id
}

//第二种方式
export const deleteArticle = (id) => {
  return service.post(`/api/vi/articleDlete/${id}`)
}

去 Aticle 下面的 index.js ：

import { getArticles,deleteArticle } from '../../requests'

下一步

删除文章

import axios from 'axios'
import { message } from 'antd'
const isDev = process.env.NODE_ENV === 'development'

const service = axios.create({
  baseURL: isDev ? 'http://rap2api.taobao.org/app/mock/176929' : ''
})

//请求拦截器

service.interceptors.request.use((config) => {
  config.data = Object.assign({}, config.data, {
    // authToken: window.localStorage.getItem('authToken')
    authToken: 'itisatokenplaceholder'
  })
  return config
})

service.interceptors.response.use((resp) => {
  if (resp.data.code === 200) {
    return resp.data.data
  } else {
    // 全局处理错误
    message.error(resp.data.errMsg)
  }
})


// 获取文章列表
export const getArticles = (offset = 0, limited = 10) => {
  return service.post('/api/v1/articleList', {
    offset,
    limited
  })
}

//通过id删除文章
export const deleteArticle = (id) => {
  return service.post(`/api/v1/articleDelete`,{id})
}

2578fe35524bd9aa4369a0289109fa6f.png
点击删除后

Article 下的 index.js：

import React, { Component } from 'react'
import moment from 'moment'
// eslint-disable-next-line
import XLSX from 'xlsx'
import {
    Card,
    Button,
    Table,
    Tag,
    Modal,
    Typography
} from 'antd'; 
import { getArticles,deleteArticle } from '../../requests'

const ButtonGroup = Button.Group

const titleDisplayMap={
  id:'id',
  title:'标题',
  author:'作者',
  createAt:'创建时间',
  amount:'阅读量'
}
export default class ArticleList extends Component {
  constructor(){
    super()
    this.state={
      dataSource: [
        //初始化的数据暂时不用了
      ],
      total:0,
      isLoading:false,
      //默认从多少开始
      offset:0,
      limited:10
    }
  }
  createColumns = (columnKeys) => {
    const columns = columnKeys.map(item => {
      if (item === 'amount') {
        return {
          title: titleDisplayMap[item],
          key: item,
          render: (text, record) => {
            const { amount } = record
            // 这里是根据一个数字的大小做一个条件渲染
            // 同理，可以做职位级别不同的颜色
            // 总经理：'001'，经理：'002'，主管: '003' 
            // const titleMap = {
            //   '001': 'red',
            //   '002': '#09f',
            //   '003': 'green'
            // }
            // return <Tag color={titleMap[titleKey]}>{record.title}</Tag>
            return <Tag color={amount > 230 ? 'red' : 'green'}>{record.amount}</Tag>
          }
        }
      }
      if(item === 'createAt'){
        return {
          title: titleDisplayMap[item],
          key: item,
          render: (text, record) => {
            const { createAt } = record
            return moment(createAt).format('YYYY年MM月DD日 hh:mm:ss')
          }
        }
      }
      return {
        title:titleDisplayMap[item],
        dataIndex:item,
        key:item
      }
    })
    columns.push({
      title:'操作',
      key:'action',
      render:(text, record) => {
        return (
          <ButtonGroup>
            <Button size="small" type="primary">编辑</Button>
            <Button size="small" type="danger" onClick={this.deleteArticle.bind(this, record)}>删除</Button>
          </ButtonGroup>
        )
      }
    })
    return columns
  }

  deleteArticle = (record) => {
    // console.log({id})
    Modal.confirm({
      title:'此操作不可逆，请谨慎！',
      content:<Typography>确定要删除<span style={{color:'#f00'}}>{record.title}</span>吗？</Typography>,
      okText:'别磨叽，赶紧删！',
      cancelText:'我点错了',
      onOk(){
        deleteArticle(record.id)
        .then(resp => {
          console.log(resp)
        })
      }
    })
  }

  getData = () => {
    this.setState({
      isLoading:true
    })
    getArticles(this.state.offset, this.state.limited)
    .then(resp => {
      const columnKeys=Object.keys(resp.list[0])
      const columns=this.createColumns(columnKeys)
      this.setState ({
        total:resp.total,
        dataSource:resp.list,
        columns,
      })
    })
    .catch(ree => {
      //，处理错误，虽然有全局处理
    })
    .finally(() => {
      this.setState({
        isLoading:false
      })
    })
  }

//分页
  onPageChange = (page, pageSize) => {
    console.log({page, pageSize})
    this.setState({
      offset:pageSize * (page - 1),
      limited:pageSize
    },() => {
      this.getData()
    })
  }

  onShowSizeChange = (current,size) => {
    //这里要注意和产品聊好需求，回到第一页还是留在当前页
    console.log({current,size})
    this.setState({
      offset:0,
      limited:size
    },() => {
      this.getData()
    })
  }

  toExcel = () => {
  //在实际项目中，实际上这个功能是前端发送一个ajax请求到后端，然后后端返回一个文件下载的地址。
  //组合数据
  const data=[Object.keys(this.state.dataSource[0])] //[['id','title','author','amount','createAt']]
  for (let i = 0; i < this.state.dataSource.length; i++){
    // data.push(Object.values(this.state.dataSource[i])) 这样写有些不好
    data.push([
      this.state.dataSource[i].id,
      this.state.dataSource[i].title,
      this.state.dataSource[i].author,
      this.state.dataSource[i].amount,
      moment(this.state.dataSource[i].createAt).format('YYYY年MM月DD日 hh:mm:ss')
    ])
  }
    const ws=XLSX.utils.aoa_to_sheet(data)
    const wb=XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(wb, ws, "SheetJS")
    // XLSX.writeFile(wb, "sheetjs.xlsx")
    XLSX.writeFile(wb, `articles-${this.state.offset / this.state.limited + 1}-${moment().format('YYYYMMDDHHmmss')}.xlsx`)
}

  componentDidMount(){
    this.getData()
  }
    render() {
        return (
            <Card
              title="文章列表"
              bordered={false}
              extra={<Button onClick={this.toExcel}>导出excel</Button>}
            >
            <Table
            rowKey={record => record.id}
              dataSource={this.state.dataSource}
              columns={this.state.columns}
              loading={this.state.isLoading}
              pagination={{
                current:this.state.offset / this.state.limited + 1,
                total:this.state.total,
                hideOnSinglePage:true,
                showQuickJumper:true,
                showSizeChanger:true,
                onChange:this.onPageChange,
                onShowSizeChange:this.onShowSizeChange,
                pageSizeOptions:['10', '15', '20', '30']
              }}
            />
            </Card>
        )
    }
}

之前有一个小错误，现在改正了。

Article 下的 index.js：

  deleteArticle = (record) => {
    // console.log({id})
    Modal.confirm({
      title:'此操作不可逆，请谨慎！',
      content:<Typography>确定要删除<span style={{color:'#f00'}}>{record.title}</span>吗？</Typography>,
      okText:'别磨叽，赶紧删！',
      cancelText:'我点错了',
      onCancel(){
        console.log('aa')
        
      },
      onOk(){
        deleteArticle(record.id)
        .then(resp => {
          console.log(resp)
        })
      }
    })
  }

按钮部分改动为手动关闭，而不是直接关闭

import React, { Component } from 'react'
import moment from 'moment'
// eslint-disable-next-line
import XLSX from 'xlsx'
import {
    Card,
    Button,
    Table,
    Tag,
    Modal,
    Typography
} from 'antd'; 
import { getArticles,deleteArticle } from '../../requests'

const ButtonGroup = Button.Group

const titleDisplayMap={
  id:'id',
  title:'标题',
  author:'作者',
  createAt:'创建时间',
  amount:'阅读量'
}
export default class ArticleList extends Component {
  constructor(){
    super()
    this.state={
      dataSource: [
        //初始化的数据暂时不用了
      ],
      total:0,
      isLoading:false,
      //默认从多少开始
      offset:0,
      limited:10
    }
  }
  createColumns = (columnKeys) => {
    const columns = columnKeys.map(item => {
      if (item === 'amount') {
        return {
          title: titleDisplayMap[item],
          key: item,
          render: (text, record) => {
            const { amount } = record
            // 这里是根据一个数字的大小做一个条件渲染
            // 同理，可以做职位级别不同的颜色
            // 总经理：'001'，经理：'002'，主管: '003' 
            // const titleMap = {
            //   '001': 'red',
            //   '002': '#09f',
            //   '003': 'green'
            // }
            // return <Tag color={titleMap[titleKey]}>{record.title}</Tag>
            return <Tag color={amount > 230 ? 'red' : 'green'}>{record.amount}</Tag>
          }
        }
      }
      if(item === 'createAt'){
        return {
          title: titleDisplayMap[item],
          key: item,
          render: (text, record) => {
            const { createAt } = record
            return moment(createAt).format('YYYY年MM月DD日 hh:mm:ss')
          }
        }
      }
      return {
        title:titleDisplayMap[item],
        dataIndex:item,
        key:item
      }
    })
    columns.push({
      title:'操作',
      key:'action',
      render:(text, record) => {
        return (
          <ButtonGroup>
            <Button size="small" type="primary">编辑</Button>
            <Button size="small" type="danger" onClick={this.deleteArticle.bind(this, record)}>删除</Button>
          </ButtonGroup>
        )
      }
    })
    return columns
  }

  deleteArticle = (record) => {
    // console.log({id})
    // Modal.confirm({
    //   title:'此操作不可逆，请谨慎！',
    //   content:<Typography>确定要删除<span style={{color:'#f00'}}>{record.title}</span>吗？</Typography>,
    //   okText:'别磨叽，赶紧删！',
    //   cancelText:'我点错了',
    //   onCancel(){
    //     console.log('aa')
        
    //   },
    //   onOk(){
    //     deleteArticle(record.id)
    //     .then(resp => {
    //       console.log(resp)
    //     })
    //   }
    // })
  }

  getData = () => {
    this.setState({
      isLoading:true
    })
    getArticles(this.state.offset, this.state.limited)
    .then(resp => {
      const columnKeys=Object.keys(resp.list[0])
      const columns=this.createColumns(columnKeys)
      this.setState ({
        total:resp.total,
        dataSource:resp.list,
        columns,
      })
    })
    .catch(ree => {
      //，处理错误，虽然有全局处理
    })
    .finally(() => {
      this.setState({
        isLoading:false
      })
    })
  }

//分页
  onPageChange = (page, pageSize) => {
    console.log({page, pageSize})
    this.setState({
      offset:pageSize * (page - 1),
      limited:pageSize
    },() => {
      this.getData()
    })
  }

  onShowSizeChange = (current,size) => {
    //这里要注意和产品聊好需求，回到第一页还是留在当前页
    console.log({current,size})
    this.setState({
      offset:0,
      limited:size
    },() => {
      this.getData()
    })
  }

  toExcel = () => {
  //在实际项目中，实际上这个功能是前端发送一个ajax请求到后端，然后后端返回一个文件下载的地址。
  //组合数据
  const data=[Object.keys(this.state.dataSource[0])] //[['id','title','author','amount','createAt']]
  for (let i = 0; i < this.state.dataSource.length; i++){
    // data.push(Object.values(this.state.dataSource[i])) 这样写有些不好
    data.push([
      this.state.dataSource[i].id,
      this.state.dataSource[i].title,
      this.state.dataSource[i].author,
      this.state.dataSource[i].amount,
      moment(this.state.dataSource[i].createAt).format('YYYY年MM月DD日 hh:mm:ss')
    ])
  }
    const ws=XLSX.utils.aoa_to_sheet(data)
    const wb=XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(wb, ws, "SheetJS")
    // XLSX.writeFile(wb, "sheetjs.xlsx")
    XLSX.writeFile(wb, `articles-${this.state.offset / this.state.limited + 1}-${moment().format('YYYYMMDDHHmmss')}.xlsx`)
}

  componentDidMount(){
    this.getData()
  }
    render() {
        return (
            <Card
              title="文章列表"
              bordered={false}
              extra={<Button onClick={this.toExcel}>导出excel</Button>}
            >
            <Table
            rowKey={record => record.id}
              dataSource={this.state.dataSource}
              columns={this.state.columns}
              loading={this.state.isLoading}
              pagination={{
                current:this.state.offset / this.state.limited + 1,
                total:this.state.total,
                hideOnSinglePage:true,
                showQuickJumper:true,
                showSizeChanger:true,
                onChange:this.onPageChange,
                onShowSizeChange:this.onShowSizeChange,
                pageSizeOptions:['10', '15', '20', '30']
              }}
            />
            <Modal
              title='此操作不可逆，请谨慎！'
              content="aaaaa"
              visible={true}
            />
            </Card>
        )
    }
}

结果会弹出框，但点击确认、取消都不执行

正规用法：

import React, { Component } from 'react'
import moment from 'moment'
// eslint-disable-next-line
import XLSX from 'xlsx'
import {
    Card,
    Button,
    Table,
    Tag,
    Modal,
    Typography
} from 'antd'; 
import { getArticles,deleteArticle } from '../../requests'

const ButtonGroup = Button.Group

const titleDisplayMap={
  id:'id',
  title:'标题',
  author:'作者',
  createAt:'创建时间',
  amount:'阅读量'
}
export default class ArticleList extends Component {
  constructor(){
    super()
    this.state={
      dataSource: [
        //初始化的数据暂时不用了
      ],
      total:0,
      isLoading:false,
      //默认从多少开始
      offset:0,
      limited:10,
      //默认是空
      deleteArticleTitle:'',
      isShowArticleModal:false
    }
  }
  createColumns = (columnKeys) => {
    const columns = columnKeys.map(item => {
      if (item === 'amount') {
        return {
          title: titleDisplayMap[item],
          key: item,
          render: (text, record) => {
            const { amount } = record
            // 这里是根据一个数字的大小做一个条件渲染
            // 同理，可以做职位级别不同的颜色
            // 总经理：'001'，经理：'002'，主管: '003' 
            // const titleMap = {
            //   '001': 'red',
            //   '002': '#09f',
            //   '003': 'green'
            // }
            // return <Tag color={titleMap[titleKey]}>{record.title}</Tag>
            return <Tag color={amount > 230 ? 'red' : 'green'}>{record.amount}</Tag>
          }
        }
      }
      if(item === 'createAt'){
        return {
          title: titleDisplayMap[item],
          key: item,
          render: (text, record) => {
            const { createAt } = record
            return moment(createAt).format('YYYY年MM月DD日 hh:mm:ss')
          }
        }
      }
      return {
        title:titleDisplayMap[item],
        dataIndex:item,
        key:item
      }
    })
    columns.push({
      title:'操作',
      key:'action',
      render:(text, record) => {
        return (
          <ButtonGroup>
            <Button size="small" type="primary">编辑</Button>
            <Button size="small" type="danger" onClick={this.deleteArticle.bind(this, record)}>删除</Button>
          </ButtonGroup>
        )
      }
    })
    return columns
  }

  deleteArticle = (record) => {
    // console.log({id})
    //使用函数式的方式调用，定制化没有那么强
    // Modal.confirm({
    //   title:'此操作不可逆，请谨慎！',
    //   content:<Typography>确定要删除<span style={{color:'#f00'}}>{record.title}</span>吗？</Typography>,
    //   okText:'别磨叽，赶紧删！',
    //   cancelText:'我点错了',
    //   onCancel(){
    //     console.log('aa')
        
    //   },
    //   onOk(){
    //     deleteArticle(record.id)
    //     .then(resp => {
    //       console.log(resp)
    //     })
    //   }
    // })
    this.setState({
      isShowArticleModal:true,
      deleteArticleTitle:record.title
    })
  }

  getData = () => {
    this.setState({
      isLoading:true
    })
    getArticles(this.state.offset, this.state.limited)
    .then(resp => {
      const columnKeys=Object.keys(resp.list[0])
      const columns=this.createColumns(columnKeys)
      this.setState ({
        total:resp.total,
        dataSource:resp.list,
        columns,
      })
    })
    .catch(ree => {
      //，处理错误，虽然有全局处理
    })
    .finally(() => {
      this.setState({
        isLoading:false
      })
    })
  }

//分页
  onPageChange = (page, pageSize) => {
    console.log({page, pageSize})
    this.setState({
      offset:pageSize * (page - 1),
      limited:pageSize
    },() => {
      this.getData()
    })
  }

  onShowSizeChange = (current,size) => {
    //这里要注意和产品聊好需求，回到第一页还是留在当前页
    console.log({current,size})
    this.setState({
      offset:0,
      limited:size
    },() => {
      this.getData()
    })
  }

  toExcel = () => {
  //在实际项目中，实际上这个功能是前端发送一个ajax请求到后端，然后后端返回一个文件下载的地址。
  //组合数据
  const data=[Object.keys(this.state.dataSource[0])] //[['id','title','author','amount','createAt']]
  for (let i = 0; i < this.state.dataSource.length; i++){
    // data.push(Object.values(this.state.dataSource[i])) 这样写有些不好
    data.push([
      this.state.dataSource[i].id,
      this.state.dataSource[i].title,
      this.state.dataSource[i].author,
      this.state.dataSource[i].amount,
      moment(this.state.dataSource[i].createAt).format('YYYY年MM月DD日 hh:mm:ss')
    ])
  }
    const ws=XLSX.utils.aoa_to_sheet(data)
    const wb=XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(wb, ws, "SheetJS")
    // XLSX.writeFile(wb, "sheetjs.xlsx")
    XLSX.writeFile(wb, `articles-${this.state.offset / this.state.limited + 1}-${moment().format('YYYYMMDDHHmmss')}.xlsx`)
}

  componentDidMount(){
    this.getData()
  }
    render() {
        return (
            <Card
              title="文章列表"
              bordered={false}
              extra={<Button onClick={this.toExcel}>导出excel</Button>}
            >
            <Table
            rowKey={record => record.id}
              dataSource={this.state.dataSource}
              columns={this.state.columns}
              loading={this.state.isLoading}
              pagination={{
                current:this.state.offset / this.state.limited + 1,
                total:this.state.total,
                hideOnSinglePage:true,
                showQuickJumper:true,
                showSizeChanger:true,
                onChange:this.onPageChange,
                onShowSizeChange:this.onShowSizeChange,
                pageSizeOptions:['10', '15', '20', '30']
              }}
            />
            <Modal
              title='此操作不可逆，请谨慎！'
              visible={this.state.isShowArticleModal}
            >
              <Typography>确定要删除<span style={{color:'#f00'}}>{this.state.deleteArticleTitle}</span>吗？</Typography>
            </Modal>
            </Card>
        )
    }
}

a113314be9b889870a2bbdc2e0619d38.png

下面做，点击后关闭

import React, { Component } from 'react'
import moment from 'moment'
// eslint-disable-next-line
import XLSX from 'xlsx'
import {
    Card,
    Button,
    Table,
    Tag,
    Modal,
    Typography
} from 'antd'; 
import { getArticles,deleteArticle } from '../../requests'

const ButtonGroup = Button.Group

const titleDisplayMap={
  id:'id',
  title:'标题',
  author:'作者',
  createAt:'创建时间',
  amount:'阅读量'
}
export default class ArticleList extends Component {
  constructor(){
    super()
    this.state={
      dataSource: [
        //初始化的数据暂时不用了
      ],
      total:0,
      isLoading:false,
      //默认从多少开始
      offset:0,
      limited:10,
      //默认是空
      deleteArticleTitle:'',
      isShowArticleModal:false
    }
  }
  createColumns = (columnKeys) => {
    const columns = columnKeys.map(item => {
      if (item === 'amount') {
        return {
          title: titleDisplayMap[item],
          key: item,
          render: (text, record) => {
            const { amount } = record
            // 这里是根据一个数字的大小做一个条件渲染
            // 同理，可以做职位级别不同的颜色
            // 总经理：'001'，经理：'002'，主管: '003' 
            // const titleMap = {
            //   '001': 'red',
            //   '002': '#09f',
            //   '003': 'green'
            // }
            // return <Tag color={titleMap[titleKey]}>{record.title}</Tag>
            return <Tag color={amount > 230 ? 'red' : 'green'}>{record.amount}</Tag>
          }
        }
      }
      if(item === 'createAt'){
        return {
          title: titleDisplayMap[item],
          key: item,
          render: (text, record) => {
            const { createAt } = record
            return moment(createAt).format('YYYY年MM月DD日 hh:mm:ss')
          }
        }
      }
      return {
        title:titleDisplayMap[item],
        dataIndex:item,
        key:item
      }
    })
    columns.push({
      title:'操作',
      key:'action',
      render:(text, record) => {
        return (
          <ButtonGroup>
            <Button size="small" type="primary">编辑</Button>
            <Button size="small" type="danger" onClick={this.deleteArticle.bind(this, record)}>删除</Button>
          </ButtonGroup>
        )
      }
    })
    return columns
  }

  deleteArticle = (record) => {
    //使用函数式的方式调用，定制化没有那么强
    this.setState({
      isShowArticleModal:true,
      deleteArticleTitle:record.title
    })
  }

  hideDeleteModal = () =>{
    this.setState({
      isShowArticleModal:false,
      deleteArticleTitle:''
    })
  }

  getData = () => {
    this.setState({
      isLoading:true
    })
    getArticles(this.state.offset, this.state.limited)
    .then(resp => {
      const columnKeys=Object.keys(resp.list[0])
      const columns=this.createColumns(columnKeys)
      this.setState ({
        total:resp.total,
        dataSource:resp.list,
        columns,
      })
    })
    .catch(ree => {
      //，处理错误，虽然有全局处理
    })
    .finally(() => {
      this.setState({
        isLoading:false
      })
    })
  }

//分页
  onPageChange = (page, pageSize) => {
    console.log({page, pageSize})
    this.setState({
      offset:pageSize * (page - 1),
      limited:pageSize
    },() => {
      this.getData()
    })
  }

  onShowSizeChange = (current,size) => {
    //这里要注意和产品聊好需求，回到第一页还是留在当前页
    console.log({current,size})
    this.setState({
      offset:0,
      limited:size
    },() => {
      this.getData()
    })
  }

  toExcel = () => {
  //在实际项目中，实际上这个功能是前端发送一个ajax请求到后端，然后后端返回一个文件下载的地址。
  //组合数据
  const data=[Object.keys(this.state.dataSource[0])] //[['id','title','author','amount','createAt']]
  for (let i = 0; i < this.state.dataSource.length; i++){
    data.push([
      this.state.dataSource[i].id,
      this.state.dataSource[i].title,
      this.state.dataSource[i].author,
      this.state.dataSource[i].amount,
      moment(this.state.dataSource[i].createAt).format('YYYY年MM月DD日 hh:mm:ss')
    ])
  }
    const ws=XLSX.utils.aoa_to_sheet(data)
    const wb=XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(wb, ws, "SheetJS")
    // XLSX.writeFile(wb, "sheetjs.xlsx")
    XLSX.writeFile(wb, `articles-${this.state.offset / this.state.limited + 1}-${moment().format('YYYYMMDDHHmmss')}.xlsx`)
}

  componentDidMount(){
    this.getData()
  }
    render() {
        return (
            <Card
              title="文章列表"
              bordered={false}
              extra={<Button onClick={this.toExcel}>导出excel</Button>}
            >
            <Table
            rowKey={record => record.id}
              dataSource={this.state.dataSource}
              columns={this.state.columns}
              loading={this.state.isLoading}
              pagination={{
                current:this.state.offset / this.state.limited + 1,
                total:this.state.total,
                hideOnSinglePage:true,
                showQuickJumper:true,
                showSizeChanger:true,
                onChange:this.onPageChange,
                onShowSizeChange:this.onShowSizeChange,
                pageSizeOptions:['10', '15', '20', '30']
              }}
            />
            <Modal
              title='此操作不可逆，请谨慎！'
              visible={this.state.isShowArticleModal}
              onCancel={this.hideDeleteModal}
            >
              <Typography>
                确定要删除<span style={{color:'#f00'}}>{this.state.deleteArticleTitle}</span>吗？
              </Typography>
            </Modal>
            </Card>
        )
    }
}
取消和 x 按钮的取消，都做好了

这样做，按钮就是单独控制的！之前的ui是按钮直接取消了。

over

weixin_39871562
关注
Web的存储机制——Cookie、localStorage、sessionStorage
ChronoStein的博客
05-20 319
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 一、cookies 二、sessionStorage、localStorage 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习
Vue学习笔记（四）基于Vue2的学生信息增删查案例 | Vuex组件简介、工作原理 | Vuex的三层结构——store负责响应组件、mutations负责操作数据、state负责存储数据
希望每天都能进步一点点
06-24 1325
Vue学习笔记（四）基于Vue2的学生信息增删查案例 | Vuex组件简介、工作原理 | Vuex的三层结构——store负责响应组件、mutations负责操作数据、state负责存储数据
根据id删除localstorage数据_DOM总结：数据存储（cookie，storage）
weixin_39765339的博客
12-06 195
浏览器中的cookie是一段小型的文本文件，根据不同浏览器对cookie的实现，大概都是在4kb大小。cookie是由键值对构成，键值对中间用分号和空格来隔开。虽然cookie是存储在浏览器端的，但是大部分时候，我们是在服务器端对cookie进行设置。我们可以通过在HTTP返回体里面，通过设置 Set-Cookie值的头部，来告诉浏览器端需要存储的cookie到浏览器可以访问当前域的cookie，...
根据id删除localstorage数据_localStorage和sessionStorage简介
weixin_39859988的博客
12-04 159
localStorage和sessionStorageWeb存储API的一部分是在本地保存键/值对的两个很好的工具。与使用cookie相比，localStorage和sessionStorage都具有优势：数据仅保存在本地，服务器无法读取，从而消除了cookie所带来的安全性问题。它允许保存更多数据（10Mb大多数浏览器为）。它使用起来更简单，语法也很简单。所有现代浏览器也都支持它，因此您可以立即...
axios请求方式delete根据id和请求参数删除数据
m0_72929120的博客
10-19 1099
【代码】axios请求方式delete根据id和请求参数删除数据。
阶段二-vue+axios实现CRM系统删除用户功能
weixin_45732755的博客
11-10 189
vue+axios实现删除用户功能
Lumen企业站内容管理实战 -文章分类更新状态和删除
wangpeng52758的博客
01-08 291
文章分类更新状态和删除 状态的更新和删除，放在一起介绍了，因为简单，哈哈。 更改状态和删除的路由已经写好了， 在/routes/web.php文件中， $router->post('/category/del/{id:[1-9]+}', 'CategoryController@del'); // 删除文章分类 $router->post('/category/status/...
LocalStorage与IndexDB的使用
weixin_44533898的博客
01-18 1799
LocalStorage与IndexDB的使用LocalStorageIndexDB LocalStorage localstorage 用于本地存储，解决了cookie的存储空间不足问题，cookie存储空间一般为4K，而localstorage一般在浏览器分配的空间大小为5M，(不同的浏览器分配的存储空间大小不等)。 localstorage与sessionStorage相比，生命周期更长，便于数据长期存储。localstorage值类型限定为String；在浏览器隐私模式下是不可读取的；（存储内容过多
一步步使用SpringBoot结合Vue实现登录和用户管理功能
最新发布
2301_78145364的博客
04-21 1026
按照官方文档，来进行MP的分页。作为Mybatis的增强工具，MP自然是支持自定义sql的。其实在MP中，单表操作基本上是不用自己写sql。这里只是为了演示MP的自定义sql，毕竟在实际应用中，批量操作、多表操作还是更适合自定义sql实现。修改pom.xml，在 中添加：**/*.xmltrue配置文件：在application.properties中添加mapper扫描路径及实体类别名包今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！
前端曝光数据埋点——Intersection Observer+vue指令
weixin_34279061的博客
04-01 3785
一、背景介绍在电商产品中（可以打开你的淘宝、天猫、京东App），通过对商品的曝光进行数据埋点，就能反推出用户的行为和交互习惯，从而优化推荐和搜索算法以及交互，最终的目的当然是为了增加用户购买力。曝光：商品出现在用户眼前，也就是浏览器视窗，可谓之曝光最直白的两种方法1、监听滚动事件，通过[Element.getBoundingClientRect() - Web API 接口参考 | MDN]计...
使用axios对数据库进行增删改查
weixin_51504215的博客
04-08 737
值得注意的是，请求发送时，数据怎么怎么跟着发送过去的。以及数据格式要如何对应上去。这里我就用前端代码演示一下增删改查数据提交格式，需要源码的后台私信我。
第2阶段13-vue+axios实现CRM系统删除用户功能
YZ6699ZY的博客
11-11 413
vue+axios实现CRM系统删除用户功能
axios删除数据的操作
weixin_43405946的博客
11-03 6636
第一步：设置一个点击事件，在methods：{}里面先获取数据库里面的id值 第二部：引入一个删除数据库操作的后台代码，引入第一步获取的数据库id值然后进行删除操作就可以了 ...
html：localStorage的存储,读取,删除 及html对象转化
qq_45469347的博客
06-15 577
localStorage存储 我们通过以下方式将数据储存到localStorage中 window.localStorage.setItem('key',value) 但有时value为一个对象Object,以上面的方式写入,会出现读取的返回值为 {object Object}的情况,但这并不是我们想要的,此时我们需要使用新的方式 传入Object window.localStorage.setItem('param',JSON.stringify(Object)) 通过JSON.strin
ajax删除怎么传id,AJAX请求根据其id删除列。
weixin_42301889的博客
08-05 916
美好的一天。我在管理页面上工作，基本上它是一个内容管理系统。我想根据他们的ID删除数据。但不幸的是，我在htpp请求中遇到错误。这是错误。AJAX请求根据其id删除列。Request URL: admin/ajax_deleteRequest Method:POSTStatus Code:500 Internal Server ErrorRemote Address:144.76.136.165:...
ajax实现多个删除数据,Ajax添加数据与删除篇实现代码
weixin_35822534的博客
08-05 599
一团网资讯一团资讯 > ajax > Ajax添加数据与删除篇实现代码Ajax添加数据与删除篇实现代码2018-01-23 10:48:38 发布者：来源网络怎么样效果是不是很酷？上面的文本框里是前台的html源码．我们先来讲一下我们在前端干了什么．从body标签开始讲起．一段友情提示的文字．告诉你会出现些什么情况！添加数据的文本框和按扭！用来向服务端数据库写入数据内容．一个s...
前后端联调---增删改查
m0_67345482的博客
07-03 753
django vue
axios获取数据 增删改查
Q_MUMU的博客
12-19 7975
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &a
HTML5实战：记事本应用开发教程——jQuery Mobile与localStorage
本教程中，开发者会学习如何使用jQuery Mobile创建用户友好的界面，同时利用localStorage对象在客户端存储数据，实现离线应用的功能。localStorage允许在浏览器中持久化存储键值对数据，这对于像记事本应用这样需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值