摘要：随着2019年的到来，许许多多的商业领域都开始构建属于自己的网站。小到零食售卖，大到全球购物，于是本人针对家装领域开发了名为“大城小家”家装网站。

使用Visual Studio Code构建一个家装网站的前端以及后端，实现家装网站数据的动态载入，界面优美，保证用户体验良好，网站前台能够完成用户的登陆，以及用户对设计师和装修套餐的预约；后台可以对网站数据的动态添加、修改和删除，能够对用户的设计师预约和套餐的预约进行接受和取消。后台数据通过 Navicat Premium构建，通过此次的网站构建，让自己对前端有更深入的了解。

网站的可视化部分都是由前端的编码进行实现，在整个网站的构建中，前端的责任就是给用户有优质的操作体验，能够将产品的优势，公司的特点等，完美地展现给用户。我此次设计的家装网站，正是能够突出前端编码的特点，界面的设计，数据的展示，用户的操作，这能让自己充分的体会到前端的魅力。

关键词： Visual Studio Code  可视化  用户体验

目录

摘要

Abstract

1 绪论-2

1.1概述-2

1.2网站设计目标和意义-2

2 方法和技术的简单介绍-4

2.1 JavaScript技术介绍-4

2.2 PHP技术介绍-4

2.3 HTML技术介绍-5

2.4 MySQL介绍-5

3 系统分析-7

3.1可行性研究-7

3.2需求分析-7

4 系统设计-8

4.1系统设计概要-8

4.2网站模块UML设计-9

4.3 首页模块-10

4.4装修案例模块-11

4.5设计师和设计师详情模块-11

4.6装修套餐模块-11

4.7施工方案和关于我们模块-11

4.8用户登录模块-11

4.9用户注册模块-11

4.10用户管理模块-11

4.11后台管理系统设计-11

4.12数据库设计-12

5 系统实现-15

5.1首页实现-15

5.2登录、注册页实现-17

5.3设计师、设计师详情页实现-18

5.3个人中心页实现-20

5.4后台管理系统实现-21

5.5网站前端实现效果图-24

5.6网站后台实现效果图-29

参考文献-33

致谢-34