基于vue的适老化住宅设计系统的设计与实现

本系统拟设计一种基于Vue的适老化住宅设计系统，该系统通过对老年人能力进行评估以后，通过模型对比，生成个性化改造方案并进行图形化显示，用户还可以根据模块化适老改造方案模块进行有效针对的模块化的单一选择，并且可以根据老年人能力评估的统计模型，给老年人推荐出当前受老年人喜爱的适老化推荐方案。系统通过Vue,ElementUI,Bootstrap等框架下Web应用研发的关键技术研究、Mysql数据库详细分析，设计基于 Vue的居家养老模式下适老化改造系统，该系统前端研发采用 Js,Html,Css,Vue等技术，Node作为系统后台研发语言。在系统安全方面做了详细分析，通过采用身份验证、用户权限、登录信息加密等技术来保护用户数据安全。

此基于Vue的适老化住宅设计系统界面设计简洁直观，功能使用迅捷高效，且在提高效率的同时，也实现了系统的基本功能需求。经测试，本系统可以实现适老化住宅设计系统中功能的基本要求，避免了传统形式的复杂繁琐；对于用户而言，这是非常重要的，并且更加舒适，智能。

关键词：适老改造住宅设计模型

ABSTRACT

With the aging of our country,the living differences of the elderly are gradually obvious.It has become a common idea to improve the living conditions of the elderly in cities.In China,the traditional ideas are deeply rooted,the family structure is not complex,and the social value conditions are increasingly high,the social pension institutions established by relying on state subsidies are not only unable to meet the increasing number of the elderly at the present stage,but also the conditions,the needs of the elderly are gradually increasing.

This system is proposed to design a Vue based optimal aging residential design system,the system is based on the old ability assessment, through the model contrast,generating personalized retrofit scheme and graphical display,the user can also according to the modular optimal old module modification plan effectively for modular single choice,and can according to the statistical model of competency assessment in the elderly,To recommend the elderly to the current elderly favorite suitable for aging recommended program.Through the research on the key technologies of Web application research and development under the framework of Vue,ElementUI and Bootstrap,and the detailed analysis of MySQL database,the system designed an aging suitable transformation system based on Vue under the home elderly care mode.The front-end of the system was developed with Js,Html,Css,Vue and other technologies.Node as the background development language of the system.The security of the system is analyzed in detail,and the security of user data is protected by using authentication,user authority,login information encryption and other technologies.

This Vue based design system for aging housing is simple and intuitive in interface design,quick and efficient in function use,and at the same time of improving efficiency,it also realizes the basic functional requirements of the system.After testing,the system can realize the basic requirements of functions of the aging adaptation system under the home nursing mode,avoiding the complexity and tedious of the traditional form;For the user,this is very important,and more comfortable,intelligent. Keywords:old modification residential design model

1 绪论

1.1 研究背景

目前的话我国养老的体系正在逐渐的完善，但是老人们还是都倾向于在家里进行养老。所以就现在来看，居家养老模式这种模式，更受老人们的喜欢，首先老年人在自家的房子居住一方面能和子女们经常见面，另一方面也能感受到家庭的温馨。在家庭..............

目前我国的发展十分迅速，但同时人口老龄化也是普遍产生的一个问题，所以适合老人居住的房屋设计是越来越多老人们更加迫切的愿望。并且研究表明，大多数的老年....................

1.2 国内外研究现状

我国高度重视养老产业的发展，全国老龄委规划国务院批准的针对老龄事业发展颁布的《中国老龄事业发展“十一五”规划》，在这次规划中提出了新的养老居住................

日本早在1970年就进入老龄化社会，历经近50年相关研究，在居住设计方面，由机构养老的单一模式逐步过渡到居家养老为主、辅以社区养老服务[2]。建设了..................

在我国，为了让老年人自己居住的住宅真正成为他们享受晚年生活的天堂，所以居家式老化改造逐渐走进人们的视线之中。但就目前而言，居家式老化改造并未实际的应..................

基于上述研究，本文拟设计一种居家养老模式下适老化改造系统，该系统通过对老年人能力评估以后，通过模型对比，生成个性化改造方案并进行图形化显示，用户还可........................

