JDK动态代理 私有云平台 电力杆 ASP.NET Core Flutter RabbitMQ list junit notifications angular ui router Font Awesome jquery移除子元素 python查看数据类型 安卓小程序源码 oracle查看数据库 mysql自连接 less比较级 java实现 java运行环境配置 java开发学习 怎么装linux系统 linux的安装 coreldraw11 源计划卡特 python封装 迅雷免费会员号共享 emit 网络文件服务器 pr动态字幕 小度音箱app android下载文件 codeblock 砸金蛋抽奖活动 主播音效 小米主题编辑器 召唤加点90刷图加点 华为手机屏保怎么设置 浣海之核 snmp网络管理软件 人物建模教程
当前位置: 首页 > 学习教程  > 编程语言

SpringBoot实例:自定义首页,引入资源,国际化,登录,拦截器,RestfulCRUD,抽取thymeleaf公共页面元素

2021/1/13 20:07:52 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

资源引入 自定义首页 控制器里面写RequestMapping("/")public String index(){return "login";}或者配置类里面写 package jane.test.jane.config;import org.springframework.context.annotation.Configuration; import org.springframework.web.servl…

资源引入

自定义首页

控制器里面写
    @RequestMapping("/")
    public  String index()
    {
        return "login";
    }
或者配置类里面写
package jane.test.jane.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

/**
 * @author jane
 * @create 2021-01-06 13:45
 */
//使用WebMvcConfigurerAdapter可以来扩展SpringMVC的功能
@Configuration
@EnableWebMvc
public class MyConfig extends WebMvcConfigurerAdapter
{
    @Override
    public void addViewControllers(ViewControllerRegistry registry)
    {
        //super.addViewControllers(registry);
        //这样就会将/jane的请求,请求来到success页面
        registry.addViewController("/jane").setViewName("success");
    }

    //现在是想添加首页映射的,想在访问首页的时候也有模板解析
    @Bean
    public WebMvcConfigurerAdapter webMvcConfigurerAdapter()
    {
        WebMvcConfigurerAdapter adapter=new WebMvcConfigurerAdapter()
        {
            @Override
            public void addViewControllers(ViewControllerRegistry registry)
            {
                //然后像上面一样添加映射
                registry.addViewController("/").setViewName("login");
                registry.addViewController("index.html").setViewName("login");
            }
        };
        return adapter;
    }
}

引擎模板引入资源

使用th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" 引入资源
在以后项目名发生变化的时候也能相应地进行改变
<!-- Bootstrap core CSS -->
<link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="asserts/css/signin.css" th:href="@{/asserts/css/signin.css}" rel="stylesheet">

国际化

在以前我们在MVC里面编写国际化功能的时候,还算有点麻烦:
1.编写国际化配置文件
2.使用ResourceBundleMessageSource管理国际化资源文件
3.然后在页面中使用fmt:message来取出国际化内容
但现在不一样了,我们使用SpringBoot差不多只需要编写国际化配置文件就行了
编写国际化配置文件,抽取页面需要显示的国际化消息

在这里插入图片描述

SpringBoot自动配置好了管理国际化资源文件的组件;
@Configuration
@ConditionalOnMissingBean(value = MessageSource.class, search = SearchStrategy.CURRENT)
@AutoConfigureOrder(Ordered.HIGHEST_PRECEDENCE)
@Conditional(ResourceBundleCondition.class)
@EnableConfigurationProperties
@ConfigurationProperties(prefix = "spring.messages")
public class MessageSourceAutoConfiguration {

	private static final Resource[] NO_RESOURCES = {};

	/**
	 * Comma-separated list of basenames (essentially a fully-qualified classpath
	 * location), each following the ResourceBundle convention with relaxed support for
	 * slash based locations. If it doesn't contain a package qualifier (such as
	 * "org.mypackage"), it will be resolved from the classpath root.
	 */
	private String basename = "messages";
	//可以看出基础名默认是messages,
	//所以我们的配置文件可以直接放在类路径下叫messages.properties文件里面
	//这样我们可以不用配置基础名也生效

