Vue脚手架编写试卷页面功能


Posted in Javascript onMarch 17, 2020

脚手架(vue-cli)

(一)什么是脚手架

概念:是一种用于快速开发Vue项目的系统架构

优点:能够帮助咱们快速的开发项目

缺点:由于脚手架适用于各种项目的开发,而不是单独的针对某一项目单独研发的,会出现代码冗余

脚手架的使用:

1、安装脚手架 vue-cli

全局安装打开cmd运行:cnpm install -g @vue/cli

2、查看当前版本号:

vue -V

3、创建项目:

根目录下打开cmd运行:vue create objectname项目名称(名称不能有大写)

正文开始

Vue脚手架实现试卷页面功能

将moduleA中的store模块化
在state中放入变量subjectList,通过mutations更新subjectList
在Home.vue中通过mapMutations激活mutations中的getSubjectList,从而更新subjectList

import '@/mock'
export default {
 namespaced: true,
 state: {
 subjectList: []
 },
 mutations: {
 getSubjectList(state, payload) {
  state.subjectList = payload
 }
 }
}
store/index.js
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
import user from './modules/user'
import moduleA from './modules/moduleA'
let store =new Vuex.Store({
 modules:{
 moduleA
 }
})
export default store

Home.vue

fmtSubjectType,fmtOrder2ABC为过滤器,checkSubjectType为方法,统一放在Vue.mixin中,保存在mixin中的index.js文件中

通过checkSubjectType方法的结果真假控制此div是否存在

<template>
 <div class="main">
 <ul>
 <li class="item" v-for="(item, i) in subjectList" :key="i">
 <h4>{{i+1}}.[{{item.type|fmtSubjectType}}] {{item.title}}</h4>
 <div style="color:#888;font-size:14px">
  {{item.author}}{{item.createDate}}
 </div>
 <fieldset style="padding:0 10px;" v-if="checkSubjectType(item.type)">
  <legend >选项</legend>
  <div v-for="(choice, j) in item.choice" :key="j">
  {{j|fmtOrder2ABC}} {{choice.answer}}
  </div>
 </fieldset>
 <div v-if="checkSubjectType(item.type)">答案:{{item.answer}}</div>
 <div >解析:{{item.desc}}</div>
 </li>
 </ul>
 </div>
</template>
<script>
import '@/mock'
import {createNamespacedHelpers} from 'vuex'
let {mapState,mapMutations,mapActions}= createNamespacedHelpers('moduleA')
export default {
 async created() {
 let {subjectList} = await this.$get('/subjectList')
 this.getSubjectList(subjectList) 
 },
 computed: {
 ...mapState(['subjectList'])
 },
 methods: {
 ...mapMutations(['getSubjectList']),
 }
};
</script>
<style scoped lang='scss'>
.main{
 border: 1px solid red;
 .item{
 padding: 20px 10px;
 border-bottom: 1px solid #ccc;
 }
}
</style>

mixin/index.js
通过切 换BASE_URL 来切换接口,axios中的url是通过 BASE_URL 拼接的

import axios from 'axios'
import Vue from 'vue'
import { BASE_URL } from '@/config'
import {SUBJECT_TYPE} from '@/config/enum'
Vue.mixin({
 methods: {
 async $get(url,params){
  let {data} = await axios.get(BASE_URL+url,{params})
  return data
 },
 checkSubjectType(type){
  return type===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'
const BASE_URL_BEF=''
const BASE_URL_PRO='XXX'
const BASE_URL_DEV='PPPP'
const MODE=MODE_TYPE.BEF
export const BASE_URL = [BASE_URL_BEF,BASE_URL_PRO,BASE_URL_DEV][MODE]

config/enum.js

鉴于魔法数字的缘故,通过如下,使代码更清晰

//枚举
export const MODE_TYPE={
 BEF:0,
 PRO:1,
 DEV:2
}
export const SUBJECT_TYPE={
 DANXUAN:0,
 DUOXUAN:1,
 PANDUAN:2,
 JIANDA:3
}

mock/index.js

通过mock伪造数据

import Mock from '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脚手架实现试卷页面内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript的键盘控制事件说明
Apr 15 Javascript
js监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
判断window.onload是否多次使用的方法
Sep 21 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
js断点调试经验分享
Dec 08 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
详解js中的几种常用设计模式
Jul 16 Javascript
基于JavaScript实现留言板功能
Mar 16 #Javascript
JS实现简易留言板(节点操作)
Mar 16 #Javascript
JavaScript实现旋转木马轮播图
Mar 16 #Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 #Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 #Javascript
JavaScript实现拖拽效果
Mar 16 #Javascript
js实现点赞效果
Mar 16 #Javascript
You might like
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2016/05/24 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
canvas压缩图片转换成base64格式输出文件流
2017/03/09 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
python占位符输入方式实例
2019/05/27 Python
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
优质服务活动实施方案
2014/05/02 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书