Loading [MathJax]/jax/output/CommonHTML/config.js
文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >专栏 >springboot展示页面（及关于ajax中页面不跳转问题）

springboot展示页面（及关于ajax中页面不跳转问题）

作者头像
JQ实验室
发布于 2022-02-10 06:43:41
发布于 2022-02-10 06:43:41
2.2K00
代码可运行
举报
文章被收录于专栏：实用技术实用技术
运行总次数：0
代码可运行
关联问题
换一批

bulid.gradle

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
dependencies {

	compile 'org.springframework.boot:spring-boot-starter-web:2.3.4.RELEASE'
	compile 'org.apache.httpcomponents:httpclient:4.3.5'
	compile 'org.json:json:20180130'
	testImplementation('org.springframework.boot:spring-boot-starter-test:2.3.4.RELEASE') {
		exclude group: 'org.junit.vintage', module: 'junit-vintage-engine'
	}
}

　application.properties

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
#\u81ea\u5b9a\u4e49\u7684\u5c5e\u6027\uff0c\u6307\u5b9a\u4e86\u4e00\u4e2a\u8def\u5f84\uff0c\u6ce8\u610f\u8981\u4ee5/\u7ed3\u5c3e
web.upload-path=./resource/static
#\u8868\u793a\u6240\u6709\u7684\u8bbf\u95ee\u90fd\u7ecf\u8fc7\u9759\u6001\u8d44\u6e90\u8def\u5f84
spring.mvc.static-path-pattern=/**

spring.resources.static-locations=file:${web.upload-path},classpath:/static/

　　application.yml

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
server:
  port: 8081　　

html:

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>任务监控</title>
<link type="text/css" href="bootstrap/css/bootstrap.min.css"
	rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>


<style type="text/css">
body {
	text-align: center;
}

.tabTitlesContainer {
	text-align: center;
	font-size: 20px;
	cursor: hand;
	width: 100%;
	border-width: thin;
}

.tabTitleUnSelected {
	background-color: fuchsia;
	width: 100px;
}

.tabTitleUnSelected:hover {
	background-color: Orange;
}

.tabTitleSelected {
	background-color: blue;
	width: 100px;
}

#tabPagesContainer {
	text-align: left;
	width: 100%;
}

.tabPageUnSelected {
	background-color: Orange;
	display: none;
}

.tabPageSelected {
	background-color: white;
	display: block;
	padding-top: 20px;
}

.tabPage {
	min-height: 800px;
	height: 100%;
}

.my-table {
	
}
</style>
</head>
<body>
	<div>
		<h3>任务监控</h3>
	</div>
	<table class="tabTitlesContainer">
		<tr id="tabTitles">
			<td class="tabTitleSelected" onclick="tabPageControl(0)">最近任务</td>
			<td class="tabTitleUnSelected" onclick="tabPageControl(1)">异常任务</td>
			<td class="tabTitleUnSelected" onclick="tabPageControl(2)">本机情况</td>
		</tr>
	</table>
	<div id="tabPagesContainer">
		<div class="tabPageSelected">
			<div class="tabPage">
				<div class="my-table">
					<div class="table-responsive">
						<table id="my-table" class="table table-striped table-bordered">
							<thead>
								<tr>
									<th>#</th>
									<th>属性</th>
									<th>值</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>1</td>
									<td>状态</td>
									<td>正在查询</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">

//我们可以根据jquery来进行自动获取项目路径，获取方法如下
function getRootPath() {
  // 1、获取当前全路径
  var curWwwPath = window.location.href;
  console.log(curWwwPath);
  // 获取当前相对路径： /springmvc/page/frame/test.html
  var pathName = window.location.pathname;
  console.log(pathName);
  // 获取主机地址,如： http://localhost:8080
  var local = curWwwPath.substring(0,curWwwPath.indexOf(pathName));  
  console.log(local);
  // 获取带"/"的项目名，如：/springmvc  
  var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1); 
  console.log(projectName);
  var rootPath = local + projectName;  
  console.log(rootPath);
  //return rootPath;
  return projectName;
}
	var contextPath = getRootPath();
	
	var url = sessionStorage.getItem('server_url');
	var sid = sessionStorage.getItem('sid');
	console.log("sid=" + sid);
	if (sid == null || sid == '') {
		confirm('未登录，跳转登录页');
		window.location.href = "login.html";
	}else{
		getWorkItem();
	}
	
	
	function tabPageControl(n) {
		for (var i = 0; i < tabTitles.cells.length; i++) {
			tabTitles.cells[i].className = "tabTitleUnSelected";
		}
		tabTitles.cells[n].className = "tabTitleSelected";
		
		if(n==2){
			getSystemInfo();
		}else if(n==0){
			getWorkItem();
		}else if(n==1){
			getExcetionWorkItem();
		}
	}
	
	function getSystemInfo(){
		$('#my-table').html("<thead>"+
				"<tr>"+
				"<th>#</th>"+
				"<th>状态</th>"+
				"<th>正在查询</th>"+
				"</tr>"+
				"</thead>");
		$.ajax({
			url:contextPath + '/systemInfo',
			async:true,
			dataType:'json',
			contentType:'application/json',
			success:function(res){
				console.log(res);
				var html = '<thead> '+
				'<tr>'+
				'<th>'+"序号"+'</th>'+
				'<th>'+"属性"+'</th>'+
				'<th>'+"值"+'</th>'+
				'</tr>'+
				'</thead>';
				var thbody = '<thbody>';
				//var data = $.parseJSON(res);
				//console.log(data);
				var i = 1;
				$.each(res,function(key,value){
					thbody+='<tr><td>'+(i++)+'</td>'+
					'<td>'+key+'</td>'+
					'<td>'+value+'</td></tr>';
				});
				thbody+='</thbody>';
				
				$('#my-table').html(html+thbody);
			},
			error:function(e){
				console.log('请求失败：'+e);
			}
		});
	}
	
	function stop(item){
		if(item.state!='Running'){
			alert("只对运行中的任务有效")
			return false;
		}
		
	}
	
	function getWorkItem(){
		
		$.ajax({
			url:contextPath +'/workitem/list?url='+url+"&sid="+sid+"&hostName=",
			async:false,
			dataType:'json',
			contentType:'application/json',
			success:function(res){
				console.log(res);
				var html = '<thead> '+
				'<tr>'+
				'<th>'+"序号"+'</th>'+
				'<th>'+"任务名称"+'</th>'+
				'<th>'+"活动名称"+'</th>'+
				'<th>'+"处理者"+'</th>'+
				'<th>'+"状态"+'</th>'+
				'<th>'+"进度"+'</th>'+
				'<th>'+"优先级"+'</th>'+
				'<th>'+"创建者"+'</th>'+
				'<th>'+"创建时间"+'</th>'+
				'<th>'+"开始时间"+'</th>'+
				'<th>'+"结束时间"+'</th>'+
				'<th>'+"操作"+'</th>'+
				'</tr>'+
				'</thead>';
				var thbody = '<thbody>';
				$.each(res,function(n,item){
					thbody+='<tr id='+item.id+'>'+
					'<td>'+(n+1)+'</td>'+
					'<td>'+item.name+'</td>'+
					'<td>'+item.activityDefineName+'</td>'+
					'<td>'+item.worker+'</td>'+
					'<td>'+item.state+'</td>'+
					'<td>'+item.progress+'</td>'+
					'<td>'+item.priority+'</td>'+
					'<td>'+item.createdBy+'</td>'+
					'<td>'+item.createdTime+'</td>'+
					'<td>'+item.startTime+'</td>'+
					'<td>'+item.stopTime+'</td>'+
					'<td><button onclick="stop()"></button></td>'+
					'</tr>';
				});
				thbody+='</thbody>';
				
				$('#my-table').html(html+thbody);
			},
			error:function(e){
				confirm('请求失败，跳转登录页')?window.location.href = "login.html":console.log("do noting");
				console.log('请求失败：'+e);
			}
		});
	}
	
	function getExcetionWorkItem(){
		$.ajax({
			url:contextPath +'/workitem/list?url='+url+"&sid="+sid+"&status=Exception"+"&hostName=",
			async:false,
			dataType:'json',
			contentType:'application/json',
			success:function(res){
				console.log(res);
				var html = '<thead> '+
				'<tr>'+
				'<th>'+"序号"+'</th>'+
				'<th>'+"任务名称"+'</th>'+
				'<th>'+"活动名称"+'</th>'+
				'<th>'+"处理者"+'</th>'+
				'<th>'+"状态"+'</th>'+
				'<th>'+"进度"+'</th>'+
				'<th>'+"优先级"+'</th>'+
				'<th>'+"创建者"+'</th>'+
				'<th>'+"创建时间"+'</th>'+
				'<th>'+"开始时间"+'</th>'+
				'<th>'+"结束时间"+'</th>'+
				'<th>'+"操作"+'</th>'+
				'</tr>'+
				'</thead>';
				var thbody = '<thbody>';
				$.each(res,function(n,item){
					thbody+='<tr id='+item.id+'>'+
					'<td>'+(n+1)+'</td>'+
					'<td>'+item.name+'</td>'+
					'<td>'+item.activityDefineName+'</td>'+
					'<td>'+item.worker+'</td>'+
					'<td>'+item.state+'</td>'+
					'<td>'+item.progress+'</td>'+
					'<td>'+item.priority+'</td>'+
					'<td>'+item.createdBy+'</td>'+
					'<td>'+item.createdTime+'</td>'+
					'<td>'+item.startTime+'</td>'+
					'<td>'+item.stopTime+'</td>'+
                                         '<td><button onclick="stop(\''+item+'\')">提高优先级</button></td>'+'</tr>';
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
				});
				thbody+='</thbody>';
				
				$('#my-table').html(html+thbody);
			},
			error:function(e){
				confirm('请求失败，跳转登录页')?window.location.href = "login.html":console.log("do noting");
				console.log('请求失败：'+e);
			}
		});
	}
	
	
</script>

</html>

　　登录页：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>登录页面</title>
<!-- Bootstrap 核心 CSS 文件 -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--font-awesome 核心我CSS 文件-->
<link href="bootstrap/css/font-awesome.css" rel="stylesheet">
<!-- 在bootstrap.min.js 之前引入 -->
<script src="js/jquery.js"></script>
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!--jquery.validate-->

<style type="text/css">
body {
    background: url(img/bg.jpg) no-repeat;
    background-size: cover;
    font-size: 16px;
}

.form {
    background: rgba(255, 255, 255, 0.2);
    width: 100%;
    margin: 50px auto;
    padding: 100px;
}
#login_form { 
    width:30%;
    margin-left:35%;
    text-align: center;
}
input{
    text-align: center;
}
</style>
</head>
<body>
    <div class="container">
        <div class="form row">
            <form class="form-horizontal"
                id="login_form">
                <h3 class="form-title">登录</h3>
                <div>
                    <div class="form-group">
                        <label class="">系统地址</label>
                        <input class="form-control" type="text"
                            name="systemurl" autofocus="autofocus"
                            maxlength="100" value="http://127.0.0.1/central"/>
                    </div>
                    
                    <div class="form-group">
                        <label>用户名</label>
                        <input class="form-control" type="text"
                            name="username" autofocus="autofocus"
                            maxlength="20" />
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input class="form-control" type="password"
                            name="password" maxlength="20" />
                    </div>
                    <div class="form-group">
                        <input type="button" onclick="login()" class="btn btn-success"
                            value="登录 " />
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
<script type="text/javascript">

$('input[name="systemurl"]').val(sessionStorage.getItem("server_url"));
$('input[name="username"]').val(sessionStorage.getItem("userId"));
$('input[name="password"]').val(sessionStorage.getItem("password"));
function getRootPath() {
    
      // 1、获取当前全路径
      var curWwwPath = window.location.href;
      console.log(curWwwPath);
      // 获取当前相对路径： /springmvc/page/frame/test.html
      var pathName = window.location.pathname;
      console.log(pathName);
      // 获取主机地址,如： http://localhost:8080
      var local = curWwwPath.substring(0,curWwwPath.indexOf(pathName));  
      console.log(local);
      // 获取带"/"的项目名，如：/springmvc  
      var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1); 
      console.log(projectName);
      var rootPath = local + projectName;  
      console.log(rootPath);
      //return rootPath;
      return projectName;
    }
var contextPath = getRootPath();


    function login(){
        var url = $('input[name="systemurl"]').val();
        var userId = $('input[name="username"]').val();
        var password = $('input[name="password"]').val();
        if(url=='' || userId=='' || password==''){
            alert("都不可空！！！");
            return;
        }
        sessionStorage.setItem("server_url",url);
        sessionStorage.setItem("userId",userId);
        sessionStorage.setItem("password",password);
        
        $.ajax({
            url:contextPath + '/logon?url='+url+"&userId="+userId+"&password="+password,
            async:false,
            type:"POST",
            //dataType:'json',
            //contentType:'application/json',
            success:function(res){
                console.log(res);
                sessionStorage.setItem("sid",res);
                sessionStorage.setItem("server_url",url);
                $('input[type="button"]').val("登录成功");
                setTimeout('window.location.href = "index.html"',1000);
            },
            error:function(err){
                sessionStorage.setItem("sid","");
                console.log(err);
                confirm("登录失败");
            }
        });
    }        
        
</script>
</html>

关于登录页需要说一下：

当按钮typ为submit时，在ajax的success的方法中window.location,href跳转不起作用；

原因: 因为有提交了一次表单。你的ajax是同步的，所以提交表单动作被挂起直到ajax完毕后（此时执行请求过一次服务器），表单会提交，这样就会执行页面指定的action的地址, 而ajax回调success href的链接赋值不成功

参考网络上的说明：你点击了submit，它会提交表单，但是由于你用了ajax的同步操作，submit的提交被阻塞，ajax先执行，这个时候，如果你在ajax的回调函数（如：success）中写了document.location.href='xxx.html'，它是执行了，的确是去执行了跳转的，于是ajax完成了，那接下来就要把刚才的submit提交的请求完成。于是呢又要从xxx.html跳回到刚才那个页面（无论你submit有没有提交具体的数据，总之提交了之后如果后台没有执行跳转/重定向，它就要回到原来的页面。）

即：ajax就是如你所想那样执行了，也从A页面跳到了B页面，但是由于submit这种类型的特殊性，又让B页面跳回了A页面，由于这个ajax执行完再执行submit请求的过程处理的很快，你会感到好像没有效果，但是你仔细观察，会发现这个过程页面会刷新的，其实就是B页面跳回到A页面。

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-10-29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
ajax
html

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

ajax
html
评论
登录后参与评论
暂无评论
登录 后参与评论
推荐阅读
编辑精选文章
换一批
万字详解高可用架构设计
6326
Go 开发者必备：Protocol Buffers 入门指南
3849
10分钟带你彻底搞懂分布式链路跟踪
2884
多租户的 4 种常用方案
5631
亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？
3985
60页PPT全解：DeepSeek系列论文技术要点整理
5357
php 增删改操作 原
php
最近在慕课网上学习php + ajax 实现表格的实时编辑，老师讲的非常好，感谢老师，按照老师的讲解，自己敲了一遍，收获很多。
tianyawhl
2019/04/04
6200
【jquery Ajax 练习】图书管理
编程算法apicssphp网站
✍️ 作者简介: 前端新手学习中。 💂 作者主页: 作者主页查看更多前端教学 🎓 专栏分享：css重难点教学 Node.js教学 从头开始学习 目录 图书管理         目标         渲染UI结构          获取原始图书数据                 文档                  代码          原始数据的添加          删除图书功能                 文档                  代码         添加图书功
坚毅的小解同志的前端社区
2022/11/28
6790
【jquery Ajax 练习】图书管理
django+pymysql搭建一个管理系统(一)
htmlpython
django+pymysql搭建一个管理系统(一) 后续进行代码更新,优化 一.程序架构 二.mysql表单创建 zouye库:存信息相关的 #班级表 create table classes( ci
小小咸鱼YwY
2019/09/11
1.7K0
django+pymysql搭建一个管理系统(一)
Python进阶31-Django 分页器
运维编程算法自动化djangoajax
-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
DriverZeng
2022/09/26
1.7K0
Python进阶31-Django 分页器
SpringBoot的4中常见入参形式错误解析
javaspring boot腾讯技术创作特训营S9
SpringBoot前后端接口对接工作时，经常遇到请求500，400等问题，马虎大意经常导致时间浪费，为此总结了4个常见的复杂请求类型，以此为戒。
JavaDog程序狗
2024/10/14
2670
SpringBoot的4中常见入参形式错误解析
vue+axios实现评论留言板
apiaxios数据
这里的评论数据以及添加数据都是用的FastAPI，然后再用axios发送请求，获取评论以及添加评论。
SingYi
2022/07/14
1.2K0
vue+axios实现评论留言板
Bootstrap Table插件 页面跳转后再回来保存搜索的值
bootstrap
场景：在一个内容比较多的列表页面中，使用bootstrap table的搜索功能后，选择某列，点击此列中一个按钮，跳转到详情页，当我们从详情页返回到table列表页面中，由于内容较多，我们希望第一次输入搜索的值保存在搜索框中，该怎么解决呢？
tianyawhl
2019/04/04
1.6K0
Bootstrap Table插件 页面跳转后再回来保存搜索的值
前端MVC学习总结（四）——NodeJS+MongoDB+AngularJS+Bootstrap书店示例
mvcnode.jsmongodb
摘要总结：本文介绍了如何使用AngularJS04进行图书信息管理系统开发。主要包括了图书信息录入、查询、修改和删除等功能。同时，还提供了编辑图书和删除图书的接口。通过使用AngularJS04的指令和指令模块，可以方便地实现图书信息管理系统。
张果
2018/01/04
2.6K0
前端MVC学习总结（四）——NodeJS+MongoDB+AngularJS+Bootstrap书店示例
vue基础（三）
jsonvue.jshttpapi
除了 vue-resource 之外，还可以使用 axios 的第三方包实现实现数据的请求 1. 之前的学习中，如何发起数据请求？ 2. 常见的数据请求类型？ get post jsonp 3. 测试的URL请求资源地址： + get请求地址： http://www.liulongbin.top:3005/api/get + post请求地址：http://www.liulongbin.top:3005/api/post + jsonp请求地址：http://www.liulongbin.top:3005/api/jsonp 4. JSONP的实现原理 + 由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口，浏览器认为这种访问不安全； + 可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）； + 具体实现过程： - 先在客户端定义一个回调方法，预定义对数据的操作； - 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口； - 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行； - 客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了；
不愿意做鱼的小鲸鱼
2022/09/24
6530
vue基础（三）
django管理系统代码优化-分组(二)
htmlpythondjango
优化前代码:https://www.cnblogs.com/pythonywy/p/11345626.html
小小咸鱼YwY
2019/09/11
8190
django管理系统代码优化-分组(二)
Vue 03.vue-resource
jsonvue.jshttp编程算法
除了 vue-resource 之外，还可以使用 axios 的第三方包实现实现数据的请求
LittlePanger
2020/04/14
6090
HC小区管理系统项目前端页面开发流程梳理
class函数开发前端源码
在我之前写的文章你一定没见过这样高度适配的接口，HC小区管理系统后端项目源码难点梳理 中我们一起梳理了后端项目MicroCommunity的开发流程和难点，当时前端项目MicroCommunityWeb尚未梳理，而前端项目MicroCommunityWeb对于
用户3587585
2024/06/13
6990
HC小区管理系统项目前端页面开发流程梳理
axios网络交互应用-Vue
网络安全node.jsajaxjavascripthttp
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
达达前端
2019/12/26
9010
python3.6+django2.0 一小时学会开发一套学员管理系统demo
其他
1.在pycharm中新建project demo1 添加app01 点击create按钮完成新建 2.在demo项目目录下新建目录static，并在settings.py中追加代码： STATICFILES_DIRS=(os.path.join(BASE_DIR, 'static'),) 3.在setting.py中添加模板路径： TEMPLATES = [ { 'BACKEND': '...', 'DIRS': [os.path.join(BASE_DIR,
玩蛇的胖纸
2018/06/08
1.7K0
easyui+nodejs+sqlserver增删改查实现
node.jssql server
用到的模块或者技术： Express: http://www.expressjs.com.cn/4x/api.html#express Easyui: http://www.jeasyui.com
用户1141560
2017/12/26
3.2K0
easyui+nodejs+sqlserver增删改查实现
商城项目回顾整理（一）前台页面布局
登录后台
登录页面： 1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 6 <head> 7 <
二十三年蝉
2018/02/28
1.9K0
（三）Java高并发秒杀系统API之Web层开发
javaapi
SpringMvc默认就会默认去WEB-INF下查找默认规范的配置文件,像我这里配置的servlet-name是seckill-dispatchServlet的话,则默认会寻找WEB-INF一个名为seckill-dispatchServlet-Servlet.xml的配置文件
Java团长
2018/12/25
2.9K0
Vue 实现表格搜索、固定表头与排序 原
vue.js
在搜索完，删除搜索内容后展示所有的内容，用computed就比较容易实现，思路：v-model绑定搜索关键字，在tbody的tr上v-for循环计算属性。methods也可以实现需要改成
tianyawhl
2019/04/04
2.7K0
基于Vue、Bootstrap的Tab形式的进度展示
其他
最近基于Vue、Bootstrap做了一个箭头样式的进度展示的单页应用，并且支持了对于一个本地JS文件的检索，通过这个单页应用，对于Vue的理解又深入了一些。在这里把主要的代码分享出来。
大江小浪
2018/07/24
1.3K0
基于Vue、Bootstrap的Tab形式的进度展示
国庆手撸商品管理系统(三)
htmlpython
之前的内容 点我管理系统(一) 点我管理系统(二) 一.实现的内容 商品退货 商品库存 商品进货 商品删除 商品还原 时钟 优化模型 二.后续内容准备优化内容 把数据库查询的内容存在缓存中 增加按日期,按商品名查询 增加快捷商品增加 优化代码 优化界面 三.目录结构 drf_test |___drf_api | |___admin.py | |___apps.py | |___migrations | |___models.py | |
小小咸鱼YwY
2020/06/19
9590
推荐阅读
编辑精选文章
万字详解高可用架构设计Go 开发者必备：Protocol Buffers 入门指南10分钟带你彻底搞懂分布式链路跟踪
相关讨论
IOS跳转页面报错？一直卡在充值跳转页面？小程序搭建时data-event-opts跳转内部页面报错，跳转的内部页面却需要获取APPID？
相关课程
Java前端数字化IT从业者知识体系
php 增删改操作 原
6200
【jquery Ajax 练习】图书管理
6790
django+pymysql搭建一个管理系统(一)
1.7K0
Python进阶31-Django 分页器
1.7K0
SpringBoot的4中常见入参形式错误解析
2670
vue+axios实现评论留言板
1.2K0
Bootstrap Table插件 页面跳转后再回来保存搜索的值
1.6K0
前端MVC学习总结（四）——NodeJS+MongoDB+AngularJS+Bootstrap书店示例
2.6K0
vue基础（三）
6530
django管理系统代码优化-分组(二)
8190
Vue 03.vue-resource
6090
HC小区管理系统项目前端页面开发流程梳理
6990
axios网络交互应用-Vue
9010
python3.6+django2.0 一小时学会开发一套学员管理系统demo
1.7K0
easyui+nodejs+sqlserver增删改查实现
3.2K0
商城项目回顾整理（一）前台页面布局
1.9K0
（三）Java高并发秒杀系统API之Web层开发
2.9K0
Vue 实现表格搜索、固定表头与排序 原
2.7K0
基于Vue、Bootstrap的Tab形式的进度展示
1.3K0
国庆手撸商品管理系统(三)
9590
相关推荐
php 增删改操作 原
更多 >
JQ实验室0
LV.5
这个人很懒，什么都没有留下～
文章
385
获赞
691
排名
412
专栏
3
作者相关精选
换一批
加入讨论
的问答专区 >
用户1476826
前端开发工程擅长1个领域
相关课程
一站式学习中心 >
Java
2211人在学
java
前端
1369人在学
前端
数字化IT从业者知识体系
496人在学
CODING DevOps
软件开发
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论
3
本文部分代码块支持一键运行，欢迎体验
本文部分代码块支持一键运行，欢迎体验