亚洲AV免费看深爱成人|日韩av另类一级特黄片在线|中国免费一级黄片|国产av一二三区|亚洲有码AV在线|久久亚洲国产日韩欧美|成人免费AV网站|婷婷一区综合一区|亚洲AV无码导航|高级欧美成人网站

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

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

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

一、前言

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

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

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

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

二、使用方法

1.安裝 NProgress 到工程中：

npm install nprogress

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

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）效果

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

四、小結(jié)

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

本文全部代碼

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

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

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗證碼
x

同學(xué)您好！

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