遇到的一些简单的小问题

闽南,

已于 2023-05-17 19:39:30 修改

阅读量2.9k

点赞数

分类专栏：项目问题文章标签：前端 javascript vue.js

于 2023-05-17 15:50:35 首次发布

本文链接：https://blog.csdn.net/A_lose/article/details/130726575

版权

项目问题专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了前端开发中的几个关键功能实现，包括制作简单的倒计时效果，无刷新页面强制更新，限制数据添加数量，实现表单数据的修改，处理背景图片展示，使用react-draggable库进行拖拽操作，利用antd创建表格以及使用upload组件进行图片上传，还有表单重置和路由跳转动画的运用。

摘要由CSDN通过智能技术生成

1、制作一个简单的倒计时效果

let a = setInterval(() => {
            let nu = 3
            nu = --nu
            setNum(nu)
            clearInterval(a)
            let b = setInterval(() => {
                nu--
                setNum(nu)
                if (nu === 0) {
                    clearInterval(b)
                    setPageNum(pageNum + 1)
                    setRightNum(rightNum + 1)
                    setQueNum(queNum + 1)
                    setNum(3)
                    serIsRight(false)
                }
            }, 1000)
        }, 1000)

这个是倒计时3s效果

2、如果页面不刷新如何强制刷新？

window.location.reload()

3、添加数据时，判断如果有限制个数如何限制？

const addList = () => {
        // console.log(inp.current.value); 和val一样
        let addData = { ...ImgData[ind], text: val }
        if (imgList.length < 4) {
            imgList.push(addData)
            setImg([...imgList])
            setVal('')
        } else {
            Toast.show({
                content: '最多可以许四个愿望',
                icon: <ExclamationOutline />,
            })
            return false
        }
    }

4、点击修改如何让页面上方表单数据与点击的数据相对应并展示到上方input框中？

 const editData = () => {
        // console.log({ ...imgList[ind], text: val });
        let newImgList = imgList.map((item, index) => {
            if (index === ind) {
                return { ...item, text: val }
            }
            return { ...item }
        })
        setImg([...newImgList])
        setEdit(false)
        setVal('')
    }

5、当设置的是背景图片，而并非图片时如何让图片展示得当？

<div onClick={handleImg(item, index)} style={{ backgroundImage: 'url' + `(${item.img})` }} className="img_img">
    <span>{item.text}</span>
    <button onClick={DelList(index)}>X</button>
</div>
//并且要在该div的class样式中设置 background-size: 150px

6、进行拖拽用一个简单的库包裹即可如何实现？

//下载 react-draggable库 并且引入下方库
import Draggable from 'react-draggable'
//包裹住需要拖拽的盒子 <Draggable></Draggable>

7、如何使用antd中的table表格？

//获取list
const getList = async () => {
        let { data } = await axios.get('http://localhost:5000/listData')
        setList(data.data)
    }

//定义行
const columns = [
        {
            title: '表单名称',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '提交数量',
            dataIndex: 'num',
            key: 'num',
        },
        {
            title: '浏览量',
            dataIndex: 'seeNum',
            key: 'seeNum',
        },
        {
            title: '排序',
            dataIndex: 'sorts',
            key: 'sorts',
        },
        {
            title: '是否显示',
            dataIndex: 'isShow',
            key: 'isShow',
            render: (record, data) => (
                <Switch onChange={handleSwitch(record, data)} checked={record} />
            )
        },
        {
            title: '头像',
            dataIndex: 'img',
            key: 'img',
            render: (record) => (
                <img src={record} width='50px' height='50px' />
            )
        },
        {
            title: '添加时间',
            dataIndex: 'times',
            key: 'times',
        },
            //record表示当前显示的数据的值
        {
            title: '操作',
            dataIndex: 'listId',
            key: 'listId',
            render: (record) => (

                <div className='list_btn'>
                    <span onClick={clickYulan(record)}>预览</span>
                    <Popconfirm okText="确认" cancelText="取消" title="你确定要删除嘛？" onConfirm={delList(record)}>
                        <span>删除</span>
                    </Popconfirm>
                    <span onClick={() => { setIsAdd(true) }}>添加</span>
                </div>

            )
        },
    ];
