全国成人高考报名系统的实现

最新推荐文章于 2024-10-05 18:33:07 发布
最新推荐文章于 2024-10-05 18:33:07 发布
阅读量91 收藏
点赞数
文章标签： 前端框架 vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61376079/article/details/129796518
版权
本文介绍了如何使用前端框架 Vue.js 和 ElementUI 实现全国成人高考报名系统的省市区联动效果，同时探讨了时间线功能的实现细节。
摘要由CSDN通过智能技术生成

省市区三级联动

element-plus 省市区+时间线 联动效果

<template>
    <div class="main">
        <div class="main-main">
            <div class="main-title">
                <p>2023年全国成人高考报名系统</p>
            </div>
        </div>
        <div class="main-center">
            <el-form :model="createReqVO" class="center-list" target="nm_iframe" :rules=rules ref="createReqVO" hide-required-asterisk>
                <div class="center-item">
                    <p class="item-p">姓名</p>
                    <el-form-item  prop="name">
                        <el-input class="item-input" :class="createReqVO.name ? 'font-color' : ''"  
                        type="text" placeholder="请输入姓名" v-model="createReqVO.name"></el-input>
                    </el-form-item>
                </div>
                <div class="center-item">
                    <p class="item-p">手机号</p>
                    <el-form-item  prop="phone">
                        <el-input class="item-input" :class="createReqVO.phone ? 'font-color' : ''"  type="text" placeholder="请输入手机号" v-model.number="createReqVO.phone">
                        </el-input>
                    </el-form-item>
                </div>
                <!-- <div class="center-item">
                    <p class="item-p">性别</p>
                    <div class="item-radio">
                        <el-form-item  prop="gender">
                            <p>男</p>
                            <input  type="radio" name="radio" value="男" v-model="createReqVO.gender">
                            <p style="margin-left: 36px;" >女</p>
                            <input type="radio" name="radio" value="女" v-model="createReqVO.gender">
                        </el-form-item>
                    </div>
                </div> -->
                <div class="center-item">
                    <p class="item-p">政治面貌</p>
                    <el-form-item  prop="politicsStatus">
                        <div class="item-educationBackground" :class="createReqVO.politicsStatus ? 'font-color' : ''" @click="drawerPoliticsStatus = true" >{
  {createReqVO.politicsStatus == '' ? '请选择政治面貌' : createReqVO.politicsStatus}}
                            <img src="../assets/icon-fanhui.png" alt="">
                        </div>
                    </el-form-item>
                </div>
                <el-drawer
                    v-model="drawerPoliticsStatus"
                    direction="btt"
                    :show-close="false"
                    size="50%">
                    <template #header style="position: relative;">
                        <div class="drawer-title-politicsStatus">请选择政治面貌</div>
                        
                    </template>
                    <template #default>
                        <div class="drawer-lists">
                            <div class="drawer-items">
                                <div class="drawer-items" :class="{
    'selected-color':PoliticsStatusIndex == index}" @click="selectedPoliticsStatus(index)" v-for="(item,index) of selectedPoliticsStatusData" :key="index">
                                    <p>{
  {item}}</p>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-drawer>
                <div class="center-item">
                    <p class="item-p">身份证</p>
                    <el-form-item  prop="idNo">
                        <el-input class="item-input" :class="createReqVO.idNo ? 'font-color' : ''" type="text" placeholder="请输入身份证" v-model="createReqVO.idNo">
                        </el-input>
                    </el-form-item>
                </div>
                
                
                <div class="center-item">
                    <p class="item-p">户籍所在地</p>
                    <el-form-item  prop="place">
                        <div class="item-educationBackground" :class="createReqVO.place ? 'font-color' : ''" @click="drawerPlace = true" >
                            {
  {createReqVO.place == '' ? '请选择户籍所在地' : createReqVO.place}}
                            <img src="../assets/icon-fanhui.png" alt="">
                        </div>
                    </el-form-item>
                    <el-drawer
                        v-model="drawerPlace"
                        direction="btt"
                        :show-close="false"
                        size="65%">
                        <template #header style="position: relative;">
                            <div class="drawer-title-place">请选择户籍所在地</div>
                            <!-- 时间线 -->
                        <el-timeline>
                            <el-timeline-item
                            v-for="(placeLine, index) in placeLineData"
                            :key="index"
                            :hollow="placeLine.hollow"
                            :color="placeLine.color"
                            @click="selectPlaceLine(index)">
                            {
  {placeLine.value}}
                            </el-timeline-item>
                        </el-timeline>
                        </template>
                        <template #default>
                            <div class="drawer-lists">
                                <div class="drawer-items" v-if="showProvinceData">
                                    <p >选择省份/地区</p>
                                    <div class="drawer-items"  @click="selectedProvince(index)" v-for="(item,index) of regionData" :key="index">
                                        <p :class="{
    'selected-color':ProvinceDataIndex == index}" >{
  {item.label}}</p>
                                    </div>
                                </div>
                                <div class="drawer-items" v-else-if="showCityData">
                                    <p>选择城市</p>
                                    <div class="drawer-items"
                                     @click="selectedCity(index)"  v-for="(item,index) of selectedCityData" :key="index">
                                        <p :class="{
    'selected-color':CityDataIndex == index}">{
  {item.label}}</p>
                                    </div>
                                </div>
                                <div  class="drawer-items" v-else>
                                    <p>选择区/县</p>
                                    <div class="drawer-items"
                                     @click="selectedArea(index)" v-for="(item,index) of selectedAreaData" :key="index">
                                        <p :class="{
    'selected-color':AreaDataIndex == index}">{
  {item.label}}</p>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-drawer>
                </div>
                <div class="center-item">
                    <p class="item-p">考试省份</p>
                    <el-form-item  prop="examinationProvince">
                        <div class="item-educationBackground" :class="createReqVO.examinationProvince ? 'font-color' : ''" @click="drawerExaminationProvince = true" >{
  {createReqVO.examinationProvince == '' ? '请选择考试省份' : createReqVO.examinationProvince}}
                            <img src="../assets/icon-fanhui.png" alt="">
                        </div>
                    </el-form-item>
                    <el-drawer
                        v-model="drawerExaminationProvince"
                        direction="btt"
                        :show-close="false"
                        size="65%">
                        <template #header style="position: relative;">
                            <div class="drawer-title-politicsStatus">请选择考试省份</div>
                        </template>
                        <template #default>
                            <div class="drawer-lists">
                                <div class="drawer-items">
                                    <div class="drawer-items" @click="selectedExaminationProvince(index)" v-for="(item,index) of regionData" :key="index">
                                        <p :class="{
    'selected-color':ExaminationProvinceIndex == index}">{
  {item.label}}</p>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-drawer>
                </div>
                <div class="center-item">
                    <p>报考学校</p>
                    <el-form-item  prop="applySchool">
                        <el-input class="item-input" :class="createReqVO.applySchool ? 'font-color' : ''" type="text" placeholder="此项可不填" v-model="createReqVO.applySchool">
