[Java知识库] springboot导入bootstrap以及用户增删改查

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> Java知识库 -> springboot导入bootstrap以及用户增删改查 -> 正文阅读

[Java知识库]springboot导入bootstrap以及用户增删改查

修改语法

将html中添加 xmls:th=“http://www.thymeleaf.org”>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

超链接，href变为th:href,url使用@开头，其中/代表项目的根目录，一般从static或thymeleaf目录开始写目录

<link th:href="@{/qinjiang/css/qinstyle.css}" rel="stylesheet">

去除thymeleaf的缓存，在application.properties

spring.thymeleaf.cache=false

图片，加上th：@{}

<img th:src="@{/qinjiang/img/bootstrap-soid.svg}" alt="">

建虚拟目录

server.servlet.context-path=/sheepbotany

相当于在所有目录前添加sheepbotany目录，此时访问时需要添加

原来：

后：

2：实现中英文切换

1:确保file-Encoding为UTF-8

在resources目录下新建i8n目录，然后新建login.properties与login_zh_CN.properties此时会出现资源包‘login’文件夹，将此属性文件添加到资源包。

点击加号

打开login.properties,点击资源包

进行绑定

spring.message.basename=i18n.login

并把页面相应的sign in改为th:text="#{login.tip}"

<h1 class="header" th:text="#{login.tip}">登录</h1>

修改按钮

[[#{login.remember}]]

中英文切换链接

<a th:href="@{/index.html(l='zh_CN')}">中文</a>
<a th:href="@{/index.html(l='en_US')}">英文</a>

接口：

@Configuration
public class MyMvcConfig implements WebMvcConfigurer {

    @Override
    public void addViewControllers(ViewControllerRegistry registry){
        registry.addViewController("/").setViewName("index");
        registry.addViewController("/index.html").setViewName("index");

    }

    @Bean
    public LocaleResolver localeResolver(){
        return new MyLocalResolver();
    }

}

public class MyLocalResolver implements LocaleResolver {
    @Override
    public Locale resolveLocale(HttpServletRequest request) {
        //获得请求中的语言参数
        String language=request.getParameter("l");
        Locale locale=Locale.getDefault();//语言参数不存在时则使用默认
        //如果请求的链接携带了国际化参数
        if(!StringUtils.isEmpty(language)){
            //zh_CN
            String[] split=language.split("_");
            //国家，地区
            locale=new Locale(split[0],split[1]);
        }

        return locale;
    }

    @Override
    public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) {

    }
}

3：实现登录功能

1:action中存放映射地址，login表示映射主体，返回字符串OK

@ResponseBody的作用其实是将java对象转为json格式的数据。

@Controller
public class LoginController {
    @RequestMapping("/user/login")
    @ResponseBody
    public String login(){
        return "OK";
    }
}

<form th:action="@{/user/login}">

随便输入账号和密码

2：添加参数

<input type="password" name="password">
<input type="text" placeholder="Username" name="username">

<p style="color: palevioletred" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>

当账号不为空而且密码为123456

@Controller
public class LoginController {
    @RequestMapping("/user/login")
    public String login(@RequestParam("username") String username,@RequestParam("password") String password,
    Model model){

        if(!StringUtils.isEmpty(username)&&"123456".equals(password)){
            return "index";
        }else{
            model.addAttribute("msg","你登录失败了噢");
            return "login";
        }

    }
}

3：修改html映射地址

在MyMvcConfig类中写入：

registry.addViewController("main.html").setViewName("index");

4：拦截器

接收前端的账号和密码

判断账号和密码时设置请求loginUser与参数

在拦截器中进行接收请求与参数

判断请求返回true或者false

在config类中重写拦截器方法进行接收，是true时允许通过，同时添加不是true也可以通过的部分。

（如果没有检测到session则弹出）

public class LoginHandlerInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        //登录成功后，应该有用户的session
        Object loginUser=request.getSession().getAttribute("loginUser");
        if(loginUser==null){
            //没有登录
            request.setAttribute("msg","没有权限，请先登录");
            request.getRequestDispatcher("/login.html").forward(request,response);
            return false;
        }else {
            return true;
        }

    }


}

MyMvcConfig类加入

public void addInterceptors(InterceptorRegistry registry){
    registry.addInterceptor((new LoginHandlerInterceptor())).
            addPathPatterns("/**").excludePathPatterns(
                    "/login.html","/","/user/login","/css/*","/js/**","/img/**");
}

5：实现登录后显示用户姓名

<h3>[[${session.loginUser}]]</h3>

6：登录后对用户进行遍历

用户表见博客：

springboot使用HashMap的数据库_lllwky的博客-CSDN博客

跳转的链接：

Controller类

package com.example.demo2.Controller;

import com.example.demo2.Dao.EmployeeDao;
import com.example.demo2.pojo.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.Collection;

@Controller
public class EmployeeController {
    @Autowired
    EmployeeDao employeeDao;
    @RequestMapping("/emp/list")
    public String list(Model model){
        Collection<Employee> employees =employeeDao.getAll();
        model.addAttribute("emps",employees);
        return "emp/list";
    }
}

访问二级目录下的html

因为return的是emp/list，所以访问的请求显示的也是：

<table>
    <tr>
        <th>id</th>
        <th>lastName</th>
        <th>email</th>
        <th>gender</th>
        <th>department</th>
        <th>birth</th>
    </tr>
    <tr th:each="emp:${emps}">
        <td th:text="${emp.getId()}"></td>
        <td>[[${emp.getLastName()}]]</td>
        <td th:text="${emp.getEmail()}"></td>
        <td th:text="${emp.getSex()}"></td>
        <td th:text="${emp.getDepartment().getDepartmentName()}"></td>
        <td th:text="${emp.getBirth()}"></td>
    </tr>
