springBoot+vue

springBoot+vue

创建springboot项目

配置文件

server:
  port: 8081

mybatis:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  mapper-locations: mapper/*.xml

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/kj08?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone = GMT
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: 9320
pagehelper:
  reasonable: true //分页合理化 不然pagenum的0和1 会是一个

简单使用分页助手

引入依赖

<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.4.1</version>
</dependency>

在controller中调用

PageHelper.startPage(1, 5);
 return PageInfo.of(xxx.findAll());
 pageNum= pageNum<1?1:pageNum;
    PageHelper.startPage(pageNum, pageSize);
    PageInfo<EdocView> of = PageInfo.of(edocViewService.queryAll());
    pageNum=pageNum>of.getPages()?of.getPages():pageNum;
    PageHelper.startPage(pageNum, pageSize);
    return PageInfo.of(edocViewService.queryAll());

pageInfo相关参数

//当前页
private int pageNum;
//每页的数量
private int pageSize;
//当前页的数量
private int size;
//由于startRow和endRow不常用，这里说个具体的用法
//可以在页面中"显示startRow到endRow 共size条数据"
//当前页面第一个元素在数据库中的行号
private int startRow;
//当前页面最后一个元素在数据库中的行号
private int endRow;
//总记录数
private long total;
//总页数
private int pages;
//结果集(每页显示的数据)
private List<T> list;
//第一页
private int firstPage;
//前一页
private int prePage;
//下一页
private int nextPage;
//是否为第一页
private boolean isFirstPage = false;
//是否为最后一页
private boolean isLastPage = false;
//是否有前一页
private boolean hasPreviousPage = false;
//是否有下一页
private boolean hasNextPage = false;
//导航页码数
private int navigatePages;
//所有导航页号
private int[] navigatepageNums;

其他注意事项

mapper 上加@mapper和@@Repository

service加@Service@Transactional

在controller上加@RestController@CrossOrigin

pojo类的相关date类型属性上加

//格式化controller输入的格式
@DateTimeFormat(pattern = "yyyy-MM-dd")
//格式化controller输出的格式
@JsonFormat(pattern = "yyyy-MM-dd")

@CrossOrigin(解决跨域问题)

1、跨域

指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

2、同源策略

是指协议，域名，端口都要相同，其中有一个不同都会产生跨域，在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

3、后台解决

在controller上加@CrossOrigin

创建vue项目

1. 建一个文件夹
2. 用idea打开它
3. 点击左下角的Terminal
4. 输入命令 vue create 项目名(出来选项不要选default 选最后一个实在不行管理员身份运行)
5. 按空格把router选上把Linter、formatter去掉
6. 一直回车到save this a preSet…(y/n)的你写个n。回车
7. cd 项目根目录
8. npm install axios --save
9. 在页面的script里面import axios from ‘axios’

主意要在appvue里加