Web应用基础

Web应用基础

做的什么、开发过程、遇到的问题、如何解决、哪些未解决、总结；

做的什么 ？

在本次的开发中Web应用基础开发中，秉承着学习+实践的理念，我结合老师的英雄之旅1.0教程、英雄之旅2.0教程、Angular官网教程：英雄之旅三大教程等资料，进行前端框架Angular模拟一个生产环境进行我的TOH英雄之旅开发

期间接触到许多新的技术和知识如下：

1. Typescript基础语法
2. JS运行环境node安装
3. vsCode运行环境插件配置
4. git版本控制使用
5. github远端仓库使用
6. 包管理器选择及配置
7. Angular开发工具angular/cli安装配置及使用
8. 利用Node和MongoDB支持的合成框架Deployd后台服务器
9. 利用angular/cli部署

最终项目实现：

• 导航栏固定使用路由更换显示组件
• 所有英雄列表，单击某英雄将展开操作页面
• 顶级英雄卡片，查看详情进入英雄详情
• 英雄详情页面可以编辑英雄信息并保存同步至服务器
• 添加英雄到数据库
• 使用共享服务管理英雄
• 使用路由在不同视图及组件导航
• 组件数据传递、组件方法绑定
• 报告展示

页面展示：

所有英雄列表页面

该页面组成由导航栏和列表组成，导航栏为app应用构建，下面的所有内容都是路由展示的视图。

导航栏可以分别切换四个视图，之后将对每个页面进行简单介绍。

英雄列表 有编号，姓名，是否为顶级英雄三个属性。

每一列对应一位英雄，单击可展开其中的操作页面

操作页面 展示了该英雄的名字，id，和描述信息

可以进行·删除与进入英雄详情页面编辑

此功能与顶级英雄详情页面雷同，后续进行解释。

注：进行占位，后续所有路由导航的组件皆在这里展示。

顶级英雄列表页面

该页面导航栏不再赘述，其下排布有所有顶级英雄的卡片介绍

点击查看详情可以单独查看某位英雄的详情页面，

详情页面 可以编辑英雄的所有信息

点击编辑符号进入编辑模式，返回符号返回进入的页面，即英雄列表或顶级英雄卡片。

编辑页面 对每个展示的信息利用输入框绑定数据进行修改一下数据。

注意特殊符号：

保存：

更改信息后必须点击保存才能更改数据库信息。

保存后将返回页面并提示

是否顶级符号

顶级:

非顶级:

单击顶级符号即可更改状态。

详情页面多处使用了*ngif以显示和隐藏组件

各页面详细代码后续附上。

添加英雄

添加英雄页面与 详情页面下的编辑模式相似

不过没有内置属性，将新建数据到数据库

我的报告页面

由于本次构建的是angular动态网页，免费部署到github只能为静态网页，所以一开始本页面将放置演示视频。

通过本课程也学习到了markdown语法书写文档，所以本报告采用typora书写转换为html格式上传。

开发过程

TypeScript+node+git前期准备

此三项知识技能及环境准备在以前就已经完成，所以本次开发直接使用，不再赘述过程。

vsCode配置

此次编辑使用VS Code进行，其中内置了git使用方式，不需要使用git bash进行。提前将git与远端仓库github进行配置好，使用ssh连接方式。

yarn安装

使用yarn包进行管理，同时更换其包仓库为淘宝

发现问题：

提示禁止运行脚本，根据百度搜索用一行代码更改某值属性解决问题。

 yarn global add yrm   # 注意使用管理员权限进行全局安装. 注意: 如果安装成功后yrm不能运行, 则是路径问题, 请使用 yarn global bin 查看位置并添加到系统路径中(建议重启系统生效)
      yrm ls                # 列出可用的源
      yrm test taobao       # 测速
      yrm use taobao        # 使用淘宝源

以上代码进行换源。

Angular/cli安装及配置

yarn global add @angular/cli 即可完成安装

ng version 使用命令进行查看是否成功，成功界面如下

配置angular/cli使用yarn作为包管理器，如果有问题随时可转换回npm或者cnpm

ng config cli.packageManager yarn --global #注意使用管理员权限

安装Deployd（MongoDB）

1. yarn global add deployd-cli进行安装
   运行dpd -V查看是否安装成功。

2. 下载MongoDB（https://www.mongodb.com/try/download/community）进行默认安装。

MongoDB 下载

1. 切换到需要存放的目录下（非C），执行命令

dpd create DataOfHero     #新建后台服务程序
    cd TourOfHero         #进入目录
    dpd -d                #先自动启动MongoDB, 运行后自动在浏览器打开2403的控制台

发现问题:出现老师所说问题

采用方法解决问题

 如果仍然提示启动mongoDB失败, 则请先独自运行MongoDB(mongod --dbpath=data),指定当前目录下的data目录为数据库文件目录 然后再执行 dpd --host 127.0.0.1 -d 命令, 明确指定MongoDB服务器的地址. (原因不明)