1.3 研究的目的和意义

本系统研究的目的和意义随着社会的不断发展，老龄化的进程也在加快，并且老年人的居家养老问题也在受到社会的广泛关注。并且，居家养老也是老人们心中所期望的，也是目前社会所发展的趋势。本系统以解决老年人居家养老问题为目标，对老年人能力评.................

1.4 论文组织结构

本论文通过了对适老化住宅设计系统的设计与实现，以现实生活对此的需求，在各个方面逐步分析，生成对适老化系统的分析。考虑到需要拥有的角色、对应的群....................

本文共分为7章，内容简介如下：

第1章介绍背景目的和意义。以及对适..................

第2章介绍在适老化住宅设计系统设计中使用的技术.....................

第3章主要对适老化住宅设计系统进行需求分析。以完................

第4章介绍了系统的总体架构设计。对适老化住宅设计系统....................

第5章主要为系统的实现。对系统前后端进行分别...........................

第6章主要介绍系统测试。首先是单元测试，集成测试，然后是系................

第7章为总结与......................

2 相关开发技术与实验环境

2.1 相关开发技术介绍

2.1.1 JavaScript语言

JavaScript最初是受Java语言的开发而开始设计的，后来逐渐备受前端的喜爱。JavaScript分为三个部分,一是ECMAScript，在最初的标准.....................

2.1.2 Jquery框架

Jquery相当于Js的升级版，内部封装了Js，通过Jquery可以直接调度Js库，不需要再书写原生的Js。这也是Jquery最明显的优点，更好的操作原生标....................

2.1.3 Ajax技术

Ajax是一个用于快速创建动态网页的技术，可以发送异步请求，是页面出现懒加载的动态效果。Ajax的存在是因为浏览器的同源策略造成的。这也是...................

2.1.4 MySQL技术

数据库介绍：MySQL属于关系型数据库，表与表之间的联.................

2.2 实验环境介绍

Vue是一套构建用户界面的渐进式前端框架。只关注视图层，并且非常容易学习，还可以很方.............

本项目是以Node开发后端服务器的启动，配合Ajax进.................

3 可行性分析与需求分析

3.1 可行性分析

可行性的分析会围绕着经济、技术、操作和系统需..............

3.1.1 经济可行性

3.1.2 技术可行性

本系统是一个以Vue技术体系为支撑的系统，使用Vue框架编....................

3.1.3 操作可行性

本次毕业设计整个系统采用模块式设计，操作简单。对需求.............

3.2 系统需求分析

经过了认真细致的考察，通过严谨的分析，决定本系统的功能需求如下：

网站简单易操作，为老人提供便捷服务，网站需要满足三种适用人群...................

3.3 例图设计

适老化改造系统的设计分为三类：专家、管理.................

3.3.1 专家用例图

专家这个角色是面向用户的，可以发布自己有想法的一些..................

图 3-1 专家用例图

3.3.2 管理员用例图

管理员在后台管理系统对前台的各个功能展示做出系列的管理。主要表现对前台方案管................

图3-2 管理员用例图

3.3.3 用户用例图

用户可以进行登录以及注册，登录以后可以对自身能力进行评估，然后生成能力评估图，根据....................

图 3-3 用户用例图

3.4 系统性能分析

系统的性能分析主要是高并发和高可用。例如，如果几百用户同时在线，则无法保...................

3.4.1 时间性能要求

前台页面因为需要通过Ajax发送跨域请求，所以在时间上，如果因为网络...............

3.4.2 灵活性能要求

本次毕业设计整个系统采用模块式设计，操作简单。对需求进行...................

3.5 系统功能上需要解决的技术问题

（1）系统的高并发问题是最.............

（2）在统计图管理上避免不了一些用户刻意伪造数据，那么相应的后台...............

（3）在Vue组件化上进行传送数据，如果数据量过多，发生错...............

（4）在后台管理用户数据使用树形的结构列为表格结构，后台数...............

3.6 系统开发环境

本系统是一个以Vue技术体系为支撑的系统，主页使用Vue框架编写，整个系................

4 系统总体设计

4.1 系统功能描述

