基于web公交查询系统----管理员公交站点管理页面实现
主要用到内容:vue,coreui bootstrap框架,Ajax,springmvc搭建的接口,css之类的都是顺手拈来的简单的界面设计
网页代码:
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head>
<meta charset="UTF-8">
<meta charset="UTF-8">
<meta charset="UTF-8">
<base href="./">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
<meta name="author" content="Łukasz Holeczek">
<meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard"> <link href="vendors/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
<link href="vendors/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
<link href="vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="vendors/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
<!-- Main styles for this application-->
<link href="css/style.css" rel="stylesheet">
<link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
<title>bus station admin (bus 站点信息管理页面)</title>
</head>
<body>
Wellcome 管理员: <!--菜单栏目-->
<header class="app-header navbar"> <ul class="nav navbar-nav d-md-down-none">
<li class="nav-item px-3">
<a class="nav-link" href="busAdmin.html">管理员首页</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="bususerAdmin.html">用户信息管理</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="buslineAdmin.html">公交线路管理</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="busstationAdmin.html">站点信息管理</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="buscarAdmin.html">车辆信息管理</a>
</li> <!--item头像-->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-header text-center">
<strong>用户</strong>
</div> <a class="dropdown-item" href="#">
<i class="fa fa-envelope-o"></i> 用户名
</a>
<a class="dropdown-item" href="#">
<i class="fa fa-tasks"></i> 个性签名
</a> <div class="dropdown-header text-center">
<strong>Settings</strong>
</div>
<a class="dropdown-item" href="#">
<i class="fa fa-lock"></i> Logout</a>
</div>
</li>
</ul> </header> <main class="main">
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
<i class="fa fa-align-justify"></i> 车站点信息
<small>功能管理</small>
</div>
<div class="card-body">
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist"> <a class="list-group-item list-group-item-action active show" id="list-messages-list" data-toggle="tab" href="#list-messages" role="tab" aria-controls="list-messages" aria-selected="true">添加站点</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" href="#list-profile" role="tab" aria-controls="list-profile" aria-selected="false">搜索站点</a>
<a class="list-group-item list-group-item-action" id="list-home-list" data-toggle="tab" href="#list-home" role="tab" aria-controls="list-home" aria-selected="false">所有站点</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
<!--所有站点-->
<div class="card-body">
<table class="table table-responsive-sm table-bordered" id="usersTable">
<thead>
<tr>
<th>车站点名</th>
<th>车站点信息</th>
<th>车站点出发时间</th>
<th>车站点结束时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in items"> <td>{{item.busstationname}}</td>
<td>{{item.businfo}}</td>
<td>{{item.stationstarttime}}</td>
<td>{{item.stationendtime}}</td> <td>
<button class="btn btn-primary" type="button" data-toggle="modal"
data-target="#primaryModal" v-bind:data-rowindex="index"
aria-pressed="true"><i class="fa fa-edit"></i> 编辑站点信息
</button>
<button class="btn btn-danger" type="button" data-toggle="modal"
data-target="#dangerModal" v-bind:data-rowindex="index" aria-pressed="true">
<i class="fa fa-close"></i> 删除
</button>
</td>
</tr>
</tbody>
</table> </div> </div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list"> <p>请输入你要查找的站点名字(查找到对应的站点也可以对应编辑信息处理):</p> <input class="form-control" type="text" id="findwhatstation" placeholder="请输入你要查找的站点名字:">
<button class="btn btn-outline-primary btn-lg btn-block" type="button" data-toggle="modal" data-target="#findstationModal" aria-pressed="true">点击查询</button>
</div> <div class="tab-pane fade active show" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
<div class="col-sm-5 col-md-12">
<div class="card card-accent-warning">
<div class="card-header">添加站点信息编辑</div>
<div class="card-body"> <form class="form-horizontal" action="" method="post">
<div class="form-group row">
<label class="col-md-3 col-form-label" for="newstationname">车站点名字</label>
<div class="col-md-9">
<input class="form-control" id="newstationname" type="text" name="newstationname" placeholder="车站点名字..">
<span class="help-block">Please enter your 你想添加的车站点名</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="newbusinfo">车站点详情(例子:下站通往某某大道,某某医院,某某街道)</label>
<div class="col-md-9">
<input class="form-control" id="newbusinfo" type="text" name="newbusinfo" placeholder="车站点详情..">
<span class="help-block">Please enter your 车站点详情</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="newstationstarttime">车站点出发时间(例子:6:00或者21:00)</label>
<div class="col-md-9">
<input class="form-control" id="newstationstarttime" type="text" name="newstationstarttime" placeholder="车站点详情..">
<span class="help-block">Please enter your 车站点开始时间</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="newstationendtime">车站点结束时间</label>
<div class="col-md-9">
<input class="form-control" id="newstationendtime" type="text" name="newstationendtime" placeholder="车站点结束时间">
<span class="help-block">Please enter your 车站点结束时间(例子:6:00或者21:00)</span>
</div>
</div>
<button class="btn btn-primary btn-lg btn-block" type="button" onclick="addnewstatio()">确认添加一个新站点</button>
</form> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row"> <div class="col-md-8">
</div>
<!--时钟 参考https://www.jb51.net/article/88600.htm-->
<div class="col-md-4"> </div>
</div> <!-- 说明:每row行共12列,分个2div,第1个div占4列,第2个div则占8列,即4列+8列=12列 --> <!-- Breadcrumb--> </main>
<div class="modal fade show" id="primaryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-primary" role="document">
<div class="modal-content">
<form id="modalForm" class="needs-validation" action="" method="post">
<div class="modal-header">
<h4 class="modal-title">编辑</h4>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="busstationname">车站点名</label>
<input class="form-control" id="busstationname" type="text" name="busstationname" placeholder="输入修改车站点名.."
required>
<!--<span class="help-block">用户名</span>-->
<div class="invalid-feedback">
修改名不能为空!
</div>
</div>
<div class="form-group">
<label for="businfo">站点信息</label>
<input class="form-control" id="businfo" type="text" name="businfo"
placeholder="站点信息..">
<!--<span class="help-block">注册时间</span>-->
</div>
<div class="form-group">
<label for="stationstarttime">开始时间</label>
<input class="form-control" id="stationstarttime" type="text" name="stationstarttime" placeholder="开始时间..">
<!--<span class="help-block">角色</span>-->
</div>
<div class="form-group">
<label for="stationendtime">开始时间</label>
<input class="form-control" id="stationendtime" type="text" name="stationendtime" placeholder="结束时间..">
<!--<span class="help-block">角色</span>-->
</div> </div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
<button class="btn btn-primary" type="button" name="" onclick="save();">保存</button>
</div>
</form>
</div>
<!-- /.modal-content-->
</div>
<!-- /.modal-dialog-->
</div> <div class="modal fade show" id="dangerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-danger" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">删除</h4>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
删除后无法恢复,确认删除该记录么?
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
<button class="btn btn-primary" type="button" onclick="deleteUser();">确定</button>
</div>
</div>
<!-- /.modal-content-->
</div>
<!-- /.modal-dialog-->
</div> <div class="modal fade show" id="findstationModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-primary" role="document">
<div class="modal-content">
<form id="myfindstation" class="needs-validation" action="" method="post">
<div class="modal-header">
<h4 class="modal-title">查找到的信息:</h4>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group"> <label class="bg-warning theme-color w-60 rounded mb-2">(请不要随意删除站点,站点会影响线路)</label>
<label for="findstationinformation">查询的站点信息如下:</label>
<div class="col-md-8 mb-5">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active show" data-toggle="tab" href="#home3" role="tab" aria-controls="home" aria-selected="true">
<i class="icon-calculator"></i> 查询到的信息</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile3" role="tab" aria-controls="profile" aria-selected="false">
<i class="icon-basket-loaded"></i> 修改该站点信息</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active show" id="home3" role="tabpanel"> <textarea class="form-control" id="findstationinformation" name="textarea-input" rows="6" placeholder="Content.." disabled></textarea>
</div>
<div class="tab-pane" id="profile3" role="tabpanel">
站点名: <input class="form-control" id="findbusstationname" type="text" name="findstationname" placeholder="输入修改车站点名.." required="">
站点信息:<input class="form-control" id="findbusinfo" type="text" name="findstationinfo" placeholder="输入修改车站站点信息.." required="">
站点出发时间:<input class="form-control" id="findstarttime" type="text" name="findstarttime" placeholder="输入修改车站开始时间.." required="">
站点结束使时间: <input class="form-control" id="findendtime" type="text" name="findendtime" placeholder="输入修改车站结束时间.." required=""> </div>
</div> <!--<input class="form-control" id="findstationinformation" type="text" name="findstationinformation" disabled>-->
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">返回</button>
<button class="btn btn-danger" type="button" onclick="deletfindstation()">删除该站点</button>
<button class="btn btn-primary" type="button" name="" onclick="savefindstation();">修改保存</button>
</div></div>
</form>
</div>
<!-- /.modal-content-->
</div>
<!-- /.modal-dialog-->
</div> <script src="vendors/jquery/js/jquery.min.js"></script>
<script src="vendors/popper.js/js/popper.min.js"></script>
<script src="vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/pace-progress/js/pace.min.js"></script>
<script src="vendors/perfect-scrollbar/js/perfect-scrollbar.min.js"></script>
<script src="vendors/@coreui/coreui/js/coreui.min.js"></script>
<script src="vendors/chart.js/js/Chart.min.js"></script>
<script src="vendors/@coreui/coreui-plugin-chartjs-custom-tooltips/js/custom-tooltips.min.js"></script>
<script src="js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
var users = [ ];//获取到的bus所有站点信息
var rowIndex = -1;
var findstationid=0;
$.ajax({
url: "/busstations",
type:"GET",
success: function(response){
users = response; console.log(users)
//查看到获取信息成功
var example1 = new Vue({
el: '#usersTable',
data: {
items: users
}
});
return;
}
}); $('#primaryModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
rowIndex = button.data('rowindex') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var user = users[rowIndex];
var modal = $(this);
// modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body #busstationname').val(user.busstationname);
modal.find('.modal-body #businfo').val(user.businfo);
modal.find('.modal-body #stationstarttime').val(user.stationstarttime);
modal.find('.modal-body #stationendtime').val(user.stationendtime); }); $('#findstationModal').on('show.bs.modal', function (event) {
var findwhatstation= $('#findwhatstation').val();
var i=0;
var modal = $(this);
for(i=0;i<users.length;i++)
{
if(findwhatstation===users[i].busstationname)//找到busstation了
{
modal.find('.modal-body #findstationinformation').val("站点名:"+users[i].busstationname+"\n"+"站点信息:"+users[i].businfo+"\n"+"开始时间:"+users[i].stationstarttime+"\n"+"结束时间:"+users[i].stationendtime);
modal.find('.modal-body #findbusstationname').val(users[i].busstationname);
modal.find('.modal-body #findbusinfo').val(users[i].businfo);
modal.find('.modal-body #findstarttime').val(users[i].stationstarttime);
modal.find('.modal-body #findendtime').val(users[i].stationendtime);
findstationid=users[i].id;
break;
}
else{
modal.find('.modal-body #findstationinformation').val("很抱歉,sorry,没找到你想要找的站点信息!!!");
}
} }); $('#dangerModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
rowIndex = button.data('rowindex') // Extract info from data-* attributes
return;
}); function addnewstatio() {
var newstationname = $('#newstationname').val();
var newbusinfo = $('#newbusinfo').val();
var newstationstarttime = $('#newstationstarttime').val();
var newstationendtime = $('#newstationendtime').val();
var needid=users.length+1;
alert(needid);
console.log("站点信息:"+newbusinfo+"站点名字:"+newstationname+"站点开始时间:"+newstationstarttime+"站点结束时间:"+newstationendtime);
$.ajax({
url: "/busstations/create",
type:"POST",
contentType: "application/json; charset=utf-8",
data : JSON.stringify({id:needid,busstationname:newstationname,businfo:newbusinfo,stationstarttime:newstationstarttime,stationendtime:newstationendtime}),
dataType: "json", success: function (res) {
alert("成功"); },
error: function (message) {
// alert(message);
}
});
} function deletfindstation(){
var ids=findstationid;
$.ajax({
type: "POST",
url: "/busstations/delete",
contentType: 'application/json',
data: JSON.stringify(ids),
dataType: "json",
success: function (data) {
users.splice(rowIndex, 1);
$('#findstationModal').modal('hide');//隐藏模态框
},
error: function (msg) {
alert(ids);
}
}); }
function savefindstation(){
var id=findstationid;
var findstationname=$('#findbusstationname').val();
var findbusinfo=$('#findbusinfo').val();
var findendtime=$('#findendtime').val();
var findstarttime=$('#findstarttime').val();
console.log(findstationname+findstationid); $.ajax({
type: "POST",
url: "/busstations/delete",
contentType: 'application/json',
data: JSON.stringify(id),
dataType: "json",
success: function (data) { $.ajax({
url: "/busstations/create",
type:"POST",
contentType: "application/json; charset=utf-8",
data : JSON.stringify({id:id,busstationname:findstationname,businfo:findbusinfo,stationstarttime:findstarttime,stationendtime:findendtime}),
dataType: "json", success: function (res) {
// alert(res); },
error: function (message) {
// alert(message);
}
}); }
}); $('#findstationModal').modal('hide');//隐藏模态框 }
function save() { //验证表单
var form = document.getElementById('modalForm');
if (form.checkValidity() === true) {
// modal.find('.modal-title').text('New message to ' + recipient)
var busstationname = $('#busstationname').val();
var businfo = $('#businfo').val();
var stationstarttime = $('#stationstarttime').val();
var stationendtime = $('#stationendtime').val(); users[rowIndex].busstationname = busstationname;
users[rowIndex].businfo = businfo;
users[rowIndex].stationstarttime = stationstarttime;
users[rowIndex].stationendtime = stationendtime; var ids = users[rowIndex].id; $('#primaryModal').modal('hide');//隐藏模态框
$.ajax({
type: "POST",
url: "/busstations/delete",
contentType: 'application/json',
data: JSON.stringify(ids),
dataType: "json",
success: function (data) { $.ajax({
url: "/busstations/create",
type:"POST",
contentType: "application/json; charset=utf-8",
data : JSON.stringify({id:ids,busstationname:busstationname,businfo:businfo,stationstarttime:stationstarttime,stationendtime:stationendtime}),
dataType: "json", success: function (res) {
// alert(res); },
error: function (message) {
// alert(message);
}
}); }
}); } form.classList.add('was-validated');
$('#primaryModal').modal('hide');//隐藏模态框 } function deleteUser() {
var ids = users[rowIndex].id; $.ajax({
type: "POST",
url: "/busstations/delete",
contentType: 'application/json',
data: JSON.stringify(ids),
dataType: "json",
success: function (data) {
users.splice(rowIndex, 1);
$('#dangerModal').modal('hide');//隐藏模态框
},
error: function (msg) {
alert(ids);
}
}); }; </script> </body>
</html>
添加新的站点:

控制台提示:

查看数据库就肯定会多一条数据了。
查询功能也实现

所有站点信息:

(下一任务安排实现车辆信息管理功能,线路比较复杂先搁到下下任务)
基于web公交查询系统----管理员公交站点管理页面实现的更多相关文章
- 基于web公交查询系统----数据库设计
要求:公交查询系统,管理员可以新增线路,修改车辆参数,发车时间表,删除车次,站名等. 用户可以按线路查询,按站点查询相关信息,也可查询两站点之间的换乘信息等. 数据库应包含管理员表,车站表,线路表,车 ...
- 基于Web在线考试系统的设计与实现
这是一个课程设计的文档,源码及文档数据库我都修改过了,貌似这里复制过来的时候图片不能贴出,下载地址:http://download.csdn.net/detail/sdksdk0/9361973 ...
- 基于Web的监控系统的开发进行分布式和现代生产(外文翻译)
摘要 近年来,Web技术发展迅速.尤其是网络浏览器增强了其功能因为JavaScript,CSS3和HTML5的改进.因此,功能越来越丰富的基于Web的软件解决方案功能范围可用.通过使用响应式网页设计( ...
- 【转】如何在CentOS/RHEL中安装基于Web的监控系统 linux-das
Linux-dash是一款为Linux设计的基于Web的轻量级监控面板.这个程序会实时显示各种不同的系统属性,比如CPU负载.RAM使用率.磁盘使用率.网速.网络连接.RX/TX带宽.登录用户.运行的 ...
- 预约系统(四) 管理页面框架搭建easyUI
Manage控制器用于管理页面 Index视图为管理页面首页,采用easyUi的后台管理框架 Html头部调用,jquery库,easyui库,easyui.css,icon.css,语言包 < ...
- 基于web公交查询系统---站点信息管理
界面设计: 界面设计代码获取: 搭建好框架获取信息: 核心代码: var users = [ ];//获取到的bus所有站点信息 var rowIndex = -1; $.ajax({ url: &q ...
- 基于web公交查询系统自我安排进度
这周完成站点信息管理
- 基于web公交查询系统---搭建mvc连接数据库(我的毕业设计,进度继续)
建立一个spring的项目:我在已经做过的项目基础下做的,所以接口连接数据库挺快. 搭建好的.对应好数据库: 前几天进度已经完成简单的设计: 完成登录,用户管理(修改删除). 继续的数据库的信息获取, ...
- Solr 08 - 在Solr Web管理页面中查询索引数据 (Solr中各类查询参数的使用方法)
目录 1 Solr管理页面的查询入口 2 Solr查询输入框简介 3 Solr管理页面的查询方案 1 Solr管理页面的查询入口 选中需要查询的SolrCore, 然后在菜单栏选择[Query]: 2 ...
随机推荐
- Java笔记(持续更新)
码云地址 https://gitee.com/MarkPolaris/Java_Mark
- Codeforces Round #602 (Div. 2, based on Technocup 2020 Elimination Round 3) D2. Optimal Subsequences (Hard Version) 数据结构 贪心
D2. Optimal Subsequences (Hard Version) This is the harder version of the problem. In this version, ...
- Python与用户交互
目录 一.为什么交互? 二.如何交互? 三.Python2的交互 一.为什么交互? 让我们来回顾计算机的发明有何意义,计算机的发明是为了奴役计算机,解放劳动力.假设我们现在写了一个ATM系统取代了 ...
- 【STM32H7教程】第18章 STM32H7的GPIO应用之跑马灯
完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第18章 STM32H7的GPIO应用之跑马灯 本 ...
- workbook数据相关操作
访问单个单元格 c = ws['A4'] #返回单元格A4,如果单元格不存在,则会自动创建 ws['A4'] = 4 #为单元格A4赋值为4 d = ws.cell(row=4, column=2, ...
- SpringBoot系列之Spring容器添加组件方式
SpringBoot系列之Spring容器添加组件方式 本博客介绍SpringBoot项目中将组件添加到Spring容器中的方法,SpringBoot项目有一个很明显的优点,就是不需要再编写xml配置 ...
- windows 10使用vscode进行远程代码开发 | tutorial to use vscode for remote development using ssh on windows
本文首发于个人博客https://kezunlin.me/post/c93b6ba6/,欢迎阅读最新内容! tutorial to use vscode for remote development ...
- RabbitMQ的交换器Exchange之direct(发布与订阅 完全匹配)
1.交换器.用来接收生产者发送的消息并将这些消息路由给服务器中的队列.三种常用的交换器类型,a.direct(发布与订阅 完全匹配).b.fanout(广播).c.topic(主题,规则匹配). 2. ...
- PHP+Ajax手机移动端发红包实例
基本流程:当输入完红包数量和总金额后,PHP会根据这两个值进行随机分配每个金额,保证每个人都能领取到一个红包,且每个红包金额不等,并且所有红包金额总额等于总金额. 实现原理:设定总金额为10元,有N个 ...
- php实现基础排序算法
<?php header("content-type:text/html;charset=utf-8"); $testArr = array(); $time1 = micr ...