还剩8页未读,继续阅读
本资源只提供10页预览,全部文档请下载后查看!喜欢就下载吧,查找使用更方便
文本内容:
《前端开发框架技术》实验教学大纲Vue.js课程名称(中/央)Vue.js刖端开发框架技术/Vue.js Front-end Development大纲版本vl.OFramework Technology学分2实验学时24(含实战)课程类别专业课课程性质必修课开课学期2适用专业软件工程、计算机科学与技术先修课程HTML+CSS+JavaScript
一、课程目标《Vue.js前端开发框架技术》是软件工程、计算机科学与技术等专业本科阶段的重要专业课程,该课程实验环境选用VS Code通过本课程的学习和上机实战操作,使学生掌握Vue.js3的基础知识、编程技巧以及完整的开发体系,了解Vue.js3的生态系统,熟练使用Vue CLI等脚手架工具构建基于Vue Router的Vuejs3应用注重培养学生的实践与实战能力,掌握基本的Vue.js前端框架整合开发创新方法和应用解决方案,为企业级前端应用开发打下坚实基础
二、项目及课时分配序号项目名称课时数项目类别项目类型要求每组人数计算属性的应用专业基础验证性必做111内置指令的应用专业基础验证性必做122自定义组件专业基础验证性必做132登录验证专业基础验证性必做142电子商务平台的前端设计与实55专业综合综合性选做1-2现(项目实战一)分组(1-2人)设计并实现一个基于Vue.js3+Vue UI组件612专业综合综合性选做1-2库的前端应用系统(项目实战二)
三、教学方法宁省“百千万人才工程”万层次人才,2008年荣获大连市IT优秀教师以第一作者发表论文20余篇,其中SCI检索3篇、EI检索3篇、CSCD核心10余篇,主持辽宁省自然科学基金重点项目1项,主持辽宁省教育厅科学研究项目1项,主持辽宁省教育科学“十四五”规划课题1项,参与国家自然科学基金项目3项,参与省部级项目10余项学生自己动手实验为主,老师指导为辅
四、教学内容及要求实验一计算属性的应用(1课时)实验目的
1、掌握计算属性computed;
2、理解计算属性的应用场景;
3、了解VS Code集成开发工具的使用方法;
4、认真书写实验报告,如实填写各项实验内容实验要求按照实验内容及实验报告要求,完成规定的实验内容,并认真填写实验报告实验内容编写一个HTML页面,在该页面中输入3个数字使用Vue.js的计算属性判断这3个数字是否构成三角形运行结果如图1所示数字1数字2:数字3:是否构成三角形false图1是否构成三角形主要设备和实验环境:计算机,VS Code集成开发工具实验二内置指令的应用(2课时)实验目的:
1、掌握Vue内置指令的用法;
2、理解列表渲染指令v-for的使用场景;
3、认真书写实验报告,如实填写各项实验内容实验要求:按照实验内容及实验报告要求,完成规定的实验内容,并认真填写实验报告实验内容编写一个HTML页面,使用Vuejs的内置指令将以下二维数组的数据显示在购物车界面,如图2所示cartList:[type:,图书;items:[id:1,gname:Spring Boot从入门至I实战,gprice:
79.8,count:5},id:2,gname:Java Web开发从入门到实战,gprice:
69.8,count:10},id:3,gname:Java EE框架整合开发入门到实战;gprice:
69.8,count:100},type:喙电;items:[id:1,gname:电视机X\gprice:888,count:5},id:2,gname:冰箱Y\gprice:999,count:10]]商品类别商品名称商品单价购买数量操作Spring Boot从入门到实战
79.8匚|5|三|删除Java Web开发从入门到实战
69.8口10三||逃黑EE框架整合开发入门到叵698Q1OO0电视机X888M51|删除+家电IJ10M冰箱Y999|删除总价¥22507清空购物车图2购物车界面主要设备和实验环境:计算机,VS Code集成开发工具实验三自定义组件(2课时)实验目的:
1、理解组件的注册机制;
2、掌握组件用法;
3、理解组件传值原理;
4、认真书写实验报告,如实填写各项实验内容实验要求按照实验内容及实验报告要求,完成规定的实验内容,并认真填写实验报告实验内容自定义一个奇偶数判定输入框组件,运行效果如图3所示1010是偶数图3奇偶数判定输入框主要设备和实验环境计算机,VS Code集成开发工具实验四登录验证(2课时)实验目的
1、掌握如何使用VueCLI脚手架搭建Vue.js项目;
2、掌握Vue Router的基本用法、高级应用以及路由钩子函数的使用;
3、认真书写实验报告,如实填写各项实验内容实验要求按照实验内容及实验报告要求,完成规定的实验内容,并认真填写实验报告实验内容登录验证实验具体要求如下
1、在App.vue根组件中,通过router-link〉访问登录页面组件Login.vue主页面组件Main.vue以及Home.vue组件;
2、登录成功后,才能访问主页面组件Main.vue和Home.vue组件;
3、在main.js中,使用路由钩子函数beforeEach((to,from)实现登录权限验证主要设备和实验环境计算机,Vue RouterVueCLI脚手架、VS Code集成开发工具实验五(项目实战一)电子商务平台的前端设计与实现(5课时)实验目的
1、掌握Vue Vue Router Element Plus webpackVite、WebStorage等前端技术;
2、熟悉电子商务平台的业务需求、设计以及实现;
3、熟练撰写设计文档;
4、了解电商行业的法律法规、市场准入机制;
5、加强团队协作,积极承担团队成员与负责人的多种角色;
6、认真书写实验报告,如实填写各项实验内容实验要求按照实验内容及实验报告要求,完成规定的实验内容,并认真填写实验报告实验内容
1、电子商务平台分为两个子系统,一是后台管理子系统,一是电子商务子系统;
2、管理员登录成功后,进入后台管理主页面可以对商品、商品类型、注册用户以及用户的订单进行管理后台管理子系统的模块划分,如图4所示;
3、非注册用户只可以浏览商品、搜索商品,不能购买商品、收藏商品、查看购物车、查看用户中心、我的订单和我的收藏成功登录的用户可以完成电子商务子系统的所有功能,包括购买商品、支付等功能电子商务子系统的模块划分,如图5所示;商品管理类型管理查询订单用户管理安全退出新删修查删查删增除改询除询除商商商商类用用型品品品品户户后台管理子系统图4后台管理子系统电子商务子系统新查非注册用户成功登录的用户增询类类型型查浏搜浏我购我个看览索览的买的人购商商商订商收信物品品品单品藏息车图5电子商务子系统
4、使用Vite构建后台管理子系统;
5、使用Vue CLI构建电子商务子系统;
6、其他具体内容要求见教材的第13章内容主要设备和实验环境计算机,Vue CLI、ElementPlusVite ECharts VueRouterVS Code集成开发工具实验六(项目实战二)自定义实战项目(12课时)实验目的
1、掌握基于VueCLI、Vite等前端开发与构建工具的Vue.js前端应用开发的流程、方法以及技术栈;
2、熟悉XXX系统的业务需求、设计以及实现;
3、熟练撰写设计文档;
4、加强团队协作,积极承担团队成员与负责人的多种角色;
5、认真书写实验报告,如实填写各项实验内容实验要求按照实验内容及实验报告要求,完成规定的实验内容,并认真填写实验报告实验内容(
1、分组1-2人)设计并实现一个基于Vue.js3+VueUI组件库的前端应用系统;
2、.vue文件数20个以上(数量不足扣分,缺少2个以上视为无效作业);
3、系统中如果有登陆功能,必须有权限控制(也就是说不登陆,不允许操作登陆成功之后的界面);
4、用户至少有两种类型,例如管理员、会员用户;卖家、买家、管理员;教师、学生、管理员等主要设备和实验环境计算机,Vue CLLVue UI组件库、Vite、EChartsVueRouter.VS Code集成开发工具
五、主要教材(指导书)及参考用书
(1)使用教材
[1]陈恒.Vue.js3从入门到实战(微课视频版),北京清华大学出版社,
2023.
(2)主要参考书
[1]陈恒.SSM+Spring Boot+Vue.js3全栈开发从入门到实战(微课视频版).北京清华大学出版社,
2022.
六、考核与成绩评定
1、考核办法根据实验及其完成情况予以考核
2、成绩评定成绩由实验报告和实验考勤成绩组成,其中实验考勤占30%,实验报告成绩占70%o
3、实验总评成绩将以20%的比例计入该门课程的总评成绩中
(1)实验(实战)报告上机实验(实战)报告按照百分制评分,然后按照70%进行折算到实验成绩评分标准为评分观测点80-100分60-79分40-59分1・39分0分实验(实践、按时完成,业务逻按时完成,业务后期补交,内容延时完成,业务逻实战)预习辑合理,内容完逻辑基本合理;不完整,不能辨辑基本合理;勉强报告(权重整;能积极、正确能正确回答教师识;不能回答教未提交能回答教师提出)回答教师提出的提出的问题师提出的问题
0.2的问题问题操作IDE不够熟操作IDE生疏,操实验(实践、操作IDE熟练,操练,有少量错误作有错误但不违操作生疏,未能缺席或违实战)操作作方法正确,实验但不违法安全规法安全规程,能够完成实验,未能反安全规(权重
0.4)效果合理程,实验效果合得出实验效果得出实验效果程理实验(实践、实战)总结按时完成,内容全按时完成,内容延时完成,内容基后期补交,内容报告(权重未提交面;基本完整本完整不完整)
0.4
(2)实验出勤实验出勤按照百分制评分,然后按照30%进行折算到实验成绩评分标准为:满分100,旷课1次扣5分,请事假1次扣3分,请病假1次扣2分,迟到1次扣2分,早退1次扣2分实验教学大纲信息表大纲作者陈恒提供时间
2023.7作者单位大连外国语大学软件学院所属教材陈恒.Vue.js3从入门到实战(微课视频版).清华大学出版社作者电话13998672477作者邮箱chenheng@dlufl.edu.cn作者介绍陈恒博士、大连外国语大学软件学院副教授、硕士生导师,兼备高校教师和企业培训讲师双重身份,有十多年的Java Web开发与教学经验,已出版10余部教材2017年入选辽。
个人认证
优秀文档
获得点赞 0