Angular 前端路由和后台路由之“顿悟”

背景

Angular 前端路由和后台路由之“顿悟”： 每个人悟性不同，能够透彻理解一个概念，绝非一件容易的事， 它需要一个实践的过程，并且还得有一个顿悟的时机出现。 有些概念，也许你知道如何作答，但真正能够理解到位的，也行穷其一生的追求。 这就好比爱因斯坦的相对论， 每个学生，都能开口作答： E = MC的2次方，但又有多少人能真正理解它的内涵呢？

由此推理， 作为前端工程师，你真正理解了什么是前端路由，什么是后台路由了吗？

以下谈下我的理解， 上图。

浏览器地址： http://localhost:3000/books 时， 显示如图。 这个页面显示了一个列表，作为首页，再普通不过了。

image.png

当我点击上面的 “+” 号时， 跳转到下一个页面，如图。 而且，地址栏自动变为： http://localhost:3000/book-create

image

页面只要发生了跳转，那就是“路由”在起作用。 这个页面的跳转，是前端路由呢，还是后台路由呢？ —— 显然，这是前端路由， 为什么呢？ 因为这个跳转与后台没有关系嘛。 页面跳转到哪里去，是前端其作用。 它与后台服务器没有半毛钱的关系。

个人理解，所谓前端路由，是指控制页面之间跳转的路由。 既然一个页面就是一个component，所以呢，每个path： 对应一个 component。

那么，什么是后台路由呢？

后台路由是与后台服务器相关的， 当对后台数据库有CRUD 操作时，此时，要访问数据库。 这时候，就要启动后台路由。

比如： 点击以上页面的 “Save” 按钮， 因为要对数据库进行“增”一条记录的操作，自然，要访问后台，这时候，就得给出一个后台路由。

代码如下：

saveBook() {
    this.http.post('/book', this.book)
      .subscribe( (res) => {
          let id = res['_id'];
          this.router.navigate(['/book-details', id]);
        }, (err) => {
          console.log(err);
        }
      );
  }

this.http.post('/book', this.book) ; 这里的 /book ，就是后台路由。 它是express 控制的路由。

可以这样理解： express 给出的路由， 就是后台路由！ 而 Angular 的 RouterModule 给出的路由，就是前端路由。

一目了然了吧！