查看更多精彩前端资源

---

商品管理综合案例

---

接口获取商品列表

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

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

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

[mw_shl_code=javascript,true]{
        // 0代表正常，其他则异常
        status: 0,
        // 删除结果
        message: "删除品牌数据ok"
}[/mw_shl_code]
添加商品

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

[mw_shl_code=javascript,true]{
        // 0代表正常，其他则异常
        status: 0,
        // 添加结果
        message: "添加成功"
}[/mw_shl_code]
实现

---

• 创建项目
• 公共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三个组件[mw_shl_code=javascript,true]ng g component home
  ng g component news
  ng g component newscontent[/mw_shl_code]
• 新建app-routing.module.ts ,并在app-routing.module.ts中引入模块[mw_shl_code=javascript,true]import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';[/mw_shl_code]
• app-routing.module.ts中引入刚刚创建的三个组件[mw_shl_code=javascript,true]import { HomeComponent } from './home/home.component';import { NewsComponent } from './news/news.component';
  import { NewscontentComponent } from './newscontent/newscontent.component';[/mw_shl_code]
• app-routing.module.ts中配置组件[mw_shl_code=javascript,true]const routes: Routes = [ //路由组件是一个数组，每一个配置项为一个对象，分别有path(路径)，compontent(组件)等属性    {path: 'home', component: HomeComponent},
      {path: 'news', component: NewsComponent},
      {path: 'newscontent/:id', component: NewscontentComponent},
      { path: '', redirectTo: '/home', pathMatch: 'full' } //重定向，如果用户打开路径为''的时候自动重定向到home组件下；
      ];[/mw_shl_code]
• app-routing.module.ts中配置模块 暴露模块[mw_shl_code=javascript,true]@NgModule({     imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
  })
  export class AppRoutingModule { }[/mw_shl_code]
• 在app.module.ts 引入刚才定义的路由[mw_shl_code=javascript,true]import { AppRoutingModule } from './app-routing.module';[/mw_shl_code]
• app.module.ts里面的import注册这个路由模块[mw_shl_code=javascript,true]imports: [    BrowserModule,
      AppRoutingModule
      ][/mw_shl_code]
• 找到app.component.html根组件模板，配置router-outlet显示动态加载的路由[mw_shl_code=html,true]<h1>    <a routerLink="/home">首页</a>
      <a routerLink="/news">新闻</a>
  </h1>
  <router-outlet></router-outlet>[/mw_shl_code]
  

Angular  默认跳转路由
[mw_shl_code=javascript,true]//匹配不到路由的时候加载的组件 或者跳转的路由
{ path: '**', /*任意的路由*/
  redirectTo:'home'
}[/mw_shl_code]

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

Angular routerLinkActive设置routerLink默认选中路由

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

[mw_shl_code=html,true]<h1>
    <a routerLink="/home" routerLinkActive="active">首页</a>
    <a routerLink="/news" routerLinkActive="active">新闻</a>
</h1>


.active{
    color:red;
    }[/mw_shl_code]
路由的动态传值

• 配置动态路由[mw_shl_code=javascript,true]const routes: Routes = [    {path: 'home', component: HomeComponent},
      {path: 'news', component: NewsComponent},
      {path: 'newscontent/:id', component: NewscontentComponent}, // id是不固定的，所以当一个参数传过去
      { path: '', redirectTo: '/home', pathMatch: 'full' }
  ];[/mw_shl_code]
• 获取动态路由的值[mw_shl_code=javascript,true]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方法订阅路由参数
      }[/mw_shl_code]
  

路由的js跳转

• 引入路由模块[mw_shl_code=javascript,true]import { Router } from '@angular/router';[/mw_shl_code]
• 初始化[mw_shl_code=javascript,true]export class HomeComponent implements OnInit {    constructor(private router: Router) { }
      ngOnInit() { } goNews(){
       this.router.navigate(['/news']); }//页面初始化的时候跳转到/news路由对应的页面下
  }[/mw_shl_code]
• 路由跳转[mw_shl_code=javascript,true]this.router.navigate(['/news', hero.id]);[/mw_shl_code]
  

父子路由

• 路由下面还有衍生的路由[mw_shl_code=javascript,true]//父子路由配置如下{ path: 'news', component:NewsComponent,
      children: [
          { path:'newslist', component:NewslistComponent },
          { path:'newsadd', component:NewsaddComponent }
      ]
  }
  
  > 父子路由要在父路由组件中定义`router-outlet`[/mw_shl_code]