基于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(), {
    login_url: '/passport/login',
    ignores: [/api\/test\/hello/]
  });
}

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

转载于:https://www.cnblogs.com/lqwh/p/10504545.html

你可能感兴趣的:(基于ng-alain前端框架项目开发)