	/**
	这里可以看出这里给容器添加了一个ResourceBundleMessageSource
	这个就是做国际化的东西,
	设置国际化资源文件的基础名(去掉语言国家代码的剩下的名称)
	/*
	@Bean
	public MessageSource messageSource() {
		ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();
		if (StringUtils.hasText(this.basename)) {
			messageSource.setBasenames(StringUtils.commaDelimitedListToStringArray(
					StringUtils.trimAllWhitespace(this.basename)));
		}
		if (this.encoding != null) {
			messageSource.setDefaultEncoding(this.encoding.name());
		}
		messageSource.setFallbackToSystemLocale(this.fallbackToSystemLocale);
		messageSource.setCacheSeconds(this.cacheSeconds);
		messageSource.setAlwaysUseMessageFormat(this.alwaysUseMessageFormat);
		return messageSource;
	}
去页面获取国际化的值;
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">
		<link rel="shortcut icon" href="/favicon.ico"/>
		<link rel="bookmark" href="/favicon.ico"/>
		<title>Signin Template for Bootstrap</title>
		<!-- Bootstrap core CSS -->
		<link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
		<!-- Custom styles for this template -->
		<link href="asserts/css/signin.css" th:href="@{/asserts/css/signin.css}" rel="stylesheet">
	</head>

    <!--使用th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" 引入资源
在以后项目名发生变化的时候也能相应地进行改变-->
	<body class="text-center">
		<form class="form-signin" action="dashboard.html">
			<img class="mb-4" th:href="@{/asserts/img/bootstrap-solid.svg}" 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" th:text="#{login.username}">Username</label>
			<input type="text" class="form-control" th:placeholder="#{login.username}" placeholder="Username" required="" autofocus="">
			<label class="sr-only" th:text="#{login.password}">Password</label>
			<input type="password" class="form-control" th:placeholder="#{login.password}" placeholder="Password" required="">
			<div class="checkbox mb-3">
				<label>
          <input type="checkbox" value="remember-me"> [[#{login.remember}]]
        </label>
			</div>
			<button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.btn}">Sign in</button>
			<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
			<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>
		</form>

	</body>

</html>
但是我们需要实现的是点击实现中英文的切换
这个得需要了解它的原理才行:
在国际化里面有些重要的对象:
	国际化Locale(区域信息对象);LocaleResolver(获取区域信息对象);
在SpringBoot里面也对它们进行了默认的配置
可以看出,在我们没有自己配置这个组件的时候,
默认的就是根据请求头带来的区域信息获取Locale进行国际化
@Bean
@ConditionalOnMissingBean
@ConditionalOnProperty(prefix = "spring.mvc", name = "locale")
public LocaleResolver localeResolver() {
	if (this.mvcProperties
			.getLocaleResolver() == WebMvcProperties.LocaleResolver.FIXED) {
		return new FixedLocaleResolver(this.mvcProperties.getLocale());
	}
	AcceptHeaderLocaleResolver localeResolver = new AcceptHeaderLocaleResolver();
	localeResolver.setDefaultLocale(this.mvcProperties.getLocale());
	return localeResolver;
}
现在我们需要自己点击来进行切换,所以要换成自己的国际化LocaleResolver
然后加入到容器中
package jane.test.component;

import org.springframework.util.StringUtils;
import org.springframework.web.servlet.LocaleResolver;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Locale;

/**
 * @author jane
 * @create 2021-01-07 14:54
 */
public class MyLocalResolver implements LocaleResolver
{
    //我们在连接上的时候带上区域信息
    @Override
    public Locale resolveLocale(HttpServletRequest request)
    {
        String l = request.getParameter("l");
        Locale local=Locale.getDefault();
        if(!StringUtils.isEmpty(l))
        {
            String[] split = l.split("_");
            local = new Locale(split[0], split[1]);
        }
        return local;
    }

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

    }
}

