Navigation运维网站导航工具

2024-09-03 20:38

本文主要是介绍Navigation运维网站导航工具,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Navigation

导航网址

recommend: China-Gitee,Other-Github

功能

  • 新增分类
  • 删除分类
  • 编辑分类
  • 查询分类
  • 新增网址
  • 删除网址
  • 编辑网址
  • 查询网址
  • 新建管理员账号、菜单权限
  • 编辑管理员账号、菜单权限
  • 导出xls

【管理员】

img

【访客】

img

开发环境

名称版本
nodejs8.11.4
vue2.X

安装

简单命令行即可使用

Docker安装方式(推荐)

1.安装docker

2.拉取镜像

(1)前端镜像

docker pull liyinchi/navigation-frontend

(2)后端镜像

docker pull liyinchi/navigation-server

(3)启动容器

docker run -d --name navigation-frontend -p 3000:80 liyinchi/navigation-frontend
docker run -d --name navigation-server -p 8006:8006 liyinchi/navigation-server

(4)访问http:127.0.0.1:3000 

后端端口:8006 前端端口:3000

注意:镜像前端默认访问地址是127.0.0.1需要更改成你到服务器地址

普通安装方式

1.下载Nodejs

(建议版本使用v12.13.0 小于v15.0)

CNPM Binaries Mirror

如果已安装配置nodejs,可跳过此步骤

2.安装Nodejs

(1)检查版本

node -v

(2)设置淘宝镜像(提升安装速度)

npm config set registry http://registry.npm.taobao.org/

如果你已安装Nodejs环境,可跳过1和2步骤

使用

直接使用

1.启动后端服务

(1) 打开终端窗口,进入目录/Navigation/server下

cd /Navigation/server

(2) 执行安装

npm install

(3) 启动后端

node server

img

2.打开前端页面

打开目录下/dist/index.html直接使用,或者将dist放入tomcat的webapp中实现web服务器让其他小伙伴也能通过ip

img

二次开发

1.启动后端服务

同上

2.启动前端页面

(1)前端

打开新的终端窗口,进入目录/Navigation下,执行命令行如下命令:

cd /Navigation

(2)安装

  • 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 安装node-sass
cnpm install node-sass --save
npm install node-sass --save-dev
  • 安装其他依赖
npm install

(3)启动开发者模式

npm run dev

img

(3)浏览器地址访问

http://localhost:8088

img

(4)window平台报错:“Module build failed: Error: Cannot find module 'node-sass’解决”

解决办法:

在win10 系统中搜索框 输入 Windos PowerShell

选择 管理员身份运行

打开了powershell命令行之后,输入

set-ExecutionPolicy RemoteSigned

更改权限为A

输入get-ExecutionPolicy

如下图所示:

img

参考:Module build failed: Error: Cannot find module 'node-sass’解决 - 大白大白白 - 博客园

操作手册

登录管理员

账号:admin 密码:123456

img

访客无需登录,仅有查看权限

新增网页

img

新增分类

img

筛选分类

img

新增账号

img

导出数据

img

常见问题 :

1.前端请求地址报错

解决办法:需要在前端项目打包时,将请求后端接口域名改成你的服务器地址

这篇关于Navigation运维网站导航工具的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1133991

相关文章

Java中的工具类命名方法

《Java中的工具类命名方法》:本文主要介绍Java中的工具类究竟如何命名,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java中的工具类究竟如何命名?先来几个例子几种命名方式的比较到底如何命名 ?总结Java中的工具类究竟如何命名?先来几个例子JD

MySql match against工具详细用法

《MySqlmatchagainst工具详细用法》在MySQL中,MATCH……AGAINST是全文索引(Full-Textindex)的查询语法,它允许你对文本进行高效的全文搜素,支持自然语言搜... 目录一、全文索引的基本概念二、创建全文索引三、自然语言搜索四、布尔搜索五、相关性排序六、全文索引的限制七

基于Java实现回调监听工具类

《基于Java实现回调监听工具类》这篇文章主要为大家详细介绍了如何基于Java实现一个回调监听工具类,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录监听接口类 Listenable实际用法打印结果首先,会用到 函数式接口 Consumer, 通过这个可以解耦回调方法,下面先写一个

使用Python构建一个Hexo博客发布工具

《使用Python构建一个Hexo博客发布工具》虽然Hexo的命令行工具非常强大,但对于日常的博客撰写和发布过程,我总觉得缺少一个直观的图形界面来简化操作,下面我们就来看看如何使用Python构建一个... 目录引言Hexo博客系统简介设计需求技术选择代码实现主框架界面设计核心功能实现1. 发布文章2. 加

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

基于Python打造一个全能文本处理工具

《基于Python打造一个全能文本处理工具》:本文主要介绍一个基于Python+Tkinter开发的全功能本地化文本处理工具,它不仅具备基础的格式转换功能,更集成了中文特色处理等实用功能,有需要的... 目录1. 概述:当文本处理遇上python图形界面2. 功能全景图:六大核心模块解析3.运行效果4. 相

springboot项目中常用的工具类和api详解

《springboot项目中常用的工具类和api详解》在SpringBoot项目中,开发者通常会依赖一些工具类和API来简化开发、提高效率,以下是一些常用的工具类及其典型应用场景,涵盖Spring原生... 目录1. Spring Framework 自带工具类(1) StringUtils(2) Coll

基于Python实现高效PPT转图片工具

《基于Python实现高效PPT转图片工具》在日常工作中,PPT是我们常用的演示工具,但有时候我们需要将PPT的内容提取为图片格式以便于展示或保存,所以本文将用Python实现PPT转PNG工具,希望... 目录1. 概述2. 功能使用2.1 安装依赖2.2 使用步骤2.3 代码实现2.4 GUI界面3.效

基于Python和MoviePy实现照片管理和视频合成工具

《基于Python和MoviePy实现照片管理和视频合成工具》在这篇博客中,我们将详细剖析一个基于Python的图形界面应用程序,该程序使用wxPython构建用户界面,并结合MoviePy、Pill... 目录引言项目概述代码结构分析1. 导入和依赖2. 主类:PhotoManager初始化方法:__in

使用Python自建轻量级的HTTP调试工具

《使用Python自建轻量级的HTTP调试工具》这篇文章主要为大家详细介绍了如何使用Python自建一个轻量级的HTTP调试工具,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下... 目录一、为什么需要自建工具二、核心功能设计三、技术选型四、分步实现五、进阶优化技巧六、使用示例七、性能对比八、扩展方向建