</table>

时间和性别进行修改：

<td th:text="${emp.getSex()==0?'女':'男'}"></td>
 <td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm:ss')}"></td>

7：实现增加用户

跳转到add页面

1：文件位置

此处/emp意思为当点击链接时发送emp请求

get到请求并传参到前端：

@GetMapping("/emp")//get请求
public String toAddpage(Model model){
    //查出所有部门信息
    Collection<Department> departments=departmentDao.getDepartments();
    model.addAttribute("departments",departments);
    return "emp/add";
}

add.html页面

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form th:action="@{/emp}" method="post">
<table>
  <tr>
    <td><lable>LastName:</lable></td>
    <td><input type="text" name="lastName"></td>
  </tr>
  <tr>
    <td><lable>Email:</lable></td>
    <td><input type="text" name="email"></td>
  </tr>
  <tr>
    <td><lable>Gender:</lable></td>
    <td><input name="sex" type="radio" value="0">女</td>
    <td><input name="sex" type="radio" value="1">男</td>
  </tr>
  <tr>
    <td><lable>department</lable></td>
    <td>
    <select name="department.id" id="">
      <option th:each="dept:${departments}" th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option>
    </select>
    </td>
  <tr>
  <td><lable>Birth</lable></td>
  <td><input type="text" name="birth"></td>
  </tr>
<tr>
  <td><button type="submit">提交</button></td>
</tr>
</table>
</form>
</body>
</html>

添加用户时，发出post请求，请求名依然是emp，此时在controller中进入post方法，并将employee返回给前端。

@PostMapping("/emp")
public String addEmp(Employee employee){
    System.out.println(employee);
    employeeDao.save(employee);
    //添加的操作
    return "redirect:/emp/list";
}

在这里插入图片描述

8：实现修改用户

前端代码：

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form th:action="@{/updateEmp}" method="post">
  <input type="hidden" name="id" th:value="${emp.getId()}">
<table>
  <tr>
    <td><label>LastName:</label></td>
    <td><input th:value="${emp.getLastName()}" type="text" name="lastName"></td>
  </tr>
  <tr>
    <td><label>Email:</label></td>
    <td><input th:value="${emp.getEmail()}" type="text" name="email"></td>
  </tr>
  <tr>
    <td><label>Gender:</label></td>
    <td><input th:checked="${emp.getSex()==0}" name="sex" type="radio" value="0">女</td>
    <td><input th:checked="${emp.getSex()==1}" name="sex" type="radio" value="1">男</td>
  </tr>
  <tr>
    <td><label>department</label></td>
    <td>
    <select name="department.id" id="">
      <option th:selected="${dept.getId()==emp.getDepartment().getId()}" th:each="dept:${departments}"
              th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option>
    </select>
    </td>
  <tr>
  <td><lable>Birth</lable></td>
  <td><input th:value="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm')}"  type="text" name="birth"></td>
  </tr>
<tr>
  <td><button type="submit">修改</button></td>
</tr>
</table>
</form>
</body>
</html>

部门的选择：emp的id与部门的id相等

后端部分

@GetMapping("/emp/{id}")
public String toUpdate(@PathVariable("id")Integer id,Model model){
    Employee employee=employeeDao.getElementById(id);
    model.addAttribute("emp",employee);
    Collection<Department> departments=departmentDao.getDepartments();
    model.addAttribute("departments",departments);

    return "emp/update";
}

@PostMapping ("/updateEmp")
public String updateEmp(Employee employee){
    employeeDao.save(employee);
    return "redirect:/emp/list";

}

效果：

9：实现删除用户

使用的方法：

employeeDao.delete(id);

前端页面的list.html加上：

<a th:href="@{/delEmp/{id}(id=${emp.getId()})}">删除</a>

@GetMapping("/delEmp/{id}")
public String deleteEmp(@PathVariable("id")Integer id){
    employeeDao.delete(id);
    return "redirect:/emp/list";
}

10：写自己喜欢的404页面

只需要在templetes页面中新建error文件夹，然后加上404.html

此时输入不存在的页面会弹出：

11：注销登录

html中写入

<a th:href="@{/user/logout}"><i class="bullhorn icon"></i> 注销登录</a>

在Controller中写入：

@RequestMapping("/user/logout")
public String logout(HttpSession session){
    session.invalidate();
    return "redirect:/login.html";

}

ger id){
employeeDao.delete(id);
return “redirect:/emp/list”;
}


### 10：写自己喜欢的404页面

只需要在templetes页面中新建error文件夹，然后加上404.html[外链图片转存中...(img-gq6kCgkK-1644071037101)]



此时输入不存在的页面会弹出：

[外链图片转存中...(img-VhdBjYsb-1644071037102)]

### 11：注销登录

html中写入

```html
<a th:href="@{/user/logout}"><i class="bullhorn icon"></i> 注销登录</a>

在Controller中写入：

@RequestMapping("/user/logout")
public String logout(HttpSession session){
    session.invalidate();
    return "redirect:/login.html";

}

Java知识库最新文章

计算距离春节还有多长时间

系统开发系列之WebService（spring框架+ma

springBoot+Cache(自定义有效时间配置)

SpringBoot整合mybatis实现增删改查、分页查

spring教程

SpringBoot+Vue实现美食交流网站的设计与实

加:2022-02-06 13:41:29 更:2022-02-06 13:43:53

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/24 9:59:09-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码