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 相关文章推荐
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
基于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
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
php bootstrap实现简单登录
2016/03/08 PHP
javascript 对象比较实现代码
2009/04/27 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
python模块之time模块(实例讲解)
2017/09/13 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
党员自我评价分享
2013/12/13 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
趣味运动会广播稿
2014/09/13 职场文书
介绍信范文
2015/01/31 职场文书
财务稽核岗位职责
2015/04/13 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python