三创周丨2028班/2117班《Vue框架》课程结课学生作品展示

展示班级：202018、202117计算机网络技术预备技师班

指导老师：吴丹

课程简介 : Vue是一套渐进式JavaScript框架，易学易用，性能出色，适用场景丰富的Web前端框架，是计算机网络应用专业的专业技术课，理论与实践并重。通过这门课程的学习，要求学生掌握Vue.js开发技术的核心语法和用法，掌握前后端分离的开发模式。学生能够根据不同的业务需求开发出不同的功能，理解复杂案例的实现过程。通过综合项目的开发过程，让学生学会基于vue-cli脚手架环境快速搭建和实现项目，把学习的理论知识灵活地运用到实际项目的开发过程中。

【项目介绍】

该项目使用Vue框架搭建，基于Vue-cli脚手架环境，使用element-ui面包屑导航。主要技术包含：axios封装函数请求数据，mock模拟数据，echarts表格实现图表以及VueRouter路由跳转。该项目是一个通用的后台管理系统，主要功能包括：查询、分页、添加、新增、校验及删除功能。

【界面与实现】

（一）后台首页

使用mock定义的数据用图表的方式展现出来。

页面效果如图1所示：

（二）用户管理页面

用户管理页面有着新增，查找，编辑，删除的效果。

页面效果如下：

（三）动态视频展示

【项目介绍】

该项目为仿小米商城制作的静态网站。该项目使用Vue框架，基于Vue-cli脚手架，使用elementui桌面组件库、bootstrap5.2.3、Vue路由技术(vue-router@2)、localstorage本地存储等技术完成。该项目页面包含：1.商城首页，展示各种型号的手机；2.选中商品，显示商品详情；3.购物车页面，进行结算。该项目功能：1.点击物品加入物品详细页面该页面显示了物品的价格和详细参数,并能将商品添加至购物车；2.在购物车内改变数量,当购物车没有物品时页面显示购物车为空,当物品减到为0的时候删除该物品；3.提交付款请求。

【项目界面与实现】

（一）商品展示页面

该页面使用的技术有 element- ui导航栏及轮播图 ，bootstrap的栅格化布局。商品的数据展示使用了vue框架的v-for指令进行遍历。点击商品时跳转至商品详细页面使用了VueRouter编程式路由导航，将商品id传给商品详情页。

（二）商品详情页

用户在首页点击商品时，将该商品的id传至商品详情页，在商品详情页获取该id，通过查询获取该商品的详细信息并在页面显示。“加入购物车”功能将商品信息存入本地存储localstorage，在“购物车”页面可通过本地存储获取商品价格等信息进行结算。

（三）购物车页面

将商品添加至购物车时，购物车模块会同步更新数据，“合计”功能使用了Vue框架的computed属性(计算属性)。

（四）部分关键性代码

【项目介绍】

该项目用vue.js、HTML5、API接口、ajax框架等完成天气查询系统，该系统为前端网站。在搜索框的下拉菜单中选择XX省XX市XX区域即可显示该地区当前气温、天气情况、风向、时间和近未来3天天气预报。对于不同的天气，其背景图片不一样。

【项目界面与实现】

（一）前台首页

（二）主要代码：

【项目介绍】

该项目用Vue2与JavaScript完成了基于Vue的音乐播放系统，该系统调用音乐API接口，可以听取现在市面上最流行的歌。

在信息技术发展特别快的现在，多媒体技术也越来越受到人们的重视， 娱乐变成了人们常谈的话题，在匆忙的上班生活，紧张的考试前夕，很多的人通过音乐，视频得到一丝放松。表达感情的方法有很多种，音乐就是其中之一。要想做出一个大家都认可的音乐播放器不仅要有优秀的音乐播放效果，还要方便用户操作。下面对音乐播放器的设计与实现进行了分析与叙述。

