常用代码片段
[toc]
一、SSM 1、db.properties（数据库配置信息） MySQL-5.0：
1 2 3 4 driverClassName =com.mysql.cj.jdbc.Driver url =jdbc:mysql://localhost:3306/myblogs user =root password =root
MySQL-8.0：
1 2 3 4 5 6 7 jdbc.driverClassName =com.mysql.cj.jdbc.Driver jdbc.url =jdbc:mysql://localhost:3306/helloworld?characterEncoding=utf8&useUnicode=true&useSSL=false&serverTimezone=UTC&allowPublicKeyRetrieval=true jdbc.user =root jdbc.pwd =root jdbc.initialSize =1 jdbc.maxActive =50 jdbc.maxWait =30000
2、web.xml（Servlet 容器的配置文件） 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 <web-app > <display-name > Archetype Created Web Application</display-name > <context-param > <param-name > contextConfigLocation</param-name > <param-value > classpath:conf/spring.xml</param-value > </context-param > <filter > <filter-name > HiddenHttpMethodFilter</filter-name > <filter-class > org.springframework.web.filter.HiddenHttpMethodFilter</filter-class > </filter > <filter-mapping > <filter-name > HiddenHttpMethodFilter</filter-name > <url-pattern > /*</url-pattern > </filter-mapping > <servlet > <servlet-name > springmvc</servlet-name > <servlet-class > org.springframework.web.servlet.DispatcherServlet</servlet-class > <init-param > <param-name > contextConfigLocation</param-name > <param-value > classpath:conf/springmvc.xml</param-value > </init-param > <load-on-startup > 1</load-on-startup > </servlet > <servlet-mapping > <servlet-name > springmvc</servlet-name > <url-pattern > /</url-pattern > </servlet-mapping > </web-app >
3、applicationContext.xml（Spring 配置文件） 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns ="http://www.springframework.org/schema/beans" xmlns:xsi ="http://www.w3.org/2001/XMLSchema-instance" xmlns:context ="http://www.springframework.org/schema/context" xmlns:aop ="http://www.springframework.org/schema/aop" xmlns:tx ="http://www.springframework.org/schema/tx" xsi:schemaLocation ="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd " > <context:component-scan base-package ="com.cyw" /> <aop:aspectj-autoproxy /> <context:property-placeholder location ="classpath:conf/db.properties" /> <bean id ="dataSource" class ="com.alibaba.druid.pool.DruidDataSource" > <property name ="driverClassName" value ="${jdbc.driverClassName}" /> <property name ="url" value ="${jdbc.url}" /> <property name ="username" value ="${jdbc.user}" /> <property name ="password" value ="${jdbc.password}" /> <property name ="initialSize" value ="${jdbc.initialSize}" /> <property name ="maxActive" value ="${jdbc.maxActive}" /> <property name ="maxWait" value ="${jdbc.maxWait}" /> </bean > <bean id ="txManager" class ="org.springframework.jdbc.datasource.DataSourceTransactionManager" > <property name ="dataSource" ref ="dataSource" /> </bean > <tx:annotation-driven transaction-manager ="txManager" /> <bean id ="sqlSessionFactory" class ="org.mybatis.spring.SqlSessionFactoryBean" > <property name ="dataSource" ref ="dataSource" /> <property name ="configLocation" value ="classpath:conf/mybatis-config.xml" /> <bean class ="org.mybatis.spring.mapper.MapperScannerConfigurer" > <property name ="basePackage" value ="com.cyw.mapper" /> </bean > </beans >
4、springMVC.xml（SpringMVC 配置文件） 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns ="http://www.springframework.org/schema/beans" xmlns:xsi ="http://www.w3.org/2001/XMLSchema-instance" xmlns:context ="http://www.springframework.org/schema/context" xmlns:aop ="http://www.springframework.org/schema/aop" xmlns:tx ="http://www.springframework.org/schema/tx" xmlns:mvc ="http://www.springframework.org/schema/mvc" xsi:schemaLocation ="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd " > <context:component-scan base-package ="com.cyw.controller" /> <mvc:annotation-driven /> <mvc:default-servlet-handler /> </beans >
5、Mybatis.xml（Mybatis配置文件） 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd" > <configuration > <settings > <setting name ="logImpl" value ="LOG4J" /> </settings > <typeAliases > <package name ="com.cyw.pojo" /> </typeAliases > </configuration >
6、SSM的Maven依赖 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 <?xml version="1.0" encoding="UTF-8"?> <project xmlns ="http://maven.apache.org/POM/4.0.0" xmlns:xsi ="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation ="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd" > <modelVersion > 4.0.0</modelVersion > <groupId > com.cyw</groupId > <artifactId > myWeb-02</artifactId > <version > 1.0-SNAPSHOT</version > <packaging > war</packaging > <name > myWeb-02 Maven Webapp</name > <url > http://www.example.com</url > <properties > <project.build.sourceEncoding > UTF-8</project.build.sourceEncoding > <maven.compiler.source > 1.7</maven.compiler.source > <maven.compiler.target > 1.7</maven.compiler.target > </properties > <dependencies > <dependency > <groupId > junit</groupId > <artifactId > junit</artifactId > <version > 4.11</version > <scope > test</scope > </dependency > <dependency > <groupId > mysql</groupId > <artifactId > mysql-connector-java</artifactId > <version > 8.0.28</version > </dependency > <dependency > <groupId > org.mybatis</groupId > <artifactId > mybatis</artifactId > <version > 3.5.9</version > </dependency > <dependency > <groupId > org.springframework</groupId > <artifactId > spring-webmvc</artifactId > <version > 5.3.15</version > </dependency > <dependency > <groupId > org.springframework</groupId > <artifactId > spring-tx</artifactId > <version > 5.3.15</version > </dependency > <dependency > <groupId > org.springframework</groupId > <artifactId > spring-jdbc</artifactId > <version > 5.3.15</version > </dependency > <dependency > <groupId > org.mybatis</groupId > <artifactId > mybatis-spring</artifactId > <version > 2.0.7</version > </dependency > <dependency > <groupId > com.fasterxml.jackson.core</groupId > <artifactId > jackson-databind</artifactId > <version > 2.9.1</version > </dependency > <dependency > <groupId > com.alibaba</groupId > <artifactId > druid</artifactId > <version > 1.2.8</version > </dependency > <dependency > <groupId > org.projectlombok</groupId > <artifactId > lombok</artifactId > <version > 1.18.20</version > </dependency > <dependency > <groupId > org.springframework</groupId > <artifactId > spring-aspects</artifactId > <version > 5.3.15</version > </dependency > <dependency > <groupId > log4j</groupId > <artifactId > log4j</artifactId > <version > 1.2.17</version > </dependency > </dependencies > <build > <finalName > myWeb-02</finalName > <pluginManagement > <plugins > <plugin > <artifactId > maven-clean-plugin</artifactId > <version > 3.1.0</version > </plugin > <plugin > <artifactId > maven-resources-plugin</artifactId > <version > 3.0.2</version > </plugin > <plugin > <artifactId > maven-compiler-plugin</artifactId > <version > 3.8.0</version > </plugin > <plugin > <artifactId > maven-surefire-plugin</artifactId > <version > 2.22.1</version > </plugin > <plugin > <artifactId > maven-war-plugin</artifactId > <version > 3.2.2</version > </plugin > <plugin > <artifactId > maven-install-plugin</artifactId > <version > 2.5.2</version > </plugin > <plugin > <artifactId > maven-deploy-plugin</artifactId > <version > 2.8.2</version > </plugin > </plugins > </pluginManagement > </build > </project >
7、自定义返回的JSON结果集 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 package com.cyw.pojo;import lombok.AllArgsConstructor;import lombok.Data;import lombok.NoArgsConstructor;@Data @AllArgsConstructor @NoArgsConstructor public class Result private int code; private String msg; private Object data; public static Result ok () return new Result(200 ,null ,null ); } public static Result ok (String msg) return new Result(200 ,msg,null ); } public static Result ok (Object data) return new Result(200 ,null ,data); } public static Result ok (String msg,Object data) return new Result(200 ,msg,data); } public static Result error (String msg) return new Result(400 ,msg,null ); } }
8、Mybatis-Mapper.xml 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" > <mapper namespace ="com.cyw.mapper.UserMapper" > <select id ="getUserByUid" resultType ="User" > select * from user where uid = #{uid} </select > <select id ="login" resultType ="User" > select * from user where username = #{username} and pwd=#{pwd} </select > </mapper >
9、POM.xml 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <dependencies > <dependency > <groupId > mysql</groupId > <artifactId > mysql-connector-java</artifactId > <version > 8.0.28</version > </dependency > <dependency > <groupId > org.mybatis</groupId > <artifactId > mybatis</artifactId > <version > 3.5.9</version > </dependency > <dependency > <groupId > junit</groupId > <artifactId > junit</artifactId > <version > 4.12</version > <scope > test</scope > </dependency > </dependencies > <properties > <maven.compiler.source > 8</maven.compiler.source > <maven.compiler.target > 8</maven.compiler.target > </properties > <build > <resources > <resource > <directory > src/main/java</directory > <includes > <include > **/*.properties</include > <include > **/*.xml</include > </includes > <filtering > true</filtering > </resource > </resources > </build >
10、分页 前端：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function findByPage (condition, pageNum ) let queryPage = { "condition" : condition, "curPageNum" : pageNum, "pageSize" : 4 , } $.post("/course/getCourseAll" , queryPage, function (resp ) }); } function search ( let condition = $("#searchBox" ).val(); findByPage(condition, 1 ); }
后端：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 public MyResult getClassAll (QueryConditionBean conditionBean, User user) Integer roleId = user.getRoleId(); List<Class> classAll = null ; Page<Object> page = PageHelper.startPage(conditionBean.getCurPageNum(), conditionBean.getPageSize()); if (user.getRoleId()==0 ){ classAll = classMapper.getClassAll(); }else if (user.getRoleId()==1 ){ classAll = classMapper.getClassByTeacher(user.getId()); }else if (user.getRoleId()==2 ){ classAll = classMapper.getClassByStudent(user.getId()); } if (classAll == null || classAll.size() <= 0 ) { return MyResult.error("暂无数据！" ); } PageBean<Class> pageBean = new PageBean<>(); pageBean.setTotalRows(page.getTotal()); pageBean.setCurPageNum(page.getPageNum()); pageBean.setPageSize(page.getPageSize()); pageBean.setTotalPages(page.getPages()); pageBean.setDataList(classAll); return MyResult.ok("查询成功！" , pageBean); }
11、CORSConfig 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 package com.cyw.demo.config;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.EnableWebMvc;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration public class CorsConfig implements WebMvcConfigurer @Override public void addCorsMappings (CorsRegistry registry) registry.addMapping("/**" ) .allowCredentials(true ) .allowedOriginPatterns("*" ) .allowedMethods(new String[]{"GET" , "POST" , "PUT" , "DELETE" }) .allowedHeaders("*" ) .exposedHeaders("*" ); } }
12、短信验证码
准备工作 由于要使用 SMS 短信验证码功能，需要借助云平台，因为腾讯云平台的审核更容易通过，因此，在这里使用腾讯云。
在申请 SMS 短信验证码发送服务时，需要有备案的网站、APP、微信公众号，为简化过程，此处申请了一个新的微信个人订阅号，用该订阅号的信息申请短信服务。
（1）注册微信订阅号（需要有未使用的邮箱来注册）
（2）实名认证腾讯云平台和微信订阅号
（3）在腾讯云平台，搜索 SMS，选择使用（试用套餐有200条左右的容量，有效期3~4个月）
（4）申请 SMS 的签名，记录签名（也就是微信订阅号的名字，代表是谁发的）
（5）申请 SMS 的模板，记录模板ID（短信的内容，使用标准模板来提高通过率，模板内的变量就是代码中动态输入的内容）
（6）在云平台的访问控制面板中，创建子账户来发送验证码（限制权限，记录下账户的 SecretID 和 SecretKey）
（7）在云平台的短信控制台中，应用管理菜单的应用列表中，记录下 SDKAppID
1 2 子账户用户名 cyw-user 登录密码 x[s?Hs8/
搭建环境 Maven：
1 2 3 4 5 6 <dependency > <groupId > com.tencentcloudapi</groupId > <artifactId > tencentcloud-sdk-java</artifactId > <version > 3.1.560</version > </dependency >
账户配置（yml）：
1 2 3 4 5 6 txsms: appId: 1400714069 secretId: AKIDGMFtH5fYCblhOpz0oOioAJEwQhjVzGNF secretKey: gR2QYR7jJk3IQTOBsUwJk6Khx52AD8qI signName: // 短信签名（小cyw软工学习簿） templateId: 1490127
SmsUtils 工具类 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 package com.cyw.sms.utils;import com.tencentcloudapi.common.Credential;import com.tencentcloudapi.common.exception.TencentCloudSDKException;import com.tencentcloudapi.common.profile.ClientProfile;import com.tencentcloudapi.sms.v20210111.SmsClient;import com.tencentcloudapi.sms.v20210111.models.SendSmsRequest;import com.tencentcloudapi.sms.v20210111.models.SendSmsResponse;import lombok.Data;import org.springframework.boot.context.properties.ConfigurationProperties;import org.springframework.stereotype.Component;@Data @Component @ConfigurationProperties(prefix = "txsms") public class SmsUtils private String appId; private String secretId; private String secretKey; private String signName; private String templateId; public String sendSms (String checkCode, String expire, String... phoneNumberSet) String rst = "" ; try { Credential cred = new Credential(this .secretId, this .secretKey); ClientProfile clientProfile = new ClientProfile(); clientProfile.setSignMethod("HmacSHA256" ); SmsClient client = new SmsClient(cred, "ap-guangzhou" , clientProfile); SendSmsRequest req = new SendSmsRequest(); req.setSmsSdkAppId(this .appId); req.setSignName(this .signName); req.setTemplateId(this .templateId); String[] templateParamSet = {checkCode, expire}; req.setTemplateParamSet(templateParamSet); req.setPhoneNumberSet(phoneNumberSet); SendSmsResponse res = client.SendSms(req); rst = SendSmsResponse.toJsonString(res); } catch (TencentCloudSDKException e) { e.printStackTrace(); } return rst; } }
执行返回的结果：
1 2 3 4 5 6 7 8 9 10 11 12 { "SendStatusSet" : [{ "SerialNo" : "2028:f825dbb27b0db9a84100" , "PhoneNumber" : "+86137XXXXX4215" , "Fee" : 1 , "SessionContext" : "" , "Code" : "Ok" , "Message" : "send success" , "IsoCode" : "CN" }], "RequestId" : "0344b104-ac66-4576-a66d-16845c657541" }
13、SpringBoot 输出 SQL日志 在application.yml中：
1 2 3 logging: level: com.cyw.mapper: debug
二、常用的 Maven 依赖 1、Spring-Maven 依赖 aspectj-weaver(AOP的依赖) + spring-webmvc + spring-jdbc + spring-tx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <dependency > <groupId > org.springframework</groupId > <artifactId > spring-webmvc</artifactId > <version > 5.3.15</version > </dependency > <dependency > <groupId > org.springframework</groupId > <artifactId > spring-tx</artifactId > <version > 5.3.15</version > </dependency > <dependency > <groupId > org.springframework</groupId > <artifactId > spring-jdbc</artifactId > <version > 5.3.15</version > </dependency > <dependency > <groupId > org.springframework</groupId > <artifactId > spring-aspects</artifactId > <version > 5.3.15</version > </dependency >
2、Mybatis-Spring-Maven 依赖 1 2 3 4 5 <dependency > <groupId > org.mybatis</groupId > <artifactId > mybatis-spring</artifactId > <version > 2.0.7</version > </dependency >
3、Druid-Maven 依赖 db.properties：
1 2 3 4 5 6 7 driverClassName =com.mysql.cj.jdbc.Driver url =jdbc:mysql://localhost:3306/myblogs?characterEncoding=utf8&useSSL=false user =root password =root initialSize =1 maxActive =50 maxWait =10000
pom.xml：
1 2 3 4 5 <dependency > <groupId > com.alibaba</groupId > <artifactId > druid</artifactId > <version > 1.2.8</version > </dependency >
4、MySQL-Maven 依赖 1 2 3 4 5 <dependency > <groupId > mysql</groupId > <artifactId > mysql-connector-java</artifactId > <version > 8.0.28</version > </dependency >
5、Jackson-Maven 依赖 1 2 3 4 5 <dependency > <groupId > com.fasterxml.jackson.core</groupId > <artifactId > jackson-databind</artifactId > <version > 2.9.1</version > </dependency >
6、FastJSON-Maven依赖 1 2 3 4 5 <dependency > <groupId > com.alibaba</groupId > <artifactId > fastjson</artifactId > <version > 1.2.47</version > </dependency >
7、lombok-Maven依赖 1 2 3 4 5 <dependency > <groupId > org.projectlombok</groupId > <artifactId > lombok</artifactId > <version > 1.18.20</version > </dependency >
8、Servlet-Maven依赖 (1)
1 2 3 4 5 6 7 8 9 10 11 <dependency > <groupId > javax.servlet</groupId > <artifactId > javax.servlet-api</artifactId > <version > 3.0.1</version > </dependency > <dependency > <groupId > javax.servlet.jsp</groupId > <artifactId > jsp-api</artifactId > <version > 2.2</version > </dependency >
(2)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <dependency > <groupId > javax.servlet.jsp.jstl</groupId > <artifactId > jstl-api</artifactId > <version > 1.2</version > <exclusions > <exclusion > <groupId > javax.servlet</groupId > <artifactId > servlet-api</artifactId > </exclusion > <exclusion > <groupId > javax.servlet.jsp</groupId > <artifactId > jsp-api</artifactId > </exclusion > </exclusions > </dependency > <dependency > <groupId > org.glassfish.web</groupId > <artifactId > jstl-impl</artifactId > <version > 1.2</version > <exclusions > <exclusion > <groupId > javax.servlet</groupId > <artifactId > servlet-api</artifactId > </exclusion > <exclusion > <groupId > javax.servlet.jsp</groupId > <artifactId > jsp-api</artifactId > </exclusion > <exclusion > <groupId > javax.servlet.jsp.jstl</groupId > <artifactId > jstl-api</artifactId > </exclusion > </exclusions > </dependency >
9、POI-Maven依赖 操作Office
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <dependency > <groupId > org.apache.poi</groupId > <artifactId > poi-ooxml-schemas</artifactId > <version > 4.1.2</version > </dependency > <dependency > <groupId > org.apache.poi</groupId > <artifactId > poi-ooxml</artifactId > <version > 4.1.2</version > </dependency > <dependency > <groupId > org.apache.poi</groupId > <artifactId > poi</artifactId > <version > 4.1.2</version > </dependency >
10、SpringSecurity-Maven依赖 1 2 3 4 5 6 7 8 9 10 11 <dependency > <groupId > org.springframework.security</groupId > <artifactId > spring-security-web</artifactId > <version > 5.5.1</version > </dependency > <dependency > <groupId > org.springframework.security</groupId > <artifactId > spring-security-config</artifactId > <version > 5.5.1</version > </dependency >
11、日志 1 2 3 4 5 6 7 8 9 10 11 <dependency > <groupId > org.slf4j</groupId > <artifactId > slf4j-api</artifactId > <version > 1.7.30</version > </dependency > <dependency > <groupId > ch.qos.logback</groupId > <artifactId > logback-classic</artifactId > <version > 1.2.3</version > </dependency >
12、Mybatis Plus-maven依赖 1 2 3 4 5 <dependency > <groupId > com.baomidou</groupId > <artifactId > mybatis-plus</artifactId > <version > 3.4.3.4</version > </dependency >
13、SpringBoot 依赖 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 <parent > <groupId > org.springframework.boot</groupId > <artifactId > spring-boot-starter-parent</artifactId > <version > 2.7.3</version > </parent > <dependencies > <dependency > <groupId > org.springframework.boot</groupId > <artifactId > spring-boot-starter</artifactId > </dependency > <dependency > <groupId > org.springframework.boot</groupId > <artifactId > spring-boot-starter-web</artifactId > </dependency > <dependency > <groupId > org.springframework.boot</groupId > <artifactId > spring-boot-devtools</artifactId > <optional > true</optional > </dependency > <dependency > <groupId > org.springframework.boot</groupId > <artifactId > spring-boot-configuration-processor</artifactId > </dependency > </dependencies > <build > <plugins > <plugin > <groupId > org.springframework.boot</groupId > <artifactId > spring-boot-maven-plugin</artifactId > </plugin > </plugins > </build >
三、HTML 1、HTML获取ContextPath 1 2 3 4 5 6 7 function getContextPath ( var pathName = document .location.pathname; var index = pathName.substr(1 ).indexOf("/" ); var result = pathName.substr(0 ,index+1 ); return result; }
2、滑块验证码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 <!DOCTYPE html > <html lang ="zh-cn" > <head > <meta charset ="UTF-8" > <meta name ="viewport" content ="width=device-width, initial-scale=1.0" > <meta http-equiv ="X-UA-Compatible" content ="ie=edge" > <title > 滑块验证码</title > <style > * { margin : 0px ; padding : 0px ; font-family : "微软雅黑" ; } .drag { width : 300px ; height : 40px ; line-height : 40px ; background-color : #e8e8e8 ; position : relative; margin : 0 auto; } .bg { width : 40px ; height : 100% ; position : absolute; background-color : #75CDF9 ; } .text { position : absolute; width : 100% ; height : 100% ; text-align : center; user-select: none; } .btn { width : 40px ; height : 38px ; position : absolute; border : 1px solid #ccc ; cursor : move; font-family : "宋体" ; text-align : center; background-color : #fff ; user-select: none; color : #666 ; } </style > </head > <body > <div class ="drag" > <div class ="bg" > </div > <div class ="text" onselectstart ="return false" > 请拖动滑块解锁</div > <div class ="btn" > > > </div > </div > <script > var $ = function (selector ) return document .querySelector(selector); }, box = $(".drag" ), bg = $(".bg" ), text = $(".text" ), btn = $(".btn" ), success = false , distance = box.offsetWidth - btn.offsetWidth; btn.onmousedown = function (e ) btn.style.transition = "" ; bg.style.transition = "" ; var e = e || window .event; var downX = e.clientX; document .onmousemove = function (e ) var e = e || window .event; var moveX = e.clientX; var offsetX = moveX - downX; if (offsetX > distance) { offsetX = distance; } else if (offsetX < 0 ) { offsetX = 0 ; } btn.style.left = offsetX + "px" ; bg.style.width = offsetX + "px" ; if (offsetX == distance) { text.innerHTML = "验证通过" ; text.style.color = "#fff" ; btn.innerHTML = "√" ; btn.style.color = "green" ; bg.style.backgroundColor = "lightgreen" ; success = true ; btn.onmousedown = null ; document .onmousemove = null ; setTimeout (function ( alert('解锁成功！' ); }, 100 ); } } document .onmouseup = function (e ) if (success) { return ; } else { btn.style.left = 0 ; bg.style.width = 0 ; btn.style.transition = "left 1s ease" ; bg.style.transition = "width 1s ease" ; } document .onmousemove = null ; document .onmouseup = null ; } } </script > </body > </html >
3、富文本编辑器 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 <!DOCTYPE html > <html lang ="zh-cn" > <head > <meta charset ="UTF-8" > <title > 首页</title > <link href ="css/wangedit.css" rel ="stylesheet" > <script src ="js/wangedit.js" > </script > <script src ="js/jquery.js" > </script > <style > #editor —wrapper { margin :50px auto; width :80% ; border : 1px solid #ccc ; z-index : 100 ; } #toolbar-container { border-bottom : 1px solid #ccc ; } #editor-container { height : 400px ; } </style > </head > <body > <h1 > 首页</h1 > <br > <div > 保存博客-按钮</div > <br > <div id ="editor—wrapper" > <div id ="toolbar-container" > </div > <div id ="editor-container" > </div > </div > <script > const { createEditor, createToolbar } = window .wangEditor const editorConfig = { placeholder : '在这里输入...' , onChange (editor ) const html = editor.getHtml(); $.post("/blog/save" ,{ "html" : html, },function (res ) console .log(res); }); } } const editor = createEditor({ selector : '#editor-container' , html : '<p><br></p>' , config : editorConfig, mode : 'simple' , }); const toolbarConfig = {} const toolbar = createToolbar({ editor, selector : '#toolbar-container' , config : toolbarConfig, mode : 'default' , }); </script > </body > </html >
微信订阅号
