编写index.jsp页面,显示登录页面,包含输入用户名和密码的表单,提交到dologin.jsp页面处理。
时间: 2023-04-27 22:01:49 浏览: 148
好的,以下是编写index.jsp页面的步骤:
1. 创建一个名为index.jsp的文件,并在文件中添加以下代码:
```
<!DOCTYPE html>
<html>
<head>
<title>登录页面</title>
</head>
<body>
<form action="dologin.jsp" method="post">
<label>用户名:</label>
<input type="text" name="username"><br>
<label>密码:</label>
<input type="password" name="password"><br>
<input type="submit" value="登录">
</form>
</body>
</html>
```
2. 在表单中添加用户名和密码的输入框,并设置表单的提交地址为dologin.jsp。
3. 在dologin.jsp页面中处理表单提交的数据,验证用户名和密码是否正确,如果正确则跳转到登录成功页面,否则返回到登录页面重新输入。
希望以上步骤能够帮助您编写出符合要求的index.jsp页面。
相关问题
1、设计一个简单的用户登陆程序:login.html用于输入用户名和口令等,然后提交给dologin.jsp页面,在该页面中通过Java Bean(UserBean.java)保存数据并输出。
下面是一个简单的用户登录程序的实现,包括一个 HTML 页面和一个 JSP 页面:
login.html:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
<form action="dologin.jsp" method="post">
<label for="username">Username:</label>
<input type="text" name="username" id="username"><br><br>
<label for="password">Password:</label>
<input type="password" name="password" id="password"><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>
```
dologin.jsp:
```jsp
<%@ page import="com.example.UserBean" %>
<%
// 获取表单数据
String username = request.getParameter("username");
String password = request.getParameter("password");
// 创建 UserBean 实例并设置属性
UserBean user = new UserBean();
user.setUsername(username);
user.setPassword(password);
// 输出用户信息
out.println("<h1>Welcome, " + user.getUsername() + "!</h1>");
%>
```
UserBean.java:
```java
package com.example;
public class UserBean {
private String username;
private String password;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
```
在这个程序中,用户在 login.html 页面中输入用户名和密码,然后提交表单到 dologin.jsp 页面。在 dologin.jsp 页面中,通过 request.getParameter() 方法获取表单数据,并创建一个 UserBean 实例,并设置其属性。最后,输出欢迎信息,其中包括从 UserBean 实例中获取的用户名。
使用express框架实现登录和注册功能 get : login -> 渲染登录表单页面 get : register -> 渲染注册表单页面 get : dologin -> 接收表单传递过来的用户名和密码 判断是否登录成功 get : doregister -> 接收表单传递过来的用户名和密码 判断persons.json中有无此用户,如果有返回 已注册。如果没有则注册成功,
首先,需要安装express框架和body-parser中间件。在命令行中输入以下命令安装:
```
npm install express body-parser --save
```
然后,在项目根目录下创建一个`index.js`文件,并在文件中引入所需的模块:
```javascript
const express = require('express');
const bodyParser = require('body-parser');
const fs = require('fs');
const app = express();
// 使用body-parser中间件解析请求体
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// 渲染登录表单页面
app.get('/login', (req, res) => {
res.send(`
<form action="/dologin" method="post">
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<button type="submit">登录</button>
</form>
`);
});
// 渲染注册表单页面
app.get('/register', (req, res) => {
res.send(`
<form action="/doregister" method="post">
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<button type="submit">注册</button>
</form>
`);
});
// 登录
app.post('/dologin', (req, res) => {
const { username, password } = req.body;
// 读取persons.json文件
const persons = JSON.parse(fs.readFileSync('persons.json'));
// 判断用户名和密码是否正确
const person = persons.find(p => p.username === username && p.password === password);
if (person) {
res.send('登录成功');
} else {
res.send('用户名或密码错误');
}
});
// 注册
app.post('/doregister', (req, res) => {
const { username, password } = req.body;
// 读取persons.json文件
const persons = JSON.parse(fs.readFileSync('persons.json'));
// 判断是否已注册
const person = persons.find(p => p.username === username);
if (person) {
res.send('已注册');
} else {
// 将用户添加到persons.json文件中
persons.push({ username, password });
fs.writeFileSync('persons.json', JSON.stringify(persons));
res.send('注册成功');
}
});
app.listen(3000, () => {
console.log('App is running on port 3000');
});
```
在以上代码中,我们创建了一个express实例,并使用body-parser中间件解析请求体。然后,我们定义了四个路由:
1. `/login`:渲染登录表单页面;
2. `/register`:渲染注册表单页面;
3. `/dologin`:接收表单传递过来的用户名和密码,判断是否登录成功;
4. `/doregister`:接收表单传递过来的用户名和密码,判断persons.json中有无此用户,如果有返回已注册。如果没有则注册成功。
其中,`persons.json`文件存储了已注册的用户信息,初始内容如下:
```json
[
{
"username": "admin",
"password": "123456"
}
]
```
最后,我们监听3000端口,并在控制台输出运行信息。在命令行中输入以下命令启动应用:
```
node index.js
```
然后,在浏览器中访问`http://localhost:3000/login`或`http://localhost:3000/register`即可看到相应的页面。