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

頁面交互響應進度條 NProgress 入門實踐

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

一、前言

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

頁面交互響應進度條

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

官方體驗地址：
https://ricostacruz.com/nprogress/

二、使用方法

1.安裝 NProgress 到工程中：

npm install nprogress

2.導入到項目中

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

3.在響應程序前后，使用 NProgress

// 開始
NProgress.start();

// 響應程序
{...}

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

三、代碼演示

（1）前端

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

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>
	// 導入 NProgress 包對應的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）效果

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

四、小結(jié)

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

本文全部代碼

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

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

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學您好！

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