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 相关文章推荐
关于jquery的多个选择器的使用示例
Oct 18 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
网页右下角弹出窗体实现代码
Jun 05 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
JavaScript实现修改伪类样式
Nov 27 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
vue2的 router在使用过程中遇到的一些问题
Apr 13 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
php array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
php 多文件上传的实现实例
2016/10/23 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
JavaScript delete 属性的使用
2009/10/08 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
python爬虫添加请求头代码实例
2019/12/28 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
作风建设剖析材料
2014/10/06 职场文书
学校开除通知书
2015/04/25 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python