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 相关文章推荐
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
Nov 06 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 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效率,提高php性能的一些方法
2011/03/24 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
浅析PHP开发规范
2018/02/05 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
python针对excel的操作技巧
2018/03/13 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
美国在线工具商店:Acme Tools
2018/06/26 全球购物
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
经典导游欢迎词大全
2014/01/16 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
青春寄语大全
2014/04/09 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书
旅行社计调工作总结
2015/08/12 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript