使用 纳米级 加载进度条 NProgress 增强网页交互感

一、前言

最近想给页面加载请求加个进度条,让用户感知自己的操作产生的影响以及进度如何。自己写比较费劲,而网上肯定有很多成熟的插件。

NProgress,自称可以达到 Google, YouTube, and Medium 等知名应用的进度加载条同样的效果,笔者看了试了试,确实如此,故写本文分享这个趣味十足的插件。

官方体验地址:https://ricostacruz.com/nprogress/

二、正文

2.1.前端

基于 ElementUI 的 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>

全部代码:https://github.com/larger5/nprogress-web

2.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 {
        // 模拟后端数据处理消耗的时间
        Thread.sleep(1000);
        return "hello";
    }
}

全部代码:https://github.com/larger5/nprogress-server

2.3.效果

如下图,点击 Start 按钮
在这里插入图片描述

三、结尾

作为一个后端的开发人员,对前端并不是特别擅长,但最近学习采用了很多成熟的的前端插件之后,发现写一个酷炫优美的网页,也不是一件难事了~

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页