实验报告一 Web开发基础

一、设计静态HTML项目，显示豆瓣电影信息

1、设计完成后的效果截图

2、写出页面的完整代码

二、分析项目vue3-elementplus

1、截图主页效果并根据根组件的模板代码加以说明。

页面主要包含两个部分，上部分和下部分，其中下部分又包括左边和右边，根组件主要包含3种Element-Plus组键标签，头部el-header主要实现上部分内容的显示，侧边栏这部分使用了Element-Plus菜单组件，分别有菜单、菜单项、子菜单，也就是el-menu、el-menu-item和el-sub-menu。el-aside就说明了欢迎页面这部分是在侧面，其中欢迎页面是菜单项，里面嵌套了学院查询和学院管理两个子菜单，这两个子菜单里面又嵌套了两个菜单项，菜单的菜单项与子菜单，默认是垂直的，el-container里面嵌套了el-aside和el-main这两个组件实现的是组件的并排关系。在el-container内，el-aside和el-main是左右结构，el-aside在左，el-main在右，router-view被放置在el-main内,通过菜单项链接显示被加载Vue组件的router-view。template定义了一个标题模板，可以通过引用#title来插入标题的内容。对el-menu应用属性 active-text-color，设置选中菜单项时的颜色。default-active 是 Vue Router 提供的一个属性，用于设置默认激活的路由链接或导航项。"$route.path" 表示将默认激活的路由设置为当前路由的路径。

2、根据package.json里定义的模块依赖，说明他们分别使用在什么地方？

package.json里包含以下几项依赖

"axios": "^1.4.0",
"element-plus": "^2.3.9",
"vue-router": "^4.2.4"

其中

import axios from "axios"

用于main.js作为一个全局的一个引入，导入后就可以在代码里使用它的功能，比如发送 HTTP 请求、处理响应这些。

import ElementPlus from 'element-plus'

也是用在main.js，为了使界面更加美观，能够使用Element Plus里的UI组件，简洁美观易用。

import { createRouter, createWebHistory } from 'vue-router'

使用在index.js，createRouter用于创建一个路由实例，通过调用 createRouter 函数可以创建一个用于管理路由的对象，配置路由规则和处理函数。createWebHistory是用来创建一个基于浏览器 history 模式的路由历史记录管理对象，支持前端路由的导航和回退功能。

三、Maven Web 项目的创建及运行

1.点击File，找到New,然后点击Project，选择Maven Archetype,修改名字，选择文件存放位置，找到Archetype点击下拉选项箭头，选择最后一个以webapp结尾的，点击创建。

2.点击Current File选择第一个以Edit开头的选项，点击进入，找到左上角加号选择Tomcat Server里的local，打开修改名字为Tomcat 9点击Deployment点击加号选择第二个UNIT01:war exploded，再点击Fix.

3.打开pom.xml在<dependencies></dependencies>里添加

<dependency>
 <groupId>javax</groupId>
 <artifactId>javaee-api</artifactId>
 <version>8.0</version>
</dependency>

点击右侧边框Maven找到更新的按钮Relod All Maven Projects,点击即可，会在本地仓库里下载一些文件。

【小结】

1. 上机时运行douband的HTML页面点击下拉框的电影名称时，控制台会出现报错，电影的信息显示不出来，在自己的电脑上运行相同的代码时，这个问题就得到了解决。原因未知。

2. .m2里的javax文件里缺少一些相关文件，需要在<dependencies></dependencies>里再嵌套

   <dependency>
    <groupId>javax</groupId>
    <artifactId>javaee-api</artifactId>
    <version>8.0</version>
   </dependency>

然后Relod All Maven Projects就会添加javaee-api的一些相关文件。问题已解决。

3.配置Tomcat服务器时出现问题

Application server的下拉列表里没有Tomcat9

Deployment里也没有找到Fix,不知道怎么回事，问题已解决。