查看更多精彩前端资源

---

商品管理综合案例

---

接口获取商品列表

• 地址：http://vue.studyit.io/api/getprodlist
• 请求方式：GET
• 请求参数：无
• 返回数据格式
  
  

[JavaScript] 纯文本查看 复制代码

{
        // 0代表正常，其他则异常
        status: 0,
        // 商品列表
        message: [
                {
                        id: 1,
                        name: '奔驰',
                        ctime: '2017-08-26T08:37:18.000Z'
                },
                {
                        id: 2,
                        name: '宝马',
                        ctime: '2017-08-25T06:32:14.000Z'
                },
                ...
        ]
}

删除商品

• 地址：http://vue.studyit.io/api/delproduct/:id
• 请求方式：GET
• 请求参数：id
• 返回数据格式
  
  

[JavaScript] 纯文本查看 复制代码

{
        // 0代表正常，其他则异常
        status: 0,
        // 删除结果
        message: "删除品牌数据ok"
}

添加商品

• 地址：http://vue.studyit.io/api/addproduct
• 请求方式：POST
• 请求参数：name
• 参数格式 : FormData
• 返回数据格式
  
  

[JavaScript] 纯文本查看 复制代码

{
        // 0代表正常，其他则异常
        status: 0,
        // 添加结果
        message: "添加成功"
}

实现

---

• 创建项目
• 公共header组件布局
• 公共footer组件布局
  

Angular4.x中的路由

---

单页应用程序（SPA Single Page Application）

• 单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。
• 它是AJAX技术的进一步升华，把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体验。
• 例如: 网易云音乐，切换页面音乐依然继续播放，典型的单页应用程序
  
  

什么是路由

• 在web开发中，路由是指根据URL找到能处理这个URL的程序或模块。
• 比如在www.http：//baidu.com/login中，/login就是当前url的路由
  
  

Angula4.x在项目中配置路由

• 新建home、news、newscontent三个组件

  [JavaScript] 纯文本查看 复制代码

  ng g component home
  ng g component news
  ng g component newscontent

• 新建app-routing.module.ts ,并在app-routing.module.ts中引入模块

  [JavaScript] 纯文本查看 复制代码

  import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';

• app-routing.module.ts中引入刚刚创建的三个组件
  [JavaScript] 纯文本查看 复制代码

  import { HomeComponent } from './home/home.component';import { NewsComponent } from './news/news.component';
  import { NewscontentComponent } from './newscontent/newscontent.component';

• app-routing.module.ts中配置组件
  [JavaScript] 纯文本查看 复制代码

  const routes: Routes = [ //路由组件是一个数组，每一个配置项为一个对象，分别有path(路径)，compontent(组件)等属性    {path: 'home', component: HomeComponent},
      {path: 'news', component: NewsComponent},
      {path: 'newscontent/:id', component: NewscontentComponent},
      { path: '', redirectTo: '/home', pathMatch: 'full' } //重定向，如果用户打开路径为''的时候自动重定向到home组件下；
      ];

• app-routing.module.ts中配置模块 暴露模块
  [JavaScript] 纯文本查看 复制代码

  @NgModule({     imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
  })
  export class AppRoutingModule { }

• 在app.module.ts 引入刚才定义的路由
  [JavaScript] 纯文本查看 复制代码

  import { AppRoutingModule } from './app-routing.module';

• app.module.ts里面的import注册这个路由模块
  [JavaScript] 纯文本查看 复制代码

  imports: [    BrowserModule,
      AppRoutingModule
      ]

• 找到app.component.html根组件模板，配置router-outlet显示动态加载的路由
  [HTML] 纯文本查看 复制代码

  <h1>    <a routerLink="/home">首页</a>
      <a routerLink="/news">新闻</a>
  </h1>
  <router-outlet></router-outlet>

  
  

Angular  默认跳转路由

[JavaScript] 纯文本查看 复制代码

//匹配不到路由的时候加载的组件 或者跳转的路由
{ path: '**', /*任意的路由*/
  redirectTo:'home'
}

• 任意路由加载不到时都跳转到/home下
  
  

Angular routerLinkActive设置routerLink默认选中路由

• 使用angular来做单页应用程序肯定有一个被激活的路由。在这里，angular给我们当前激活路由提供了一个class类，我们可以通过设置这个class的样式来显示
  
  

[HTML] 纯文本查看 复制代码

<h1>
    <a routerLink="/home" routerLinkActive="active">首页</a>
    <a routerLink="/news" routerLinkActive="active">新闻</a>
</h1>


.active{
    color:red;
    }

路由的动态传值

• 配置动态路由

  [JavaScript] 纯文本查看 复制代码

  const routes: Routes = [    {path: 'home', component: HomeComponent},
      {path: 'news', component: NewsComponent},
      {path: 'newscontent/:id', component: NewscontentComponent}, // id是不固定的，所以当一个参数传过去
      { path: '', redirectTo: '/home', pathMatch: 'full' }
  ];

• 获取动态路由的值
  [JavaScript] 纯文本查看 复制代码

  import { Router, ActivatedRoute, Params } from '@angular/router'; //引入路由模块constructor( private route: ActivatedRoute) {}
  ngOnInit() {
      console.log(this.route.params);
      this.route.params.subscribe(data=>this.id=data.id); //通过subscribe方法订阅路由参数
      }

  
  

路由的js跳转

• 引入路由模块

  [JavaScript] 纯文本查看 复制代码

  import { Router } from '@angular/router';

• 初始化
  [JavaScript] 纯文本查看 复制代码

  export class HomeComponent implements OnInit {    constructor(private router: Router) { }
      ngOnInit() { } goNews(){
       this.router.navigate(['/news']); }//页面初始化的时候跳转到/news路由对应的页面下
  }

• 路由跳转
  [JavaScript] 纯文本查看 复制代码

  this.router.navigate(['/news', hero.id]);

  
  

父子路由

• 路由下面还有衍生的路由

  [JavaScript] 纯文本查看 复制代码

  //父子路由配置如下{ path: 'news', component:NewsComponent,
      children: [
          { path:'newslist', component:NewslistComponent },
          { path:'newsadd', component:NewsaddComponent }
      ]
  }
  
  > 父子路由要在父路由组件中定义`router-outlet`