一、前言
最近想给页面加载请求加个进度条,让用户感知自己的操作产生的影响以及进度如何。自己写比较费劲,而网上肯定有很多成熟的插件。
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
按钮
三、结尾
作为一个后端的开发人员,对前端并不是特别擅长,但最近学习采用了很多成熟的的前端插件之后,发现写一个酷炫优美的网页,也不是一件难事了~