写一段代码,前端调用后端接口失败用弹出框显示错误信息
时间: 2024-04-11 22:28:09 浏览: 15
好的,以下是一个示例代码,用于在前端调用后端接口失败时使用弹出框显示错误信息:
```javascript
// 前端代码
fetch('/api/backend') // 调用后端接口
.then(response => {
if (!response.ok) {
throw new Error('请求失败'); // 当请求不成功时抛出错误
}
return response.json();
})
.then(data => {
// 处理返回的数据
})
.catch(error => {
// 弹出框显示错误信息
alert('调用后端接口失败: ' + error.message);
});
```
在上述代码中,我们使用了 fetch 函数来调用后端接口。当请求不成功时,我们抛出一个错误,并在 catch 块中使用 alert 函数来弹出框显示错误信息。你可以根据实际情况进行修改和适配。
相关问题
写一段Java前端校验字符串为时分秒格式
你可以使用正则表达式来校验字符串是否为时分秒格式,具体实现如下:
```java
public boolean isValidTimeFormat(String str) {
// 定义时分秒格式正则表达式
String regex = "^([01]\\d|2[0-3]):([0-5]\\d):([0-5]\\d)$";
// 判断字符串是否匹配正则表达式
return str.matches(regex);
}
```
其中,正则表达式`^([01]\\d|2[0-3]):([0-5]\\d):([0-5]\\d)$`表示:
- `^` 表示字符串的开头
- `([01]\\d|2[0-3])` 表示小时,取值范围为 00-23
- `:` 表示分和秒之间的分隔符
- `([0-5]\\d)` 表示分或秒,取值范围为 00-59
- `$` 表示字符串的结尾
如果字符串匹配正则表达式,则返回 `true`,否则返回 `false`。
你可以在前端页面调用这个方法来校验用户输入的字符串是否为时分秒格式,例如:
```html
<input type="text" id="timeInput">
<button onclick="checkTimeFormat()">校验</button>
<script>
function checkTimeFormat() {
var str = document.getElementById("timeInput").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "/checkTimeFormat");
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var result = JSON.parse(xhr.responseText);
if (result.success) {
alert("字符串格式正确");
} else {
alert("字符串格式不正确");
}
}
}
xhr.send(JSON.stringify({str: str}));
}
</script>
```
这段代码通过 Ajax 请求将用户输入的字符串发送到后端进行校验,后端返回校验结果并在前端弹出提示框。在后端实现中,你可以调用上面提供的 `isValidTimeFormat` 方法进行校验。
在Javaweb项目中用MVC模式进行后端管理员RSA加密登录前后端具体代码实现,要求使用MySQL数据库,利用layUI框架和ajax接口请求
1. 定义数据库表
在MySQL数据库中创建一个名为admin的表,包含以下字段:
- id:管理员ID,主键,自增长
- username:管理员用户名,唯一
- password:管理员密码,存储加密后的密码
2. 后端代码实现
在Java项目中创建一个名为AdminController的控制器类,实现管理员登录功能。
2.1 加载页面
```
@RequestMapping("/admin/login")
public String toLogin() {
return "admin/login";
}
```
这段代码使用@RequestMapping注解映射/admin/login路径,返回admin/login视图,该视图用于显示管理员登录页面。
2.2 接收登录请求
```
@PostMapping("/admin/doLogin")
@ResponseBody
public Map<String, Object> doLogin(String username, String password) {
Map<String, Object> map = new HashMap<>();
Admin admin = adminService.getAdminByUsername(username);
if (admin == null) {
map.put("code", 1);
map.put("msg", "用户名不存在");
} else {
String decryptPwd = RSAUtils.decrypt(password, Constants.PRIVATE_KEY);
if (decryptPwd.equals(admin.getPassword())) {
map.put("code", 0);
map.put("msg", "登录成功");
} else {
map.put("code", 1);
map.put("msg", "密码错误");
}
}
return map;
}
```
这段代码使用@PostMapping注解映射/admin/doLogin路径,接收前端传来的用户名和密码,并调用adminService的getAdminByUsername方法查询数据库中的管理员信息。
如果查询结果为空,说明用户名不存在,返回code为1,msg为“用户名不存在”。
如果查询结果不为空,说明用户名存在,将前端传来的加密后的密码解密并与数据库中存储的密码进行比对。
如果密码匹配,返回code为0,msg为“登录成功”。
如果密码不匹配,返回code为1,msg为“密码错误”。
2.3 加密密码
```
Admin admin = new Admin();
admin.setUsername(username);
String encryptPwd = RSAUtils.encrypt(password, Constants.PUBLIC_KEY);
admin.setPassword(encryptPwd);
adminService.addAdmin(admin);
```
这段代码创建一个Admin对象,设置用户名和加密后的密码,并调用adminService的addAdmin方法将管理员信息添加到数据库。
3. 前端代码实现
使用LayUI框架和Ajax接口请求实现前端登录页面。
3.1 引入LayUI框架
在html代码中引入LayUI框架的CSS和JS文件:
```
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
```
3.2 显示登录页面
在html代码中添加一个form表单,用于提交用户名和密码,并使用LayUI的form组件渲染表单:
```
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="login">登录</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
```
3.3 发送登录请求
在html代码中添加一个script标签,使用Ajax发送登录请求,并根据后端返回的结果进行相应的处理:
```
<script>
//监听提交
layui.form.on('submit(login)', function(data){
$.ajax({
url: '/admin/doLogin',
type: 'post',
dataType: 'json',
data: data.field,
success: function (res) {
if (res.code === 0) {
layer.msg(res.msg, {icon: 1, time: 2000}, function () {
window.location.href = '/admin/index';
});
} else {
layer.msg(res.msg, {icon: 2, time: 2000});
}
},
error: function () {
layer.msg('请求失败', {icon: 2, time: 2000});
}
});
return false;
});
</script>
```
这段代码使用LayUI的form.on方法监听表单提交事件,使用Ajax发送登录请求,并根据后端返回的结果进行相应的处理。
如果code为0,说明登录成功,弹出提示框并跳转到管理员首页。
如果code为1,说明登录失败,弹出提示框显示错误信息。
如果请求失败,弹出提示框显示请求失败信息。