使用 纳米级 加载进度条 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">Startel-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 按钮

三、结尾

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