pinked

导航

springboot-web开发

springboot-web开发

  1. 首页配置

    1. 首页

      扩展springmvc

      @Configuration
public class MvcConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("index");
       	registry.addViewController("/index.html").setViewName("index");
    }
}

    2. 依赖

      <dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring5</artifactId>
</dependency>
<dependency>
    <groupId>org.thymeleaf.extras</groupId>
    <artifactId>thymeleaf-extras-java8time</artifactId>
</dependency>

    3. 约束

      xmlns:th="http://www.thymeleaf.org"

    4. 所有页面的静态资源都交于thymeleaf接管

      th:href="@{/css/bootstrap.min.css}"

  2. 页面国际化

    1. 配置i18n文件

      login.tip=请登录
login.username=用户名
login.password=密码
login.remember=记住密码
login.button=登录

      spring.messages.basename=i18n.login

    2. 语言切换

      th:href="@{/index.html(lang='zh_CN')}

    3. 自定义一个组件MyLocaleResolver.java

      public class MyLocaleResolver implements LocaleResolver {
    //解析请求
    @Override
    public Locale resolveLocale(HttpServletRequest request) {
        //获得lang参数
        String language = request.getParameter("lang");
        //设置默认
        Locale locale = Locale.getDefault();
        //language非空判断
        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) {
    }
}

    4. 在Mvcconfig.java中配置组件

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

    5. 多语言 #{}

      th:text="#{login.tip}
th:placeholder="#{login.username}
[[#{login.button}]]

  3. 登录+拦截

    1. controller

      @RequestMapping("/user/login")
public String login(@RequestParam("username") String username, @RequestParam("password") String password, Model model, HttpSession session) {
    if (!StringUtils.isEmpty(username) && "123456".equals(password)) {
        session.setAttribute("loginUser", username);
        return "redirect:/main.html";
    } else {
        model.addAttribute("msg", "用户名或密码错误");
        return "index";
    }
}

    2. 页面跳转和提示

      th:action="@{/user/login}"

      <span style="color: red">[[${msg}]]</span>

    3. 未登录用户拦截器

      public class LoginHandlerInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        Object loginUser = request.getSession().getAttribute("loginUser");
        if (loginUser == null) {
            request.setAttribute("msg", "请先登录");
            request.getRequestDispatcher("/index.html").forward(request, response);
            return false;
        } else {
            return true;
        }
    }
}

    4. 配置拦截器到MvcConfig.java中

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

  4. 提取公共页面

    1. 提取公共页面

      th:fragment="topbar"

    2. 使用公共页面

      <div th:replace="~{commons/commons::topbar}"></div>

    3. 传递参数

      <div th:replace="~{commons/commons::sidebar(active='main.html')}"></div>

    4. 高亮判断

      th:class="${active=='main.html'?'nav-link active':'nav-link'}"

  5. 查询所有员工

    1. EmployeeController.java

      @Autowired
EmployeeDao employeeDao;

      @RequestMapping("/emps")
public String list(Model model){
    Collection<Employee> employeeDaoAll = employeeDao.getAll();
    model.addAttribute("emps", employeeDaoAll);
    return "employee/list";
}

    2. list.html列表展示

      <table class="table table-striped table-sm">
    <thead>
    <tr>
        <th>id</th>
        <th>lastName</th>
        <th>email</th>
        <th>gender</th>
        <th>department</th>
        <th>birthday</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="emp:${emps}">
        <td th:text="${emp.getId()}"></td>
        <td th:text="${emp.getLastName()}"></td>
        <td th:text="${emp.getEmail()}"></td>
        <td th:text="${emp.getGender()==1?'男':'女'}"></td>
        <td th:text="${emp.department.getDepartmentName()}"></td>
        <td th:text="${#dates.format(emp.getBirthday(),'yy-MM-dd HH:mm:ss')}"></td>
        <td>
            <button class="btn btn-sm btn-primary">编辑</button>
            <button class="btn btn-sm btn-danger">删除</button>
        </td>
    </tr>
    </tbody>
</table>

  6. 添加员工

    1. list.html添加按钮

      <a class="btn btn-sm btn-success" th:href="@{/emp}">添加</a>

    2. EmployeeController.java页面跳转get方法

      //跳转到添加页面
@GetMapping("/emp")
public String addPage(Model model) {
    Collection<Department> department = departmentDao.getDepartment();
    model.addAttribute("deps", department);
    return "employee/add";
}

    3. 新建add.html套用公共部分, 写入添加表单

      <form th:action="@{/emp}" th:method="post">
    <div class="form-group">
        <label>LastName</label>
        <input type="text" class="form-control" name="lastName" placeholder="请输入姓名">
    </div>
    <div class="form-group">
        <label>Email</label>
        <input type="email" class="form-control" name="email" placeholder="name@example.com">
    </div>
    <div class="form-group">
        <label>Gender</label><br/>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="gender" value="1">
            <label class="form-check-label">男</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="gender" value="0">
            <label class="form-check-label">女</label>
        </div>
    </div>
    <div class="form-group">
        <label>department</label>
        <select class="form-control" name="department.id">
            <!--部门列表-->
            <option th:each="dep:${deps}" th:text="${dep.getDepartmentName()}"
                    th:value="${dep.getId()}"></option>
        </select>
    </div>
    <div class="form-group">
        <label>Birth</label>
        <input type="text" class="form-control" name="birthday" placeholder="yyyy/MM/dd">
    </div>
    <button type="submit" class="btn btn-primary">添加</button>
</form>

    4. EmployeeController.java接收并写入数据

      @Autowired
DepartmentDao departmentDao;

      //添加确认后回到员工列表
@PostMapping("/emp")
public String addEmp(Employee employee) {
    employeeDao.save(employee);
    return "redirect:/emps";
}

  7. 修改员工信息

    1. 按钮

      <a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.getId()}">编辑</a>

    2. 跳转到修改页面

      @GetMapping("/emp/{id}")
public String updataPage(@PathVariable("id") Integer id, Model model) {
    Employee employee = employeeDao.getEmployeeById(id);
    model.addAttribute("emp", employee);
    Collection<Department> department = departmentDao.getDepartment();
    model.addAttribute("deps", department);
    return "employee/update";
}

    3. 套用add.html,加入id标识并为表单中填上原值

      th:action="@{/emp/update}"

      <input th:value="${emp.getId()}" type="hidden" name="id">

      th:value="${emp.getLastName()}"
th:value="${emp.getEmail()}"
th:checked="${emp.getGender()==1}"
th:selected="${dep.getId()==emp.getDepartment().getId()}"
th:value="${#dates.format(emp.getBirthday(),'yyyy/MM/dd')}"

    4. EmployeeController.java完成更新

      @PostMapping("/emp/update")
public String updataEmp(Employee employee) {
    System.out.println("debug================================>" + employee);
    employeeDao.save(employee);
    return "redirect:/emps";
}

  8. 删除员工

    1. 按钮

      <a class="btn btn-sm btn-danger" th:href="@{/delemp/}+${emp.getId()}">删除</a>

    2. controller

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

  9. 注销和错误页面

    1. 公共页面commons.html

      <a class="nav-link" th:href="@{/user/logout}">Sign out</a>

    2. controller

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

    3. 在templates下建立error目录放入对用的错误页面即可

posted on 2020-02-24 17:07  pinked  阅读(114)  评论(0)  编辑  收藏  举报