基于Vue.js的前端教学软件设计与实现刘金羽（海南大学，海口570228）摘要院前端开发技术是开发基于互联网的应用软件必须要掌握的一种用来开发软件交互界面的技术。《Web开发技术》课程既包含前端开发技术又包含后端开发技术，前端主要讲授HTML、CSS、JavaScript等基本的前端技术和Vue.js前端开发框架。为了在有限的课时内提高教学效果，让学生学到主流的前、后端Web开发技术，采用了项目驱动的教学模式，设计和实现了一个基于Vue.js的前端教学软件，既可以使用该软件进行前端的课堂教学，也可以把该软件用于前端教学项目案例，在实际教学过程中取得了良好的教学效果。关键词院教学软件；项目驱动教学；教学项目案例；前端开发技术；Vue.js框架承担物联网软件开发类的多门课程的教学任务袁在教学中采用了项目驱动的教学模式袁收到了良好的教学效果遥在为叶Web开发技术曳课程的前端开发部分设计教学项目案例时袁考虑到该项目既要使用主流的前端开发技术袁又不能太复杂袁而且要有一定的实用性袁设计和实现了基于Vue.js的前端教学软件遥该软件可以用来在课堂教学中讲授HTML尧CSS尧JavaScript等前端开发技术袁能够演示课件尧示例代码的内容和执行效果遥示例代码可以现场修改并可以看到修改后的效果袁避免了以前教学中演示示例代码时需要在PowerPoint尧IDE和浏览器之间来回切换的麻烦袁提高了教学的流畅性遥该软件使用了目前最流行的前端开发框架Vue.js实现袁涵盖了Vue.js的组件复用尧事件处理尧文件操作等核心知识点袁用于讲授Vue.js的教学项目案例袁提高了学生的实际项目开发能力遥式运行遥2关键技术软件的开发使用了以下技术院渊1冤Vue.js院近年来用户数量增长最快的前端开发框架遥目前袁GitHub网站上已经达到了156000颗星袁位居Angular尧React和Vue.js前端3大框架之首遥架袁具有界面美观尧组件丰富的特点遥目前袁GitHub网站上已经达到了23400颗星遥可以使用HTML尧CSS和JavaScript构建跨平台桌面应GitHub网站上已经达到了80000颗星遥渊3冤Electron院是一个基于Chromium和Node.js袁渊2冤Vuetify院基于Vue.js的Material设计的UI框用的技术框架袁兼容Mac尧Windows和Linux遥目前袁渊4冤Highlight.js院是用JavaScript编写的语法突出显示插件袁几乎可以与任何标记一起使用袁不依赖任何框架袁并且具有自动语言检测功能遥渊5冤vue-pdf院在Vue.js项目中显示pdf文档的插件遥代码编辑的插件遥渊6冤vue-codemirror-lite院在Vue.js项目中进行在线渊7冤material-design-icons-iconfont院实现Material本项目使用WebStorm2019.3IDE进行项目的开发与调试遥基金项目：海南省高等学校教育教学改革研究项目渊项目编号院Hnjg2016-6冤曰海南大学教育教学改革研究项目渊项目编号院hdjy1615冤遥2020.021需求分析软件能够以左侧导航菜单的形式列出要讲授HTML尧CSS尧JavaScript等前端知识点袁当点击了某一个知识点后袁在右侧的内容窗口中能显示该知识点对应的课件遥如果该课件有示例代码袁能够通过按钮切换显示示例代码遥示例代码能够显示行号袁能够对关键字进行格式化高亮显示袁能够显示运行结果袁能够修改代码的内容并能够显示修改后的结果遥右侧的导航栏要能够隐藏袁使左边的内容窗口全屏显示遥软件既可以以单机版的桌面应用程序的形式运行袁也可以发布到服务器上袁通过浏览器以Web应用的形设计的图标字体插件遥23项目依赖库的版本号如代码清单2-1所示遥代码清单2-1项目的package.json文件中依赖库的版本号\"dependencies\":{\"axios\":\"^0.19.1\\"core-js\":\"^3.4.4\\"highlight.js\":\"^9.17.1\\"vue\":\"^2.6.10\\"vue-highlightjs\":\"^1.3.3\\"vue-pdf\":\"^4.0.7\\"vue-router\":\"^3.1.3\\"vuetify\":\"^1.5.14\\"vuex\":\"^3.1.2\\"material-design-icons-iconfont\":\"^4.0.3\\"vue-codemirror-lite\":\"^1.0.4\"},\"devDependencies\":{\"@vue/cli-plugin-babel\":\"^4.1.0\\"@vue/cli-plugin-eslint\":\"^4.1.0\\"@vue/cli-plugin-router\":\"^4.1.0\\"@vue/cli-plugin-vuex\":\"^4.1.0\\"@vue/cli-service\":\"^4.1.0\\"@vue/eslint-config-standard\":\"^4.0.0\\"babel-eslint\":\"^10.0.3\\"electron\":\"^7.0.0\\"eslint\":\"^5.16.0\\"eslint-plugin-vue\":\"^5.0.0\\"sass\":\"^1.19.0\\"sass-loader\":\"^8.0.0\\"stylus\":\"^0..7\\"stylus-loader\":\"^3.0.2\\"eslint-config-vuetify\":\"^0.2.0\\"vue-cli-plugin-electron-builder\":\"^1.4.4\\"vue-cli-plugin-vuetify\":\"^2.0.3\\"vue-template-compiler\":\"^2.6.10\\"vue-perfect-scrollbar\":\"^0.1.0\"},33.1系统设计与实现系统主界面的设计如图界面1所示袁通过左侧的导航菜单可以选择要讲授的知识点袁当点击了某个知识点以后袁会在右侧的内容窗口中显示本知识点的第一页课件遥在内容窗口的右上方会显示当前课件的页号尧当前知识点课件的总页数袁可以通过左尧右箭头对课件进行242020.02翻页遥如果当前课件有示例代码袁会显示示例代码和运行结果选项卡按钮遥图1系统的主界面当点击示例代码按钮时袁内容窗口会显示当前课件的第一个示例代码遥示例代码的显示界面的设计如图2所示袁通过左尧右箭头按钮可以在多个示例代码之间切换遥示例代码会自动显示行号袁并根据语法规则以不同的字体颜色进行格式化显示遥当点击运行结果选项卡按钮时袁内容窗口会显示示例代码的运行结果遥当点击铅笔形状的编辑图标时袁可以对示例代码进行修改遥修改完成以后袁可以通过运行结果按钮查看示例代码修改后的运行结果遥可以通过点击蓝色标题栏中的菜单图标隐藏左侧的导航窗口袁这样可以增大课件和示例代码的显示面积遥当隐藏导航窗口时袁菜单图标会顺时针旋转90度遥图2示例代码显示尧修改界面3.2系统由组件3个Vue.js的组件构成院App组件通过使用Vuetifycodemirror-lite的卡片组件尧选项卡组件尧vue-pdf插件和vue-件尧示例代码和示例代码的运行结果并能够对示例代码插件实现内容窗口的功能袁可以显示课(下转第29页)System.out.println(\"输入的是回文数\");elseSystem.out.println(\"输入不是回文数\");}实验环境和3.1节的实验环境相同袁输出结果如图2所示袁可以得知野123冶和野abcd冶不满足回文数条件袁野121冶和野abba冶满足回文数条件遥仙花数和回文数袁实验方法更加高效遥在后续的进一步工作中袁可将以Java程序为依据的数据处理实例扩展到C尧C++尧Python等语言袁使得对特殊数据的处理更加高效全面遥与此同时袁可以对更多的趣味数学问题进行探究袁例如对水仙花数问题进行扩展袁对更多数位的问题编写更多的程序曰另外袁也可以采用编程语言对野完全数冶尧野3x+1冶问题进行新的研究遥参考文献[1]吴健平.Java程序设计语言[M].清华大学出版社,1997.[2]JamesGosling,戈斯林,Gosling,等.Java语言规范图2回文数的仿真结果5结语[3]焦华,谢朝东.从野水仙花数冶到哥德猜版),2017,(12):11-14.[4]杨俊兴.寻找回文素数体现出数学与编程的结合[J].电脑编程技巧与维护,2015,(21):29-30.}[M].北京大学出版社,1997.想要要要编程的寻根和延伸[J].现代计算机(专业针对经典的特殊数据处理问题袁以水仙花数和回文数的Java程序为例袁分别选取位数为5的水仙花数以及回文数进行实验分析袁相对于人工提取特殊数据-水(上接第24页)进行在线编辑曰AppDrawer组件通过使用Vuetify的导航抽屉组件实现导航窗口的功能曰AppToolbar组件通过使用Vuetify的工具栏组件实现知识点标题显示尧隐藏或显示导航窗口尧给作者发送Email和最大化窗口的功能遥AppToolbar组件袁如以下代码所示院App组件是系统的根组件袁由它调用AppDrawer和
当在AppDrawer组件上点击知识点菜单项时袁需要在App组件上读取相关信息并在内容窗口中显示袁因此袁该组件上的菜单点击事件要传播给App组件袁由App组件进行具体的事件处理遥AppDrawer组件的事件处理函数如以下代码所示院单项信息以及通过读取项目api目录下的menu.js文件中定义的菜单信息读取存放在public目录下的pdf格式的课件和HTML尧CSS尧JavaScript格式的示例代码文件来装载相关的信息袁并把知识点标题传递给AppToolbar组件的title属性袁从而使AppToolbar组件能够在标题栏中显示知识点标题遥App组件通过AppDrawer组件传递的菜单项和子菜4结语可以用两种方式使用软件袁一种方式是通过Elec鄄tron框架把项目打包成文件扩展名为.exe的可执行文使用该软件遥件曰另一种方式是发布到服务器上去袁通过浏览器在线软件开发完成以后袁通过在2018-2019第二学期教学中的应用袁取得了良好的教学效果袁实现了软件的预期开发目标遥参考文献[1]Vue.js中文官网.[2]Vuetify官网.[3]Electron7+VueCli4开发跨平台桌面应用.[4]vue-pdf参考文档.[5]vue-highlightjs参考文档.2020.02handleItem(item,subItem,key){this.$refs.group[0].$children.forEach((el)=>{if(el.$vnode.data.key===key){el.isActive=true}else{el.isActive=false}})this.$emit('menuSelected',{item,subItem})29