---

至此环境基本配置成功，接下来正式开始创建项目

前端项目初始化

ng new YXZL --skip-tests

Would you like to Angular routing? 
- Yes
Which stylesheet format would you like to use?
- SCSS

--skip-tests 用于跳过生产测试，避免新建项目过久。

引入样式

因 MDB 升级为5.0后所用标签不兼容以前版本，故以下有关MDB代码不能成功运行了。考虑使用免费的 Angular Material（https://material.angular.io/）

去官网查询，发现使用方法较为简单

ng add @angular/material

使用 ng serve -0 进行本地服务器测试，成功后页面显示为：

新建数据仓库

打开窗口localhost:2403进行数据库创建，根据题目需求，建立如下数据模型

-----------------------------------------------
#属性名称       数据类型         允许为空    说明
----------------------------------------------            
id            string           no         系统设定
no            string           no         编号
name          string           no         姓名
description   string           yes        简介
isTop         boolean          yes        是否顶级英雄  
----------------------------------------------

同时，为保持数据的一致性，我们在 app目录中新建 hero.ts文件如下：

至此，英雄的属性全部具备。

完成TS编码

站在巨人的肩膀上好办事儿，我学习的基础是有老师的源代码和各个地方的源代码的，故参考老师的代码我完成了后端逻辑方面的代码。即完成了各个组件的TS部分代码编辑，用简单的文字版基本实现功能。

新建服务

通过以上，构建出核心的公共服务来管理数据的获取和写入

但实现此功能需要基础HttpClientModule，故现在AppModule中声明。

新建组件

完成以后开始编写我们的各个页面组件，使用代码进行创建

ng g c components/heroList
ng g c components/heroDetail
ng g c components/heroTop
ng g c components/heroAdd

根据教程，完善各组件TS代码

基本实现文本版功能，如下图

但这样的界面完全不符合人类正常申美，我们用官方提供UI库——Angular Material进行美化，需要使用某组件时在AppModule中声明并引用

添加路由

在app.component中进行导航栏的设置，提供了导航路由链接。

将同级目录下app-routing.module.ts的内容修改为

使用主题

开始调用官方的仓库总是出错，样式与官方完全不同

针对此问题，后来发现是因为在以前测试的时候，添加了对应的material，而正式项目并没有添加。

所以赶紧补上

ng add @angular/material

如此使得我们的界面符合官方UI的样式，此处导航栏使用了toolbar。

空的mat-table完成

接下来使用许多组件完成了英雄之旅页面的编写，比如

• 按钮 Button 美化按钮或链接

• 卡片 Card 用于Top英雄前期展示

• 表单字段 Form field 进行英雄需求编辑页面输入

• 网格列表 Grid list 将所有顶级英雄每行两个排列

• 图标 Icon 快速使用小图标

• 输入框 input 用于用户输入位置

• 快餐栏 Snackbar 可用于简短的添加英雄成功提醒

• 表格 Table 显示所有英雄列表

• 工具栏 Toolbar 导航栏组合创建

  最后完成界面的编写。

  此处不再赘述页面分析，见前页面展示

进行项目部署

项目部署这一块我尝试了很多方法，当我完成代码时，最开始尝试在github上部署此页面，发现动态网站部署需要的服务器环境没有。

于是根据使用的架构，希望使用云数据库从github上链接，于是注册了阿里云RDS云数据库，但是研究了一晚上没明白如何实现我们在Servise中的通过http进行数据库返回数据。

最后在阿里云使用了ESC实例，直接将项目在vscode中编译，

ng build

产生的文件夹dist，将其中的代码全部复制

在阿里云环境下搭建Deployd环境，下载nginx用于部署网页应用。

如此可以通过云服务器的公网进入访问，但其中的问题有几个

远程连接服务器

传输文件到服务器

服务器nginx环境配置设置

解决网页刷新404

后续问题部分讲解如何处理。

遇到的问题？怎么解决？

（1）yarn等无法被windows识别，报错

发现问题：

提示禁止运行脚本，根据百度搜索用一行代码更改某值属性解决问题。

（2）创建后台服务程序失败

发现问题：

提示mongod路径无法使用，但其实已经加入到环境变量

先独自运行MongoDB(mongod –dbpath=data),指定当前目录下的data目录为数据库文件目录 然后再执行 dpd --host 127.0.0.1 -d 命令, 明确指定MongoDB服务器的地址. (原因不明)

mongod --dbpath=data
dpd --host 127.0.0.1 -d

发现问题2：

在本地使用没有，阿里云服务器中会报错“lookup is not function...”之类的错误，

• 修改刚生成的 DataOfHero目录下 node_modules/filed/main.js 文件33和155行 lookup 函数为 getType 即可

正常工作~

（3）MDB不适配

此处忘记截图了，按照老师教程来，提示无法正常运行，且更改了我许多文件，当时都要崩溃了，错误出好多。