最低0.47元/天 解锁文章
m0_61376079
关注
2020成人高考计算机基础知识题库,2020年成人高考计算机基础考试模拟题
weixin_28878311的博客
06-19 2469
2020年成人高考计算机基础考试模拟题已发布，考生可使用本次试题来备考2020年成人高考并检查当前的备考程度。那么2020年成人高考计算机基础考试题型有哪些呢?一、选择题1. 与二进制数11111110等值的十进制数是______。A. 251 B. 252 C. 253 D. 2542. 固定在计算机主机箱箱体上的、起到连接计算机各种部件的纽带和桥梁作用的是______。A. CPU B. 主板...
成教学生报名系统ASP版 v1.0
05-18
摘要:ASP源码,其它类别,报名系统　　一个简单的asp成教学生报名信息管理系统，一个ASP连接SQL数据库的实验程序，关键是学习后台数据的管理页面，学习组合框控件的另外一种使用。请配置SQL和IIS服务，由于SQLServer使用的版本的不同，我没有将SQL数据库附上，请根据ASP源代码还原数据库方可以使用。本ASP源码中你将学习到如何从ASP网页中将数据向SQL中添加、删除、修改，以便进一步深入学习。 　　
成人高考自考资讯网源码 织梦dedecms模板
SEO资源下载
02-06 1064
介绍 织梦最新内核开发的模板，该模板属于成人高考、成人自考、考试资讯类企业都可使用， 这款模板使用范围极广，不仅仅局限于一类型的企业，你只需要把图片和产品内容 换成你的，颜色都可以修改，改完让你耳目一新的感觉！ 自带最新的手机移动端，同一个后台，数据即时同步，简单适用！ 原创设计、手工书写DIV+CSS， 完美兼容IE7+、Firefox、Chrome、360浏览器等；主流浏览器； 页面简洁简单，容易管理，DEDE内核都可以使用；附带测试数据！ 模板特点： 1.一款利于SEO的模板，手工CSS+DIV，图片
成教学生报名asp信息管理系统 v1.0 -ASP源码.zip
01-26
ASP源码，压缩包解压密码：www.cqlsoft.com
计算机毕业设计之springboot基于VUE的成人高考报名系统的设计与实现
2401_85546598的博客
08-21 121
可以按照用户的角色权限使不同用户角色看到不一样的信息界面。现根据需求阶段的分析，我们可以大致确定系统需要包含的功能。对学校名称、专业名称、专业编码、报名费用、报考资料、报名日期、账号、姓名、头像、是否支付、审核回复、审核状态、审核。的过程以及用处进行更深一步的研究，数据的处理效率，以及具体的应用方向。的开发与建设的详细分析。从数据挖掘的角度出发，了解信息管理系统的作用，对。信息管理系统的开发是一个不断优化的过程，随着。近年来，科技飞速发展，在经济全球化的背景之下，数据时代的到来，信息管理系统与。
成人高考基本问题解答
weixin_30408165的博客
02-02 704
成人高考基本问题解答 （1）成考是什么？ 答：成考是成人高考的简称，全称为成人高等教育招生全国统一考试，实行全国统一考试，统一招生录取，形式类似高考。 （2）学历承认吗？ 答：成考为国家级教育考试，学历国家承认，被大学录取后，教育部学信网可查学籍，毕业后教育部学信网可查学历。 （3）成考难吗？ 答：成考分高中起点和专科起点两大类。高中起点难度与...
画图实现考试成绩管理系统
weixin_45558363的博客
06-25 3514
考试成绩管理系统 由于篇幅原因，对于系统的UML建模，我们仅给出系统的需求分析和各种建模元素的图例。本附录介绍的是一个考试成绩管理系统。 1.1需求分析 考试成绩管理系统是举行成人高考、自学考试等成人高校对每个参与考试的学员成绩进行综合管理的一个系统。本系统的功能性需求如下： （1）学员报名参加相应的科目考试，通过考试成绩管理系统办理考试报名手续，并产生相应的考试编号。 （2）每次考试完毕后，系统管理员及时将参加考试学员的考试最终成绩输入到考试成绩管理系统中。 （3）考试成绩管理系统可以供学员和系统管理人员
基于SpringBoot+Vue+uniapp的高考志愿填报自助查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
大牛
07-14 615
🌞博主介绍：✌全网粉丝15W+,CSDN特邀作者、211毕业、高级全栈开发程序员、大厂多年工作经验、码云/掘金/华为云/阿里云/InfoQ/StackOverflow/github等平台优质作者、专注于Java、小程序技术领域和毕业项目实战，以及程序定制化开发、全栈讲解、就业辅导✌🌞👇🏻精彩专栏 推荐订阅👇🏻2023-2024年最值得选的微信小程序毕业设计选题大全：100个热门选题推荐✅2023-2024年最值得选的Java毕业设计选题大全：500个热门选题推荐✅Java精品实战案例《500套》
《成人高考报名管理系统》是专门为高考报名处及各大高校报名开发的一款管理软件.zip
03-09
《成人高考报名管理系统》是一款基于人工智能...综上，《成人高考报名管理系统》融合了人工智能、HTML等现代技术，通过系统分析与设计的方法，实现了高考报名的智能化、高效化管理，为教育行业带来了显著的效益提升。
山东青岛成人高考全面使用“人脸识别”系统.pdf
09-23
山东青岛在2017年的成人高考中全面采用了人脸识别系统，确保考试的安全性和公正性。这一举措对于防止考生替考、作弊等行为具有显著效果。在考试期间，系统会现场对考生进行拍照，并与身份证信息及报名时采集的照片...
【ASP+ACC】大型成人高考资讯门户网站源码 适用于教育类资讯门户网站.zip
03-14
该压缩包文件包含的是一款基于ASP（Active Server Pages）技术和ACC（Access数据库）构建的大型成人高考资讯门户网站的完整源代码。这个源码是专为教育类资讯网站设计的，可以用于搭建一个功能丰富的在线教育平台，...
某成人高考门户网整站 v1.1-ASP源码.zip
12-13
"某成人高考门户网整站 v1.1-ASP源码.zip"是一个完整的网站源代码包，主要用于搭建一个服务于成人高考信息交流的平台。这个平台可能包含以下功能模块： 1. **用户注册与登录**：通过ASP脚本来实现用户的注册、登录...
专科自考报名显示服务器错误,当报考自学考试的时候总是出现崩溃登录不进去的现象怎么办呢...
weixin_35733151的博客
07-31 2146
目前互联网已经成为社会上发展的浪潮，更多的事情都是可以通过网络来实现的。比如报考自学考试的时候都是可以通过网上来注册的，而且也是十分方便和快捷的。所以你有这方面的需要，也是可以通过院校的官网登录进去然后报考成功。但是有的时候我们不可能一次性就注册成功，因为会有其他的人员也在进行申请导致系统网络比较慢。当报考自学考试的时候总是出现崩溃登录不进去的现象怎么办呢？当出现这样的情况之后大部分原因就是因为自...
在线考试报名系统设计与实现-附源码031706
m0_73244000的博客
11-27 500
在线考试报名系统由用户网上报名模块、考试模块和系统管理模块等三大模块组成。其中系统管理模块是进行考试资讯发布、考试报名，是系统运行的基础;查询子模块实现了学生考试信息推荐。考生通过自己的姓名和密码登陆系统，考试报名，进入考试安排界面后按照管理员预先设置好考试题目，自动生成试卷参加考试，考试完成后可以查看自己的考试成绩。
java毕业生设计高考填报信息系统计算机源码+系统+mysql+调试部署+lw
sheji13的博客
09-20 150
java毕业生设计高考填报信息系统计算机源码+系统+mysql+调试部署+lw。springboot基于JavaWeb生鲜OO订购平台的设计与实现。springboot基于SpringBoot的电影社区网站。ssm基于大数据在线考试系统在线阅卷系统及大数据统计分析。JSP超市进销存系统的设计与实现sqlserver。ssm基于SSM的民宿预订管理系统设计与实现。
随记 前端框架React的初步认识
最新发布
zqx_7的博客
10-05 347
ant design proComponents 也是一个组件库，是一个高级组件库，就是把一些ant design的基本组件集合在一起，这样可以减少我们写的代码，但是封装的越多的话，灵活度肯定没有自己用组件库写的高。向更加上一层的框架，umi框架就是像React再封装一层，让使用React更加简单，就是那个意思。React框架和Vue框架，用自己的话来说的话，就是对js进行了一层封装，使使用js更加的方便。ant design 是一个组件库，就是把这些框架的里的东西封装成一个组件，可以直接拿来用。
2、.Net 前端框架：OpenAuth.Net - .Net宣传系列文章
lzhdim的专栏
10-01 483
　　 　　OpenAuth.Net 是一个开源的身份验证框架，由开发者 Yubaolee 创建，它旨在简化 Web 应用和服务的安全授权过程。这个框架以其强大的功能和易用性，为开发人员提供了一种高效的方式来处理用户认证和授权问题。 　　OpenAuth.Net 的关键特性包括： 模块化设计：遵循模块化原则，便于在不同项目中集成和扩展。 OAuth2.0 支持：全面支持 OAuth2.0 标准，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值