碼上歡樂
相關內容    簡體    繁體

使用SpringBoot實現一個基本的小網站

本文轉載自   查看原文   2020-03-05 20:57   1168    SpringBoot

准備工作

1、新建一個SpringBoot項目，構建web模塊

2、導入pojo和dao層的類

pojo層

package com.star.pojo;

public class Department {

    private Integer id;
    private String departmentName;

    public Department() {
    }
    
    public Department(int i, String string) {
        this.id = i;
        this.departmentName = string;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getDepartmentName() {
        return departmentName;
    }

    public void setDepartmentName(String departmentName) {
        this.departmentName = departmentName;
    }

    @Override
    public String toString() {
        return "Department [id=" + id + ", departmentName=" + departmentName + "]";
    }
    
}

package com.star.pojo;

import java.util.Date;

public class Employee {

    private Integer id;
    private String lastName;

    private String email;
    //1 male, 0 female
    private Integer gender;
    private Department department;
    private Date birth;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public Integer getGender() {
        return gender;
    }

    public void setGender(Integer gender) {
        this.gender = gender;
    }

    public Department getDepartment() {
        return department;
    }

    public void setDepartment(Department department) {
        this.department = department;
    }

    public Date getBirth() {
        return birth;
    }

    public void setBirth(Date birth) {
        this.birth = birth;
    }
    public Employee(Integer id, String lastName, String email, Integer gender,
                    Department department) {
        super();
        this.id = id;
        this.lastName = lastName;
        this.email = email;
        this.gender = gender;
        this.department = department;
        this.birth = new Date();
    }

    public Employee() {
    }

    @Override
    public String toString() {
        return "Employee{" +
                "id=" + id +
                ", lastName='" + lastName + '\'' +
                ", email='" + email + '\'' +
                ", gender=" + gender +
                ", department=" + department +
                ", birth=" + birth +
                '}';
    }
}

dao層

package com.star.dao;

import java.util.Collection;
import java.util.HashMap;
import java.util.Map;

import com.star.pojo.Department;
import org.springframework.stereotype.Repository;

//模擬數據庫
@Repository
public class DepartmentDao {

    private static Map<Integer, Department> departments = null;
    
    static{
        departments = new HashMap<Integer, Department>();
        
        departments.put(101, new Department(101, "D-AA"));
        departments.put(102, new Department(102, "D-BB"));
        departments.put(103, new Department(103, "D-CC"));
        departments.put(104, new Department(104, "D-DD"));
        departments.put(105, new Department(105, "D-EE"));
    }

    //獲得全部部門信息
    public Collection<Department> getDepartments(){
        return departments.values();
    }

    //通過id獲取部門信息
    public Department getDepartment(Integer id){
        return departments.get(id);
    }
    
}

package com.star.dao;

import java.util.Collection;
import java.util.HashMap;
import java.util.Map;

import com.star.pojo.Department;
import com.star.pojo.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

//模擬數據庫
@Repository
public class EmployeeDao {

    private static Map<Integer, Employee> employees = null;
    
    @Autowired
    private DepartmentDao departmentDao;
    
    static{
        employees = new HashMap<Integer, Employee>();

        employees.put(1001, new Employee(1001, "E-AA", "aa@163.com", 1, new Department(101, "D-AA")));
        employees.put(1002, new Employee(1002, "E-BB", "bb@163.com", 1, new Department(102, "D-BB")));
        employees.put(1003, new Employee(1003, "E-CC", "cc@163.com", 0, new Department(103, "D-CC")));
        employees.put(1004, new Employee(1004, "E-DD", "dd@163.com", 0, new Department(104, "D-DD")));
        employees.put(1005, new Employee(1005, "E-EE", "ee@163.com", 1, new Department(105, "D-EE")));
    }
    
    private static Integer initId = 1006;

    //新增員工實現id自增
    public void save(Employee employee){
        if(employee.getId() == null){
            employee.setId(initId++);
        }
        
        employee.setDepartment(departmentDao.getDepartment(employee.getDepartment().getId()));
        employees.put(employee.getId(), employee);
    }

    //獲得全部的員工
    public Collection<Employee> getAll(){
        return employees.values();
    }

    //通過id獲取員工
    public Employee get(Integer id){
        return employees.get(id);
    }

