Vue脚手架编写试卷页面功能
脚手架(vue-cli)
(一)什么是脚手架
概念:是一种用于快速开发Vue项目的系统架构
优点:能够帮助咱们快速的开发项目
缺点:由于脚手架适用于各种项目的开发,而不是单独的针对某一项目单独研发的,会出现代码冗余
脚手架的使用:
1、安装脚手架vue-cli
全局安装打开cmd运行:cnpminstall-g@vue/cli
2、查看当前版本号:
vue-V
3、创建项目:
根目录下打开cmd运行:vuecreateobjectname项目名称(名称不能有大写)
正文开始
Vue脚手架实现试卷页面功能
将moduleA中的store模块化
在state中放入变量subjectList,通过mutations更新subjectList
在Home.vue中通过mapMutations激活mutations中的getSubjectList,从而更新subjectList
import'@/mock'
exportdefault{
namespaced:true,
state:{
subjectList:[]
},
mutations:{
getSubjectList(state,payload){
state.subjectList=payload
}
}
}
store/index.js
importVuexfrom'vuex'
importVuefrom'vue'
Vue.use(Vuex)
importuserfrom'./modules/user'
importmoduleAfrom'./modules/moduleA'
letstore=newVuex.Store({
modules:{
moduleA
}
})
exportdefaultstore
Home.vue
fmtSubjectType,fmtOrder2ABC为过滤器,checkSubjectType为方法,统一放在Vue.mixin中,保存在mixin中的index.js文件中
通过checkSubjectType方法的结果真假控制此div是否存在
{{i+1}}.[{{item.type|fmtSubjectType}}]{{item.title}}
{{item.author}}{{item.createDate}}
{{j|fmtOrder2ABC}}{{choice.answer}}
答案:{{item.answer}}
解析:{{item.desc}}
.main{
border:1pxsolidred;
.item{
padding:20px10px;
border-bottom:1pxsolid#ccc;
}
}
mixin/index.js
通过切 换BASE_URL来切换接口,axios中的url是通过 BASE_URL拼接的
importaxiosfrom'axios'
importVuefrom'vue'
import{BASE_URL}from'@/config'
import{SUBJECT_TYPE}from'@/config/enum'
Vue.mixin({
methods:{
async$get(url,params){
let{data}=awaitaxios.get(BASE_URL+url,{params})
returndata
},
checkSubjectType(type){
returntype===SUBJECT_TYPE.DANXUAN||type===SUBJECT_TYPE.DUOXUAN
}
},
filters:{
fmtSubjectType(val){
return['单选题','多选题','判断题','简答题'][val]
},
fmtOrder2ABC(val){
return'ABCDEFGHIJKLMNOPQRSTUVWXYZ'[val]
}
},
data(){
return{
SUBJECT_TYPE
}
},
})
config/index.js
通过MODE的改变,更换接口
import{MODE_TYPE}from'./enum'
constBASE_URL_BEF=''
constBASE_URL_PRO='XXX'
constBASE_URL_DEV='PPPP'
constMODE=MODE_TYPE.BEF
exportconstBASE_URL=[BASE_URL_BEF,BASE_URL_PRO,BASE_URL_DEV][MODE]
config/enum.js
鉴于魔法数字的缘故,通过如下,使代码更清晰
//枚举
exportconstMODE_TYPE={
BEF:0,
PRO:1,
DEV:2
}
exportconstSUBJECT_TYPE={
DANXUAN:0,
DUOXUAN:1,
PANDUAN:2,
JIANDA:3
}
mock/index.js
通过mock伪造数据
importMockfrom'mockjs'
Mock.mock('/subjectList',{
"subjectList|10":[
{
"id|+1":1,
"title":"@cword(5,10)",
"type":"@integer(0,3)",
author:"@cname",
createDate:'@datetime',
"choice":[
{
"id":11,
"choice":"A",
"answer":0
},
{
"id":12,
"choice":"B",
"answer":1
},
{
"id":13,
"choice":"C",
"answer":2
},
{
"id":14,
"choice":"D",
"answer":3
}
],
"answer":"C",
desc:'@cword(8,25)'
}
]
})
总结
到此这篇关于Vue脚手架实现试卷页面的文章就介绍到这了,更多相关Vue脚手架实现试卷页面内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。