CV肉饼王

一、流程图

此项目为员工考勤查询系统，前端为angular 5，后端为php、MySQL(LNMP)，前端页面包含登录页、首页（考勤数据查询页），主要在用户访问首页时进行校验。用户登录所需相关信息已提前录入数据库，故这里只涉及登录，不讨论注册流程。因在开发环境下，涉及跨域测试，故还通过后端php实现了CORS。

一、流程说明

• record.service负责从后端server获取数据
• 父组件table.component通过依赖注入，从record.service订阅实时变更的数据
• 子组件pagination.component通过@Input，获取父组件传入的分页相关变量值，从而在模板中显示正确的分页信息
• 然后根据用户点击的page值，子组件通过@Output属性，将page值传回父组件
• 父组件依据page值将数组数据分片展示
  阅读全文 »

一、在根模块导入HttpModule

1
2
3
4

import {HttpModule } from "@angular/http";
imports: [
    HttpModule
  ],

一、在根模块中引入依赖

1
2
3
4
5
6

import {FormsModule, ReactiveFormsModule } from '@angular/forms';

imports: [
    FormsModule,
    ReactiveFormsModule
  ],

1.安装jQuery

npm install --save jquery

2.安装jQuery定义文件

npm install @types/jquery --save

实现功能：根据用户输入内容，过滤显示匹配的信息

1.创建自定义pipe

ng g pipe stock/stockFilter

一、事件绑定

<button (click)= "onButtonClick($event)"></button>

二、DOM属性绑定（插值表达式）

<img [src]="imgUrl">
<img src="">

一、基本配置

1.创建服务并在根模块注册

ng g service stock-info
providers: [StockInfoService]

一、概念

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {AppComponent} from './app.component';
import {LoginComponent} from './login/login.component';
import {UserComponent} from './user/user.component';

const routes: Routes = [
  {path: '', component: LoginComponent},
  {path: 'login', component: LoginComponent},
  {path: 'user/:id', component: UserComponent} //id段传参
];

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