    //通過id刪除員工
    public void delete(Integer id){
        employees.remove(id);
    }
}

3、導入靜態資源（頁面放在Temleate，資源放在static目錄下）

鏈接：https://pan.baidu.com/s/1FH8gy0WlMQXED6inbquPzQ

提取碼：77ck

4、所有的頁面增加頭文件 xmlns:th="http://www.thymeleaf.org"

5、所有的資源鏈接修改格式為thymeleaf語法：th:xxx="@{}"

6、可以增加一個配置類，配置我們的SpringMVC

//代表這是一個配置類
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {

    //通過配置類來設置試圖跳轉
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("index");//定制首頁為index.html頁面
        registry.addViewController("/index.html").setViewName("index");
        registry.addViewController("/main.html").setViewName("dashboard");
    }

MVC配置原理：https://www.cnblogs.com/lmx-181028/p/12468903.html

7、我們可以設置項目的路徑名，application.properties

# 配置自己的服務器路徑 localhost:8080/star
service.servlet.context-path=/star

實現功能

1、國際化

可以看到再首頁的下面有中英文轉換

這就是國際化，我們來實現這個功能！

首先修改編碼

在Rources下創建目錄 i18n(國際化 internationalization 單詞的縮寫)

創建login.properties(默認語言)文件，再創建login_zh_CN.properties(中文)文件。可以看到會將兩個文件合並在一個目錄下！

添加login_en_US.properties(英文)文件

編寫login.properties，使用可視化編寫！

然后修改index.html代碼，使用thymeleaf綁定

		<form class="form-signin" th:action="@{user/login}">
			<img class="mb-4" th:src="@{/asserts/img/bootstrap-solid.svg}" alt="" width="72" height="72">

			<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">Please Sign In</h1>

			<label class="sr-only">Username</label>
			<input type="text" class="form-control" name="username" th:placeholder="#{login.username}" required="" autofocus="">
			<label class="sr-only">Password</label>
			<input type="password" class="form-control" name="password" th:placeholder="#{login.password}" required="">

			<div class="checkbox mb-3">
				<label>
          			<input type="checkbox" value="remember-me" th:text="#{login.properties}">
        		</label>
			</div>
			<button class="btn btn-lg btn-primary btn-block" type="submit">[[#{login.btn}]]</button>
			<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
			<a class="btn btn-sm"}">中文</a>
			<a class="btn btn-sm"}">English</a>
		</form>

啟動項目測試：

接下來我們使用下面的鏈接來進行中英文切換！

首先我們進入國際化的源碼；

進入WebMvcAutoConfiguration.java類，找到LocaleResolver方法；

分析，代碼，可以看出，默認使用AcceptHeaderLocaleResolver類，查看源碼：實現LocaleResolver接口！

重寫方法！

所以我們可以寫一個自己的國際化解析器，實現LocaleResolver接口！

參照AcceptHeaderLocaleResolver類重寫方法的格式！

我們先在前端傳入語言的參數，thymeleaf傳參用()

<a class="btn btn-sm" th:href="@{/index.html(l='zh_CN')}">中文</a>
<a class="btn btn-sm" th:href="@{/index.html(l='en_US')}">English</a>

這個鏈接的地址還是當前的頁面，不過要傳國際化參數。

編寫自己的國際化解析器！

package com.star.config;

import org.springframework.web.servlet.LocaleResolver;
import org.thymeleaf.util.StringUtils;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Locale;

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[] s = language.split("_");
            //國家_地區
            locale = new Locale(s[0], s[1]);
        }

        return locale;
    }

    @Override
    public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) {
            //無返回值，不用寫代碼
    }
}

然后在配置類中注冊bean，自定義的國際化組件就生效了

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

重啟項目測試：

功能實現成功！

2、增加登錄和攔截的功能！

1、前端提交登錄請求 （看表單）

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

2、后端處理登錄請求 （登錄成功，跳轉到主頁，顯示用戶的名字，如果沒有成功告訴用戶：用戶名或密碼錯誤）

@Controller
public class userController {

    //登錄實現
    @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)){
            model.addAttribute("msg","");
            session.setAttribute("loginUser",username);
            //登陸成功
            //登錄重定向，避免一直提交
            return "redirect:/main.html";
        }else {
            model.addAttribute("msg","登錄失敗，請重新登錄");
            return "index";
        }
    }
}

3、發現問題：沒有登錄也能進入主頁

4、增加一個攔截器，判斷用戶是否登錄

