发表于： 2020-06-16 23:06:14
1 2219
今天完成的事情：今天写了路由的跳转
明天计划的事情：继续后续的任务
遇到的问题：实际写起来还是老出问题还是要仔细看清楚
收获：今天写了基本的结构
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: 'login',
loadChildren:()=>import('./modules/login/login.module').then(mod=>mod.LoginModule)
},
{
path: 'page',
loadChildren:()=>import('./modules/page/page.module').then(mod=>mod.PageModule)
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
登录HTML
<body>
<div class="main">
<div class="top">后台登录</div>
<input type="text" id="user" placeholder="用户名" [(ngModel)]="account.name">
<input type="password" id="pwd" placeholder="密码" [(ngModel)]="account.pwd">
<div id="addText"></div>
<button id="footer" (click)="login()">登录</button>
</div>
</body>
css
body {
background-size: 100% 100%;
padding-top: 140px;
background: url(../../../assets/image/3.png)no-repeat;
background-size: 100% 100%;
height: 100%;
background-attachment:fixed;
}
body .main {
display: flex;
flex-direction: column;
align-content: center;
width: 400px;
height: 320px;
margin: 0px auto;
padding: 6px 50px 30px 50px;
border-radius: 10px;
background-color: rgba(250, 250, 250, 0.5);
}
body .main .top {
text-align: center;
font-weight: 700;
font-size: 24px;
margin-bottom: 60px;
}
body .main input {
height: 35px;
border-radius: 10px;
margin-bottom: 18px;
padding-left: 40px;
background-color: #fff !important;
border: none;
outline: none;
}
body .main input:nth-child(2) {
background: url(../../../assets/image/user.png) 5px 5px/25px 25px no-repeat;
}
body .main input:nth-child(3) {
background: url(../../../assets/image/password.png) 5px 5px/25px 25px no-repeat;
}
body .main #addText {
height: 20px;
line-height: 20px;
font-weight: 700;
color: #f1c40f;
text-align: center;
}
body .main #footer {
width: 300px;
height: 35px;
margin-top: 12px;
border-radius: 10px;
font-size: 18px;
text-align: center;
line-height: 35px;
border-style: none;
outline-style: none;
cursor: pointer;
}
body .main #footer:hover {
background: black;
color: #fff;
}
路由设置
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login.component';
const routes: Routes = [
{ path:'',component:LoginComponent}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule
]
})
export class LoginRoutingModule { }
page页面路由设置
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PageComponent } from './page.component';
const routes: Routes = [
{path:'',component: PageComponent}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PageRoutingModule { }
效果
配置跨域
主要原理参考
文件配置
{
"/a/": {
"target": "http://dev.admin.carrots.ptteng.com/",
"secure": "false",
"changeOrigin": true
}
}
package.json设置
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.config.json --open",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
使用npm srart来启动即可
剩下的明天继续
返回列表
评论