第八章:FilterConfig接口与Listener监听器

本文详细介绍了如何在Java Web应用中使用Servlet Filter实现用户自动登录功能,以及监听器Listener在处理会话、请求和域对象属性变化中的作用。通过示例展示了FilterConfig接口获取过滤器配置信息,监听器监听HttpSession事件,以及创建监听用户登录、注销和页面编码统一的过滤器。此外,还探讨了监听器在处理全站编码问题上的应用。
摘要由CSDN通过智能技术生成

TFilterConfig接口与Listener监听器OC
一、FilterConfig接口

为了获取Filter程序在web.xml文件中的配置信息,Servlet API提供了一个FilterConfig接口,该接口封装了Filter程序在web.xml中的所有注册信息,并且提供了一系列获取这些配置信息的方法 。
通过一个案例来演示FiterConfig接口的作用。
( 1 )在chapter08项目的cn.itcast.chapter08.flter 包中创建过滤器MyFiter03,使用该过滤器来获取web.xml中设置的参数,如下图所示。
例: MyFilter03.java

package cn.itcast.chapter08.filter;

import javax.servlet.FilterConfig;
import javax.servlet.ServletException;

public class myFilter3 implements Filter {
	private String characterEncoding ;
	FilterConfig fc;
	public void init(FilterConfig fConfig) throws ServletException {
		//获取FilterConfig对票
	
	this.fc = fConfig;
	}
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException,ServletException【参数信息
	characterEncoding=fc.getInitParameter("encoding");
	System.out.printin("encoding初始化费数的值为:"+characterEncoding);
	chain.doFilter(request, response);
}
	public void destroy() {
}
}

2)在web.xm文件中配置过滤器信息。由于Filter链中各个Filter的拦载原序与它价在web.xml文件中元素的映射顺序一致,因此,为了防止其他Ffler影响MyFiter03的拦截效果,这里将MyFiter03映射信息配置在web.xml文件最前端。
重新启动Tomcat 服务器,在浏览器地址栏中输入http://ocalhost:9999/chapter08/ MyServlet"访问MyServlet,控制台窗口中显示的结果如下图所示。
在这里插入图片描述
使用Filter实现用户自动登录
2.步骤实现

(1)编写User类
在chapter08项目中创建citathapter08. entity包,在该包中编写User类,该类用于封装用户的信息,如下图所示。
例 User.java

package cn.itcast.chapter08.filter;

public class User {
	private String username;
	private String password;
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
}


2)实现登录页面和首页
①在chapter08项目的WebContent根目录中,编写login.jsp 页面,该页面用于创建一个用户登录的表单,这个表单需要填写用户名和密码,以及用户自动登录的时间,如文件8-10所示。
例:login.jsp文件


