Sentinel:分布式系统的流量防卫兵。

官网:https://sentinelguard.io

Github:https://github.com/alibaba/sentinel

Wiki:https://github.com/alibaba/sentinel/wiki

FAQ:https://github.com/alibaba/Sentinel/wiki/FAQ


Sentinel控制台:https://github.com/alibaba/Sentinel/wiki/控制台

它是一个标准的SpringBoot应用。

其中,前端使用了AngularJS v1.4.8,需要搭建Node开发环境。

步骤

  1. 安装node.js

    官网:https://nodejs.org/en/



    选择10.16.0 LTS稳定版下载,下载后双击安装即可。

    安装完成后,打开cmd输入node -v查看版本为:v10.6.0

  2. 安装cnpm

    淘宝 NPM 镜像 https://npm.taobao.org/

    npm install -g cnpm --registry=https://registry.npm.taobao.org

    然后就可以使用cnpm了。

    PS:如果网速较快,这一步可以省略,直接用npm就好。

  3. npm install

    因为安装了cnpm,这里使用cnpm install,注意在Sentinel\sentinel-dashboard\src\main\webapp\resources目录下执行。

  4. 本地开发

    cnpm start

  5. 前端构建

    cnpm run build

打开package.json

"scripts": {
"test": "echo no test case",
"build": "gulp build",
"start": "gulp"
}

我们发现这里start实际执行的是gulp,build执行的是gulp build。

打开gulpfile.js,可以看到具体执行的任务。

其中,

// 打开浏览器
setTimeout(() => {
open('http://localhost:8080/index_dev.htm')
}, 200);

如果不想每次都自动打开浏览器,可以注释掉:)

js验证

如果在IDEA里有js文件显示红色波浪线,打开Settings->Languages & Frameworks->javaScript,

修改JavaScript language version默认的ECMAScript5.1改为6即可。

js、html缩进

发现项目中的js、html文件里的缩进格式跟java文件4个空格不同,它们是2个空格。

在Setting中进行设置:

至此就可以开始前端页面、脚本的开发了。


参考:

https://github.com/alibaba/Sentinel/blob/master/sentinel-dashboard/src/main/webapp/resources/README_zh.md

Sentinel控制台前端开发环境搭建的更多相关文章

  1. windows下vue+webpack前端开发环境搭建及nginx部署

    一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...

  2. Windows 环境下vue+webpack前端开发环境搭建

    一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm i ...

  3. webpack前端开发环境搭建

    要搭建webpack开发环境,首先要安装NodeJS,后面的过程均在NodeJS已经安装的基础上进行. 1. 首先建立一个工程目录,命名为,其目录结构如下: 其中dist目录用于存放生成的文件,src ...

  4. 前端开发环境搭建 Grunt Bower、Requirejs 、 Angular

    现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可 ...

  5. React前端开发环境搭建

    先,我们需要明确的是React和很多前端框架一样,底层都还是js以及html,即便它有着看似特殊的jsx语法. 我们要在服务端运行js,就需要依赖一个环境,和运行war包需要tomcat一类中间件一样 ...

  6. grunt 前端开发环境搭建

    1.找管理员开通gitlab权限 2.下载并安装git工具 3.下载并安装nodejs 4.安装cnpm 5.安装kulor-cli cnpm install -g kulor-cli cnpm in ...

  7. JEECG-Boot开发环境准备(三):开发环境搭建

    目录索引: 前端开发环境搭建 安装开发工具 导入项目 后端开发环境搭建 安装开发工具 导入项目 第一部分: 前端开发环境搭建 一.安装开发工具 安装nodejs.webstrom.yarn,安装方法参 ...

  8. 用grunt搭建web前端开发环境

    1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...

  9. 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

随机推荐

  1. Ubuntu armhf 版本国内源

    Ubuntu armhf 版本国内源: deb http://mirrors.ustc.edu.cn/ubuntu-ports/ xenial main multiverse restricted u ...

  2. Windows Server 2016 IIS的安装与配置

    1. 打开服务器管理器,点击[添加角色和功能选项].        2. 进入“添加角色和功能向导”页面,点击下一步. 3. 安装类型选择[基于角色或基于功能的安装],点击下一步. 4. 进入服务器选 ...

  3. python requests包的基本使用

    Requests 安装requests模块: D:\Install\Python36>pip3 install requests 请求方式 #coding:utf-8 import reques ...

  4. [课本10.1.4]JDBC数据库连接池- C3P0数据源--通过构造方法创建数据源对象--通过配置文件创建数据源对象[推荐]

    JDBC- C3P0数据源 /*重点提醒*/ 连接数据库的较低的jar包版本会与较高版本的mysql版本有冲突; 通过把mysql 8.0的版本降到5.5, jar包仍使用较高的 mysql-conn ...

  5. tinylogin-1.4

    tinylogin-1.4是一个开发嵌入式的文件系统很好的一个工具

  6. czy的后宫——矩阵快速幂优化DP

    题意 有 n 个位置排成一行,可以放 m 种妹子.每个位置可以放也可以不放,规定某些妹子不能相邻,求方案数. 分析 #include<bits/stdc++.h> using namesp ...

  7. python导包问题,这一篇就够了

    解决办法: 将项目所在的根目录添加到sys.path中 在入口文件中加入如下代码: import sys import os # 将 项目的根目录添加到sys.path中 BASE_DIR = os. ...

  8. selenium之python源码解读-WebDriverWait

    一.显示等待 所谓显示等待,是针对某一个特定的元素设置等待时间,如果在规定的时间内找到了该元素,就执行相关的操作,如果在规定的时间内没有找到该元素,在抛出异常 PS:注意显示等待和隐身等待的区别,隐身 ...

  9. 04_Tutorial 4: Authentication & Permissions 认证和权限

    1.认证和权限 0.文档 https://www.django-rest-framework.org/tutorial/4-authentication-and-permissions/ https: ...

  10. sublime 不是插件安装越多越好,如xxxsnippet 自动完成插件太多,就非常耗电脑性能,经常性的卡着不动

    sublime 不是插件安装越多越好,如xxxsnippet 自动完成插件太多,就非常耗电脑性能,经常性的卡着不动