web网站特效技术设计与实现开题报告

1. 研究目的与意义

现如今各大网站的页面基本上都是使用web前端技术完成，web前端技术独有的特性能够让用户得到更好的体验，除此之外，还有与数据库的链接之类的小程序，微信小程序，都是靠web前端技术来完成的。

随着前端技术不断更新，web前端技术已经成为了现在企业和开发人员热议的话题。

很多人对前端开发有个误解，认为它没有后端编程有前途，认为前端就是写网页，工资很低。

2. 课题关键问题和重难点

本课题的关键：1.如何实现组件间通信2.如何调用mock数据及如何展示本课题难点：1.如何实现组件间通信。

父子组件：使用 props 传递数据(1)在组件中使用 props 来从父组件中接收参数(2)props 来自父级，而组件中的 data return 的数据是组件自己的数据，其作用域对应的组件本身，可以在 template, computed, methods 中直接使用(3)props 的值有两种，一种是字符串数组，一种是对象(4)可以使用 v-bind 动态绑定父组件中的内容这里涉及到 单向数据流 的概念，通过 props 传递数据是单向的，父组件中数据变化时会传递给子组件，但是反过来不行，其目的是解耦，避免子组件无意中修改了父组件的状态父组件传递初始值进来，子组件将它作为初始值保存进来，在自己的作用域下可以随意使用和修改，这种情况可以在组件 data 内再声明一个数据，引用父组件的 prop2.如何调用mock数据及如何展示。

通过asycn和awiat写入方法中调用本地数据的接口，然后通过vue的create生命周期函数进行页面渲染（先加载数据再进行展示，避免因为数据太多未读取完而展示错误），使用v-if条件判断是否存在某些对象来决定显示什么样的样式，如果数据内容很多就使用v-for循环出数组里的一个列表进行展示，背景颜色和字体等也可以设置在mock数据中，使页面更加丰富多彩。

3. 国内外研究现状（文献综述）

在目前的网页设计中，有一些研究和实践经验在认识和借鉴方便视觉信息的传播，但却很少能够成功的吸收并应用了网页设计的结果。

网页视觉表达比较单一，页面链接较多这些因素繁琐，严重阻碍了网络信息的有效传播，所以这些信息不能有效地传达给用户，也不利于用户之间的沟通。

视觉效果和页面布局都很清晰不同。

4. 研究方案

1、通过vue-cli创建vue项目，完成相关配置文件，使用node.js试运行项目2、创建顶部(header)和底部(footer)两个组件给页面增添美感，并完成一些小功能的实现，具体为内容展示的主题以及一些介绍等3、在本地添加mock数据的json文件，手动设置数据结构，添加图片地址和文字内容等展示信息4、创建主页面的vue文件，配置路由(route),引用第二步的两个组件，在主页面编写HTML代码和CSS样式，通过vue框架判断json文件里的数据结构，动态的展示每一个模块中应该展示的内容和样式，例如数据里是否有价格这个对象，有的话就当作商品展示出来5、通过Vue的生命周期函数，使用同步异步的ajax方法，请求本地mock数据接口，达到json文件的数据能够展示到主页面上来6、整合项目的所有组件进行开发、完善

5. 工作计划

2022-2022-1学期：第15周-16周：完成选题，查询相关中英文资料。

第17周：与导师沟通进行课题总体规划。

第18-19周：导师发的毕业设计任务书，学生根据导师的要求进行外文翻译，列出开题报告大纲，进行开题报告的撰写。