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

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

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

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

一、前言

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

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

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

官方體驗(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

// 開(kāi)始
NProgress.start();

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

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

三、代碼演示

（1）前端

基于ElementUI的Starter來(lái)編寫(xiě)的，當(dāng)然基于 Vue/Webpack 都可以，只不過(guò)筆者想減少無(wú)關(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 包對(duì)應(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）后端

一個(gè)簡(jiǎn)單的基于 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ù)處理消耗的時(shí)間
        Thread.sleep(1000);
        return "hello";
    }
}

（3）效果

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

四、小結(jié)

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

本文全部代碼

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

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

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定