TP5后端,VUE前端请求聚合数据驾照题库

最新推荐文章于 2024-03-16 09:33:46 发布
最新推荐文章于 2024-03-16 09:33:46 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： 网站操作 thinkphp5 VUE踩过的坑 文章标签： vue.js 前端 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38192709/article/details/121955911
版权

选择效果：
TP5后端,VUE前端请求聚合数据驾照题库演示效果

演示效果：
TP5后端,VUE前端请求聚合数据驾照题库演示效果

1： Vue 配置： /config/index.js

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
   
  dev: {
   

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
   
      '/api_1': {
   
        target:'http://www.chaxun.com/joke', // 你请求的第三方接口
        changeOrigin:true,  // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite:{
          // 路径重写，
          '^/api_1': '/api_1'       // 替换target中的请求地址，也就是说以后你在请求 target 的地址的时候直接写成 /api_1 即可。
        }
      },
      '/api_2': {
   
        target: 'http://www.chaxun.com/constellation',
        changeOrigin: true,
        pathRewrite: {
   
          '^/api_2': '/api_2'
        }
      },
      '/api_3': {
   
        target: 'http://www.chaxun.com/weather',
        changeOrigin: true,
        pathRewrite: {
   
          '^/api_3': '/api_3'
        }
      },
      '/api_4': {
   
        target: 'http://www.chaxun.com/news',
        changeOrigin: true,
        pathRewrite: {
   
          '^/api_4': '/api_4'
        }
      },
      '/api_5': {
   
        target: 'http://www.chaxun.com/videos',
        changeOrigin: true,
        pathRewrite: {
   
          '^/api_5': '/api_5'
        }
      },
      '/api_6': {
   
        target: 'http://www.chaxun.com/driverlicense',
        changeOrigin: true,
        pathRewrite: {
   
          '^/api_6': '/api_6'
        }
      }
    },

    // Various Dev Server settings
    host: '0.0.0.0', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    useEslint: true,
    // If true, eslint errors and warnings will also be shown in the error overlay
    // in the browser.
    showEslintErrorsInOverlay: false,

    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
   
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

2: Vue 页面代码： Api6.vue 文件

<template>
    <div class="driver-license">
        <!--
1 : 请求结果如下：
{
   
    "error_code": 0,
    "reason": "ok",
    "result": [
        {
   
            "id": 12,
            "question": "这个标志是何含义？",//问题
            "answer": "4",//答案
            "item1": "前方40米减速",//选项，当内容为空时表示判断题正确选项
            "item2": "最低时速40公里",//选项，当内容为空时表示判断题错误选项
            "item3": "限制40吨轴重",
            "item4": "限制最高时速40公里",
            "explains": "限制最高时速40公里：表示该标志至前方限制速度标志的路段内，机动车行驶速度不得超过标志所示数值。此标志设在需要限制车辆速度的路段的起点。以图为例：限制行驶时速不得超过40公里。",//答案解释
            "url": "http://images.juheapi.com/jztk/c1c2subject1/12.jpg"//图片url
        },
        {
   
			"id":"357",
			"question":"驾驶人违反交通运输管理法规发生重大事故使公私财产遭受重大损失的可能处3年以下徒刑或拘役。",
			"answer":"1",
			"item1":"正确",
			"item2":"错误",
			"item3":"",
			"item4":"",
			"explains":"《中华人民共和国刑法》第一百三十三条：违反交通运输管理法规，因而发生重大事故，致人重伤、死亡或者使公私财产遭受重大损失的，处三年以下有期徒刑或者拘役。",
			"url":""
		},
    ]
}

    参数说明