该系统包含前台展示与后端数据处理，前台用户进行对自己的评估，后台实时...............

4.1.1 专家模块管理功能

（1）根据登录账号的不同，专家可以查看自己发布...................

（2）专家查看预约者的信息，并.............

4.1.2 管理员模块功能

（1）管理员根据老年人的年龄信息进行统计管理并形...............

（2）对专家发布的适老化改...............

（3）对前台用户...............

（5）对前台轮播图..............

（6）查看专家发布的方................

（7）对前台家具模块...................

4.1.3 用户模块功能

（1）老年人能力评估模块设计：老人根据自身的居住方式，生活方式，经济状况，健康状况，年龄，以及身体状况通过表单进行输入和选择,生成个人.................

（2）个性化适老改造方案模块设计：针对老年人个人的能力评估结果和生成个性化设计建议图示，用户可以寻找专家进行预约,对自己的个人详...............

（3）模块化适老改造方案模块设计：根据厨房，洗手间，浴室，地板，扶手..................

4.1.4 系统的主要功能结构图

系统的主要功能结构图，适老化住宅设计系统前台如图4-1所示，适老化住宅..................

图4-1 系统的前台功能结构图

图4-2 系统的后台功能结构图

4.2 数据库实体设计

本系统数据库采用Power Designer设计。数据库存储我们所需要的数据，数据库中的表也是相互关联。在这个数据库设计上，实体对象包括模块化适老实例、住宅设计方案..............

4.2.1 模块化适老设计

模块化适老实体属性包括ID、Logo、名称、创建时间、更新时间、类型、推荐总数...............

图4-3 模块化适老实体属性图

4.2.2 住宅设计方案设计

住宅设计方案实体属性包括 ID、方案名称、用户ID、封面图片、方案详情................

图4-4 住宅设计方案实体属性图

4.2.3 用户设计

用户实体属性包括方案ID、ID、用户名、昵称、密码、头像、用户类型、专家................

图4-5 用户实体属性图

4.2.4 老年人能力信息设计

老年人能力信息实体属性ID、用户名、薪资、年...............

图4-6 老年人能力信息实体属性图

4.2.5 用户预约信息设计

用户预约信息实体属性贴子ID、设计师ID、客户联系电话、预约者...............

图4-7 用户预约信息实体属性图

4.2.6 评论预约信息设计

评论预约信息实体属性ID、标题、主配图片、内容、是否轮播图、阅读.............

图4-8 评论信息实体属性图

4.2.7 系统全局E-R图

系统全局E-R图.............

图4-9 系统全局E-R图

4.3 适老化设计管理系统数据库

数据库是连接前端与后端最重要的部分，在此环节上，数据库实............

4.3.1 模块化适老信息表

模块表包括ID、模块名称、模块类型、模块logo、模块推荐数、创建时间、更新.................

表4-1 模块化适老表(model)

方案表包括ID、用户ID、方案名称、封面照片，方案详情，设计风格，户型，面积，地主，价.............4.3.2 住宅设计方案信息表

表4-2 住宅设计方案信息表（demo）

字段名	描述	类型	长度	是否空	是否主键
id	id	int	11	否	是
user_id	用户id	int	11	是	否
title	方案名称	Varchar	50	是	否
url	封面图片	Varchar	250	是	否
detail	方案详情	Varchar	255	是	否
style	设计风格	int	11	是	否
type	户型	int	11	是	否
space	面积	Varchar	50	是	否
address	地址	Varchar	64	是	否
price	价格	Varchar	50	是	否
create_time	创建时间	Datetime	50	是	否
update_time	更新时间	Datetime	50	是	否

4.3.3 用户信息表

本表存储用户信息，包括主键，用户名，别名，密码，头像，用户类型，设计师等级，经验简............

表4-3 用户信息表（user）

本表存储老年人能力信息，包括用户名、薪资、年龄，健康.............

4.3.4 老年人能力信息表

表4-4 老年人能力信息表（users）

4.3.5 预约信息表

预约信息表包括帖子ID、预约者ID、设计师ID、客户姓名、客户................

表名4-5 预约信息表（apply）

评论信息表包括ID、标题、主配图片、内容、更新时间、创建时间、状态。评论信息表如表4-6所示。4.3.6 评论信息表

