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

跨域问题的解决
新建一个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

<script src="layui/jquery-1.8.3.min.js"></script>

<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 = {
                    title: {
                        text: '第一个 ECharts 实例'
                    },
                    tooltip: {},
                    legend: {
                        data:['销量']
                    },
                    xAxis: {
                        data: data.names
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: data.values
                    }]
                };// 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        })
    })
</script>

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <script src="layui/jquery-1.8.3.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<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地址全部改为服务端地址

<script type="text/javascript">
    $(function () {
        $.ajax({
            "url":"http://106.14.223.42:8082/bar",
            "type":"POST",
            "success":function (data) {

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