iGreatNav
iGreat
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
部署文件清单
文件 | 作用 |
---|---|
WebNav 初始数据库.sql | 数据库 |
webnav-admin-1.0.0-SNAPSHOT.jar | 管理后台 API 程序 |
webnav-1.0.0-SNAPSHOT.jar | 前端网站 API 程序 |
WebNav.zip | 网站前端资源 |
WebNav-Admin.zip | 管理后台前端资源 |
这些文件可以在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
命令客户端即可。
运行 Jar
使用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
。
最终目录结构如图所示:
配置 Nginx 反向代理
修改
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; } }
重新加载配置文件
$ /usr/local/nginx/sbin/nginx -s reload
使用浏览器打开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
文件夹里的内容传到服务器部署即可。
API 服务
下载工程源代码后直接使用Intellij IDEA打开并Reimport
Maven 依赖,然后修改application-prod.yml
文件中的数据库地址、账号、密码就可以运行起来了。
上图为打包流程:
- 选择侧边标签
Maven
; - 点击运行
package
命令; - 等待编译过程,出现BUILD SUCCESS表示编译成功;
- 工程目录下会出现
webnav-1.0.0-SNAPSHOT.jar
文件,上传服务器使用java -jar
命令运行。
参考和使用
- Angular 框架:快速开发框架;
- Spring 及 Spring Boot:API 服务技术选型;
- NG-ZORRO 组件库:Ant Design 的 Angular 实现,开发和服务于企业级后台产品;
- 兰客导航:作者前端页面是仿照此网站写的;
Thank You
感谢所有看到这里的你们,希望它对你有帮助
如果觉得不错,欢迎打赏,金额不限
支付宝 | 微信 |
---|---|