登录和拦截器

现在的麻烦是,每次我修改页面的代码,或者修改模板引擎里面的页面代码,
在浏览器访问的时候都是访问旧的代码,修改后的代码无法访问
解决方案:
在配置文件里面禁用掉模板引擎的缓存

	#禁用模板引擎缓存
	spring.thymeleaf.cache=false

idea在运行项目的时候是不进行自动编译的
所以在修改页面后要进行重新编译,快捷键是ctrl+F9
package jane.test.controller;

import org.springframework.stereotype.Controller;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpSession;
import java.util.Map;

/**
 * @author jane
 * @create 2021-01-07 15:53
 */
@Controller
public class LoginController
{
//    @RequestMapping(value = "/user/Login",method = RequestMethod.POST)
//    在SpringBoot里面还支持对应的Mapping来处理相应的请求
//    @DeleteMapping
//    @PutMapping
//    @GetMapping
    @PostMapping(value = "/user/login")
    public String login(@RequestParam("username")String username,
                @RequestParam("password")String password, Map<String,Object> map,
                HttpSession session)
    {
        if(!StringUtils.isEmpty(username) && "1234".equals(password))
        {
            session.setAttribute("loginUser",username);
            //登陆成功,防止表单重复提交,重定向到主页
            return "redirect:/main.html";
//            return "dashboard";
        }
        else
        {
            //登录失败
            map.put("msg","用户名和密码不正确");
            return "login";
        }
    }
}
上面为了防止表单重新提交使用了重定向,但是这样谁都可以访问主页了,所以需要做拦截器进行拦截
registry.addViewController("main.html").setViewName("dashboard");
package jane.test.component;

import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * @author jane
 * @create 2021-01-07 16:50
 */

/**
 * 检查登陆的拦截器
 */