package com.star.interceptor;

import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class LoginInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        if(request.getSession().getAttribute("loginUser")==null){
            request.setAttribute("msg","沒有權限,請先登錄!");
            request.getRequestDispatcher("/index.html").forward(request,response);//轉發到登錄頁面
            return false;
        }else{
            return true;
        }
    }
}

配置類中注冊攔截器

    //注冊攔截器
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        //選擇要過濾和排除的請求
        registry.addInterceptor(new LoginInterceptor())
                .addPathPatterns("/**")
                .excludePathPatterns("/","/index.html","/user/login")//排除登錄的請求
                .excludePathPatterns("/asserts/**");//排除靜態資源的請求
    }

將 登錄失敗，請重新登錄 的參數傳入前端頁面

<!--判斷是否有錯誤標簽-->
<p style="color: red" th:if="${not #strings.isEmpty(msg)}" th:text="${msg}"></p>

5、測試登錄和攔截是否成功；

我們如果未登錄，main.html請求就不能通過，並且轉發到登錄頁面！

3、展示員工列表

我們將所有員工的信息查詢並展示出來

編寫controller類

package com.star.controller;

import com.star.dao.EmployeeDao;
import com.star.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  //自動轉配，或者在配置類中注冊bean
    EmployeeDao employeeDao;

    @RequestMapping("/emps")
    public String list(Model model){
        Collection<Employee> employees = employeeDao.getAll();//通過該方法查詢所有的員工信息
        model.addAttribute("emps",employees);
        return "emp/list";//跳轉至在templates下的emp目錄下list.html頁面
    }
}

為了減少代碼量，我們提取公共頁面，在templates目錄下創建commons目錄，新建commons.html頁面；

由於list頁面和dashboard頁面的頂部欄和側邊欄是相同的。所以我們抽取出來，放在commens.html頁面中

在頭部導航欄的標簽中添加 th:fragment="topBar"(使用thymeleaf語法)

在側邊導航欄的標簽中添加 th:fragment="sideBar"

然后在兩個頁面的原位置添加如下代碼：

<!--頂部導航欄  commons目錄下的commons頁面的topBar-->
<div th:replace="~{commons/commons::topBar}"></div>
<!--側邊欄-->
<div th:replace="~{commons/commons::sideBar}"></div>

我們需要選定某個頁面，側邊攔中的該頁面要變亮；

接下來實現這個功能

看公共頁面中 首頁 的代碼中可以看到有active

我們可以使用thymeleaf語法來判斷；

請求首頁時傳參數active='main.html'

在dashboard.html頁面中修改代碼

<!--側邊欄-->
<div th:replace="~{commons/commons::sideBar(active='main.html')}"></div>

請求員工管理即list頁面時傳參數active='list.html'

在list.html頁面中修改代碼

<!--側邊欄-->
<div th:replace="~{commons/commons::sideBar(active='list.html')}"></div>

修改公共頁的代碼

<!--修改側邊欄的首頁代碼-->
th:class="${active=='main.html'?'nav-link active':'nav-link'}"
<!--修改側邊欄員工管理代碼-->
th:class="${active=='list.html'?'nav-link active':'nav-link'}"

測試：

接下來我們展示所有的員工信息

修改list.html頁面中thead標簽和tbody標簽中的代碼(使用thymeleaf語法)

<thead>
	<tr>
		<th>id</th>
		<th>lastName</th>
		<th>email</th>
		<th>gender</th>
		<th>department</th>
		<th>birth</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.getDepartment().getDepartmentName()}"></td>
		<td th:text="${#dates.format(emp.getBirth(),'yyyy-HH-dd HH:mm:ss')}"></td>
		<td>
			<a href="" class="btn btn-sm btn-success">編輯</a>
			<a href="" class="btn btn-sm btn-danger">刪除</a>
		</td>
	</tr>
</tbody>

測試：

OK!我們實現了展示所有員工信息的功能

4、實現增加員工的功能

在展示列表的上面添加一個增加員工的鏈接

<h2><a class="btn btn-lg btn-success" th:href="@{/toAdd}">添加員工</a></h2>

這里是get請求

我們編寫controller類

    @Autowired
    DepartmentDao departmentDao;

    @GetMapping("/toAdd")
    public String add(Model model){
        Collection<Department> departments = departmentDao.getDepartments();
        model.addAttribute("departments",departments);//頁面傳入departments
        return "emp/add";
    }