名称	    必填	    类型	        说明
key	是	    string	您申请的appKey
subject	    是	        int	        选择考试科目类型，1：科目1；4：科目4
model	    是	        string	    驾照类型，可选择参数为：c1,c2,a1,a2,b1,b2；当subject=4时可省略
testType	否	        string  	测试类型，rand：随机测试（随机100个题目），order：顺序测试（所选科目全部题目）

    思路：
    1： 直接网上找一找，12123 里面看看选择题目的样式 【 头， 左边， 右边， 右边图片居中， 左边选项有间隔 】
    2: 当 json 里面 item3, item4 为空的时候，它是判断题
    3：这道题目点击了一次答案后，就不能再点击了 answeredArr, 把每次回答过的题号添加到该数组，每次点击的时候， answeredArr.indexOf(index) > -1 即存在， 在点击的时候，顺便把正确答案传入
    4: 驾照类型，科目类型，测试类型 【 当选择科目类型为 4(即科目4) 的时候 驾照类型就无关紧要了 】
    5：没有提交类型的话，就默认是C1, 科目一 100 题目
    6: 选择类型的时候，选不选都可以默认，不管是选择了做题类型还是没有选择
    7：错题重现 (做错的时候，添加进去)
    8：如果做错了，就把错题添加到错题的数组里面
    9: 做了题目就显示答案，不管对还是错，错的红色，对的绿色
    10: 选完科目的时候，把对的、错的场次清掉
         -->

        <el-card :span="12">
            <div class="sub-selection">

                <el-select v-model="licenseType" placeholder="驾照类型" class="licenseType" :disabled="licenseTypeDisable">
                    <el-option v-for="licenseTp in licenseTps" :key="licenseTp.id" :label="licenseTp.name" :value="licenseTp.name"></el-option>
                </el-select>

                <el-select v-model="subNmb" placeholder="选择科目" class="subNmb" :change="subNmbFn(subNmb)">
                    <el-option v-for="sub in subjects" :key="sub.id" :label="sub.name" :value="sub.id"></el-option>
                </el-select>

                <el-select v-model="doType" placeholder="做题类型" class="doType">
                    <el-option v-for="doTp in doTps" :key="doTp.id" :label="doTp.name" :value="doTp.rand"></el-option>
                </el-select>

                <el-button type="success" class="checkTestBtn" @click="checkDoFn">确定</el-button>

                <el-button type="warning" class="checkTestBtn" @click="errorExerciseFn">错题重现{
   {
    errDataArr.length }}</el-button>
            </div>
        </el-card>

        <el-card :span="12" v-show="normalEle">

            <h1>{
   {
    typeTitle }}</h1>

            <div class="item" v-for="(item, index) in dataArr" :key="index">
                <h3 class="title">{
   {
    index + 1 }}: {
   {
    item.question }}</h3>
                <div class="answers">
                    <div class="left">
                        <p class="answer" @click.once="chooseFn(index, 1, item.answer, $event.target, item.id)">{
   {
    item.item1 }}</p>
                        <p class="answer" @click.once="chooseFn(index, 2, item.answer, $event.target, item.id)">{
   {
    item.item2 }}</p>
                        <div v-if="item.item3 !=''">
                            <p class="answer" @click.once="chooseFn(index, 3, item.answer, $event.target, item.id)">{
   {
    item.item3 }}</p>
                        </div>
                        <div v-if="item.item4 !=''">
                            <p class="answer" @click.once="chooseFn(index, 4, item.answer, $event.target, item.id)">{
   {
    item.item4 }}</p>
                        </div>
                    </div>
                    <div class="right">
                        <img :src="item.url != '' ? item.url: '/static/imgs/default_null.png'" :alt="item.id" width="200">
                    </div>
                </div>

                <div :class="'judgeAns' + item.id" class="judgeAns">
                    <p><span>您的回答： </span> <span>正确</span></p>
                </div>

                <div :class="'showAnswer' + item.id" class="showAnswer">
                    <span>答案解释: </span>
                    <span>{
   {
    item.explains }}</span>
                </div>
                <br /><br />
            </div>

            <el-card :span="12" class="submitCard">
                <el-button type="primary" round @click="submitFn">提交</el-button>
            </el-card>

        </el-card>

        <el-card v-show="errEle">
            <h1>错题重现： {
   {
    errDataArr.length }}</h1>

            <div class="item" v-for="(item, index) in errDataArr" :key="index">
                <h3 class="title">{
   {
    index + 1 }}: {
   {
    item.question }}</h3>
                <div class="answers">
                    <div class="left">
                        <p class="answer" @click.once="errChooseFn(1, item.answer, $event.target, item.id)">{
   {
    item.item1 }}</p>
                        <p class="answer" @click.once="errChooseFn(2, item.answer, $event.target, item.id)">{
   {
    item.item2 }}</p>
                        <div v-if="item.item3 !=''">
                            <p class="answer" @click.once="errChooseFn(3, item.answer, $event.target, item.id)">{
   {
    item.item3 }}</p>
                        </div>
                        <div v-if="item.item4 !=''">
                            <p class="answer" @click.once="errChooseFn(4, item.answer, $event.target, item.id)">{
   {
    item.item4 }}</p>
                        </div>
                    </div>
                    <div class="right">
                        <img :src="item.url != '' ? item.url: '/static/imgs/default_null.png'" :alt="item.id" width="200">
                    </div>
                </div>

                <div :class="'errJudgeAns' + item.id" class="errJudgeAns">
                    <p class="bolderFont"></p>
                </div>

                <div :class="'errShowAnswer' + item.id" class="errShowAnswer">

                    <el-button type="success" round @click="removeErr(item.id)">移除错题</el-button>

                    <p class="explains">
                        <span>答案解释: </span>
                        <span>{
   {
    item.explains }}</span>
                    </p>
                </div>

                <br /><br />
            </div>

            <el-card :span="12" class="submitCard">
                <el-button type="primary" round @click="errSubmitFn">提交</el-button>
            </el-card>

        </el-card>

    </div>