public class MyLoginHandlerInterceptor implements HandlerInterceptor
{
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception
    {
        Object user = request.getSession().getAttribute("loginUser");
        if(user==null)
        {
            //还没登录,就返回登录页面
            request.setAttribute("msg","没有权限访问这个页面");
            request.getRequestDispatcher("/index.html").forward(request,response);
            return false;
        }
        else
        {
            return  true;
        }
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception
    {
    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception
    {
    }
}
然后将这个拦截器加入到容器里面
package jane.test.config;

import jane.test.component.MyLocalResolver;
import jane.test.component.MyLoginHandlerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.LocaleResolver;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

/**
 * @author jane
 * @create 2021-01-06 13:45
 */
//使用WebMvcConfigurerAdapter可以来扩展SpringMVC的功能
@Configuration
//@EnableWebMvc
public class MyConfig extends WebMvcConfigurerAdapter
{
    @Override
    public void addViewControllers(ViewControllerRegistry registry)
    {
        //super.addViewControllers(registry);
        //这样就会将/jane的请求,请求来到success页面
        registry.addViewController("/jane").setViewName("success");
    }

    //现在是想添加首页映射的,想在访问首页的时候也有模板解析
    @Bean
    public WebMvcConfigurerAdapter webMvcConfigurerAdapter()
    {
        WebMvcConfigurerAdapter adapter=new WebMvcConfigurerAdapter()
        {
            @Override
            public void addViewControllers(ViewControllerRegistry registry)
            {
                //然后像上面一样添加映射
                registry.addViewController("/").setViewName("login");
                registry.addViewController("index.html").setViewName("login");
                registry.addViewController("main.html").setViewName("dashboard");
            }

            @Override
            public void addInterceptors(InterceptorRegistry registry)
            {
//                super.addInterceptors(registry);
                //静态资源;  *.css , *.js
                //SpringBoot已经做好了静态资源映射
                registry.addInterceptor(new MyLoginHandlerInterceptor())
                        .addPathPatterns("/**")
                        .excludePathPatterns("/index.html","/","/user/login");
            }
        };
        return adapter;
    }

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

CRUD

RestfulCRUD风格

我们的CRUD要满足Rest风格的,叫RestfulCRUD
就是URI: /资源名称/资源标识 HTTP请求方式区分对资源CRUD操作
RestfulCRUD和普通CRUD的区别
普通CRUD(uri来区分操作)RestfulCRUD
查询getEmpemp—GET
添加addEmp?xxxemp—POST
修改updateEmp?id=xxx&xxx=xxemp/{id}—PUT
删除deleteEmp?id=1emp/{id}—DELETE
所以我们的请求方式大概如下:
请求URI请求方式
查询所有员工empsGET
查询某个员工(来到修改页面)emp/1GET
来到添加页面empGET
添加员工empPOST
来到修改页面(查出员工进行信息回显)emp/1GET
修改员工empPUT
删除员工emp/1DELETE

抽取thymeleaf公共页面元素

如何使用,在官网有详细的说明,下面我们来看下

官网详细说明
在这里插入图片描述

Say we want to add a standard copyright footer to all our grocery pages,
so we create a /WEB-INF/templates/footer.html file containing this code:
首先抽取公共片段
	<div th:fragment="copy">
	      &copy; 2011 The Good Thymes Virtual Grocery
	</div>

然后在别的地方引用:
	 <div th:insert="~{footer :: copy}"></div>
	 解释:footer是引用的模板的所在文件,copy是自定义的片段的名称
引入的写法有两种:
	{templatename::selector}:模板名::选择器,比如id选择器就使用#
	~{templatename::fragmentname}:模板名::片段名
Note that th:insert expects a fragment expression (~{...}),
which is an expression that results in a fragment. 
In the above example though, which is a non-complex fragment expression,
the (~{,}) enclosing is completely optional, 
so the code above would be equivalent to:
这里简单地引入,~{}可以省略,写成
	<div th:insert="footer :: copy"></div>

三种引入公共片段的th属性

th:insert:将公共片段整个插入到声明引入的元素中
th:replace:将声明引入的元素替换为公共片段
th:include:将被引入的片段的内容包含进这个标签中
官网就有个很好的例子
Difference between th:insert and th:replace (and th:include)
And what is the difference between th:insert and th:replace (and th:include, not recommended since 3.0)?

th:insert is the simplest: it will simply insert the specified fragment as the body of its host tag.

th:replace actually replaces its host tag with the specified fragment.

th:include is similar to th:insert, but instead of inserting the fragment it only inserts the contents of this fragment.

So an HTML fragment like this:
	
	<footer th:fragment="copy">
	  &copy; 2011 The Good Thymes Virtual Grocery
	</footer>

…included three times in host <div> tags, like this:
	<body>
	
	  ...
	
	  <div th:insert="footer :: copy"></div>
	
	  <div th:replace="footer :: copy"></div>
	
	  <div th:include="footer :: copy"></div>
	  
	</body>

…will result in:
	<body>
	
	  ...
	
	  <div>
	    <footer>
	      &copy; 2011 The Good Thymes Virtual Grocery
	    </footer>
	  </div>
	
	  <footer>
	    &copy; 2011 The Good Thymes Virtual Grocery
	  </footer>
	
	  <div>
	    &copy; 2011 The Good Thymes Virtual Grocery
	  </div>
	  
	</body>

引入带有参数的公共片段

Parameterizable fragment signatures
比如定义公共片段的时候在里面使用两个参数onevar,twovar:
<div th:fragment="frag (onevar,twovar)">
    <p th:text="${onevar} + ' - ' + ${twovar}">...</p>
</div>
在引用的时候:
his requires the use of one of these two syntaxes to call the fragment from th:insert or th:replace:
只能使用这两种引用方式
<div th:replace="::frag (${value1},${value2})">...</div>
<div th:replace="::frag (onevar=${value1},twovar=${value2})">...</div>

如果你定义的公共片段没有定义参数名:
Fragment local variables without fragment arguments
<div th:fragment="frag">
    ...
</div>
We could use the second syntax specified above to call them (and only the second one):
我们也可以使用第二种方式来引用,只能使用第二种:
<div th:replace="::frag (onevar=${value1},twovar=${value2})">

增删改查

和常规套路差不多,可以注意一下删除员工的方法
因为需要将请求方式改成delete的,所以要增加一个form表单的
但是每一个员都增加form表单,这个页面就超级多form表单的了
所以使用的是ajax的方式来提交表单
	<td>
		<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a>
		<button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>
	</td>

	<form id="deleteEmpForm"  method="post">
		<input type="hidden" name="_method" value="delete"/>
	</form>

<script>
    $(".deleteBtn").click(function(){
        //删除当前员工的
        $("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();
        return false;
    });
</script>
package jane.test.controller;

import jane.test.dao.DepartmentDao;
import jane.test.dao.EmployeeDao;
import jane.test.entities.Department;
import jane.test.entities.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

import java.util.Collection;

/**
 * @author jane
 * @create 2021-01-07 18:50
 */
@Controller
public class EmployeeController
{
    @Autowired
    EmployeeDao employeeDao;

    @Autowired
    DepartmentDao departmentDao;

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

    //来到员工添加页面
    @GetMapping("/emp")
    public String toAddPage(Model model){
        //来到添加页面,查出所有的部门,在页面显示
        Collection<Department> departments = departmentDao.getDepartments();
        model.addAttribute("depts",departments);
        return "emp/add";
    }

    //员工添加
    //SpringMVC自动将请求参数和入参对象的属性进行一一绑定;要求请求参数的名字和javaBean入参的对象里面的属性名是一样的
    @PostMapping("/emp")
    public String addEmp(Employee employee){
        //来到员工列表页面

        System.out.println("保存的员工信息:"+employee);
        //保存员工
        employeeDao.save(employee);
        // redirect: 表示重定向到一个地址  /代表当前项目路径
        // forward: 表示转发到一个地址
        return "redirect:/emps";
    }

    //来到修改页面,查出当前员工,在页面回显
    @GetMapping("/emp/{id}")
    public String toEditPage(@PathVariable("id") Integer id, Model model){
        Employee employee = employeeDao.get(id);
        model.addAttribute("emp",employee);

        //页面要显示所有的部门列表
        Collection<Department> departments = departmentDao.getDepartments();
        model.addAttribute("depts",departments);
        //回到修改页面(add是一个修改添加二合一的页面);
        return "emp/add";
    }

    //员工修改;需要提交员工id;
    @PutMapping("/emp")
    public String updateEmployee(Employee employee){
        System.out.println("修改的员工数据:"+employee);
        employeeDao.save(employee);
        return "redirect:/emps";
    }

    //员工删除
    @DeleteMapping("/emp/{id}")
    public String deleteEmployee(@PathVariable("id") Integer id){
        employeeDao.delete(id);
        return "redirect:/emps";
    }
}
<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<meta name="author" content="">

	<title>Dashboard Template for Bootstrap</title>
	<!-- Bootstrap core CSS -->
	<link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">

	<!-- Custom styles for this template -->
	<link href="asserts/css/dashboard.css" th:href="@{/asserts/css/dashboard.css}" rel="stylesheet">
	<style type="text/css">
		/* Chart.js */

		@-webkit-keyframes chartjs-render-animation {
			from {
				opacity: 0.99
			}
			to {
				opacity: 1
			}
		}

		@keyframes chartjs-render-animation {
			from {
				opacity: 0.99
			}
			to {
				opacity: 1
			}
		}

		.chartjs-render-monitor {
			-webkit-animation: chartjs-render-animation 0.001s;
			animation: chartjs-render-animation 0.001s;
		}
	</style>
</head>

<body>
<!--引入抽取的topbar-->
<!--模板名:会使用thymeleaf的前后缀配置规则进行解析-->
<div th:replace="commons/bar::topbar"></div>

<div class="container-fluid">
	<div class="row">
		<!--引入侧边栏-->
		<div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>

		<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
			<h2><a class="btn btn-sm btn-success" href="emp" th:href="@{/emp}">员工添加</a></h2>
			<div class="table-responsive">
				<table class="table table-striped table-sm">
					<thead>
					<tr>
						<th>#</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.id}"></td>
						<td>[[${emp.lastName}]]</td>
						<td th:text="${emp.email}"></td>
						<td th:text="${emp.gender}==0?'女':'男'"></td>
						<td th:text="${emp.department.departmentName}"></td>
						<td th:text="${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}"></td>
						<td>
							<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a>
							<button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>
						</td>
					</tr>
					</tbody>
				</table>
			</div>
		</main>
		<form id="deleteEmpForm"  method="post">
			<input type="hidden" name="_method" value="delete"/>
		</form>
	</div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
<script type="text/javascript" src="asserts/js/popper.min.js" th:src="@{/webjars/popper.js/1.11.1/dist/popper.js}"></script>
<script type="text/javascript" src="asserts/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/4.0.0/js/bootstrap.js}"></script>

<!-- Icons -->
<script type="text/javascript" src="asserts/js/feather.min.js" th:src="@{/asserts/js/feather.min.js}"></script>
<script>
    feather.replace()
</script>
<script>
    $(".deleteBtn").click(function(){
        //删除当前员工的
        $("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();
        return false;
    });
</script>
</body>
</html>
<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Dashboard Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="asserts/css/dashboard.css" th:href="@{/asserts/css/dashboard.css}" rel="stylesheet">
    <style type="text/css">
        /* Chart.js */

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }
    </style>
</head>

<body>
<!--引入抽取的topbar-->
<!--模板名:会使用thymeleaf的前后缀配置规则进行解析-->
<div th:replace="commons/bar::topbar"></div>

<div class="container-fluid">
    <div class="row">
        <!--引入侧边栏-->
        <div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <!--需要区分是员工修改还是添加;-->
            <form th:action="@{/emp}" method="post">
                <!--发送put请求修改员工数据-->
                <!--
                1、SpringMVC中配置HiddenHttpMethodFilter;(SpringBoot自动配置好的)
                2、页面创建一个post表单
                3、创建一个input项,name="_method";值就是我们指定的请求方式
                -->
                <input type="hidden" name="_method" value="put" th:if="${emp!=null}"/>
                <input type="hidden" name="id" th:if="${emp!=null}" th:value="${emp.id}">
                <div class="form-group">
                    <label>LastName</label>
                    <input name="lastName" type="text" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${emp.lastName}">
                </div>
                <div class="form-group">
                    <label>Email</label>
                    <input name="email" type="email" class="form-control" placeholder="zhangsan@qq.com" th:value="${emp!=null}?${emp.email}">
                </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" th:checked="${emp!=null}?${emp.gender==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" th:checked="${emp!=null}?${emp.gender==0}">
                        <label class="form-check-label"></label>
                    </div>
                </div>
                <div class="form-group">
                    <label>department</label>
                    <!--提交的是部门的id-->
                    <select class="form-control" name="department.id">
                        <option th:selected="${emp!=null}?${dept.id == emp.department.id}" th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}">1</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Birth</label>
                    <input name="birth" type="text" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}">
                </div>
                <button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'">添加</button>
            </form>
        </main>
    </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
<script type="text/javascript" src="asserts/js/popper.min.js" th:src="@{/webjars/popper.js/1.11.1/dist/popper.js}"></script>
<script type="text/javascript" src="asserts/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/4.0.0/js/bootstrap.js}"></script>

<!-- Icons -->
<script type="text/javascript" src="asserts/js/feather.min.js" th:src="@{/asserts/js/feather.min.js}"></script>
<script>
    feather.replace()
</script>

</body>

</html>

本文链接: http://www.dtmao.cc/news_show_600253.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?