新建一個增加員工的頁面add.html

代碼框架和list一樣，修改main標簽的內容

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
    <!--增加一個表單  提交到/emp請求-->
    <form th:action="@{/emp}" method="post">
        <div class="form-group">
            <label>lastName</label>
            <input type="text" class="form-control" name="lastName"  placeholder="lastName">
        </div>
        <div class="form-group">
            <label>email</label>
            <input type="email" class="form-control" name="email" placeholder="email">
        </div>
        <div class="radio">
            <label>gender</label>
            <br>
            <label>
                <input type="radio" name="gender" value="1">男
                <input type="radio" name="gender" value="0">女
            </label>
        </div>
        <div class="form-group">
            <label>department</label>
            <select class="form-control" name="department.id">
                <option th:each="dept:${departments}" th:text="${dept.getDepartmentName()}" th:value=
            </select>
        </div>
        <div class="form-group">
            <label>birth</label>
            <input type="text" name="birth" class="form-control" placeholder="birth">
        </div>
        <br>
        <div class="form-group">
            <button type="submit" class="btn btn-sm btn-success">添加</button>
        </div>
    </form>
</main>

表單使用post請求到emp，編寫controller頁面

    @Autowired
    EmployeeDao  employeeDao;

    @PostMapping("/emp")
    public String addEmp(Employee employee){
        employeeDao.save(employee);//使用save方法增加員工
        return "redirect:/emps";//重定向到emps也就是list.hrml頁面
    }

測試功能：

注意：springBoot里面的時間默認格式為：yyyy/MM/dd 所以表單的時間的格式為2020/01/01；

OK！增加員工功能實現成功！

5、修改員工功能

編寫修改的鏈接以及請求

<a th:href="@{/toUpdate/}+${emp.getId()}" class="btn btn-sm btn-success">編輯</a>

編寫對應的controlelr類

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

編寫修改頁面update.html，也是一個表單，同樣提交到emp請求，這里注意要加一個隱藏域顯示id，這樣id就不會自增從而修改成功！

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
    <form th:action="@{/emp}" method="post">
        <!--隱藏域-->
        <input type="hidden" name="id" th:value="${emp.getId()}">

        <div class="form-group">
            <label>lastName</label>
            <input type="text" class="form-control" name="lastName" th:value="${emp.getLastName()}"  placeholder="lastName" >
        </div>
        <div class="form-group">
            <label>email</label>
            <input type="email" class="form-control" name="email" th:value="${emp.getEmail()}" placeholder="Email">
        </div>
        <div class="radio">
            <label>gender</label>
            <br>
            <label>
                <input th:checked="${emp.getGender()==1}" type="radio" name="gender" value="1">男
                <input th:checked="${emp.getGender()==0}" type="radio" name="gender" value="0">女
            </label>
        </div>
        <div class="form-group">
            <label>department</label>
            <select class="form-control" name="department.id">
                <option th:selected="${dept.getId()==emp.getDepartment().getId()}" th:each="dept:${departments}" th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option>
            </select>
        </div>
        <div class="form-group">
            <label>birth</label>
            <input type="text" name="birth" class="form-control" th:value="${#dates.format(emp.getBirth(),'yyyy/MM/dd HH:mm:ss')}">
        </div>
        <br>
        <div class="form-group">
            <button type="submit" class="btn btn-sm btn-success">修改</button>
        </div>
    </form>
</main>

測試：

OK！修改功能成功！

6、刪除員工頁面

編寫刪除的鏈接以及請求

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

編寫對應的controlelr類

    @GetMapping("/delete/{id}")
    public String delete(@PathVariable("id") int id){
        employeeDao.delete(id);//根據id刪除對應的員工
        return "redirect:/emps";
    }

測試功能：點擊刪除即可！


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 springboot使用策略模式實現一個基本的促銷 通過華為雲搭建一個屬於自己的小網站 使用iis部署一個網站 Springboot+JPA+Thymeleaf 校園博客完整小網站 Nginx的使用（一）Nginx+IIS實現一個網站綁定多個https域名 我用Python實現了一個小說網站雛形 php實現一個簡單的購物網站 用Python爬取斗魚網站的一個小案例 一個小技巧查看網站服務器類型 使用gitbook 發布一個教程文檔網站
 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM