目 录
项目1
搭建智慧公寓网站首页 1
项目目标 1
效果展示 2
任务1.1　搭建JavaScript开发环境与渲染
首页信息 2
【任务概述】 2
【知识储备】 3
1.1.1　初识JavaScript 3
1.1.2　JavaScript开发工具 4
1.1.3　JavaScript代码的3种引入方式 7
1.1.4　JavaScript常用的输入与输出语句 9
【任务实施】 11
任务1.2　使用JavaScript基础语法实现
动态显示时间 13
【任务概述】 13
【知识储备】 13
1.2.1　变量和常量 13
1.2.2　数据类型 15
1.2.3　表达式与运算符 17
1.2.4　函数 21
1.2.5　BOM 25
【任务实施】 27
任务1.3　使用流程控制与数组实现自动
轮播Banner图 28
【任务概述】 28
【知识储备】 28
1.3.1　流程控制 28
1.3.2　数组 34
【任务实施】 36
任务1.4　使用DOM与事件实现二级菜单的
显示与隐藏 37
【任务概述】 37

【知识储备】 38
1.4.1　DOM 38
1.4.2　事件基础 44
【任务实施】 48
项目实现 51
项目小结 54
课后习题 54

项目2
智慧公寓管理系统的服务器端数据
处理 56
项目目标 56
效果展示 57
任务2.1　搭建Node.js开发环境并实现
模块化开发 57
【任务概述】 57
【知识储备】 58
2.1.1　初识Node.js 58
2.1.2　Node.js环境搭建 60
2.1.3　模块化开发 64
【任务实施】 71
任务2.2　构建与测试Node.js的网络
开发 73
【任务概述】 73
【知识储备】 73
2.2.1　Postman工具 73
2.2.2　AJAX与Axios 75
2.2.3　Express框架 80
【任务实施】 87
项目实现 90
项目小结 94
课后习题 94

项目3
智慧公寓管理系统的登录与注册
页面 96
项目目标 96
效果展示 97
任务3.1　构建Vue开发环境 97
【任务概述】 97
【知识储备】 98
3.1.1　初识Vue 98
3.1.2　Vue环境搭建 100
【任务实施】 101
任务3.2　基于Vue基础语法实现表单提交
页面 102
【任务概述】 102
【知识储备】 103
3.2.1　模板语法 103
3.2.2　指令 105
3.2.3　Vue实例核心选项 113
3.2.4　模板引用 122
3.2.5　Class与Style绑定 123
3.2.6　事件处理与表单绑定 125
【任务实施】 130
任务3.3　基于组件实现列表渲染页面 132
【任务概述】 132
【知识储备】 133
3.3.1　组件基础 133
3.3.2　过渡与动画 139
【任务实施】 145
项目实现 147
项目小结 149
课后习题 149

项目4
智慧公寓管理系统的前端技术栈 151
项目目标 151
效果展示 152
任务4.1　构建现代化构建工具Vite开发
环境 152


【任务概述】 152
【知识储备】 153
4.1.1　单文件组件与构建工具 153
4.1.2　Vite简介 154
4.1.3　Vite的安装与使用 155
4.1.4　Vite的插件机制 157
【任务实施】 158
任务4.2　启用Element Plus组件库增强
项目效果 160
【任务概述】 160
【知识储备】 161
4.2.1　初识Element Plus组件库 161
4.2.2　Element Plus常用组件 163
【任务实施】 188
任务4.3　集成Vue Router与Pinia，构建
动态应用 190
【任务概述】 190
【知识储备】 190
4.3.1　Vue Router 190
4.3.2　Pinia状态管理 199
【任务实施】 205
项目实现 208
项目小结 211
课后习题 211

项目5
智慧公寓管理系统的设计与实现 213
项目组织架构 213
项目环境 214
任务5.1　实现服务器模块 215
【任务概述】 215
【任务实施】 215
任务5.2　实现前台页面模块 216
【任务概述】 216
【任务实施】 218
任务5.3　实现后台页面模块 225
【任务概述】 225
【任务实施】 228
项目总结 238