本系统主要基于Visual Studio Code平台开发的，运用了Vue.js 语言、Node包管理器、Vue Router、Vue-lazyLoa、Vuex、Axios、Jsonp 等技术作为开发平台设计出相应的操作界面，期望做出漂亮的界面、所需功能基本完善、操作简单的设计目标。在设计本系统之前，首先需要整理出系统的所需功能， 包括音乐播放器的列表管理、播放方式的基本控制、上下歌曲的选择、歌词的显示、歌曲界面显示等功能。系统采用模块式设计方法，根据音乐播放器的各项需求将功能分别置于四个模块当中。后台数据采用了网上开放的API，实现了页面操作和后台数据连接，最终实现了以上的各个功能，为用户提供了便利的操作。

【项目界面与实现】

（一）前台首页

首页展示了音乐播放器最热最新的音乐，页面效果如图1、图2所示。核心代码如图3、图4所示。

（二）排行榜页面

排行榜页面，根据音乐的最新行进行显示。

（三）搜索页面

该页面可以进行音乐的搜素。

【项目介绍】

该项目用于技术分享和总结的个人博客，兼容pc和移动端，用户可通过邮箱注册，邮箱验证通过后，可以登录博客，实现收藏点赞以及留言评论回复等功能，还可以展示个人链接，未登录状态可以以游客方式留言。

该项目使用 vue.js 框架和Element UI来实现前端组件及数据交互，使用 webpack 构建，另外使用shCore.js实现代码样式。

【项目界面与实现】

（一）首页页面

主要代码

【项目介绍】

该项目用Vue完成，实现了音乐搜索，播放音乐，以及对音乐的评论，可以进行下载和调节音乐的速度。

【项目界面与实现】

（一）音乐播放器首页

该页面展示了搜索到的歌曲信息以及热门评论和音乐的进度条，左下角设置了暂停以及右下角对音量的调整和可以调整倍速，同时每个歌曲的评论都会不同。

（二）主要代码

【项目介绍】

该项目是个人博客，主要基于Vue框架，使用VueRouter路由、webpack打包、API完成。

【项目界面与实现】

（一）添加个人博客

（三）根据输入信息进行搜索

【项目介绍】

该项目用VUE、less与JQuery等框架完成了留言界面。该界面有五个模块，分别为：首页、注册、收藏、留言、查看信息。（注：需要注册后才可进行收藏、留言、查看信息）

【项目界面与实现】

（一）首页

首页模块表述：主要展示其他用户发布的信息。其用axios访问服务器上的数据库里面的数据，将数据存入数组里用for循环遍历数组将其渲染在页面上。页面效果如下：

（二）注册

注册模块表述：用户可以进行注册。其点击注册后用户在input框中输入的数据会与数据库相对应的数据进行判断，判断输入的数据与数据库里的数据一样者返回注册界面，否则就用alert进行弹窗提示注册成功并且返回首页。页面效果如下：

（三）收藏

收藏模块表述：用户在首页点击收藏后，其数据库相对应的字段会数据变成true。然后点击进入我的收藏页面会对数据库字段数据为true的存入到数组里面，并用for循环进行遍历数组将渲染在我的收藏其页面上。（注：再次在首页点击收藏后，其对应的字段数据会变成false，我的收藏页面其对应的数据也会消失）

页面效果如下：

（四）留言

留言模块表述：用户可以在其他用户发布的信息下方留言。其用户在input框中发布的流言会将数据上传到后台管理中由后台人员进行审核，审核成功则将数据用push函数插入到对应数组里进行渲染到页面上，失败则会撤回并提示用户审核为通过。（注：需要先注册才可留言）

页面效果如下：

（五）查看信息

查看信息模块表述：其用户点击查看信息后，会用axios访问数据库对应的数据进行查询，将查询到的数据会存入到数组中 ，然后用alter弹窗显示其数组里面的信息。

页面效果如下：

投票环节（2022.01.05上午12点截止）