</template>

<script>

export default {
   
    name: 'driverLicense',
    mounted: function () {
   
        this.getData()
    },
    data () {
   
        return {
   
            errEle: false, // 错误元素
            normalEle: true, // 正常元素
            apiUrl: '/api_6', // 接口地址
            dataArr: [], // 请求返回的数据数组
            errDataArr: [], // 错误的数据数组
            errDataIdArr: [], // 错误的题目ID数组
            answering: true, //
            answeredArr: [], // 回答过的数组
            errAnsweredArr: [], // 错题回答过的数组
            errRightNmb: 0, // 错题重现做对的 number
            errRightIdArr: [], // 错题重现做对的 Id 数组
            errErrNmb: 0, // 错题重现又错的 number
            errErrIdArr: [], // 错题重现做对的 Id 数组
            answerIndex: 0, // 用户在回答当前的题目
            subNmb: '', // 科目几的值默认是1
            subjects: [ // 科目几的选择
                {
    id: 1, name: '科目一' },
                {
    id: 4, name: '科目四' }
            ],
            licenseType: '', // 驾照类型
            licenseTypeDisable: false, // 驾照类型是否可供选择(如果选择的科目四就不能选择)
            licenseTps: [ // 驾照类型选项 c1,c2,a1,a2,b1,b2
                {
   id: 1, name: 'A1'},
                {
   id: 2, name: 'A2'},
                {
   id: 3, name: 'B1'},
                {
   id: 4, name: 'B2'},
                {
   id: 5, name: 'C1'},
                {
   id: 6, name: 'C2'}
            ],
            doType: '', // 做题类型
            doTps: [
                {
    id: 1, name: '随机100题', rand: true },
                {
    id: 2, name: '顺序做题', rand: false }
            ],
            typeTitle: 'C1：科目一随机100题考试(默认)' // 题目类型
        }
    },
    methods: {
   
        // chooseFn(index, userAns, referenceAns, ele) :: index: 题目下标；  userAns： 用户的答案； referenceAns: 参考答案; ele: 该元素本身; id: 题目的自身ID
        chooseFn: function (index, userAns, referenceAns, ele, itemId) {
   
            // 遍历数组如果有这个 index, 就不改变样式了[ 变向点击失效 ]
            let judgeEle = document.getElementsByClassName('judgeAns' + itemId)[0]
            judgeEle.style.display = 'block'
            document.getElementsByClassName('showAnswer' + itemId)[0].style.display = 'block'
            let judgeEleP = judgeEle.getElementsByTagName('p')[0]
            if (this.answeredArr.indexOf(itemId) > -1)
最低0.47元/天 解锁文章
叫我福建
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
TP5后端,VUE前端请求聚合数据新闻接口
qq_38192709的博客
11-22 1440
问题描述： TP5当后端,VUE当前端， 请求聚合数据新闻接口 演示效果如下： ps: 最开始加载页面的时候，只加载本地的文件(因为请求次数有限制) 问题解决： 1: vue 文件： <template> <div class="whether-tank"> <!-- 新闻接口 API 说明 接口地址：http://v.juhe.cn/toutiao/index 返回格式：
Vue驾考题库程序
LILONG01的博客
05-21 816
轻松实现驾考宝典等驾考项目答题界面。 贴上部分代码 export default { name: "Home", data() { return { page: 1, pageSize: 0, licenseType: 0, subjectType: 0, licenseTypeData: [ { value: 0, title: "小车（C1、C2）...
驾照题库接口介绍
juhedata的博客
05-10 429
随着科技的发展，互联网已经渗透到了人们生活的方方面面。就连考驾照的方式都与从前有了天壤之别。对于打算考取驾照的学员来说，他们除了要面临实操考试以外，还要练习大量的规则类考题，以完成理论知识考试。在这样的背景下，驾照题库app开发就应运而生了。 说到驾照题库app开发，就不得不提到驾照题库接口。驾照题库接口是由最新驾校模拟考试题库整合而成的API接口，采用的是公安部最新驾校模拟考试题库，可任意选择科目一、科目四模拟考试试题，任选驾照类型，可选择参数为：C1，C2，A1，A2，B1，B2，调用比较方便。 驾考题
TP5后端,VUE前端请求聚合数据成语大全
qq_38192709的博客
01-15 544
PS： 聚合接口上描述的是成语大全，其实只是以用户查找字为开头的成语而已。先上演示效果： 1： VUE 前端代码 <template> <div class="content"> <!-- 请求地址：http://apis.juhe.cn/idiomJie/query 请求参数：wd=%E9%80%BC&size=&is_rand=1&key=b1bcc301******24cdb
基于php的驾照模拟考试系统,PHPEMS在线模拟考试系统是基于什么开发
weixin_39709178的博客
03-24 225
PHPEMS在线模拟考试系统是基于什么开发发布时间：2020-11-05 19:00:39来源：亿速云阅读：65作者：小新这篇文章主要介绍了PHPEMS在线模拟考试系统是基于什么开发，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。PHPEMS在线模拟考试系统基于PHP+MySQL开发，永久开源免费，支持多种题型和展现方式，是国内首款支持题...
vue前端模拟字典处理后端返回数据
04-18
有时候后端返回的数据字段可能是只有1或者2，这种code，没有返回对应的中文，但是前端又要显示中文，于是我就写了一个demo 可进行参考，只是主要处理就是用了js的一些语法，逻辑基本都是一样的，可以参考我这个demo...
详解vue与后端数据交互(ajax)：vue-resource
08-31
总结，Vue-resource提供了丰富的API，方便Vue应用与后端进行数据交互，包括GET、POST和JSONP请求。这些功能使得开发者无需离开Vue的生态系统就能轻松地处理与服务器的数据交换，提高了开发效率。在实际项目中，还...
vue中后端做Excel导出功能返回数据流前端的处理操作
10-14
在Vue项目中，当后端实现Excel导出功能并返回数据流时，前端需要进行相应的处理以将数据转化为可下载的Excel文件。本篇将详细解释这个过程。 首先，后端通常会通过HTTP响应返回一个Blob对象，Blob是Binary Large ...
基于flask后端+vue前端开发的web+部署yolov5目标检测算法-超级优质项目.zip
01-24
该项目是一个综合性的Web应用开发案例，它结合了前端的Vue.js框架和后端的Flask微型Web服务，目的是实现一个在线的目标检测系统。这个系统利用了先进的Yolov5深度学习模型来执行实时的目标检测任务。以下是关于这个...
最新驾校模拟考试题库大全接口实现及代码示例
开放API大全
08-20 8123
最新驾校模拟考试题库整合API接口，方便调用。采用公安部最新驾校模拟考试题库，可任意选择科目一、科目四模拟考试试题，任选驾照类型，可选择参数为：C1，C2，A1，A2，B1，B2。
驾校在线考试系统 手机+PC+平板 自适应 Thinkphp3.2在线考题源码下载.zip
11-28
驾校在线考试系统 手机+PC+平板 自适应 Thinkphp3.2在线考题源码下载
模拟科目一进行答题
06-08
利用mvc开发模式，创造的一个模拟科目一考试的demo，修饰下前端，和加入一些自己的功能，可以做一个项目。
wp-trigger-netlify-build：WordPress插件，用于在内容更新时自动重建Netlify网站
02-05
WP触发器Netlify构建 该插件旨在使开发人员更轻松地将WordPress用作无头CMS。 每当创建或更新内容时，轻而易举地触发构建。 安装 您可以使用以下代码从存储库下载.zip文件，或将存储库克隆到plugins文件夹中。 git clone https://github.com/iamtimsmith/wp-trigger-netlify-build.git 接下来，您必须在wordpress admin中安装并激活插件。 激活后，从Netlify获取webhook网址，并将其输入到插件设置页面。 接下来，您可以获取状态图像URL和链接URL以放入设置中，这些设置将在WordPre
基于thinkphp5开发的在线考试系统-期末项目
12-08
本程序是基于thinkphp5开发的在线考试系统项目，有完整的后台管理系统，权限管理、发布管理试卷等。是一个完整的期末实训项目，包含答辩等。
基于Vue的驾校理论课模拟考试系统
最新发布
q_2457781052的博客
03-16 378
基于Vue的驾校理论课模拟考试系统
python+vue驾校驾驶理论考试模拟系统
QQ511008285的博客
09-26 440
本系统分为用户和管理员两个角色，其中用户可以注册登陆系统，查看考试规则，进行驾照考试，查看考试得分，考试错题，强化训练；管理员可以对用户信息管理，题目上传，题目修改，题目删除，题库导出，题库维护；
基于Java+Vue+uniapp微信小程序优选驾考系统设计和实现
java李阳勇的博客
12-19 3296
随着学习压力越来越大，很多学校不重视学生的体育锻炼。近几年，教育部门发现缺少体育锻炼会影响学生的全面发展，因此开始大力发展学生的体育锻炼。对教师的体育课进行评分可以保证老师的教学质量，现在大多数学校采用问卷的方式进行体育课评分。这种方式对评分结果的统计非常麻烦，同时也降低了评分的公正性，学生的私人感情影响非常大。目前，网络发展成熟，各类网站平台层出不穷，如果可以有专业的系统提供网上体育课评分，则可以帮助学校的体育课评分。本基于微信小程序的体育课评分系统编程语言采用Java，数据库为Mysql。
Vue驾校-从项目学Vue-3
buptsd的博客
07-12 160
用grid效果划分页面，了解父组件存储数据的setup函数，利用props接收父组件数据，利用@绑定事件向子组件传递函数
[精品毕设]Nodejs实现的微信小程序驾考宝典系统驾照科目考试题库试题
m0_73612711的博客
12-27 488
该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功！
Django 后端获取前端vue数组数据
03-31
要在 Django 后端获取前端 Vue 数组数据，您需要将数据发送到后端。您可以使用 AJAX 或 Axios 库将数据发送到后端。 以下是一个示例代码片段，它使用 Axios 库从前端 Vue 组件发送数据到 Django 后端： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值