CrapApi项目结构

其他链接：免费VPN推荐 VPN使用帮助 API接口管理  CrapApi帮助文档  API接口管理

如下图所示：

1.存储数据库连接配置，spring配置，错误码，log4j等配置文件

2.存储网站js、cs、html、img等静态资源

3.存储第三方框架：bootstrap、angularjs等

4.后台相关html页面

5.前端相关html页面

6.后台相关jsp页面

7.后台相关jsp子页面面：被主页面引用

8.前端相关jsp页面

系统主要采用html静态页面，但是由于后台主页、前台主页初始化时需要读取数据库相关配置：css、title、log、角色、权限，因此部分页面采用jsp

后台主页：下图6中的index.jsp

前台主页面：下图8中的index.jsp

前端数据加载流程：

1.第一访问网站:加载前端主页index.jsp ——》通过angularjs异步加载数据——》angularjs将json数据渲染至页面

2.点击超链接——》通过angularjs路由异步加载指定的html页面——》通过angularjs异步加载数据——》angularjs将json数据渲染至页面

路由文件：下图2/js/router.js 主要负责解析超链接，并加载指定的html子页面，html页面加载后，将根据该页面配置的 ng-controller 调用controllers.js

数据加载：下图2/jscontrollers.js 通过js异步访问后台接口，获取相应的数据

其他链接：免费VPN推荐 VPN使用帮助 API接口管理  CrapApi帮助文档  API接口管理