用idea实现Web创建页面实现添加、显示、修改等页面的具体操作
时间: 2024-01-27 15:03:45 浏览: 317
对于idea的详细操作
好的,我会尽力帮助你解答这个问题。首先,你需要明确你所使用的技术栈,比如说你是用 Java 开发 Web 应用,那么你需要使用 Java Web 开发框架,比如 Spring 或者 Struts2 等来实现页面的创建、添加、显示和修改等功能。而使用的 IDE 可以是 IntelliJ IDEA 或者 Eclipse 等。
下面是一个简单的示例,演示如何使用 IntelliJ IDEA 和 Spring MVC 创建一个简单的增删改查页面:
1. 创建一个 Maven 项目,并添加 Spring MVC 和 JDBC 相关的依赖。你可以在 pom.xml 文件中添加以下代码:
```
<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.2.0.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>5.2.0.RELEASE</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.16</version>
</dependency>
</dependencies>
```
2. 创建一个简单的实体类,比如 User:
```
public class User {
private int id;
private String name;
private int age;
// 省略 getter 和 setter
}
```
3. 创建一个 DAO 接口和实现类,用来操作数据库:
```
public interface UserDao {
void save(User user);
void delete(int id);
void update(User user);
User findById(int id);
List<User> findAll();
}
@Repository
public class UserDaoImpl implements UserDao {
@Autowired
private JdbcTemplate jdbcTemplate;
@Override
public void save(User user) {
String sql = "INSERT INTO user (name, age) VALUES (?, ?)";
jdbcTemplate.update(sql, user.getName(), user.getAge());
}
@Override
public void delete(int id) {
String sql = "DELETE FROM user WHERE id = ?";
jdbcTemplate.update(sql, id);
}
@Override
public void update(User user) {
String sql = "UPDATE user SET name = ?, age = ? WHERE id = ?";
jdbcTemplate.update(sql, user.getName(), user.getAge(), user.getId());
}
@Override
public User findById(int id) {
String sql = "SELECT * FROM user WHERE id = ?";
RowMapper<User> rowMapper = new BeanPropertyRowMapper<>(User.class);
return jdbcTemplate.queryForObject(sql, rowMapper, id);
}
@Override
public List<User> findAll() {
String sql = "SELECT * FROM user";
RowMapper<User> rowMapper = new BeanPropertyRowMapper<>(User.class);
return jdbcTemplate.query(sql, rowMapper);
}
}
```
4. 创建一个 Controller 类,用来处理页面请求:
```
@Controller
public class UserController {
@Autowired
private UserDao userDao;
@GetMapping("/")
public String index(Model model) {
List<User> userList = userDao.findAll();
model.addAttribute("userList", userList);
return "index";
}
@GetMapping("/add")
public String add() {
return "add";
}
@PostMapping("/add")
public String save(User user) {
userDao.save(user);
return "redirect:/";
}
@GetMapping("/edit/{id}")
public String edit(@PathVariable int id, Model model) {
User user = userDao.findById(id);
model.addAttribute("user", user);
return "edit";
}
@PostMapping("/edit")
public String update(User user) {
userDao.update(user);
return "redirect:/";
}
@GetMapping("/delete/{id}")
public String delete(@PathVariable int id) {
userDao.delete(id);
return "redirect:/";
}
}
```
5. 创建页面模板,比如使用 Thymeleaf 模板引擎,创建以下页面:
index.html:
```
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>User List</title>
</head>
<body>
<h1>User List</h1>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th></th>
<th></th>
</tr>
<tr th:each="user : ${userList}">
<td th:text="${user.id}"></td>
<td th:text="${user.name}"></td>
<td th:text="${user.age}"></td>
<td><a th:href="@{/edit/{id}(id=${user.id})}">Edit</a></td>
<td><a th:href="@{/delete/{id}(id=${user.id})}">Delete</a></td>
</tr>
</table>
<a th:href="@{/add}">Add User</a>
</body>
</html>
```
add.html:
```
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Add User</title>
</head>
<body>
<h1>Add User</h1>
<form method="post" th:action="@{/add}">
<label>Name:</label>
<input type="text" name="name"><br>
<label>Age:</label>
<input type="text" name="age"><br>
<input type="submit" value="Save">
</form>
</body>
</html>
```
edit.html:
```
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Edit User</title>
</head>
<body>
<h1>Edit User</h1>
<form method="post" th:action="@{/edit}">
<input type="hidden" name="id" th:value="${user.id}">
<label>Name:</label>
<input type="text" name="name" th:value="${user.name}"><br>
<label>Age:</label>
<input type="text" name="age" th:value="${user.age}"><br>
<input type="submit" value="Save">
</form>
</body>
</html>
```
6. 配置 Spring MVC,创建一个 WebConfig 类:
```
@Configuration
@EnableWebMvc
@ComponentScan(basePackages = "com.example.demo")
public class WebConfig implements WebMvcConfigurer {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/").setViewName("index");
}
@Bean
public ViewResolver viewResolver() {
ThymeleafViewResolver resolver = new ThymeleafViewResolver();
resolver.setTemplateEngine(templateEngine());
return resolver;
}
@Bean
public TemplateEngine templateEngine() {
SpringTemplateEngine engine = new SpringTemplateEngine();
engine.setTemplateResolver(templateResolver());
return engine;
}
@Bean
public ITemplateResolver templateResolver() {
SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
resolver.setPrefix("classpath:/templates/");
resolver.setSuffix(".html");
resolver.setTemplateMode(TemplateMode.HTML);
resolver.setCharacterEncoding("UTF-8");
return resolver;
}
}
```
7. 运行程序,访问 http://localhost:8080/ 即可看到用户列表,点击 Add User 可以添加用户,点击 Edit 可以编辑用户信息,点击 Delete 可以删除用户。
以上就是一个简单的使用 IntelliJ IDEA 和 Spring MVC 实现增删改查页面的示例,希望能对你有所帮助。
阅读全文