表4-6 评论信息表（comment）

字段名	描述	类型	长度	是否空	是否主键
id	id	int	11	否	是
user_id	用户id	int	11	是	否
demo_id	方案id	int	11	是	否
content	内容	Varchar	50	是	否
create_time	创建时间	Datetime	50	是	否
update_time	更新时间	Datetime	50	是	否
status	状态	int	11	是	否

4.4 系统功能流程图

（1）用户进入前端界面需要先进行注册，输入注册信息，前端首先校验用户名密..............

（2）用户注册成功后，用户进行登录操作，输入自己的用户名和密码，登陆成功后进..............

图4-10 注册流程图图4-11 登录流程图

（3）用户首先需要登录，可以针对自己的身体情况及家庭情况，对表..............

（4）用户登陆成功后，可以选择个性化适老改造，选择预约的专家，界面会给..............

图4-12 老年人能力评估流程图图4-13 个性化适老改造流程图

4.5 系统功能时序图

4.5.1 专家时序图

专家时序图如图4-14所示。

图4-14 专家时序图

4.5.2 管理员时序图

管理员时序图如图4-15所示。

图4-15 管理员时序图

4.4.2 用户时序图

用户时序图如图4-16所示。

图4-16 用户时序图

5 系统功能实现

5.1 用户登录系统模块

还没有账号时，可以点击注册的按钮进行注册；进行注册账号之后，可以登录系................

图5-1 用户注册界面

用户注册核心代码如下：

var data = {'type':type,'username':username,'nickname':nickname,'password':password};

