Spring Boot+Layui 前后端分离项目——跨域——ajax——mybatis-plus分页插件——ECharts——部署_springboot la

网络 02-07 4369

跨域问题的解决新建一个config类

import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class crossconfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**").allowedOriginPatterns("*") .allowedMethods("GET", "HEAD", "POST","PUT", "DELETE", "OPTIONS") .allowCredentials(true).maxAge(3600); } }

mybatis-plus最新版分页插件的使用（！！！！最新版） mybatis-plus依赖

<dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.4.0</version> </dependency>

新建一个config类

import com.baomidou.mybatisplus.annotation.DbType; import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor; @Configuration public class fenyeconfig { // 最新版 @Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor(); PaginationInnerInterceptor paginationInnerInterceptor = new PaginationInnerInterceptor(); paginationInnerInterceptor.setDbType(DbType.MYSQL); paginationInnerInterceptor.setOverflow(true); interceptor.addInnerInterceptor(paginationInnerInterceptor); return interceptor; } }

service层

@Override public DataVo<productVo> finddata(int page,int limit) { DataVo dataVo = new DataVo(); dataVo.setCode(0); dataVo.setMsg(""); dataVo.setCount(productMapper.selectCount(null)); //分页 IPage<Product> page1 = new Page<>(page,limit); IPage<Product> result = productMapper.selectPage(page1, null); List<Product> productList = result.getRecords(); List<productVo> productVoList = new ArrayList<>(); for (Product product : productList) { productVo productVo = new productVo(); BeanUtils.copyProperties(product,productVo); QueryWrapper wrapper = new QueryWrapper(); wrapper.eq("id",product.getCategoryleveloneId()); if(productCategoryMapper.selectOne(wrapper)!=null) productVo.setCategoryleveloneId(productCategoryMapper.selectOne(wrapper).getName()); QueryWrapper wrapper1 = new QueryWrapper(); wrapper1.eq("id",product.getCategoryleveltwoId()); if(productCategoryMapper.selectOne(wrapper1)!=null) productVo.setCategoryleveltwoId(productCategoryMapper.selectOne(wrapper1).getName()); QueryWrapper wrapper2 = new QueryWrapper(); wrapper2.eq("id",product.getCategorylevelthreeId()); if(productCategoryMapper.selectOne(wrapper2)!=null) productVo.setCategorylevelthreeId(productCategoryMapper.selectOne(wrapper2).getName()); productVoList.add(productVo); } dataVo.setData(productVoList); return dataVo; }

controller层

@RequestMapping("/list") public DataVo list(int page,int limit){ return productService.finddata(page,limit); }

ajax的格式先引入js

图形化界面ECharts的使用官网链接引入 ECharts

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title> <script src="layui/jquery-1.8.3.min.js"></script>  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body>  <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> $(function () { $.ajax({ "url":"http://localhost:8080/bar", "type":"POST", "success":function (data) { //console.log(data) // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option }) }) </script> </body> </html>

前后端分离项目部署 1、修改springboot项目的配置文件application.yml 把数据库账号和密码还有地址改为服务端的数据库端口号不要为8080，会被占用！！！

spring: datasource: username: mmall password: iGadN7NNiDehS2tG #?serverTimezone=UTC解决时区的报错 url: jdbc:mysql://106.14.223.42:3306/mmall?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=UTC driver-class-name: com.mysql.cj.jdbc.Driver server: port: 8082

改完之后先在本地测试一下是否连接上成功之后再上传到linux 2、把前端页面的ajax的url地址全部改为服务端地址

在本地测试一下是否能够使用接口成功之后再把前端文件上传的Linux的tomcat目录下的webapps下，然后启动tomcat，再去启动springboot项目。