Web结业总结报告

2024-01-02 10:11:05

Web结业总结报告

网站内容

此次Web结业网站通过Angular+MDB进行实现，网站主题是介绍国产单机游戏，通过in-memory-web-api来模拟出的远程数据服务器通讯，应用将会通过HttpClient 来发起请求和接收响应。
网页主要有主页和详情两个页面，分别展示了推荐游戏以及所有游戏。

开发过程

首先在本地输入游戏信息查看网页是否显示，然后再通过FormsModule 实现数据的双向绑定，实现在本地数据传向网页时，网页在接收的同时也能返回用户操作的数据。
接着把所有页面的跳转进行设置，及配置路由

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

import { HomeComponent } from './home/home.component';
import { GamesComponent } from './games/games.component';
import { GameMessageComponent } from './gameMessage/gameMessage.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: DashboardComponent },
  { path: 'games/:id', component: GameMessageComponent },
  { path: 'games', component: GamesComponent },
];

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

再通过命令行npm install angular-in-memory-web-api --save安装内存 Web API 包模拟远程数据服务器通讯，在相应的ts文件中写入相应的点击事件实现增删改查功能。最后为整个页面内容写入样式对网页进行装饰。如：

  add(name: string): void {
    name = name.trim();
    if (!name) { return; }
    this.heroService.addHero({ name } as Games)
      .subscribe(game => {
        this.games.push(game);
      });
      alert('添加成功!');
  }

  delete(game: Game): void {
    this.games = this.heroes.filter(g => g !== game);
    this.gameService.deleteGame(game.id).subscribe();
    alert('删除成功!');
  }

中途遇到的问题

已解决

在MDB静态网页的实现中，响应式图片的尺寸大小不同，所以导致图片与图片之间的错位而使网页不美观
解决办法：将所有图片都剪切成相同尺寸，然后在放大图片时返回为原本尺寸的图片
在Angular动态网页的实现中，方法的声明中，利用return返回参数时遇到：类型“string | null”的参数不能赋给类型“string”的参数。不能将类型“null”分配给类型“string”问题
解决办法：将tsconfig.json文件中的"strict"由true改为false
在Angular动态网页的实现中，无法将类型"string"隐式转换为"string[]"
解决办法：将参数类型声明为any
在部署Angular到Github Pages中，无法部署。通过两种方法都无法实现：
(1) 问题：无法生成docs文件导致部署后的网站报错无法访问。代码：
ng build --prod --base-href "https://<user-name>.github.io/<repo>/"
git init
git remote add origin https://github.com/your-username/your-project-name.git
ngh
(2)问题：无法生成dist文件且docs没有上传到网站上。代码：
git remote add origin https://github.com/your-username/your-project-name.git
git branch -M main
git push -u origin main
git checkout -b gh-pages
ng build --output-path docs --base-href /your_project_name/
解决办法：在通过命令行自动导入相应文件后再手动导入。(因为没有dist文件而没有导入不知道有什么隐患)

未解决

在MDB静态网页的实现中，由于之前内容的宽高设置，导致后面本应该覆盖整个网页的内容只能和之前内容的样式保持一致
在Angular动态网页的实现中，导航栏按钮等组件的样式设置在手机端无法加载问题

总结

本次web课程学习了关于MDB的使用以及Angular这一前段框架的使用。让我对样式的设计等能够更好的进行编写，同时也让我对前端有了更深的了解，更是让我对如何部署网页到服务器上有了更深刻的认识：在查阅资料的同时，也要学会自己思考，不能一昧依赖别人的东西。最后，通过web课程的学习以及最终能够应用，让我对自己学习的方向更加明确。

码农公寓