$.ajax({

url: '/signup',

type: "POST",

dataType: "JSON",

contentType: "application/json",

data: JSON.stringify(data),

beforeSend: function () {

// 禁用按钮防止重复提交

$("#register_........................

图5-2 用户登录界面

用户登录核心代码如下：

var data = {'username':username,'password':password};

$.ajax({

url: '/signin',

type: "POST",dataType: "JSON",

contentType: "application/json",data: JSON.stringify(data),

beforeSend: function () {

// 禁用按钮防止重复提交

$("#login_submit").attr({disabled: "disabled"});},

success: function (data) {

if (data.code == "...................

5.2 老年人能力评估模块

根据自身的居住方式，生活方式，经济状况，健康状况，年龄，以及身体状况通过表单进行输入和选择，成个人能力评估结果并进行图形化的展示，而明显的..................

图5-3 老年人能力评估图

老年人能力评估核心代码如下：

this.$refs[formName].validate((valid) => {

if (valid) {

let para = {"username": this.formData.username, "age": this.formData.age, "money": this.formData.money,"living":this.formData.living};

axios.post("ability?health="+this.......................

5.3 个性化适老改造方案模块

根据老年人的居住方式，生活方式，经济状况，健康状况，年龄，以及身体状况生成的个人能力评估结果,自动生成个性化设计简易图示供老人进行参考，老人可以..................

图5-4 专家列表

图5-5 专家详情图

专家详情核心代码如下：

<h1 class="con_tilte">${design.nickname == null?design.username:design.nickname}</h1>

${design.nickname == null?design.username:design.nickname}

<fmt:formatDate value="${design.createTime}" pattern="yyyy-MM-dd"/>

预约量${design.applyNumber}

简介

<c:set var="summary" value="${design.resumeText}"/>

<c:choose>

<c:when test=.............................

图5-6 个性化设计建议

图5-7 预约信息图

预约信息核心代码如下：

var data={"user2Id":user2Id,"customerName":customerName,"telphone":telphone,"space":space,"style":style,"type":type,"address":address,"detail":detail,"detailText":detailText};

$.ajax({

url:"/design/apply",

type: "POST",

dataType: "JSON",

contentType: "a...................

5.4 模块化适老改造模块

根据厨房、洗手间、浴室、地板、扶手等房间中主要部位进行单个的模块化方案改造，方便老人可以进行单个模块选择，另外用户可通过模块下的选......................

图5-8 模块化适老改造图

模块化适老改造核心代码如下：

public String list(HttpServletRequest request, ModelMap map){

String typeId = request.getParameter("type");

String currentPage = request.getParameter("pageNo");

String wd = request.getParameter("wd");

Integer pageNo = currentPage==null?null:Integer.valueOf(currentPage);

Integer type = (typeId==null.............................

图5-9 推荐排行图

推荐排行核心代码如下：

List<Company> companyTopStarList = iCompanyService.selectTopStarList(8);

map.put("companyTopStarList",companyTopStarList);

.......................

图5-10 模块详情图

模块详情核心代码如下：

Company company = iCompanyService.selectById(id);

User user = (User) getSession(SessionKey.CURRENT_USER);

if(user!=null){

Star star = iStarService.selectWithUserAndCompany(user.getId(),id);

if(star!=null){ company.setIs..................

5.5 适老改造方案推荐模块

根据用户的喜爱状况统计模型，推荐受老年人喜爱的适老化改造方案进行展示。方案生成以后，会自动生成方案的点赞排行，并且用户可以根据自己喜.................

图5-11 适老改造方案推荐列表图

适老化改造方案推荐核心代码如下：

public String list(HttpServletRequest request, ModelMap map){

String styleId = request.getParameter("style");

String currentPage = request.getParameter("pageNo");

String wd = request.getParameter("wd");

Integer pageNo = currentPage==null?null:Integer.valueOf(currentPage);

Integer style = (styleId==null........................

图5-12 适老改造方案详情图

适老化改造方案详情核心代码如下：

public String view(@PathVariable(value = "id")Integer id,ModelMap map){

Demo demo = iDemoService.selectById(id);

if(demo.getStatus() != 2){

throw new RuntimeException("该案例不存在或者未通过审核！"); }

User user = (User) getSession(..................

图5-13 适老改造方案点赞排行图

适老化改造方案点赞排行核..................

List<Demo> demoTopPraiseList = iDemoService.selectTopPraiseList(8);

map.put("demoTopPraiseList",demoT.................

图5-14 适老改造方案点赞评论图

适老化改造方案点赞评论核心代码如下：

public JSONReturn praise(@RequestBody Praise p){

User user = (User) getSession(SessionKey.CURRENT_USER);

Praise praise = iPraiseService.selectByUserIdAndDemo(user.getId(),p.getDemoId());

if(praise!=null){ return JSONReturn.buildFailure("已点赞，请勿重复操作哦！");}

praise = new .............................

5.6 后台功能模块

根据前台中老年人的能力信息进行统计管理并形成图形化展示，用于.........................

图5-15 年龄统计图

能力信息统计核心代码如下：

public Map abilityServlet() {

List<Map<String, Object>> list = abilityService.findMemberAgeCount();

Map<String, Object> map = new HashMap<>();

map.put("ageCount",list);

List<String> memberAge = ne......................

对专家发布的适老改造方案进行管理。如图5-16所示。

图5-16 方案管理模块

方案管理模块核心代码如下：

public Page list(@RequestParam Map<String,Object> params){

PageQuery query = new PageQuery(params);

List<Demo> data = iDemoServi..................

管理员输入账号和密码以后登录到后台，界面如图5-17所示。

图5-17 登录管理界面

登录管理核心代码如下：

public JSONReturn login(@RequestBody User u, HttpServletRequest request){

User admin = iUserService.selectByUsername(u.getUsername());

if(admin==null){

return JSONReturn.buildFa..................

管理员可以对用户信息进行管理，包括对信息的添加、修改...............

图5-18 用户信息管理图

用户信息管理核心代码如下：

public Page list(@RequestParam Map<String,Object> params){

PageQuery query = new PageQuery(params);

List<User> data = iUserServ.................

管理员可以对用户的评论信息进行管理，包括对信息的查看、删除、审................

图5-19 评论信息管理图

评论信息核心代码如下：

public Page list(@RequestParam Map<String,Object> params){

PageQuery query = new PageQuery(params);

List<Comment> data = iCommentService.queryList(query);

int total = iComm....................

6 系统测试

6.1 单元测试

通过对系统的最不起眼的位置检查，逐层.......................

6.2 集成测试

集成调试主要是将系统整合之................

6.2.1 前台功能测试

前台使用者登录注册功能测试。

点击登录以后进入登录界面，未进行注册用户点击....................

表6-1 用户注册测试表

用户登录	期望结果	实际结果
用户名:用户密码:111111	登录成功，跳转到针对性饮食方案模块	登录成功，跳转到针对性饮食方案模块
用户名:用户密码:111111	登录失败，提示“账号或密码错误，请重新输入”	登录失败，提示“账号或密码错误，请重新输入”
用户名:用户密码:222222	登录失败，提示“账号或密码错误，请重新输入”	登录失败，提示“账号或密码错误，请重新输入”

表6-2 用户登录测试表

6.2.2 模块化适老改造模块功能测试

模块化适老改造模块功能测试，用户点击对应的模块进行查看,测试结果如表6-3所示。

表6-3模块化适老改造

模块名称	期望结果	实际结果
起居室	跳转到起居室模块	跳转到起居室模块
卧室	跳转到卧室模块	跳转到卧室模块
厨房	跳转到厨房模块	跳转到厨房模块
卫生间	跳转到卫生间模块	跳转到卫生间模块

适老改造方案模块功能测试，用户可以查看已有的改造方案进行查看，测试结果如表6-4所示。

表6-4 适老改造方案模块

方案名称	期望结果	实际结果
名称	跳转到对应方案	跳转到对应方案

专家预模块功能测试，专家对用户的预约信息进行查看,并根据预约信息进行回复,测试结果如表6-5所示。

表6-5 专家预模块功能

方案回复	期望结果	实际结果
名称	回复成功	回复成功

6.2.3 后台功能测试

后台管理员登陆功能测试，进入后台登录界面，输入用户名、密码后可以直接访问主页。表6-6分................

表6-6 管理员登录测试表

后台登录表单输入	期望结果	实际结果
用户名:admin 密码:111111	登录成功，跳转到主页进行后续操作	登录成功，跳转到主页进行后续操作
用户名:用密码:111111	登录失败，提示“账号或密码错误，请重新输入”	登录失败，提示“账号或密码错误，请重新输入”

后台登录表单输入

期望结果

实际结果

用户名:admin

密码:111111

登录成功，跳转到主页进行后续操作

用户名:用

密码:111111

登录失败，提示“账号或密码错误，请重新输入”

方案管理功能测试，管理员对专家的发布的方案,进行编辑,修改,删除,测试结果如.............

表6-7 方案管理功能

表6-8 老年人能力信息统计老年人能力信息统计功能测试，老年人能力信息统计..............

能力信息统计	期望结果	实际结果
修改空间信息	展示成功	展示成功

6.3 测试结论与分析

通过对前台系统功能及后台系统功能的详细测试以后，满足基于Vue的..............

7 总结与展望

7.1 总结

本文经过对居家养老模式下适老化改造的详细设计，完成了本系统。本文的............

（1）通过研究分析其他系统，进行数据的统计和参考，总结归.............

（2）结合功能的需求，归纳出所.................

（3）从系统功能需求、系统性能需求以及系统可行性...............

（4）从系统的整体架构出发，完成了居家养老模........

（5）通过对系统的功能进行详细测试以后，满足基于居家.............

需要详细内容的在下面链接下载

最后说一下，如果大家对硬件和编程感兴趣，可以点击牛客网这个连接看看，是个不错的学习网站，是学长推荐给我的，因为之前找工作的时候没有太多经验，也不知道怎么准备，去哪里搜资源，走了很多弯路，所以推荐给大家，当初在上面大量刷题还看了好多面试经验等，反正上面有很多课程+刷题+面经+求职+讨论区等资源，关键里面的资源全部公开免费，不用花钱，希望能帮助家！

咸鱼弟

关注

5
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
2
评论
基于vue的适老化住宅设计系统的设计与实现

word完整版可点击如下下载>>>>>>>>基于vue的适老化住宅设计系统的设计与实现.rar-互联网文档类资源-CSDN下载内容包括详细设计文档word版，附带开题报告和相关PPT等文档，供大家参考学习。摘要：本系统拟设计一更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/u013253075/51009884?spm=1001.2014.3001.5503目录摘.....
复制链接

扫一扫