响应式设计的荞麦家装网站建设
目 录
一、引言 1
（一）网站开发背景 1
（二）网站开发意义 1
二、系统分析 1
（一）系统功能分析 1
1.用户权限分析 1
2.管理员权限分析 1
（二）系统开发技术、开发环境及开发工具介绍 2
1.开发技术介绍 2
2.开发环境介绍 2
3.开发工具介绍 3
三、数据库结构介绍 3
四、基于响应式的网站设计与实现 6
（一）网站组织结构图 6
（二）网站前端代码整体架构 7
（三）响应式网站页面设计布局 8
1.响应式网站导航设计 8
2.首页 9
3.家装方案 11
4.局部翻新 13
5.攻略和帮助页 15
6.管理我的账户 16
7.3D全景图 17
五、 网站的发布与维护 18
（一）网站的发布 18
（二）网站的维护 19
总结 19
致谢 20
参考文献 20
一、引言
（一）网站开发背景
互联网行业已成为当今主流，很多行业都朝着这个方向发展，家装也是一样，互联网家装是一个打破传统家装的装修的方式，传统家装在装修的过程中，会遇到很多问题，比如乱增项乱价钱，而互联网装修一切都是透明的，建材原料都可在官网上查看，报价也可以在官网上获得。
网站开发意义
现在的年轻人，无一不是为了事业打拼然后买房买车可是房买好了，装修又成问题了，普通人根本不懂装修，就算找了一家传统的家装公司，也需要实时盯着，而且建材原料都得自己选。而互联网家装就不一样，它省时省力，只需登录官网就可预约，签订合同后公司便会派人量房设计了。报价问题用户只需要输入住房面积和卫生间个数即可查看。装修开工后，通过官网或者微信即可查看装修进度。因为网站是基于响应式开发的，手机查看方便快捷。不仅便于管理，用户体验也是极佳的。
二、系统分析
（一）系统功能分析
1.用户权限分析
*好棒文|www.hbsrm.com +Q: ^351916072*
盯着，而且建材原料都得自己选。而互联网家装就不一样，它省时省力，只需登录官网就可预约，签订合同后公司便会派人量房设计了。报价问题用户只需要输入住房面积和卫生间个数即可查看。装修开工后，通过官网或者微信即可查看装修进度。因为网站是基于响应式开发的，手机查看方便快捷。不仅便于管理，用户体验也是极佳的。
二、系统分析
（一）系统功能分析
1.用户权限分析
用户进入官网后，可以到footer部分点进管理我的账号就行登录，可以用手机号登录也可以用微信账号登录,如未注册可以点击注册账号。登陆后左侧会有三栏导航分别是我的房屋、个人资料、账号设置。
“我的房屋”里，用户可以查看自己房屋的装修进度，如果还不是我们公司的客户还可以点击预约装修。“个人资料”里用户可以修改姓名、性别、所在地区、详细地址。点击“账号设置”用户可以修改已绑定手机、已绑定微信、还有修改密码，用户退出登录也在这里。
本网站还提供报价功能，用户只需要输入房屋面积和卫生间个数，即可知道整个房子装修下来需要多少钱。
在“局部翻新”页面用户只需输入姓名和手机号即可免费预约。
2.管理员权限分析
管理员登陆后，即可看到项目进度，分为项目管理、套系管理、客户管理、仓库管理、内容管理、权限管理、系统管理这七大项。
项目管理分为项目管理、工人管理、装修流程，管理员可以创建项目、查看项目还有更新装修进度，工人管理中可以创建工人，添加工人的基本信息还有查看工人、编辑工人。装修流程即为装修顺序。
套系管理分为硬装方案和个性包管理，硬装方案即为各个色系内容的发布还有编辑，个性包管理即为一些常规家装方案里没有的东西。
客户管理分为用户管理、用户报价、用户预约。注册的用户都可以在这里查看，管理员可以修改用户的基本信息，未在网站里预约注册的用户我们还可以自行添加用户。
仓库管理分为建材管理、品牌管理、建材分类、建材参数、供应商管理。管理员都可对其进行编辑
内容管理分为文章管理、标签管理、常见问题，管理员可对其进行增删改查。
权限管理即对用户权限分类，有管理员和用户之分，同事管理员还有不同权限的区别。
（二）系统开发技术、开发环境及开发工具介绍
1.开发技术介绍
本系统开发所涉及到的技术有HTML3+CSS5、JavaScript、PHP、jQuery、sass、git、bootstrap、font awesome、gulp、js严格模式、MySQL。
(1)sass
sass是一款css预处理框架，就是为css添加了一些编程的功能，它可以用使我们的css工作流变得简化，同时可以使我们的文件扩展、管理和维护变得更加容易。sass和css的不同之处在于它引入了一些新的概念，变量，混合，嵌套和选择器继承。sass使用ruby语言写的，不过两者并没有什么关系，不会ruby一样可以使用，只要先安装ruby再安装sass。
(2)git
git是一款分布式版本控制系统，它不仅是免费的还是开源的，在处理任何大中小项目的时候都能够达到敏捷高效。
(3)bootstrap
bootstrap是一款现在特别流行的前端框架，尤其适合于移动端开发。它用起来非常简单且方便，大大提高了我们的工作效率。它推出后一直是github上热门的开源项目。
(4)font awosome
font awosome是一款字体图标，这款图标免费为bootstrap提供搭配使用。用css能够非常方便的改变这些图标的字体样式。图标的制作使用的是数量图，因此它可以在所有大小的屏幕上完美呈现。
(5)gulp.js
gulp.js是一个自动化构建工具，在项目开发过程中，开发者可以使用它自动执行一些常见任务。它的构建是基于node.js。只要在终端里打开项目所在文件夹，输入gulp,
一、引言 1
（一）网站开发背景 1
（二）网站开发意义 1
二、系统分析 1
（一）系统功能分析 1
1.用户权限分析 1
2.管理员权限分析 1
（二）系统开发技术、开发环境及开发工具介绍 2
1.开发技术介绍 2
2.开发环境介绍 2
3.开发工具介绍 3
三、数据库结构介绍 3
四、基于响应式的网站设计与实现 6
（一）网站组织结构图 6
（二）网站前端代码整体架构 7
（三）响应式网站页面设计布局 8
1.响应式网站导航设计 8
2.首页 9
3.家装方案 11
4.局部翻新 13
5.攻略和帮助页 15
6.管理我的账户 16
7.3D全景图 17
五、 网站的发布与维护 18
（一）网站的发布 18
（二）网站的维护 19
总结 19
致谢 20
参考文献 20
一、引言
（一）网站开发背景
互联网行业已成为当今主流，很多行业都朝着这个方向发展，家装也是一样，互联网家装是一个打破传统家装的装修的方式，传统家装在装修的过程中，会遇到很多问题，比如乱增项乱价钱，而互联网装修一切都是透明的，建材原料都可在官网上查看，报价也可以在官网上获得。
网站开发意义
现在的年轻人，无一不是为了事业打拼然后买房买车可是房买好了，装修又成问题了，普通人根本不懂装修，就算找了一家传统的家装公司，也需要实时盯着，而且建材原料都得自己选。而互联网家装就不一样，它省时省力，只需登录官网就可预约，签订合同后公司便会派人量房设计了。报价问题用户只需要输入住房面积和卫生间个数即可查看。装修开工后，通过官网或者微信即可查看装修进度。因为网站是基于响应式开发的，手机查看方便快捷。不仅便于管理，用户体验也是极佳的。
二、系统分析
（一）系统功能分析
1.用户权限分析
*好棒文|www.hbsrm.com +Q: ^351916072*
盯着，而且建材原料都得自己选。而互联网家装就不一样，它省时省力，只需登录官网就可预约，签订合同后公司便会派人量房设计了。报价问题用户只需要输入住房面积和卫生间个数即可查看。装修开工后，通过官网或者微信即可查看装修进度。因为网站是基于响应式开发的，手机查看方便快捷。不仅便于管理，用户体验也是极佳的。
二、系统分析
（一）系统功能分析
1.用户权限分析
用户进入官网后，可以到footer部分点进管理我的账号就行登录，可以用手机号登录也可以用微信账号登录,如未注册可以点击注册账号。登陆后左侧会有三栏导航分别是我的房屋、个人资料、账号设置。
“我的房屋”里，用户可以查看自己房屋的装修进度，如果还不是我们公司的客户还可以点击预约装修。“个人资料”里用户可以修改姓名、性别、所在地区、详细地址。点击“账号设置”用户可以修改已绑定手机、已绑定微信、还有修改密码，用户退出登录也在这里。
本网站还提供报价功能，用户只需要输入房屋面积和卫生间个数，即可知道整个房子装修下来需要多少钱。
在“局部翻新”页面用户只需输入姓名和手机号即可免费预约。
2.管理员权限分析
管理员登陆后，即可看到项目进度，分为项目管理、套系管理、客户管理、仓库管理、内容管理、权限管理、系统管理这七大项。
项目管理分为项目管理、工人管理、装修流程，管理员可以创建项目、查看项目还有更新装修进度，工人管理中可以创建工人，添加工人的基本信息还有查看工人、编辑工人。装修流程即为装修顺序。
套系管理分为硬装方案和个性包管理，硬装方案即为各个色系内容的发布还有编辑，个性包管理即为一些常规家装方案里没有的东西。
客户管理分为用户管理、用户报价、用户预约。注册的用户都可以在这里查看，管理员可以修改用户的基本信息，未在网站里预约注册的用户我们还可以自行添加用户。
仓库管理分为建材管理、品牌管理、建材分类、建材参数、供应商管理。管理员都可对其进行编辑
内容管理分为文章管理、标签管理、常见问题，管理员可对其进行增删改查。
权限管理即对用户权限分类，有管理员和用户之分，同事管理员还有不同权限的区别。
（二）系统开发技术、开发环境及开发工具介绍
1.开发技术介绍
本系统开发所涉及到的技术有HTML3+CSS5、JavaScript、PHP、jQuery、sass、git、bootstrap、font awesome、gulp、js严格模式、MySQL。
(1)sass
sass是一款css预处理框架，就是为css添加了一些编程的功能，它可以用使我们的css工作流变得简化，同时可以使我们的文件扩展、管理和维护变得更加容易。sass和css的不同之处在于它引入了一些新的概念，变量，混合，嵌套和选择器继承。sass使用ruby语言写的，不过两者并没有什么关系，不会ruby一样可以使用，只要先安装ruby再安装sass。
(2)git
git是一款分布式版本控制系统，它不仅是免费的还是开源的，在处理任何大中小项目的时候都能够达到敏捷高效。
(3)bootstrap
bootstrap是一款现在特别流行的前端框架，尤其适合于移动端开发。它用起来非常简单且方便，大大提高了我们的工作效率。它推出后一直是github上热门的开源项目。
(4)font awosome
font awosome是一款字体图标，这款图标免费为bootstrap提供搭配使用。用css能够非常方便的改变这些图标的字体样式。图标的制作使用的是数量图，因此它可以在所有大小的屏幕上完美呈现。
(5)gulp.js
gulp.js是一个自动化构建工具，在项目开发过程中，开发者可以使用它自动执行一些常见任务。它的构建是基于node.js。只要在终端里打开项目所在文件夹，输入gulp,
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/jsjkxyjs/2545.html