//下方使用table表格  dataSource是数据库引入的数据  columns是我们展示的数据 key对应着dataSource中的数据
<Table bordered dataSource={list} columns={columns} rowKey="listId" pagination={{
                        pageSize: 3,
                        defaultCurrent: 1,
                        onChange: handlePage,
                        total: list.length
                    }} />

8、如何使用upload图片上传组件？

//后端
//app.js文件中
//图片上传
app.use('/upload', express.static(__dirname + '/upload'))
//routes中的index.js 下载插件multiparty 并导入
var multiparty = require('multiparty')

//图片上传接口
router.post('/uploadimg', async (req, res) => {
  const form = new multiparty.Form()
  form.uploadDir = "upload"
  form.parse(req, (err, formData, imgData) => {
    // let token = "Bearer " +jwt.sign(imgData,"lzt",{expiresIn:"1h"})
    console.log(imgData.file[0].path, '图片链接');
    res.send({
      code: 200,
      msg: "图片链接获取成功",
      urlimg: imgData.file[0].path
    })
  })
})

//搜索接口
router.get('/listData', async (req, res) => {
  let word = req.query.keyword
  var wordData = []
  if (word) {
    wordData = await listModel.find({ title: { $regex: `${word}` } })
    res.send({
      msg: "获取数据成功",
      data: wordData
    })
  } else {
    let Datas = await listModel.find()
    res.send({
      msg: "获取数据成功",
      data: Datas
    })
  }

});

//前端
//form表单中使用
<Form.Item label="头像"
                    valuePropName="fileList"
                    getValueFromEvent={normFile}
                    name="img"
                    rules={[{ required: true, message: "请输入表单的头像" }]}>
                    <Upload action="http://localhost:5000/uploadimg" listType='picture' >
                        <Button icon={<UploadOutlined />}>上传图片</Button>
                    </Upload>
</Form.Item>
//获取图片方法
const normFile = (e) => {
        console.log('Upload event:', e);
        if (Array.isArray(e)) {
            return e;
        }
        return e?.fileList;
    };

//给表单绑定事件可以获取到图片的数据 是一个数组
const getSubmit = async (values) => {
        console.log(values, "values");
        onFinish(values)
    }

//添加表单数据方法 在方法中必须加上前缀 'http://localhost:5000/' +
    const onFinish = async (values) => {
        console.log(values, '获取表单数据');
        const params = {
            listId: Date.now(),
            title: values.title,
            num: values.num,
            seeNum: values.seeNum,
            sorts: values.sorts,
            img: 'http://localhost:5000/' + values.img[0].response.urlimg,
            isShow: false,
            times: values.times
            //详情 editText
        }
        console.log(params);
        await axios.post('http://localhost:5000/addList', params)
        message.success('列表添加成功')
        closeDialog()
        getList()
    }

9、表单重置清空？

//定义form
const [form] = Form.useForm()

//给表单添加form属性
<Form form={form}></Form>
//给清空按钮绑定事件
<button onclick={()=>{form.resetFields()}}></button>

10、路由跳转动画

//下载react-transition-group 引入
import { SwitchTransition, CSSTransition } from 'react-transition-group'
//在App.js文件中
<SwitchTransition>
        <CSSTransition
          key={useLocation().pathname}
          classNames="fade"
          timeout={1000}
        >
          <RouterView />
        </CSSTransition>
</SwitchTransition>

//css中定义
.fade-enter {
    /* opacity: 0; */
    transform: rotateY(90deg);
    /* transform: translateX(100%); */
}

.fade-exit {
    /* opacity: 1; */
    transform: rotateY(0deg);

}

.fade-enter-active {
    /* opacity: 1; */
    transform: rotateY(0deg);


}

.fade-exit-active {
    transform: rotateY(90deg);

    /* opacity: 0; */
}

.fade-enter-active,
.fade-exit-active {
    transition: all 1000ms;
}

未完待更新后续继续添加