《Web应用基础》课程结业报告

《Web应用基础》课程结业报告

内容介绍

此次结业作业的网站使用 angular+MBD开发，主题为word-corner,是关于记单词的一个网站，通过angular教程中的angular-in-memory-web-api模块，模拟实现单词信息的CRUD功能。同时，通过调用有道翻译的api，实现了中英互译的功能。

效果图

• 首页
  
• 词汇表
  
• 我的
  
• 添加单词
  
• 修改单词
  
• 删除单词
  
• 搜索单词
  
  
• 翻译功能
  
  

开发过程

环境搭建

开发工具

• vscode

环境准备

• nodejs
• npm
• angular
• MDB
• jquery
• crypto-js

需求分析

通过路由功能实现SPA页面,页面顶部是导航栏，分别有主页，词汇表，我的，三个主体内容的导航。同时有一个独立于其他模块的翻译功能的实现。并在导航栏中提供该功能。
词汇表模块，实现单词的增删改查功能，采用手风琴样式，使每点击一个手风琴，可以查看该单词的详细信息，提供删除，修改单词信息的功能的按钮，和添加到的按钮。整个页面的右下角采用绝对定位的方式，提供一个添加单词信息的按钮。以实现单词信息的添加。导航栏最右侧提供一个输入框，用以模糊搜索已有单词，并可点击以显示该单词的详细信息。添加单词，修改单词，删除单词的提示框，单词详细信息的显示，都采用模态框的形式展示。

各模块功能实现

整体项目目录结构

├─component
│ ├─add-word
│ ├─individual
│ ├─translation
│ ├─update-word
│ ├─word-search
│ └─words
├─entity
├─service
└─view
    ├─footer
    ├─home
    │ └─img
    └─navbar
这是整个项目的目录结构，分为实体文件夹，服务文件夹，公共视图文件夹。组件文件夹。

实体类

实体文件夹里有两个ts文件。分别为一个单词类。和一个词意类。其中单词类依赖于词意类

// Word.ts类
export interface Word {
   
    id: number;
    english: string;
    meaning: string[];
    exampleSentence: ExampleSentence[];
}

//ExampleSentence类
export interface ExampleSentence {
   
    originalText: string;
    translation: string;
}

公共视图组件

公共视图组件中有navbar ,home, footer三个组件。可能是我审美不好，做不出好看的footer，感觉加上了footer之后并不是特别美观（尽管不加也不美观）后来在最后的成品中，没有加入footer视图。
由于是一些存html代码，比较繁多，这里就不贴出代码了。

业务类

业务类一共有两个，一个是 in-memory-data.service.ts用于将数据存在内存中，模拟出数据的增删改查功能。具体代码与angular的英雄之旅教程没有什么差别。也就不贴代码了。
另一个是word.service.ts。用于实现单词的增删改查功能。
这里的增删改查功能代码与angular的英雄之旅教程也无太大不同。

功能组件

add-word组件

该组件提供增加单词信息的功能
主要有以下几个业务函数

//添加单词，
addWord(): void {
   
	
	const word: any = document.getElementById('word');
	//判断添加单词模态框中的单词是否为空，以及是否是一个合法的单词。
    if (word.value.length <= 0) {
   
      window.alert('添加失败，请输入单词！');
      return;
    } else if (!this.isWord(word.value)) {
   
      window.alert('添加失败，请正确输入单词！');
      return;
    }

    let english: string = word.value;

    const mean: any = document.querySelectorAll('.mean');

    let meaning: string[] = [];
	//	将单词词意输入框的单词词意取出，push进meaning字符数组中
    for (let i = 0; i < mean.length; ++i) {
   
      if (mean[i].value.length > 0) {
   
        meaning.push(mean[i].value);
      }
    }
    const exampleOrigin: any = document.querySelectorAll('.exampleOrigin');
    const exampleTrans: any = document.querySelectorAll('.exampleTrans');

    let oringin: string = '';

    let trans: string = '';
    
    let exampleSentence: ExampleSentence[] = [