激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

頁面交互響應(yīng)進(jìn)度條 NProgress 入門實(shí)踐

發(fā)布時間：2024-01-18 20:14:04 瀏覽量：350次

一、前言

生活中，我們總是希望我們的付出，能得到對方的回應(yīng)。在web交互中，也是這樣的，我們總是希望我們的每一次點(diǎn)擊，都能得到應(yīng)有的響應(yīng)。

頁面交互響應(yīng)進(jìn)度條

而在當(dāng)網(wǎng)絡(luò)有延遲，web請求得不到快速回饋，我們會以為自己點(diǎn)擊無效，多次點(diǎn)擊使頁面崩潰，面對這些情況，使用 NProgress 就能使問題得到解決。

官方體驗(yàn)地址：
https://ricostacruz.com/nprogress/

二、使用方法

1.安裝 NProgress 到工程中：

npm install nprogress

2.導(dǎo)入到項(xiàng)目中

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

3.在響應(yīng)程序前后，使用 NProgress

// 開始
NProgress.start();

// 響應(yīng)程序
{...}

// 結(jié)束
NProgress.done();

三、代碼演示

（1）前端

基于ElementUI的Starter來編寫的，當(dāng)然基于 Vue/Webpack 都可以，只不過筆者想減少無關(guān)操作，快速演示效果。

ElementUI的Starter：
https://github.com/ElementUI/element-starter

<template>
	<div id="app">
		<img src="./assets/logo.png">
		<div>
			<el-button @click="startHacking">Start</el-button>
		</div>
	</div>
</template>
<script>
	// 導(dǎo)入 NProgress 包對應(yīng)的JS和CSS
	import NProgress from 'nprogress'
	import 'nprogress/nprogress.css'

	export default {
		methods: {
			async startHacking() {
				NProgress.start();

				const {
					data: res
				} = await this.$http.get("http://localhost/test/hello");

				this.$notify({
					title: 'OK',
					type: 'success',
					message: res,
					duration: 3000
				})

				NProgress.done();
			}
		}
	}
</script>
<style>
	#app {
		font-family: Helvetica, sans-serif;
		text-align: center;
	}
</style>

（2）后端

一個簡單的基于 SpringBoot 的接口

package com.cun.nprogressserver.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/test")
public class TestController {

    @GetMapping("/hello")
    public String hello() throws InterruptedException {
        // 模擬后端數(shù)據(jù)處理消耗的時間
        Thread.sleep(1000);
        return "hello";
    }
}

（3）效果

點(diǎn)擊 Start 按鈕，網(wǎng)頁上方有一條響應(yīng)條 ~

四、小結(jié)

NProgress 輕量易用，幾行代碼的引入，即可為項(xiàng)目增添幾許別致的動感，趕緊試試吧！

本文全部代碼

前端：
https://github.com/larger5/nprogress-web

后端：
https://github.com/larger5/nprogress-server

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定