开发笔记:
分页的笔记
导入三个坐标:
pom文件加这三个,缺一个都不行
com.github.pagehelper
pagehelper-spring-boot-starter
1.2.5
com.github.pagehelper
pagehelper
5.0.3
com.github.pagehelper
pagehelper-spring-boot-autoconfigure
1.2.5
网页分页的:
利用thymeleaf表达式分页
关于分页静态路径出错的解决方法:
文件上传
第一步表单要加上这个属性: enctype="multipart/form-data"
<input name=”file” type=”file”>
写客户端接收的代码:
@RequestMapping("/blog/add")
public void addBlog( MultipartFile file,Blog blog,HttpServletResponse response) throws IOException {
// *首先校验图片格式
// 获取文件名,带后缀
* String originalFilename = file.getOriginalFilename();
// *获取文件的后缀格式
* String fileSuffix = originalFilename.substring(originalFilename.lastIndexOf(".") + 1).toLowerCase();
// *只有当满足图片格式时才进来,重新赋图片名,防止出现名称重复的情况
* String newFileName = UUID.randomUUID() + originalFilename;
// 该方法返回的为当前项目的工作目录,即在哪个地方启动的java线程
* String dirPath = System.getProperty("user.dir");
String path = File.separator* + "src/main/resources/static/img/boximges" + File.*separator* + newFileName;
File destFile = new File(dirPath + path);
if (!destFile.getParentFile().exists()) {
destFile.getParentFile().mkdirs();
}
try {
file.transferTo(destFile);
// *将相对路径返回给前端
* } catch (IOException e) {
}
String imgpath= "../img/boximges/"+File.*separator* + newFileName;
blog.setImgpath(imgpath);
文件的下载:
/**
* 下载文件
* @param fileId 文件ID
* @param session
* @param request
* @param response
* @return 成功下载文件,失败返回0
* @throws IOException
*/
@RequestMapping("/download.do")
public int downloadFile(Integer fileId, HttpSession session , HttpServletRequest request, HttpServletResponse response) throws IOException {
String filePath="C:\\Users\\李庆\\Desktop\\help\\src\\main\\resources\\static\\s.docx";
File file = new File(filePath);
if(!file.exists()){
System.out.println("Have no such file!");
return 0;//文件不存在就退出方法
}
FileInputStream fileInputStream = new FileInputStream(file);
//设置Http响应头告诉浏览器下载这个附件,下载的文件名也是在这里设置的
response.setHeader("Content-Disposition", "attachment;Filename=" + URLEncoder.encode(file.getName(), "UTF-8"));
OutputStream outputStream = response.getOutputStream();
byte[] bytes = new byte[2048];
int len = 0;
while ((len = fileInputStream.read(bytes))>0){
outputStream.write(bytes,0,len);
}
fileInputStream.close();
outputStream.close();
return 0;
}
拦截器的写法:
/*
** *拦截器
* **/
* @Configuration
public class LoginHandlerInterceptor implements HandlerInterceptor {
//目标方法执行之前
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
Object user = request.getSession().getAttribute(“user”);
if (user == null) {
//未登陆,返回登陆页面
//request.setAttribute("msg", "没有权限请先登陆");
response.sendRedirect("/admin");
return false;
} else {
//已登陆,放行请求
return true;
}
}
加入spring boot
@Configuration
public class Myconfig extends WebMvcConfigurerAdapter {
//所有的WebMvcConfigurerAdapter组件都会一起起作用
@Bean //将组件注册在容器
public WebMvcConfigurerAdapter webMvcConfigurerAdapter(){
WebMvcConfigurerAdapter adapter = new WebMvcConfigurerAdapter() {
//注册拦截器
@Override
public void addInterceptors(InterceptorRegistry registry) {
//super.addInterceptors(registry);
//静态资源; *.css , *.js
//SpringBoot已经做好了静态资源映射
registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/user/*","/title/*")
.excludePathPatterns("/admin","/","/user/login");
}
};
return adapter;
}
}
利用thymeleaf表达式提取公共部分
先在要截取的里面加入 th:fragment="heder"
如何直接引用 th:replace="user/comonm/hoerd::heder"
user/comonm/hoerd: 这个是在那个包下的网页
heder:这个就是我们要截取的
引用thymeleaf表达式
引用thymeleaf表达式转换时间对象的格式:
" ${#dates.format(对象,‘yyyy/MM/dd hh:mm’)}"
配置数据库源:在application文件
spring.datasource.url=jdbc:mysql://localhost:3306/bo
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.thymeleaf.cache=false
pagehelper.helperDialect=mysql
解决spring boot 上传图片不能立即显示的问题:
编写一个配置类
//所有的WebMvcConfigurerAdapter组件都会一起起作用
@Bean //将组件注册在容器
public WebMvcConfigurerAdapter webMvcConfigurerAdapter(){
WebMvcConfigurerAdapter adapter = new WebMvcConfigurerAdapter() {
//注册拦截器
@Override
public void addInterceptors(InterceptorRegistry registry) {
//super.addInterceptors(registry);
//静态资源; *.css , *.js
//SpringBoot已经做好了静态资源映射
registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/user/*","/title/*")
.excludePathPatterns("/admin","/","/user/login");
}
};
return adapter;
}
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
String path = System.getProperty(“user.dir”)+"\src\main\resources\static\img\";
System.out.println(path);
// /images/是对应resource下工程目录
registry.addResourceHandler("/img/").addResourceLocations(“file:”+path);
}
缓存
第一步 导入redis的缓存坐标:
org.springframework.boot spring-boot-starter-data-redis
配置文件:
spring.datasource.url=jdbc:mysql://localhost:3306/spring_cache
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
#驼峰命名规则
mybatis.configuration.map-underscore-to-camel-case=true
#配置redis
spring.redis.host=localhost
第二步:开启缓存注解:@EnableCaching //开启缓存
第三步:
实现简单的缓存技术
一般都是写在serivce层的
// 实现 缓存
@Cacheable(value = “address”,key = “‘R’”)
public Employee getEmployye(Integer id){
System.out.println(“查询员工”+id);
return employeMapper.getEmployeById(id);
}
实现缓存删除(就可以实时更新数据了):
//删除 同时删除缓存
//#id 根据id来删除
@CacheEvict(value = “address”,key = “‘R’”)
public void deleteEmp(Integer id){
employeMapper.deleteEmploye(id);
System.out.println(“删除员工”+id);
}
关于图片显示问题:
写好映射配置类:
//新增加一个类用来添加虚拟路径映射
//路径写在images下最好不然ta不起作用
@Configuration
public class MyPicConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
String path = System.getProperty("user.dir")+"\src\main\resources\static\run\images\";
// /run /images/是对应resource下工程目录
registry.addResourceHandler("/images/").addResourceLocations("file:"+path);
String path1 = System.getProperty("user.dir")+"\src\main\resources\static\run\images\zf\";
// /images/是对应resource下工程目录
registry.addResourceHandler("/zf/").addResourceLocations("file:"+path1);
}
}
异步分页:
js
//当页码加载完成后,调用load方法,发送ajax请求加载数据
load(1,*sid*.value);
var *a*=null;
function load(cid ,rname){
//发送ajax请求,请求route/pageQuery,传递cid
$.post("/userfye",{page:cid,size:rname},function (pb) {
/*
* private int pageNum;
private int pageSize;
private int size;
private int startRow;
private int endRow;
private long total;
private int pages;
*
* */
var lis = "";
var fristPage = '<li style="background-color: white" οnclick="javascipt:load('+1+',\''+rname+'\')">首页</li>';
//计算上一页的页码
var beforeNum = pb.pageNum - 1;
if(beforeNum <= 0){
beforeNum = pb.pages;
}
var beforePage = '<li style="background-color: white" οnclick="javascipt:load('+beforeNum+''+',\''+rname+'\')" class="threeword">上一页</li>';
lis += fristPage;
lis += beforePage;
//1.2 展示分页页码
/*
1.一共展示10个页码,能够达到前5后4的效果
2.如果前边不够5个,后边补齐10个
3.如果后边不足4个,前边补齐10个
private int totalCount; //总记录数
private int totalpace; //总页数
private int cuurentpate; //当前页面
private int paceSieze; //每一页的显示数
*/
// 定义开始位置begin,结束位置 end
var begin; // 开始位置
var end ; // 结束位置
//1.要显示10个页码
if(pb.pages < 10){
//总页码不够10页
begin = 1;
end = pb.pages;
}else{
//总页码超过10页
begin = pb.pageNum - 5 ;
end = pb.pageNum + 4 ;
//2.如果前边不够5个,后边补齐10个
if(begin < 1){
begin = 1;
end = begin + 9;
}
//3.如果后边不足4个,前边补齐10个
if(end > pb.pages){
end = pb.pages;
begin = end - 9 ;
}
}
for (var i = begin; i <= end ; i++) {
var li;
//判断当前页码是否等于i
if(pb.pageNum == i){
li = '<li class="curPage" οnclick="javascipt: load('+i+',\'' +rname+'\';)"><a href="javascript: void(0)">'+i+'</a></li>';
}else{
//创建页码的li
li = '<li style="background-color: white" οnclick="javascipt: load('+i+',\''+rname+'\')"><a href="javascript: void(0)">'+i+'</a></li>';
}
//拼接字符串
lis += li;
}
var a=pb.pageNum+1<=pb.pages?pb.pageNum+1:1;
var pages=pb.pages;
var lastPage = '<li style="background-color: white" class="threeword" οnclick="javascipt: load('+pages+',\''+rname+'\')">末页</li>';
var nextPage = '<li style="background-color: white" class="threeword" οnclick="javascipt: load('+a+',\''+rname+'\')">下一页</li>';
lis += nextPage;
lis += lastPage;
//将lis内容设置到 ul
$("#pageNsum").html(lis);
Css:
Body:
<table id="add-row" class="display table table-striped table-hover" >
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>电子邮箱</th>
<th style="width: 10%">操作</th>
</tr>
</thead>
<tfoot>
<tr>
<th>id</th>
<th>Name</th>
<th>电子邮箱</th>
<th style="width: 10%">操作</th>
</tr>
</tfoot>
<tbody id="trid">
</tbody>
</table>
Mybatis的注解动态开发:
@TableField(exist = false) // 注明非数据库字段属性
@JsonInclude(JsonInclude.Include.NON_EMPTY) 当参数为空不返回
如何在插
@Update("<script>update user set" +
"<if test='name!=null'>name=#{name}</if>" +
"<if test='user_password!=null'>,user_password=#{user_password}</if>" +
"<if test='sex!=null'>,sex=#{sex}</if>" +
"<if test='email!=null'>,email=#{email}</if>" +
"where id=#{id}</script>")
入的数据过后获取id:
INSERT INTO ssm
.application
( name
, size
, platform
, sort_id
, status
, versions
, logo
) VALUES ( ‘LOL’, 20, ‘安卓’, 1, 1, ‘v1.2’, ‘img/logo.png’) ; select @@IDENTITY;
Ssm搭建问题:
https://blog.csdn.net/fairytailrose/article/details/92827017
ssm搭建坐标:
<!-- 统一管理jar包版本 --> <properties> <spring.version>5.0.2.RELEASE</spring.version> <slf4j.version>1.6.6</slf4j.version> <log4j.version>1.2.12</log4j.version> <shiro.version>1.2.3</shiro.version> <mysql.version>8.0.13</mysql.version> <mybatis.version>3.4.5</mybatis.version> <spring.security.version>5.0.1.RELEASE</spring.security.version> </properties> <!-- 锁定jar包版本 --> <dependencyManagement> <dependencies> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-tx</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-test</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>${mybatis.version}</version> </dependency> </dependencies> </dependencyManagement> <!-- 项目依赖jar包 --> <dependencies> <!-- spring --> <dependency> <groupId>org.aspectj</groupId> <artifactId>aspectjweaver</artifactId> <version>1.6.8</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aop</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context-support</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-orm</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-beans</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-core</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-test</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-tx</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.12</version> <scope>test</scope> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>${mysql.version}</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> <scope>provided</scope> </dependency> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>jsp-api</artifactId> <version>2.0</version> <scope>provided</scope> </dependency> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <!-- log start --> <dependency> <groupId>log4j</groupId> <artifactId>log4j</artifactId> <version>${log4j.version}</version> </dependency> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</artifactId> <version>${slf4j.version}</version> </dependency> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-log4j12</artifactId> <version>${slf4j.version}</version> </dependency> <!-- log end --> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>${mybatis.version}</version> </dependency> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>1.3.0</version> </dependency> <dependency> <groupId>c3p0</groupId> <artifactId>c3p0</artifactId> <version>0.9.1.2</version> <type>jar</type> <scope>compile</scope> </dependency> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.1.2</version> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.0.9</version> </dependency> </dependencies>
Spring cloud:
写在实体类的class上 就不用写get和set方法了
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
mybatis-plus的笔记
开发笔记:
分页的笔记
导入三个坐标:
pom文件加这三个,缺一个都不行
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.5</version>
</dependency>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.0.3</version>
</dependency>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-autoconfigure</artifactId>
<version>1.2.5</version>
</dependency>
网页分页的:
利用thymeleaf表达式分页
关于分页静态路径出错的解决方法:
文件上传
第一步表单要加上这个属性: enctype="multipart/form-data"
<input name=”file” type=”file”>
写客户端接收的代码:
@RequestMapping("/blog/add")
public void addBlog( MultipartFile file,Blog blog,HttpServletResponse response) throws IOException {
// *首先校验图片格式
// 获取文件名,带后缀
* String originalFilename = file.getOriginalFilename();
// *获取文件的后缀格式
*
*//* *只有当满足图片格式时才进来,重新赋图片名,防止出现名称重复的情况
* String newFileName = UUID.randomUUID() + originalFilename;
// 该方法返回的为当前项目的工作目录,即在哪个地方启动的java线程
* String dirPath = System.getProperty("user.dir");
String path = File.separator* + "src/main/resources/static/img/boximges" + File.*separator* + newFileName;
File destFile = new File(dirPath + path);
if (!destFile.getParentFile().exists()) {
destFile.getParentFile().mkdirs();
}
try {
file.transferTo(destFile);
*//* *将相对路径返回给前端
* } catch (IOException e) {
}
String imgpath= "../img/boximges/"+File.*separator* + newFileName;
blog.setImgpath(imgpath);
拦截器的写法:
*/**
** *拦截器
* **/
* @Configuration
public class LoginHandlerInterceptor implements HandlerInterceptor {
//目标方法执行之前
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
Object user = request.getSession().getAttribute("user");
if (user == null) {
//未登陆,返回登陆页面
//request.setAttribute("msg", "没有权限请先登陆");
response.sendRedirect("/admin");
return false;
} else {
//已登陆,放行请求
return true;
}
}
加入spring boot
@Configuration
public class Myconfig extends WebMvcConfigurerAdapter {
//所有的WebMvcConfigurerAdapter组件都会一起起作用
@Bean //将组件注册在容器
public WebMvcConfigurerAdapter webMvcConfigurerAdapter(){
WebMvcConfigurerAdapter adapter = new WebMvcConfigurerAdapter() {
//注册拦截器
@Override
public void addInterceptors(InterceptorRegistry registry) {
//super.addInterceptors(registry);
//静态资源; *.css , *.js
//SpringBoot已经做好了静态资源映射
registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/user/*","/title/*")
.excludePathPatterns("/admin","/","/user/login");
}
};
return adapter;
}
}
利用thymeleaf表达式提取公共部分
先在要截取的里面加入 th:fragment="heder"
如何直接引用 th:replace="user/comonm/hoerd::heder"
user/comonm/hoerd: 这个是在那个包下的网页
heder:这个就是我们要截取的
引用thymeleaf表达式
<html xmlns:th="http://www.thymeleaf.org">
引用thymeleaf表达式转换时间对象的格式:
" ${#dates.format(对象,'yyyy/MM/dd hh:mm')}"
配置数据库源:在application文件
spring.datasource.url=jdbc:mysql://localhost:3306/bo
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.thymeleaf.cache=false
pagehelper.helperDialect=mysql
解决spring boot 上传图片不能立即显示的问题:
编写一个配置类
//所有的WebMvcConfigurerAdapter组件都会一起起作用
@Bean //将组件注册在容器
public WebMvcConfigurerAdapter webMvcConfigurerAdapter(){
WebMvcConfigurerAdapter adapter = new WebMvcConfigurerAdapter() {
//注册拦截器
@Override
public void addInterceptors(InterceptorRegistry registry) {
//super.addInterceptors(registry);
//静态资源; *.css , *.js
//SpringBoot已经做好了静态资源映射
registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/user/*","/title/*")
.excludePathPatterns("/admin","/","/user/login");
}
};
return adapter;
}
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
String path = System.getProperty("user.dir")+"\src\main\resources\static\img\";
System.out.println(path);
// /images/是对应resource下工程目录
registry.addResourceHandler("/img/").addResourceLocations("file:"+path);
}
缓存
第一步 导入redis的缓存坐标:
<!--导入redis的坐标-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
配置文件:
spring.datasource.url=jdbc:mysql://localhost:3306/spring_cache
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
#驼峰命名规则
mybatis.configuration.map-underscore-to-camel-case=true
#配置redis
spring.redis.host=localhost
第二步:开启缓存注解:@EnableCaching //开启缓存
第三步:
实现简单的缓存技术
一般都是写在serivce层的
// 实现 缓存
@Cacheable(value = "address",key = "'R'")
public Employee getEmployye(Integer id){
System.out.println("查询员工"+id);
return employeMapper.getEmployeById(id);
}
实现缓存删除(就可以实时更新数据了):
//删除 同时删除缓存
//#id 根据id来删除
@CacheEvict(value = "address",key = "'R'")
public void deleteEmp(Integer id){
employeMapper.deleteEmploye(id);
System.out.println("删除员工"+id);
}
关于图片显示问题:
写好映射配置类:
//新增加一个类用来添加虚拟路径映射
@Configuration
public class MyPicConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
String path = System.getProperty("user.dir")+"\src\main\resources\static\run\images\";
// /run /images/是对应resource下工程目录
registry.addResourceHandler("/images/").addResourceLocations("file:"+path);
String path1 = System.getProperty("user.dir")+"\src\main\resources\static\run\images\zf\";
// /images/是对应resource下工程目录
registry.addResourceHandler("/zf/").addResourceLocations("file:"+path1);
}
}
异步分页:
js
//当页码加载完成后,调用load方法,发送ajax请求加载数据
load(1,*sid*.value);
var *a*=null;
function load(cid ,rname){
//发送ajax请求,请求route/pageQuery,传递cid
$.post("/userfye",{page:cid,size:rname},function (pb) {
/*
* private int pageNum;
private int pageSize;
private int size;
private int startRow;
private int endRow;
private long total;
private int pages;
*
* */
var lis = “”;
var fristPage = ‘
- 首页
- ’;
//计算上一页的页码
var beforeNum = pb.pageNum - 1;
if(beforeNum <= 0){
beforeNum = pb.pages;
}var beforePage = ‘
- 上一页
- ’;
lis += fristPage;
lis += beforePage;
//1.2 展示分页页码
/*
1.一共展示10个页码,能够达到前5后4的效果
2.如果前边不够5个,后边补齐10个
3.如果后边不足4个,前边补齐10个
private int totalCount; //总记录数
private int totalpace; //总页数
private int cuurentpate; //当前页面
private int paceSieze; //每一页的显示数*/
// 定义开始位置begin,结束位置 end
var begin; // 开始位置
var end ; // 结束位置//1.要显示10个页码
if(pb.pages < 10){
//总页码不够10页begin = 1; end = pb.pages;
}else{
//总页码超过10页begin = pb.pageNum - 5 ; end = pb.pageNum + 4 ; //2.如果前边不够5个,后边补齐10个 if(begin < 1){ begin = 1; end = begin + 9; } //3.如果后边不足4个,前边补齐10个 if(end > pb.pages){ end = pb.pages; begin = end - 9 ; }
}
for (var i = begin; i <= end ; i++) {
var li;
//判断当前页码是否等于i
if(pb.pageNum == i){li = '<li class="curPage" onclick="javascipt: load('+i+',\'' +rname+'\';)"><a href="javascript: void(0)">'+i+'</a></li>'; }else{ //创建页码的li li = '<li style="background-color: white" onclick="javascipt: load('+i+',\''+rname+'\')"><a href="javascript: void(0)">'+i+'</a></li>'; } //拼接字符串 lis += li;
}
var a=pb.pageNum+1<=pb.pages?pb.pageNum+1:1;
var pages=pb.pages;
var lastPage = ‘ - 末页
- ’;
var nextPage = ‘ - 下一页
- ’;
lis += nextPage;
lis += lastPage;//将lis内容设置到 ul
$("#pageNsum").html(lis);Css:
Body:
<table id="add-row" class="display table table-striped table-hover" > <thead> <tr> <th>id</th> <th>Name</th> <th>电子邮箱</th> <th style="width: 10%">操作</th> </tr> </thead> <tfoot> <tr> <th>id</th> <th>Name</th> <th>电子邮箱</th> <th style="width: 10%">操作</th> </tr> </tfoot> <tbody id="trid"> </tbody> </table>
Mybatis的注解动态开发:
@Update(“”)
如何在插入的数据过后获取id:
INSERT INTO
ssm
.application
(name
,size
,platform
,sort_id
,status
,versions
,logo
) VALUES ( ‘LOL’, 20, ‘安卓’, 1, 1, ‘v1.2’, ‘img/logo.png’) ; select @@IDENTITY;Ssm搭建问题:
https://blog.csdn.net/fairytailrose/article/details/92827017
ssm搭建坐标:
Spring cloud:
写在实体类的class上 就不用写get和set方法了
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;@Data
@AllArgsConstructor
@NoArgsConstructormybatis-plus的笔记
maven的坐标:
<dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-generator</artifactId> <version>3.4.0</version> </dependency> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.4.0</version> </dependency>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JgDceTeG-1612766670158)(image-20210103085534422.png)]
代码生成的器的代码:
package com.mybatis_puls.demo; import com.baomidou.mybatisplus.annotation.DbType; import com.baomidou.mybatisplus.annotation.FieldFill; import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.generator.AutoGenerator; import com.baomidou.mybatisplus.generator.config.DataSourceConfig; import com.baomidou.mybatisplus.generator.config.GlobalConfig; import com.baomidou.mybatisplus.generator.config.PackageConfig; import com.baomidou.mybatisplus.generator.config.StrategyConfig; import com.baomidou.mybatisplus.generator.config.po.TableFill; import com.baomidou.mybatisplus.generator.config.rules.DateType; import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy; import java.io.FileFilter; import java.util.ArrayList; //代码自动生成器/**/ public class Geenter { public static void main(String[] args) { //需要构建一个 代码自动生产器 对象 AutoGenerator mpg = new AutoGenerator(); //配置策略 //1.全局配置 GlobalConfig gc=new GlobalConfig(); //获取系统的当前路径 Object property = System.getProperty("user.dir"); gc.setOutputDir(property+"/src/main/java"); gc.setAuthor("小🌤"); //作者注释 gc.setOpen(false);//打开文件管理器 gc.setFileOverride(false);//是否覆盖 gc.setServiceName("%sService");//取掉后zhui gc.setIdType(IdType.ID_WORKER); gc.setDateType(DateType.ONLY_DATE); gc.setSwagger2(true); mpg.setGlobalConfig(gc); //配置数据源 DataSourceConfig ds = new DataSourceConfig(); ds.setUrl("jdbc:mysql://127.0.0.1:3306/help-xiao?serverTimezone=UTC&useUnicode=true&characterEncoding=utf8&useSSL=true"); ds.setDriverName("com.mysql.cj.jdbc.Driver"); ds.setUsername("root"); ds.setPassword("root"); ds.setDbType(DbType.MYSQL); mpg.setDataSource(ds); //包的配置 PackageConfig pc=new PackageConfig(); pc.setParent("com.mybatis_puls.demo"); pc.setEntity("entity"); pc.setMapper("mapper"); pc.setService("service"); pc.setController("controller"); mpg.setPackageInfo(pc); //策略配置 StrategyConfig strategy = new StrategyConfig(); strategy.setInclude("carousel"); //设置要映射的表名 strategy.setNaming(NamingStrategy.underline_to_camel); //驼峰命名 strategy.setColumnNaming(NamingStrategy.underline_to_camel); strategy.setEntityLombokModel(true); //自动Lombok //配置逻辑删除 strategy.setLogicDeleteFieldName("deleted"); /* //自动填充配置 TableFill createTime = new TableFill("createTime", FieldFill.INSERT); TableFill updateTime = new TableFill("updateTime", FieldFill.INSERT_UPDATE); ArrayList<TableFill> list = new ArrayList<>(); list.add(createTime);list.add(updateTime); strategy.setTableFillList(list); */ /* //乐观锁配置 strategy.setVersionFieldName("version");*/ strategy.setRestControllerStyle(true); mpg.setStrategy(strategy); mpg.execute();//执行 } }
数据的导出excel格式:
maven坐标:
<dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</artifactId> <version>2.2.4</version> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>3.15</version> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml-schemas</artifactId> <version>3.15</version> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>3.15</version> </dependency>
自定义的导出工具类:
public class ExceUtil { /** * * @param filename 文件名 * @param response 响应对象 */ public static void out(String filename, HttpServletResponse response){ try { filename = URLEncoder.encode(filename,"utf-8"); } catch (UnsupportedEncodingException e) { System.out.println("字符串异常"); } //response为HttpServletResponse对象 response.setContentType("application/vnd.ms-excel;charset=utf-8"); //test.xls是弹出下载对话框的文件名,不能为中文,中文请自行编码 response.setHeader("Content-Disposition","attachment;filename="+filename+".xlsx"); } } 及其使用: ExceUtil.out("地址信息导出", response); EasyExcel.write(response.getOutputStream(), AddressEntity.class).sheet("地址信息导出信息").doWrite(list); sheet("模板名") dowrite(数据集合)
实体类的注解编写:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-weNuC6hn-1612766670162)(image/image-20210113173858899.png)]
关于vue前端接收:
/* 导出 */ daochu(id){ var ids = id ? [id] : this.dataListSelections.map(item => { return item.id }) window.location.href=this.$http.adornUrl('/help/address/updaloa?ids='+ids); }
支付宝的授权登录:
maven的坐标:
<!-- https://mvnrepository.com/artifact/com.alipay.sdk/alipay-sdk-java --> <dependency> <groupId>com.alipay.sdk</groupId> <artifactId>alipay-sdk-java</artifactId> <version>4.11.8.ALL</version> </dependency>
/** * * auth_code */ @RequestMapping("/sys/auth_code") public void auth_code(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { //获取支付宝的auth_code String auth_code=request.getParameter("auth_code"); //支付宝公钥 String Public_key="MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAwJG9HZza3U/tPVnkNLco0OjCV9fR1WMSwedHTR3gsQ5AhrjE5Ep61c0JMO1CTCG7cP6Imx5bUvsDy98JFEgh1jFg51mwaUQqda0svroP0I13DOsSQNNRnvofKprr2wHCphYwpem9Y0NDssSy3Jzlt+5005a2NSyyakU8+a7EFBn/yMg3r7/HtdwMCcj3sZBYpFj8UZc3ekTG9x+yQPeUm/nGWGxqd9DySun6U/5EcIlVMW+FIuUM7QZ6jSLl1ypLBIgWFFuYgyFqqrvHxB261nFRck+rdRBKx+mKNdyXwrkwqxrjQTzBK5bHvoEIcexWjtUkmVqCsQMcKq8EBXXLtwIDAQAB"; //私钥 String Private_key="MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQCzDlYVUrtuGRtc6ZBeAVbc3obINMG7n2+8zM91CojBduweeaFPOOpsAP721pHeUivf29KApQPao1nMaJ9xONVkA1p488T7q31Q+TOWiDcnSK/5vBffPfeJO4D93AN473bto4nVK6lpK7ZGizzzaHu1ESwiK1fueC8Ji/Sva9Jqsyon2f47KEofDag/UTHnbtFqzc12hW6hD7RWDHLgX6aPlZaf4+hQUPeBp8VPydh9XdSAb5JEBaZE3X0/N17lNYg/Y2dW6xSbcDNML7qX7Ikw11nOeGR2J8nX5Q57rd+mNjsz0fAPrHUw34CteS90UkPcqp3c9JFrXhebihbM/Pl1AgMBAAECggEAH5jfDgI8exBJKNs6k6wu1Okb5caRjXd0M1/9GA1U1rcSscoK8jz7+TUvyQVSVmYvweA7xGHaTUHYPd8Ui9lYpr6Ev6Vc1ICNq7VeKik9elw0WaCcodOAlCIBAEtL/ZJcbVEXqJt82MdS8h3uEpIUin5OSHVXnghtXITrF+2yAwvweu7WU9+QuFP3IqhkJzkOIoJV/pZfCdwssc3PTyvaq/wGI47dd08uNmUncLKuaebZ6i1R7L3QEG+cFQVaoDjoBuSatY7ZYnJZj5vi+bZRIIXEYYGrSDzREQmISbdkqjD8HggNJkLSw+/4xWU5pGxtjMIucflB3wM5A9DfMWdS4QKBgQD36ig/W0VyXsffybzzyP+gvIPepvbNbZV/mIWqCupv6td6cnTyT1z+Xu00/puR06r+exBJdwZCkBM0SPyUdl7tShtZg6ynlym2KCCKVBZeEyCFZQWOQdefkTON8W93QbZDX1pGyLIf1SaHU3DCeXrXpR/Fwm/fqECP3O1TZwwciQKBgQC45UbvUGHjjUGzJqGd6Kl3Nwh3XjEdSfwWGtyf3Gel0BdWKQdBIOzEe+2AcvUNeSvP3drMtNTITsYRV8WzT3t3hfJgE/qDvlq4goZawJv/zMnHsy6CIoOJFjmV5UA8kq7M7jUjqK+JP/KwOqqoZmXHQddoP4kw/hU6jmziKSqyjQKBgQDRXDRq9LgcEsC2U1a3hYmjAzBV6ihIaX+zxmkypY8/vlIEPP5X1v/QbPfjJhTYvKkNyX2CnPpzYdpl8DElayVVPJ0GJjW7PePiydZZGxPclEiFfj+H2ECwp12jRD3+t0aldLP3TOtoCIhGBggWo6JC1FaVmlMBzMPg+hCNu1s2CQKBgCuYvFIfdQVvwEca287dFmBq1I844YHTeSJJMS5sjO/3EhmZ0QEVX16xDf5UnN2Rbbg0yqusE+QrVt6uAIrYOfej2NO4wkAgOUn6VO2/LslxIz74TAYZV0SSvf9PMAdYWuktXdBLrSBCuNm+65CLnIIQT1dga9vmfWDyRlBJfqzdAoGBAM80yRl060GKcNQ/8KIVGUi2ODK3wJfw2c7aVmt5oNBKNvB40bOsdBdjEDqMu0xJ/ojRjCsIDp/fYQjwUz4CIPvq7cFtxnpBFA1xCM1sprpHQHh9zHNylxJdciXwD1Uyd6ItFAqwFld10p9mBuAyD15dxs5/LP1QH2GS8ObLd+/j"; AlipayClient alipayClient = new DefaultAlipayClient("https://openapi.alipay.com/gateway.do", "2017112600190731", Private_key, "json", "gbk", Public_key, "RSA2"); AlipaySystemOauthTokenRequest request1 = new AlipaySystemOauthTokenRequest(); request1.setCode(auth_code); request1.setGrantType("authorization_code"); try { //获取支付宝的个人userid AlipaySystemOauthTokenResponse execute = alipayClient.execute(request1); System.out.println(execute.getUserId()+"******"); request.getServletContext().setAttribute("userId",execute.getUserId()); } catch (AlipayApiException e) { } response.sendRedirect("http://192.168.0.107:8880/#/login?code=1"); }
oss的图片存储:
支付宝的创建oss的项目
配置 跨域
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YwBjg1zA-1612766670166)(image/image-20210115143758068.png)]
首页的静态
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ReDtVWg3-1612766670167)(image/image-20210115143822520.png)]
创建子账号 :…
项目的配置
maven的坐标:
<dependency> <groupId>com.alipay.sdk</groupId> <artifactId>alipay-sdk-java</artifactId> <version>4.11.8.ALL</version> </dependency> <!--oss文件上传图片--> <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>spring-cloud-starter-alicloud-oss</artifactId> </dependency>
配置文件:
spring: cloud: alicloud: access-key: LTAI4G6xrsBMiiWNhyRn8ZyU secret-key: z2pzw1Q01r9hoD6VCIGjGoJhIx20Hg oss: endpoint: oss-cn-beijing.aliyuncs.com bucket: help-xiao
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CU53XMRr-1612766670167)(image/image-20210115144208078.png)]
视图控制器的编写:
@RestController @RequestMapping("/help/img") public class OssController { @Value("${spring.cloud.alicloud.oss.endpoint}") private String endpoint; @Value("${spring.cloud.alicloud.oss.bucket}") private String bucket; @Value("${spring.cloud.alicloud.access-key}") private String accessKeyId; @Value("${spring.cloud.alicloud.secret-key}") private String accessKeySecret; @Value("${spring.cloud.alicloud.access-key}") private String accessId; //获取签名 @RequestMapping("/oss") public R policy() { String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date()); String dir = format + "/"; // 用户上传文件时指定的前缀。 // 创建OSSClient实例。 OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret); Map<String, String> respMap = null; try { long expireTime = 30; long expireEndTime = System.currentTimeMillis() + expireTime * 1000; Date expiration = new Date(expireEndTime); PolicyConditions policyConds = new PolicyConditions(); policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000); policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir); String postPolicy = ossClient.generatePostPolicy(expiration, policyConds); byte[] binaryData = postPolicy.getBytes("utf-8"); String encodedPolicy = BinaryUtil.toBase64String(binaryData); String postSignature = ossClient.calculatePostSignature(postPolicy); respMap = new LinkedHashMap<String, String>(); respMap.put("accessid", accessId); respMap.put("policy", encodedPolicy); respMap.put("signature", postSignature); respMap.put("dir", dir); respMap.put("host", host); respMap.put("expire", String.valueOf(expireEndTime / 1000)); } catch (Exception e) { // Assert.fail(e.getMessage()); System.out.println(e.getMessage()); }finally { ossClient.shutdown(); } return R.ok().put("data",respMap); } }
服务器部署笔记部分
前端打包经常遇到的问题:
配置Node的版本和gulp版本匹配
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BHvFdWhN-1612766670169)(images/image-20210208144141125.png)]
安装sass的依赖包
npm install --save-dev sass-loader
前端服务器部署nginx部署vue
下载nginx
1.前置条件 yum -y install pcre-devel openssl openssl-devel (可以先无脑安装,也可得后续步骤出现异常再针对性安装) 2.拉取最新的Nginx版本: wget http://nginx.org/download/nginx-1.17.7.tar.gz 注:可通过网站http://nginx.org/download/查看最新Nginx版本 3.解压缩 tar -zxvf nginx-1.17.7.tar.gz 4.编译、安装nginx a>、cd nginx-1.17.7 b>、./configure --prefix=/opt/nginx-1.17.7/ 指定安装的目录,这里有解释为什么我选择安装在opt目录(https://blog.csdn.net/zsg88/article/details/75209319)感谢! 注:目标目录nginx-1.17.7要提前建好,且在执行改命令时出现异常,请执行步骤一 c>、make d>、make install e>、/opt/nginx-1.17.7/sbin/nginx -t 查看是否正确安装 9291cfef938639c9d336d9627742a64e.png 5.启动 /opt/nginx-1.17.7/sbin/nginx 6.停止 a>、 nginx.exe -s stop b>、 nginx.exe -s quit 注:stop是快速停止nginx,可能并不保存相关信息;quit是完整有序的停止nginx,并保存相关信息。 7. 重新载入Nginx 1. nginx.exe -s reload ######## 进入配置 cd /opt/nginx-1.17.7/conf 配置 nginx的vue指向 server { listen 8090;#端口号,按自己喜好 root "~/websites/";#改为你dist文件夹的绝对路径,比如:/home/web/websites/mysite/dist/ location / { # root html; index index.html index.htm; # 默认加载的文件名 } }
配置vue打包环境:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q7U06FrM-1612766670171)(images/image-20210208143938225.png)]