基于ng-alain前端框架项目开发

现在前后端分离开发逐渐趋向成为一种主流，公司最近项目也开始采用前后端分离的模式。这篇文章主要记录下采用angular前端框架遇到的一些问题，或者是踩的一些坑。

1、环境的搭建

　　这个比较简单，网上相关文章很多。这里主要是安装node.js（npm包管理工具在安装node.js时会自动安装），还有再安装下angul/cli工具，这个工具可以大大简化我们的开发，提高效率。

2、项目初始化

　　这个可以参考ng-alain的官网或者是angular的官网 ng-alain安装或angular官网

ng new project-name
cd my-project
ng add ng-alain
npm start

　　ng new 命令后面可以带一些参数，比如 --style less 就是样式指定为less类型的文件，具体其他参数，可以参考angular官网中的cli命令部分内容，这里需要注意的一点，工程名字不能带有下划线，不让创建项目会失败

3、一些需要注意的事项（这里讲的事项都是在开发环境下，具体部署是另一个同事部署的）

　　好了，现在基于ng-alain的脚手架已经搭建成功了，是不是很简单。重点来了，这部分讲下项目开发过程中遇到的难题。　

　　3.1 跨域问题

　　因为是前后端分离，自然就涉及到跨域的问题啦，这里我主要是用代理的方式来解决跨域问题的。官方的参考文档：代理解决跨域

　　第一步：在package.json同级目录下新建一个proxy.conf.json（这个文件的名字可以改变）。

　　第二步：在proxy.conf.json文件中加入下面代码。

{
    "/api": {
      "target": "http://localhost:8080",
      "secure": false,
      "pathRewrite": {
        "^/api": ""
      },
      "logLevel": "debug"
    }
  }

　　在api开头的链接中都用其中api都会用http://localhost:8080替换，在这里可以配置多个后端。

　　3.2 前端拦截器的配置。

　　在ng-alain框架中，默认会拦截你的请求，如何没有token，请求会发不出去，所以不需要携带token的请求需要在在拦截器中排除，配置的地方在 project-name\src\app\delon.module.ts文件中，具体代码如下：

import { DelonAuthConfig } from '@delon/auth';
export function fnDelonAuthConfig(): DelonAuthConfig {
  return Object.assign(new DelonAuthConfig(), <DelonAuthConfig>{
    login_url: '/passport/login',
    ignores: [/api\/test\/hello/]
  });
}

　　这里主要添加了ignores这个属性的配置，其中的值就是我们要排除的请求地址。我配了一个 api/test/hello。代码中用的是正则表达式。