Необходимые фрагменты кода для фронтенд-разработки проекта (1)

внешний интерфейс

"Это 18-й день моего участия в августовском испытании обновлений. Узнайте подробности события:Испытание августовского обновления"

В этой статье в основном обобщены функции инструментов, обычно используемые в проектах разработки интерфейса.

Рекомендуется создать новыйutils/index.jsфайл, используемый для сохранения всех служебных функций, находится в следующем каталоге:

utils
  index.js

Затем автоматически импортированный подключаемый модуль, установленный редактором, введите ключевое слово для импорта соответствующей функции инструмента.

image.png

Каждая функция была протестирована, пожалуйста, не стесняйтесь ее использовать.

преобразование формата данных

При отправке запросов данных на бэкэнд часто выполняется преобразование формата данных, иногда данные json конвертируются в urlencode, а иногда данные json конвертируются в данные формы

Объекты конвертируются в formdata

/**
 * 对象转化为formdata
 * @param {Object} object
 */

 export function getFormData(object) {
    const formData = new FormData()
    Object.keys(object).forEach(key => {
        const value = object[key]
        if (Array.isArray(value)) {
            value.forEach((subValue, i) =>
                formData.append(key + `[${i}]`, subValue)
            )
        } else {
            formData.append(key, object[key])
        }
    })
    return formData
}

Преобразование объекта в urlencode

{name:xxx,age:11} -> name=xxx&age=11 

/**
 * 对象转化为url参数
 * @param {*} obj
 */
export function getParams(obj) {
    return Object.keys(obj)
        .map(function(k) {
            return encodeURIComponent(k) + '=' + encodeURIComponent(obj[k])
        })
        .join('&')
}

кодировка URL в формат json'name=xxx&age=11' -> {name:xxx,age:11} 

function getObjByUrl(str){
  return   Object.fromEntries(new URLSearchParams(str));
}
//使用方式：getObjByUrl('a=b&name=xxx%20djdj')

Файл загрузки через браузер

По разным сценариям он делится следующим образом:

  • Загрузите строку.Сценарий использования состоит в том, чтобы создать файл самостоятельно, который может быть файлом json или файлом html, а затем загрузить его

  • загрузить файл

    • Браузер выполнит загрузку по умолчанию, например, excel, word и т. д.
    • Браузер будет выполнять предварительный просмотр по умолчанию, например, изображения, видео и т. д.

Принцип загрузки файлов заключается в использовании атрибута загрузки тега a.Функции инструмента следующие:


//下载一个链接 
export function download(link, name) {
    if(!name){
            name=link.slice(link.lastIndexOf('/') + 1)
    }
    let eleLink = document.createElement('a')
    eleLink.download = name
    eleLink.style.display = 'none'
    eleLink.href = link
    document.body.appendChild(eleLink)
    eleLink.click()
    document.body.removeChild(eleLink)
}

Принцип приведенного выше кода таков: создайте тег a, установите атрибут загрузки и установите атрибут href тега a равным ссылке для загрузки.

Для файлов, которые браузер загружает по умолчанию, таких как excel, word, ppt и другие файлы, вы можете напрямую вызвать метод загрузки. Принимайте каштан следующим образом:

download('http://111.229.14.189/file/1.xlsx')

Если вы хотите загрузить что-то в браузере, например Html страницы или данные json, вы можете вызвать следующий аспект

/**
 * 浏览器下载静态文件
 * @param {String} name 文件名
 * @param {String} content 文件内容
 */
export function downloadFile(name, content) {
    if (typeof name == 'undefined') {
        throw new Error('The first parameter name is a must')
    }
    if (typeof content == 'undefined') {
        throw new Error('The second parameter content is a must')
    }
    if (!(content instanceof Blob)) {
        content = new Blob([content])
    }
    const link = URL.createObjectURL(content)
    download(link, name)
}

Принцип состоит в том, чтобы создать объект Blob, затем сгенерировать адрес, который браузер может предварительно просмотреть, а затем вызвать описанный выше метод загрузки.

Пример использования следующий:

// 可以用来下载JSONString html等内容，只要是字符串都可以下载
const json=JSON.stringify({name:'xiaoming',age:11})
downloadFile('1.json',json)

Вы можете попробовать это в браузере

В третьем случае браузер по умолчанию выполнит загруженные файлы, такие как pdf, картинки, видео и т. д. Метод загрузки следующий:


//可以用来下载浏览器会默认预览的文件类型，例如mp4,jpg等
import axios from 'axios'
//提供一个link，完成文件下载，link可以是  http://xxx.com/xxx.xls
function downloadByLink(link,fileName){
    axios.request({
        url: link,
        responseType: 'blob'
    }).then(res => {
	const link=URL.createObjectURL(res.data)
        download(link, fileName)
    })

}

Принцип очень прост: запросите ссылку для загрузки, затем создайте объект Blob, затем создайте URL-адрес, который может просмотреть браузер, и вызовите метод загрузки.

Это также можно сделать для некоторых интерфейсов загрузки на серверной части, которые возвращают потоки данных.

Но есть нюанс, то есть он поддерживает ссылки только из одного источника, если ссылки из разных источников, то просто пробрасывать локально, или пусть бэкенд пересылает.

Наконец, поместите исполняемую демонстрацию, сохраните следующий HTML-код и запустите его в браузере, чтобы увидеть эффект.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="http://111.229.14.189/file/axios.min.js"></script>
    </head>
    <body>
        <button id="downloadCustom">下载自定义内容</button>
        <button id="downloadExcel">下载excel</button>
        <button id="downloadPic">下载图片</button>
        <script>
            //提供一个链接用户下载内容
            function download(link, name) {
                if (!name) {
                    //如果没有提供名字，从给的Link中截取最后一坨
                    name = link.slice(link.lastIndexOf('/') + 1)
                }
                let eleLink = document.createElement('a')
                eleLink.download = name
                eleLink.style.display = 'none'
                eleLink.href = link
                document.body.appendChild(eleLink)
                eleLink.click()
                document.body.removeChild(eleLink)
            }
            function downloadFile(name, content) {
                if (typeof name == 'undefined') {
                    throw new Error('The first parameter name is a must')
                }
                if (typeof content == 'undefined') {
                    throw new Error('The second parameter content is a must')
                }
                if (!(content instanceof Blob)) {
                    content = new Blob([content])
                }
                const link = URL.createObjectURL(content)
                download(link, name)
            }

            function downloadByLink(link, fileName) {
                axios
                    .request({
                        url: link,
                        responseType: 'blob'
                    })
                    .then((res) => {
                        const link = URL.createObjectURL(res.data)
                        download(link, fileName)
                    })
            }

            // 下载自定义的字符串
            function downloadCustom() {
                // 可以用来下载JSONString html等内容，只要是字符串都可以下载
                const json = JSON.stringify({ name: 'xiaoming', age: 11 })
                downloadFile('1.json', json)
            }
            //下载浏览器不会默认预览的文件，例如excel,word,ppt
            function downloadExcel() {
                download('http://111.229.14.189/file/1.xlsx')
            }
            // 下载浏览器会默认执行预览的文件，例如
            function downloadPic() {
                // 需要转发才可以，否则会有同源策略
                downloadByLink('http://111.229.14.189/file/1.jpg')
            }

            ;(function () {
                document.getElementById(
                    'downloadCustom'
                ).onclick = downloadCustom
                document.getElementById('downloadExcel').onclick = downloadExcel
                document.getElementById('downloadPic').onclick = downloadPic
            })()
        </script>
    </body>
</html>

В следующей статье продолжим рассказывать о функциях инструментов, которые будут обновлены завтра.

Категории