Oniangular
一个Angular开发的脚手架,前端UI框架使用NG-ZORRO,服务端用koa2。
相关技术:Angular2、Koa2、NG-ZORRO等。
项目使用的是Angular5,这里用Angular2代称是便于关联网友搜索。
github地址:https://github.com/xiaohuoni/angular 求星星点击阅读原文直达github哦!
实际解决问题
- Angular2 项目上线(常用的是编译成静态文件之后,放到nginx tomcat等服务下)
- Angular2 http请求代理(拦截请求做一些处理)
- Angular2 项目跨域访问
- koa2中转服务器(简单的koa2项目,也可以使用koa2-proxy。这个看起来比较像koa2项目。)
需求说明
我们的服务端,要求我自己搭建一个中转服务器。
因为app端的请求,我们都是依赖于token,而且这个token是不变的。
之前都是服务端保存session数据,进行用户身份认证的。现在服务端不想单独为了web端做这些工作,
希望和app端使用一样的方式。所以需要前段自己搭建一个中转服务器,用于处理跨域访问和tokon的问题。
此项目脚手架使用的Angular CLI version 1.5.3.创建。
在koa中对token这些数据做处理,再进行代理,将所有的http请求中转到实际的服务器api。
特别说明
1、在开发环境使用ng serve
启用了ng开发服务,监听的是4200端口。
然后我们使用koa2搭建一个node服务器,监听1336端口。
使用koa-proxy2将请求中转到真实业务的服务端。
在
app.use(async(ctx, next) => {
console.log(Process ${JSON.stringify(ctx.request.method)} ${ctx.request.url}...
);
//这里可以处理请求中转到服务器之前,操作一下token和参数之类的。
await next();
//可以在这里处理从服务端返回的数据
});
因为开发时请求从4200访问1336所以也存在跨域访问问题。
所以在koa2中加入koa2-cors处理了跨域访问。
2、在生产环境或者称为正式上线时。修改src\app\config\td-config.ts
中的this.serveUrl = ''
。
使用ng build
将前端页面编译成静态文件。
将src\dist
目录和koa-proxy.js(如果有修改的话)复制到build中。
拷贝build中的文件到远程服务器上,安装node环境和nodemon,
执行npm install
再执行nodemon koa-proxy
。
使用方法
开发
0、gitclone 本项目
1、执行 npm i
.
2、确认src\app\config\td-config.ts
文件中的端口号和koa-proxy.js
中的端口号相同。
2、执行 ng serve
启动一个angular开发服务。
3、执行 nodemon koa-proxy
开启中转服务器。
生产
0、修改src\app\config\td-config.ts
中的this.serveUrl = ''
。
1、执行 ng build
编译项目。
2、拷贝src\dist
文件夹和 koa-proxy.js
文件到src\build
目录下。
3、拷贝build中的文件到远程服务器上,安装node环境和nodemon。
4、执行npm install
再执行nodemon koa-proxy
.
说明
UI框架使用NG-ZORRO
NG-ZORRO是Ant Design 的 Angular^5.0.0 实现,开发和服务于企业级后台产品。
BUG和建议
请提交到ISS:https://github.com/xiaohuoni/angular/issues