iGreat是使用Angular开发的个人网址导航系统，具备完整的前后台，您可以拿来部署自己收藏的网址。

iGreat是临摹兰客导航开发的网址导航系统，初始数据是作者从兰客复制或抓取的。iGreat是使用Angular和SpringBoot开发的一整套前后端分离的系统，包含前端网站和管理后台。

Resources：截图及使用到的资源文件；

WebNav-Admin：管理平台页面源代码；

WebNav：网站页面源代码；

WebNav-Admin-API：管理后台API服务源代码；

WebNav-API：网站前端API服务源代码；

导航网址：http://47.96.98.193:8886/

管理后台：http://47.96.98.193:8887/welcome

以下的所有操作是建立在服务器环境已经安装完毕，所以部署文件已复制到/opt目录下。

• CentOS 7
• Java SDK 1.8
• Nginx 1.8.1
• MySQL 5.7

这些文件可以在Resources目录下找到。

$ mysql -u root -p

mysql > CREATE DATABASE WebNav IF NOT EXISTS WebNav default charset utf8mb4 COLLATE utf8mb4_general_ci;

mysql > use WebNav

mysql > source /opt/WebNav初始数据库.sql

成功后执行exit命令退出MySQL命令客户端即可。

使用nohup命令让程序在后台运行

//部署网站API，占用8888端口
$ nohup java -jar webnav-1.0.0-SNAPSHOT.jar --server.port=8888 &
//部署管理后台API，占用8889端口
$ nohup java -jar webnav-admin-1.0.0-SNAPSHOT.jar --server.port=8889 &

将WebNav.zip和WebNav-Admin.zip分别解压至nginx的html目录下，例如作者服务器的路径是/usr/local/nginx/html。

最终目录结构如图所示：

1. 修改nginx.conf文件，在http{....}中添加8886和8887两个端口的server代理；

   server {
     listen  8886;
     server_name localhost;
     location / {
       root /usr/local/nginx/html/WebNav;
       index index.html;
       try_files $uri $uri/ /index.html;
   	}
   	error_page 500 502 503 504 /50x.html;
   	location = /50x.html {
   		root html;
   	}
   }
   server {
     listen  8887;
     server_name localhost;
     location / {
       root /usr/local/nginx/html/WebNav-Admin;
       index index.html;
       try_files $uri $uri/ /index.html;
     }
     error_page 500 502 503 504 /50x.html;
     location = /50x.html {
     	root html;
     }
   }
   

2. 重新加载配置文件

$ /usr/local/nginx/sbin/nginx -s reload

3. 使用浏览器打开http://ip:port就可以访问对应的网页了。

配置过程中try_files $uri $uri/ /index.html;这条句柄是关键，不然子路由页面刷新后会出现无法加载的问题。具体可参考：https://www.angular.cn/guide/deployment

有需要的朋友可以从GitHub或这里下载源代码到本地修改后重新编译发布。

由于前端都是通过Angular框架完成的，我们可以先参考Angular搭建环境一节先把运行环境搭建起来，作者本地的node版本是10.16.3。下面我们假设前端页面的文件已经下载并压缩至Downloads目录下。

首先先进入到工程目录下，我们这以导航网站为例，管理后台的页面编译相同

$ cd Downloads/WebNav

然后使用npm安装项目依赖

$ npm install

如果安装速度慢的话可以通过配置cnpm代替cpm执行install命令

等待安装完成后，使用下面命令运行

$ ng serve --port 0 --open

如果命令运行成功后会自动打开浏览器进行预览，我们可以在预览模式下修改源代码保存，浏览器将马上进行更新。

定制完成后可以通过build进行编译后发布自己的服务器，命令如下：

$ ng build

如果编译成功会在工程目录下生成dist文件夹，把dist文件夹里的内容传到服务器部署即可。

下载工程源代码后直接使用Intellij IDEA打开并ReimportMaven依赖，然后修改application-prod.yml文件中的数据库地址、账号、密码就可以运行起来了。

上图为打包流程：

1. 选择侧边标签Maven;
2. 点击运行package命令；
3. 等待编译过程，出现BUILD SUCCESS表示编译成功；
4. 工程目录下会出现webnav-1.0.0-SNAPSHOT.jar文件，上传服务器使用java -jar命令运行。

1. Angular框架：快速开发框架；
2. Spring及Spring Boot：API服务技术选型；
3. NG-ZORRO组件库：Ant Design的Angular实现，开发和服务于企业级后台产品；
4. 兰客导航：作者前端页面是仿照此网站写的；

感谢所有看到这里的你们，希望它对你有帮助

如果觉得不错，欢迎打赏，金额不限

支付宝	微信