一个Angular的开发脚手架(求星星)

简介: 一个Angular的开发脚手架(求星星)

Oniangular

一个Angular开发的脚手架,前端UI框架使用NG-ZORRO,服务端用koa2。

相关技术:Angular2、Koa2、NG-ZORRO等。

项目使用的是Angular5,这里用Angular2代称是便于关联网友搜索。

github地址:https://github.com/xiaohuoni/angular 求星星点击阅读原文直达github哦!


实际解决问题

  1. Angular2 项目上线(常用的是编译成静态文件之后,放到nginx tomcat等服务下)
  2. Angular2 http请求代理(拦截请求做一些处理)
  3. Angular2 项目跨域访问
  4. 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

目录
相关文章
|
3月前
|
前端开发 Java UED
JSF遇上Material Design:一场视觉革命,如何让传统Java Web应用焕发新生?
【8月更文挑战第31天】在当前的Web开发领域,用户体验和界面美观性至关重要。Google推出的Material Design凭借其独特的动画、鲜艳的颜色和简洁的布局广受好评。将其应用于JavaServer Faces(JSF)项目,能显著提升应用的现代感和用户交互体验。本文介绍如何通过PrimeFaces等组件库在JSF应用中实现Material Design风格,包括添加依赖、使用组件及响应式布局等步骤,为用户提供美观且功能丰富的界面。
43 0
|
3月前
|
前端开发 大数据 数据库
🔥大数据洪流下的决战:JSF 表格组件如何做到毫秒级响应?揭秘背后的性能魔法!💪
【8月更文挑战第31天】在 Web 应用中,表格组件常用于展示和操作数据,但在大数据量下性能会成瓶颈。本文介绍在 JavaServer Faces(JSF)中优化表格组件的方法,包括数据处理、分页及懒加载等技术。通过后端分页或懒加载按需加载数据,减少不必要的数据加载和优化数据库查询,并利用缓存机制减少数据库访问次数,从而提高表格组件的响应速度和整体性能。掌握这些最佳实践对开发高性能 JSF 应用至关重要。
65 0
|
3月前
|
前端开发 安全 开发者
JSF文件上传,让Web应用如虎添翼!一招实现文件上传,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,文件上传是重要功能之一。JSF(JavaServer Faces)框架提供了强大的文件上传支持,简化了开发流程。本文将介绍JSF文件上传的基本步骤:创建前端表单、处理上传文件的后端Action类、将文件保存到服务器指定目录以及返回结果页面。通过示例代码,我们将展示如何利用JSF实现文件上传功能,包括使用`h:inputFile`控件和`ManagedBean`处理上传逻辑。此外,JSF文件上传还具备类型安全、解耦合和灵活性等优点,有助于提升程序的健壮性和可维护性。
38 0
|
3月前
|
开发者 Java 存储
JSF 与 CDI 携手共进,紧跟技术热点,激发开发者情感共鸣,开启高效开发新征程
【8月更文挑战第31天】JavaServer Faces (JSF) 与 Contexts and Dependency Injection (CDI) 在 Java EE 领域中紧密协作,助力开发者高效构建现代 Web 应用。JSF 凭借其丰富的组件库和页面导航功能受到青睐,而 CDI 则优雅地管理对象生命周期并实现依赖注入。两者结合,不仅简化了复杂企业应用的开发,还实现了松耦合架构,增强了代码的灵活性、可维护性和可扩展性。通过示例展示了如何利用 CDI 将业务服务对象注入 JSF Managed Bean,以及如何在不同页面间共享数据,突显了这一组合的强大功能。
39 0
|
3月前
|
前端开发 API 开发者
JSF与RESTful服务的完美邂逅:如何打造符合现代Web潮流的数据交互新体验
【8月更文挑战第31天】随着互联网技术的发展,RESTful架构风格因其实现简便与无状态特性而在Web服务构建中日益流行。本文探讨如何结合JavaServer Faces (JSF) 和 JAX-RS 构建RESTful API,展示从前端到后端分离的完整解决方案。通过定义资源类、配置 `web.xml` 文件以及使用依赖注入等步骤,演示了在JSF项目中实现RESTful服务的具体过程,为Java开发者提供了实用指南。
40 0
|
3月前
|
前端开发 开发者 安全
JSF支付功能大揭秘:探索如何在Java世界中实现安全无缝的在线支付体验
【8月更文挑战第31天】在电子商务和在线交易日益普及的今天,实现在线支付功能已成为许多Web应用的必备需求。JavaServer Faces (JSF) 作为一种流行的Java Web框架,提供了丰富的组件和工具来构建用户界面,包括与支付网关集成以实现在线支付。支付网关是处理信用卡和借记卡支付的系统,在商家和银行之间起到桥梁作用。本文将探讨如何使用JSF与支付网关集成,以及实现在线支付功能时需要考虑的关键点
44 0
|
6月前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript在Angular开发中的应用
【4月更文挑战第30天】本文探讨了TypeScript在Angular开发中的应用。Angular与TypeScript的结合利用了静态类型检查和ECMAScript特性,简化了大型Web应用的开发。文章涵盖组件、数据绑定、依赖注入、服务、守卫和路由以及模块化等方面,展示了如何在Angular中有效使用TypeScript。此外,还提到了TypeScript的高级应用,如泛型、高级类型和装饰器。掌握这些知识将有助于提升Angular应用的可维护性和可扩展性。
69 0
|
开发框架 前端开发 JavaScript
推荐一个前后端分离.NetCore+Angular快速开发框架
推荐一个前后端分离.NetCore+Angular快速开发框架
114 0
|
XML Web App开发 前端开发
使用VScode开发Angular
使用VScode开发Angular
974 0
使用VScode开发Angular
|
JavaScript 前端开发 测试技术
angular框架怎么从0到1进行开发
angular框架怎么从0到1进行开发
61 0