但是后来决定使用Material来代替，一键安装

ng add @angular/material

还顺手给我解决了刚刚安装坏了的那些东西，perfect

（4）TS编码问题

发现问题：

在多个TS文件中出现的错误，普遍表示为声明的变量没有初始化。我们使用一些方法进行了初始化，但是还有一些需要使用特殊方法。

比如某处需要使用

hero!:Hero;

这类型通常为下方有根据英雄进行查找，不能根据空的东西进行搜索。

最后提前判断其是否为空解决问题。

（5）组件的值传递

如何制作个性化组件，组件套用组件，在一开始我是完全捉摸不透的，后来我仔细阅读了文档，发现其关键便是在于组件间的数据传输，而经典的无非不是@Input()和@Output()

利用这两者，我实现了一部分个性定制

（6）路由导航刷新页面就404

因为其页面上的导航不是正常的链接，所以智能以此通过路由访问，刷新页面将导致404错误

解决方法：

1. 失败

   尝试使用nginx的配置设置trifiles但是没生效
   

2. 成功

   

   声明完成以后，将自动在两个之间 加入#号，可以正常刷新，如下图

   

（7）项目部署问题

远程连接服务器

使用windows自带的远程桌面居然不能连接，没有找到原因，在管理页面通过 VNC进入阿里云下载了向日葵远程控制

注：云服务器下载权限很严格需要先设置允许下载

文件传输问题

因为之前采用VNC登录，不知道怎么传文件，但是没想到向日葵帮我一并搞定了。

（8）图标库无法打开

因为网络问题还是怎么，material中的图标库我不能访问，所以百度搜索了一张简单的图，码一下

（9）组件库不符合心意

有的组件不太符合我心里所需要的那种，所以只能自己敲代码，但是我更喜欢拿现成的

这类型卡片不好看，所以百度搜索这个卡片库

有许多其他人写在里面的Html+Css+Js，可以直接复制使用

还有许多其他问题，一些零零星星小问题，但是当时都忘记记录，现在再来复盘已经回顾不全

未解决的问题

• 关于本项目的目标是要增删改查，目前应该是做到了增加、删除、修改，但是查找没有进行实现。

• 功能性方面: 无日志处理服务；无错误处理服务；不能处理图片；无分页功能等

• 安全性方面: 前后台无用户验证和授权

• 服务器权限不会设置，使用全局开放，完全不适用于市场环境

• 还有就是这个页面缺少响应式设计！！！！！！！！！！！！

总结

在本次的Web程序设计基础中，感觉收益颇丰，学习到了各种知识、技巧。其实对于我来说更大的收获是知道了什么是框架，为什么他可以称之为框架，这些在从前难以理解的东西，因为没有实际动手去做过。

据我所了解，大部分同学都是用的是MDB构建5个网页，但是我觉得用Angular更能学习到一些新的东西，所以我选的这个。

但是在做的过程中，错误频频。各种因为不熟悉框架的错误频频打击我的自信心，我能做出来吗？

还好最后经过我不懈的努力与网络资源的发达，我成功的解决了遇到的基本每一个问题，看着基本实现的页面，我心中无比的成就感。

我认为虽然这个项目我全程基本是根据老师的教程，官网的教程依葫芦画瓢，但是其中教程本身有些错误或过时的东西需要我自己去解决，这个过程我想我已经对于其有充分的了解了。

最后感谢老师的指导，让我在这门课上学到的东西比其他课多得多，不仅仅是理论，更是实践。

我相信我现在已经基本具备了web应用开发的能力，后续还将继续学习，加深技术栈。
服务；无错误处理服务；不能处理图片；无分页功能等

• 安全性方面: 前后台无用户验证和授权

• 服务器权限不会设置，使用全局开放，完全不适用于市场环境

• 还有就是这个页面缺少响应式设计！！！！！！！！！！！！

总结

在本次的Web程序设计基础中，感觉收益颇丰，学习到了各种知识、技巧。其实对于我来说更大的收获是知道了什么是框架，为什么他可以称之为框架，这些在从前难以理解的东西，因为没有实际动手去做过。

据我所了解，大部分同学都是用的是MDB构建5个网页，但是我觉得用Angular更能学习到一些新的东西，所以我选的这个。

但是在做的过程中，错误频频。各种因为不熟悉框架的错误频频打击我的自信心，我能做出来吗？

还好最后经过我不懈的努力与网络资源的发达，我成功的解决了遇到的基本每一个问题，看着基本实现的页面，我心中无比的成就感。

我认为虽然这个项目我全程基本是根据老师的教程，官网的教程依葫芦画瓢，但是其中教程本身有些错误或过时的东西需要我自己去解决，这个过程我想我已经对于其有充分的了解了。

最后感谢老师的指导，让我在这门课上学到的东西比其他课多得多，不仅仅是理论，更是实践。

我相信我现在已经基本具备了web应用开发的能力，后续还将继续学习，加深技术栈。