SpringBoot+MybatisPlus+Vue项目（二）：前端接受后端数据

---

SpringBoot导入依赖

1. pom.xml：除了创建项目时勾选的web依赖还需要导入

<!-- Druid -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.2.1</version>
        </dependency>

        <!--lombok-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

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

        <!--thymeleaf-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <!--log4j -->
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
            <version>1.2.17</version>
        </dependency>

2. Druid 数据库配置文件：application.yaml

spring:
  datasource:
    username: root
    password: 123456
    url: jdbc:mysql://localhost:3306/project?serverTimezone=UTC&useUnicode=true&characterEncoding=utf8&useSSL=false
    driver-class-name: com.mysql.cj.jdbc.Driver
    type: com.alibaba.druid.pool.DruidDataSource
    #Spring Boot 默认是不注入这些属性值的，需要自己绑定
    #druid 数据源专有配置
    initialSize: 5
    minIdle: 5
    maxActive: 20
    maxWait: 60000
    timeBetweenEvictionRunsMillis: 60000
    minEvictableIdleTimeMillis: 300000
    validationQuery: SELECT 1 FROM DUAL
    testWhileIdle: true
    testOnBorrow: false
    testOnReturn: false
    poolPreparedStatements: true

    #配置监控统计拦截的filters，stat:监控统计、log4j：日志记录、wall：防御sql注入
    #如果允许时报错  java.lang.ClassNotFoundException: org.apache.log4j.Priority
    #则导入 log4j 依赖即可，Maven 地址：https://mvnrepository.com/artifact/log4j/log4j
    filters: stat,wall,log4j
    maxPoolPreparedStatementPerConnectionSize: 20
    useGlobalDataSourceStat: true
    connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=500

3. Druid配置文件生效：DruidConfig .java

@Configuration
public class DruidConfig {

    @ConfigurationProperties(prefix = "spring.datasource")
    @Bean
    public DataSource druidDataSource(){
        return new DruidDataSource();
    }


    //后台监控：web.xml   ServletRegistrationBean
    @Bean
    public ServletRegistrationBean statViewServlet(){
        ServletRegistrationBean<StatViewServlet> bean = new ServletRegistrationBean<>(new StatViewServlet(), "/druid/*");

        //后台需要有人登录，账号密码配置
        HashMap<String, String> initParameters = new HashMap<>();

        //增加配置
        initParameters.put("loginUsername","admin");//key固定
        initParameters.put("loginPassword","123456");

        //允许谁可以访问
        initParameters.put("allow","");//第二个参数表示可以允许的用户，不填表示都可以访问
        //禁止谁能访问   initParameters.put("","","");参数表示禁止的用户

        //设置初始化参数
        bean.setInitParameters(initParameters);
        return bean;
    }

    //过滤器
    @Bean
    public FilterRegistrationBean webStatFilter(){
        FilterRegistrationBean bean = new FilterRegistrationBean();
        bean.setFilter(new WebStatFilter());
        //可以过滤哪些请求
        HashMap<String, String> initParameters = new HashMap<>();

        //这些东西不进行统计
        initParameters.put("exclusions","*.js,*.css,/druid/*");

        bean.setInitParameters(initParameters);
        return bean;
    }
}

后端传递数据

1. 配置接口的跨域请求配置类，允许外部调用：CrosConfig.java

@Configuration
public class CrosConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

2. 数据库创建表，并插入四条数据

CREATE TABLE `people` (
`id`  int(10) NOT NULL AUTO_INCREMENT ,
`name`  varchar(20) NOT NULL ,
`sex`  varchar(5) NOT NULL ,
`age`  int(3) NOT NULL ,
`tel`  varchar(15) NOT NULL ,
PRIMARY KEY (`id`)
);

INSERT INTO people(name,sex,age,tel) VALUES('张三','男',18,'18711102220');
INSERT INTO people(name,sex,age,tel) VALUES('李四','男',20,'16711102220');
INSERT INTO people(name,sex,age,tel) VALUES('小红','女',18,'17711102220');
INSERT INTO people(name,sex,age,tel) VALUES('杜鹃','女',18,'15811102220');

3. 创建表对应的实体类

@Data
public class People {
    @TableId(type = IdType.AUTO)
    private int id;
    private String name;
    private String sex;
    private int age;
    private String tel;
}

4. 创建对应的dao接口

@Repository
@Mapper
public interface PeopleMapper extends BaseMapper<People> {
}

5. 创建传递数据的controller

@RestController
public class PeopleController {
    
    @Autowired
    PeopleMapper peopleMapper;
    
    @RequestMapping("/people/list")
    public List<People> allPeople(){
        return peopleMapper.selectList(null);
    }
}

6. 启动springboot，并访问/people/list，后端完成
   

前端接受数据

1. 创建一个人员信息表界面

<template>
    <el-table
            :data="tableData"
            border
            style="width: 70%">
        <el-table-column
                fixed
                prop="id"
                label="编号"
                width="150">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="120">
        </el-table-column>
        <el-table-column
                prop="sex"
                label="性别"
                width="120">
        </el-table-column>
        <el-table-column
                prop="age"
                label="年龄"
                width="120">
        </el-table-column>
        <el-table-column
                prop="tel"
                label="联系方式"
                width="300">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        name: 'PeopleTable',
        data() {
            return {
                tableData: [
                    {
                    id: 1,
                    name: '王小虎',
                    sex: '男',
                    age: 18,
                    tel: '18166775544'
                    },
                ]
            }
        },
        beforeRouteEnter: (to,from,next)=>{
            console.log("进入路由之前");
            next(vm => {
                //进入路由之前拿到数据
                vm.getData();
            });
        },
        methods:{
            handleClick(row) {
                console.log(row);
            },
            getData: function () {
                this.axios({
                    method: 'get',
                    url: 'http://localhost:8181/people/list/'
                }).then((response)=> {
                    console.log(response);
                    this.tableData = response.data;
                    console.log(response.data);
                });
            }
        }
    }
</script>

<style scoped>

</style>

2. 配置好相应的路由
3. 在上面的代码中有定义beforeRouteEnter钩子函数，在进入路由之前会调用路由函数，路由函数中调用了getData方法，而getData方法是从我们后端拿数据，并把数据赋值给tableData。
4. 测试：成功拿到数据