```c
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8" import="java.util.*"%>
<html>
<head></head>
<center><h3>用户登录</h3></center>
<body style="text-align: center;">
<form action="${pageContext.request.contextPath }/LoginServlet" 
method="post">
<table border="1" width="600px" cellpadding="0" cellspacing="0" 
align="center" >
	<tr>
		<td height="30" align="center">用户名:YM</td>
		<td>&nbsp;&nbsp;
        <input type="text" name="username" />${errerMsg }2020080605041</td>
	</tr>
	<tr>
		<td height="30" align="center">&nbsp; 码:</td>
		<td>&nbsp;&nbsp;
          <input type="password" name="password" /></td>
	</tr>
	<tr>
		<td height="35" align="center">自动登录时间</td>
		<td><input type="radio" name="autologin" 
                  value="${60*60*24*31 }" />一个月
			<input type="radio" name="autologin" 
                  value="${60*60*24*31*3 }" />三个月
			<input type="radio" name="autologin" 
                  value="${60*60*24*31*6 }" />半年
			<input type="radio" name="autologin" 
                  value="${60*60*24*31*12 }" />一年
		</td>
	</tr>
	<tr>
		<td height="30" colspan="2" align="center">
			      <input type="submit" value="登录" />
              &nbsp;&nbsp;&nbsp;&nbsp;
			<input type="reset" value="重置" />
		</td>
	</tr>
</table>
</form>
</body>
<html>

②在chapter08项目的WebContent根目录中,编写indexjsp页面,该页面用于显示用户的登录信息。如果没有用户登录,在index jsp页面中就显示一个用户登录的超链接。 如果用户E经登录,在index.jsp页面中显示登录的用户名,以及-个注销的超链接,如文下图所示
例:index.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8" import="java.util.*"
%>
<%@ page isELIgnored=“false” %>
<%@ taglib prefix="c" uri="http://localhost:9999/chapter08/WEB-INF/login.jsp"%>
<html>
<head>
<title>显示登录的用户信息</title>
</head>
<body>
	<br />
	<center>
		<h3>欢迎光临</h3>
	</center>
	<br />
	<br />
	<c:choose>
		<c:when test="${sessionScope.user==null }">
		   <a href="${pageContext.request.contextPath }/login.jsp">用户登录</a>
		</c:when>
		<c:otherwise>
  	  欢迎你,${sessionScope.user.username }!
           <a href="${pageContext.request.contextPath }/LogoutServlet">注销</a>
		</c:otherwise>
	</c:choose>
	<hr />
</body>
</html>

需要注意的是,在上述JSP文件中使用了JSTL标签库,因此,项目中应添加JSTL标签库的支持JAR包(jst.jar和standard.jar)。
3)创建Servlet

①编写LoginServlet类

在chapter08项目的citcast.chaptero8.fiter 包中,编写LoginSerlet类,该类用于处理用户的登录请求。如果输入的用户名和密码正确,则发送一一个用户自动登录的Cookie,并跳转到首页;否则会提示输入的用户名或密码错误,并跳转至登录页面login.jsp 让用户重新登录,如下图所示。
例: LoginServlet.java

package cn.itcast.chapter08.filter;
import java.io.IOException;
import javax.servlet.*;
import javax.servlet.http.*;
import cn.itcast.chapter08.filter.User;
public class LoginServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, 
             HttpServletResponse response)
			throws ServletException, IOException {
		// 获得用户名和密码
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		// 检查用户名和密码
		if ("yanmin".equals(username) && "123456".equals(password)) {
			// 登录成功
			// 将用户状态 user 对象存入 session域
			User user = new User();
			user.setUsername(username);
			user.setPassword(password);
			request.getSession().setAttribute("user", user);
			// 发送自动登录的cookie
			String autoLogin = request.getParameter("autologin");
			if (autoLogin != null) {
				// 注意 cookie 中的密码要加密
				Cookie cookie = new Cookie("autologin", username + "-"
						+ password);
				cookie.setMaxAge(Integer.parseInt(autoLogin));
				cookie.setPath(request.getContextPath());
				response.addCookie(cookie);
			}
		// 跳转至首页
		response.sendRedirect(request.getContextPath()+"/index.jsp");
		} else {
			request.setAttribute("errerMsg", "用户名或密码错");
			request.getRequestDispatcher("/login.jsp")
			.forward(request,response);
		}
	}
	public void doPost(HttpServletRequest request, 
          HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}
}



②编写LogoutServlet类

在chape08项目的cnitcast. chapter08.filer包中,编写Lgouseve类,该类用于注锅用户登录的信息。在这个程序中首先会将Sssn会话中保存的User对象删除,然后将自动登录的Cookie删除,最后跳转到index.jsp,如下图所示。
例:LoginOutServlet.java

package cn.itcast.chapter08.filter;
import java.io.IOException;
import javax.servlet.*;
import javax.servlet.http.*;
public class LoginOutServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, 
             HttpServletResponse response)
			throws ServletException, IOException {
		// 用户注销
		request.getSession().removeAttribute("user");
		// 从客户端删除自动登录的cookie
		Cookie cookie = new Cookie("autologin", "msg");
		cookie.setPath(request.getContextPath());
		cookie.setMaxAge(0);
		response.addCookie(cookie);
		response.sendRedirect(request.getContextPath()+"/index.jsp"); 
	}
	public void doPost(HttpServletRequest request,
         HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}
}


4)创建过滤器
在chapter08项目的cn.itcast.chapter08.filter包中,编写AutoLoginFilter类,该类用于拦截用户登录的访问请求,判断请求中是否包含用户自动登录的Cookie。如果包含,则获取Cookie中的用户名和密码,并验证用户名和密码是否正确。如果正确,则将用户的登录信息封装到Use对象存入Session域中,完成用户自动登录,如下图所示。
例:AutoLoginFilter.java

package cn.itcast.chapter08.filter;
import java.io.IOException;
import javax.servlet.*;
import javax.servlet.http.*;
import cn.itcast.chapter08.filter.User;
public class AutoLoginFilter implements Filter {
	public void init(FilterConfig filterConfig) throws ServletException {
	}
	public void doFilter(ServletRequest req, ServletResponse response,
			FilterChain chain) throws IOException, ServletException {
		HttpServletRequest request = (HttpServletRequest) req;
		// 获得一个名为 autologin 的cookie
		Cookie[] cookies = request.getCookies();
		String autologin = null;
		for (int i = 0; cookies != null && i < cookies.length; i++) {
			if ("autologin".equals(cookies[i].getName())) {
				// 找到了指定的cookie
				autologin = cookies[i].getValue();
				break;
			}
		}
		if (autologin != null) {
			// 做自动登录
			String[] parts = autologin.split("-");
			String username = parts[0];
			String password = parts[1];
			// 检查用户名和密码
			if ("yanmin".equals(username)&& ("123456").equals(password)) {
				// 登录成功,将用户状态 user 对象存入 session域
				User user = new User();
				user.setUsername(username);
				user.setPassword(password);
				request.getSession().setAttribute("user", user);
			}
		}
		// 放行
		chain.doFilter(request, response);
	}
	public void destroy() {
	}
}


(5)配置映射信息
在web.xml文件中,配置所有相关Servlet及Autol oginFilter过滤器信息。由于要拦截用户访问资源的所有请求,因此,将过滤器<filter -mapping>元素拦截的路径设置为“/*”,具体代码如下。

<filter>
    <filter-name>AutoLoginFilter</filter-name>
     <filter-class>cn.itcast.chapter08.filter.AutoLoginFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>AutoLoginFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

6)运行项目,查看结果
①访问login.jsp 页面
重启服务器,打开IE浏览器在地址栏中输入http://localhost:9999/chaptero8/login.jsp",此时,浏览器窗口中会显示一个用户登录的表单,在这个表单中输入用户名"itcast" "密码“123456”,并选择用户自动登录的时间,如下图所示。
在这里插入图片描述
②实现用户登录
单击图中的[登录]按钮,便可完成用户自动登录,此时,在浏览器窗口中会显示登录的用户名,如下图所示。
在这里插入图片描述
③注销用户
单击图中的[注销]超链接,就可以注销当前的用户,然后显示index.jsp页面如下:
在这里插入图片描述
使用Fiter实现统一全站编码
[实现步骤]
1.编写form.jsp页面

在chapter08项目的WebContent目录中,编写一个 form.jsp页面,该页面用于提交用户登录的表单信息,如下图所示。

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" import="java.util.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<center>
	<h3>用户登录</h3>
</center>
<body style="text-align: center;">
	<a href="<%=request.getContextPath()%>/CharacterServlet?name=传智播客&password=123456">单击超链接登录</a>
	<form action="<%=request.getContextPath()%>/CharacterServlet"
		method="post">
		<table border="1" width="600px" cellpadding="0" cellspacing="0"
			align="center">
			<tr>
				<td height="30" align="center">用户名:</td>
				<td>&nbsp;<input type="text" name="name" />
				</td>
			</tr>
			<tr>
				<td height="30" align="center">&nbsp; 码:</td>
				<td>&nbsp;<input type="password" name="password" />
				</td>
			</tr>
			<tr>
				<td height="30" colspan="2" align="center">
				<input type="submit" value="登录" />
				 &nbsp;&nbsp;&nbsp;&nbsp;
				<input type="reset" value="重置" />
			    </td>
			</tr>
		</table>
	</form>
</body>

2.创建Servlet

在chapter08项目的cn.itcast.chapter08.fiter包中,编写一个CharacterServlet类,该类用于获取用户输入的请求参数,并将参数输出到控制台,如下图所示。
例: CharacterServlet,java

package cn.itcast.chapter08.filter;

import java.io.IOException;
import javax.servlet.*;
import javax.servlet.http.*;
public class CharacterServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println(request.getParameter("name"));
		System.out.println(request.getParameter("password"));
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}
}



创建过滤器
在chapter08 项目的cn.itcast.chapter08.filter 包中,编写一个CharacterFiter 类,CharacterFilter类用于拦截用户的请求访问,实现统一全站编码的功能。只是针对请求的方式不同,解决乱码的方式也不相同。其中,POST方式的请求参数存放在消息体中,可以通过setCharacterEncoding()方法进行设置;而GET方式的请求参数存放在消息头中,必须得通过获取UBr参数才能进行设置。如果每次单独对GET请求方式进行处理,势必会很麻烦。为此,可以通过HtpSeretRequestrapper类对HtSereletRequeset类进行包装,通过重写get Paramel()的方式来设置GET方式提交参数的编码,Caetitlr类的实现代码如下图所示。
例:CharacterFilter.java

package cn.itcast.chapter08.filter;

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class CharacterFilter implements Filter {
	public void init(FilterConfig filterConfig) throws ServletException {
	}
	public void doFilter(ServletRequest req, ServletResponse resp,
			FilterChain chain) throws IOException, ServletException {
		HttpServletRequest request = (HttpServletRequest) req;
		HttpServletResponse response = (HttpServletResponse) resp;
		// 拦截所有的请求 解决全站中文乱码
		// 指定 request 和 response 的编码
		request.setCharacterEncoding("utf-8"); // 只对消息体有效
		response.setContentType("text/html;charset=utf-8");
		// 对request进行包装
		CharacterRequest characterRequest = new CharacterRequest(request);
		chain.doFilter(characterRequest, response);
	}
	public void destroy() {
	}
}
// 继承 默认包装类HttpServletRequestWrapper
class CharacterRequest extends HttpServletRequestWrapper {
	private HttpServletRequest request;
	public CharacterRequest(HttpServletRequest request) {
		super(request);
		this.request = request;
	}
	// 子类继承父类一定会覆写一些方法,此处用于重写getParamter()方法
	public String getParameter(String name) {
		// 调用被包装对象的getParameter()方法,获得请求参数
		String value = super.getParameter(name);
		if (value == null)
			return null;
		// 判断请求方式
		String method = super.getMethod();
		if ("get".equalsIgnoreCase(method)) {
			try {
					value = new String(value.getBytes("iso-8859-1"), "utf-8");
			} catch (UnsupportedEncodingException e) {
				throw new RuntimeException(e);
			}
		}
		// 解决乱码后返回结果
		return value;
	}
}

4.配置映射信息
在web.xml文件中,配置CharacterServlet和CharacterFilter的映射信息。由于要拦截用户访问资源的所有请求,因此,将CharacterFilter映射信息中元素拦截的路径设置为“/*”, 具体代码如下。

<servlet>
		<description></description>
		<display-name>CharacterServlet</display-name>
		<servlet-name>CharacterServlet</servlet-name>
		<servlet-class>cn.itcast.chapter08.filter.CharacterServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>CharacterServlet</servlet-name>
		<url-pattern>/CharacterServlet</url-pattern>
	</servlet-mapping>
	<filter>
		<filter-name>CharacterFilter</filter-name>
		<filter-class>cn.itcast.chapter08.filter.CharacterFilter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>CharacterFilter</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

5.启动项目,测试结果
启动Tomcat服务器,打开IE浏览器,在地址栏中输入地址“http://localhost:9999/chapter08/form.jsp",此时,浏览器窗口中会显示一个用户登录的表单,在这个表单中输入用户名“传智播客”、密码“123456", 如图下所示。
在这里插入图片描述
二。Listener监听器

二、Listener监听器——Servlet事件监听器概述
[实现步骤]
1.创建监听器
在chapter08项目中创建一个cn.itcast.chapter08.listener包,在该包中编写一个MyListener类,这个类实现了ServletContextL istener. HttpSessionListener 和ServletRequestListener 3个监听器接口,并实现了这些接口中的所有方法,如下图所示。

package cn.itcast.chapter08.listener;

import javax.servlet.*;

import javax.servlet.http.*;
public class MyListener implements 
    ServletContextListener, HttpSessionListener,ServletRequestListener {
	public void sessionCreated(HttpSessionEvent arg0) {
		System.out.println("HttpSession对象被创建了");
	}
	public void sessionDestroyed(HttpSessionEvent arg0) {
		System.out.println("HttpSession对象被销毁了");	
	}
	
	public void requestDestroyed(ServletRequestEvent arg0) {
		System.out.println("ServletRequest对象被销毁了");
	}
	public void requestInitialized(ServletRequestEvent arg0) {
		System.out.println("ServletRequest对象被创建了");
	}
	
	
	
	public void contextInitialized(ServletContextEvent arg0) {
		System.out.println("ServletContext对象被创建了");
	}
	public void contextDestroyed(ServletContextEvent arg0) {
		System.out.println("ServletContext对象被销毁了");
	}
	}
	





2.添加监听器类信息
在chapter08项目下的web.xml文件中,添加Mylistener 事件监听器信息,具体代码如下。

 <listener>
    <listener-class>
    cn.itcast.chapter08.listener.MyAtteributeListener
    
    </listener-class>
    </listener>

3.创建测试页面
为了查看HttpSessionL istener和ServletRequestL istener监听器的运行效果,在chapter8项目的WebContent目录中编写一个简单的页面文件myjsp.jsp,如下图所示。
例:myjsp.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<html>
<head>
<title>this is MyJsp.jsp page</title>
</head>
<body>
    这是一个测试监听器的页面
</body>
</html>

在这里插入图片描述
4.设置监听超时信息
为了尽快地查看到HttpSession对象销毁的过程,可以在chapter08应用的web. xm|文件中设置session的超时时间为2min,具体代码如下。

 <session-config>
      <session-timeout>2 </session-timeout>
    </session-config>

在上述配置中, 标签指定的超时必须为一个整数。如果这个整数为0或负整数,则session永远不会超时;如果这个数是正整数,则项目中的session将在指定分钟后超时。。

**

监听域对象的属性变更

**
[任务目标]
通过所学监听器知识,读者应学会使用监听器监听域对象的属性变更。

[实现步骤]
1.创建测试页面
在chapter08项目的WebContext根目录中,编写一个testattribute.jsp页面,以观察各个域对象属性事件监听器的作用,具体代码如下图所示
例:testattribute .jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
   测试域对象属性信息监听器的页面</br>
   <% 
   application.setAttribute("username","itcast"); 
   application.setAttribute("username","itheima"); 
   application.removeAttribute("username"); 
   
session.setAttribute("username","itcast");
session.setAttribute("username","itheima");
session.removeAttribute("username");

request.setAttribute("username","itcast");
request.setAttribute("username","itheima");
request.removeAttribute("username");
%>
</body>
</html>

2.创建监听器
在chapter08项目的cn.itcast.chaptero8.listener包中,编写一个名称为Myttibutelitere的监听器类,该类实现了SrleCentributel ster、HtStpstibuteliteneree 和SerletRequestributeListener接口,并实现这些接口中的所有方法,如下图所示。
例:MyAttributeListener.java

package cn.itcast.chapter08.listener;

import javax.servlet.ServletContextAttributeEvent;
import javax.servlet.ServletContextAttributeListener;
import javax.servlet.ServletRequestAttributeEvent;
import javax.servlet.ServletRequestAttributeListener;
import javax.servlet.http.HttpSessionAttributeListener;
import javax.servlet.http.HttpSessionBindingEvent;

public class MyAttributeListener implements ServletContextAttributeListener,
HttpSessionAttributeListener, ServletRequestAttributeListener {
public void attributeAdded(ServletContextAttributeEvent sae) {
String name = sae.getName();
System.out.println("ServletContext添加属性:" + name + "="
		+ sae.getServletContext().getAttribute(name));
}
public void attributeRemoved(ServletContextAttributeEvent sae) {
String name = sae.getName();
System.out.println("ServletContext移除属性: " + name);
}
public void attributeReplaced(ServletContextAttributeEvent sae) {
String name = sae.getName();
System.out.println("ServletContext替换属性:" + name + "="
		+ sae.getServletContext().getAttribute(name));
}
public void attributeAdded(HttpSessionBindingEvent hbe) {
String name = hbe.getName();
System.out.println("HttpSession添加属性:" + name + "="
		+ hbe.getSession().getAttribute(name));
}
public void attributeRemoved(HttpSessionBindingEvent hbe) {
String name = hbe.getName();
System.out.println("HttpSession移除属性: " + name);
}
public void attributeReplaced(HttpSessionBindingEvent hbe) {
String name = hbe.getName();
System.out.println("HttpSession替换属性:" + name + "="
		+ hbe.getSession().getAttribute(name));
}
public void attributeAdded(ServletRequestAttributeEvent sra) {
String name = sra.getName();
System.out.println("ServletRequest添加属性:" + name + "="
		+ sra.getServletRequest().getAttribute(name));
}
public void attributeRemoved(ServletRequestAttributeEvent sra) {
String name = sra.getName();
System.out.println("ServletRequest移除属性: " + name);
}
public void attributeReplaced(ServletRequestAttributeEvent sra) {
String name = sra.getName();
System.out.println("ServletRequest替换属性:" + name + "="
		+ sra.getServletRequest().getAttribute(name));
}
}



3.添加监听信息
在web.xml文件中,添加MyttributeListener事件监听器信息,具体代码如下:
在这里插入图片描述
4.启动项目,测试结果
启动Tomcat服务器,打开浏览器,在地址栏中输入地址“http://localhost:9999/chapter08/testtattribute.jsp",访问testtattribute.jsp。
在这里插入图片描述

————————————————
表:Ctrl/Command + Shift + O
检查列表:Ctrl/Command + Shift + C
插入代码:Ctrl/Command + Shift + K
插入链接:Ctrl/Command + Shift + L
插入图片:Ctrl/Command + Shift + G
查找:Ctrl/Command + F
替换:Ctrl/Command + G

合理的创建标题,有助于目录的生成

直接输入1次#,并按下space后,将生成1级标题。
输入2次#,并按下space后,将生成2级标题。
以此类推,我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H2O is是液体。

210 运算结果是 1024.

插入链接与图片

链接: link.

图片: Alt

带尺寸的图片: Alt

居中的图片: Alt

居中并且带尺寸的图片: Alt

当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

  • 项目
    • 项目
      • 项目
  1. 项目1
  2. 项目2
  3. 项目3
  • 计划任务
  • 完成任务

创建一个表格

一个简单的表格是这么创建的:

项目Value
电脑$1600
手机$12
导管$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列第二列第三列
第一列文本居中第二列文本居右第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如:

TYPEASCIIHTML
Single backticks'Isn't this fun?'‘Isn’t this fun?’
Quotes"Isn't this fun?"“Isn’t this fun?”
Dashes-- is en-dash, --- is em-dash– is en-dash, — is em-dash

创建一个自定义列表

Markdown
Text-to- HTML conversion tool
Authors
John
Luke

如何创建一个注脚

一个具有注脚的文本。1

注释也是必不可少的

Markdown将文本转换为 HTML

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n1)!nN 是通过欧拉积分

Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t   . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=0tz1etdt.

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能,丰富你的文章

Mon 06 Mon 13 Mon 20 已完成 进行中 计划一 计划二 现有任务 Adding GANTT diagram functionality to mermaid
  • 关于 甘特图 语法,参考 这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图:

张三 李四 王五 你好!李四, 最近怎么样? 你最近怎么样,王五? 我很好,谢谢! 我很好,谢谢! 李四想了很长时间, 文字太长了 不适合放在一行. 打量着王五... 很好... 王五, 你怎么样? 张三 李四 王五

这将产生一个流程图。:

链接
长方形
圆角长方形
菱形
  • 关于 Mermaid 语法,参考 这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图:

Created with Raphaël 2.3.0 开始 我的操作 确认? 结束 yes no
  • 关于 Flowchart流程图 语法,参考 这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ,生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件,在上方工具栏可以选择导入功能进行对应扩展名的文件导入,
继续你的创作。


  1. 注脚的解释 ↩︎

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值