SpringBoot+MyBatisPlus+Vue (单表增删改查)

1、创建vue项目

         a.找到创建项目的工作空间

         b.使用命令创建vue项目

         选择模板

         选择需要的插件

        选择vue的版本

        以后的选项直接选择 y 点击enter键即可

        d.将这个项目导入到对应开发工具里面 步骤略

        启动项目即可

2、安装插件

        a.安装ui插件

npm i element-ui -S

         b.使用ui

在main.js里面使用ui

         c.安装axios

前后台交互的

npm i axios

 1.将axios注册成全局变量

        d.安装qs

发出post请求的时候对我们的数据进行处理

把传递到后台的数据作为参数拼接到路径的后面 ？username=xxx&password=1234&...

npm i qs

3、创建vue组件进行访问

        a.创建组件

 组件的内容 略 官网复制的

        b.给组件一个路由

        c.访问一下这个组件

 4、和后台进行交互

        a.创建后端项目

创建springboot项目 创建过程略

 

 选择springboot的版本号

         b.整合mp

     1.加jar

pom文件

<!--手动加 jar 包-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.1</version>
        </dependency>
 
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.4.1</version>
        </dependency>
        <dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity-engine-core</artifactId>
            <version>2.2</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

 编写配置文件 application.properties

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/yfbank?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
spring.datasource.username=root
spring.datasource.password=lhf@123
# 时间
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8
spring.jackson.serialization.write-date-keys-as-timestamps=false
#logging.level.com.baomidou.ant.test.dao=debug
#mybatis-plus _ U
mybatis-plus.configuration.map-underscore-to-camel-case=true 
# 日志的输出
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
# 设置mapper文件的位置
mybatis-plus.mapper-locations=classpath:/mapper/*.xml
# 逻辑删除   删除之前的值是1 之后是2
# 1 代表的是正常的数据
mybatis-plus.global-config.db-config.logic-not-delete-value=1
# 2 代表的是删除掉的数据
mybatis-plus.global-config.db-config.logic-delete-value=2
server.port=9999

使用代码生成工具生成代码

/**
     * <p>
     * 读取控制台内容
     * </p>
     */
    public static String scanner(String tip) {
        Scanner scanner = new Scanner(System.in);
        StringBuilder help = new StringBuilder();
        help.append("请输入" + tip + "：");
        System.out.println(help.toString());
        if (scanner.hasNext()) {
            String ipt = scanner.next();
            if (StringUtils.isNotBlank(ipt)) {
                return ipt;
            }
        }
        throw new MybatisPlusException("请输入正确的" + tip + "！");
    }
    public static void main(String[] args) {
        // 代码生成器
        AutoGenerator mpg = new AutoGenerator();
        // 全局配置
        GlobalConfig gc = new GlobalConfig();
        String projectPath = System.getProperty("user.dir");
        gc.setOutputDir(projectPath + "/src/main/java");
        gc.setAuthor("liuhongfei");
        gc.setOpen(false);
        // gc.setSwagger2(true); 实体属性 Swagger2 注解
        mpg.setGlobalConfig(gc);
        // 数据源配置
        DataSourceConfig dsc = new DataSourceConfig();
        dsc.setUrl("jdbc:mysql://localhost:3306/yfbank?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&useSSL=false&allowPublicKeyRetrieval=true");
        // dsc.setSchemaName("public");
        dsc.setDriverName("com.mysql.cj.jdbc.Driver");
        dsc.setUsername("root");
        dsc.setPassword("lhf@123");
        mpg.setDataSource(dsc);
        // 包配置
        PackageConfig pc = new PackageConfig();
        //pc.setModuleName(scanner("模块名"));
        pc.setParent("com.example.mp");
        //pc.setXml("");
        pc.setEntity("entity");//实体的包
        pc.setMapper("dao");//dao的包
        pc.setService("service");//service的包
        pc.setServiceImpl("service.impl");//实现类的包
        mpg.setPackageInfo(pc);
        // 自定义配置
        InjectionConfig cfg = new InjectionConfig() {
            @Override
            public void initMap() {
                // to do nothing
            }
        };
        // 如果模板引擎是 freemarker
        // String templatePath = "/templates/mapper.xml.ftl";
        // 如果模板引擎是 velocity
        String templatePath = "/templates/mapper.xml.vm";
        // 自定义输出配置
        List<FileOutConfig> focList = new ArrayList<>();
        // 自定义配置会被优先输出
        focList.add(new FileOutConfig(templatePath) {
            @Override
            public String outputFile(TableInfo tableInfo) {
                // 自定义输出文件名 ， 如果你 Entity 设置了前后缀、此处注意 xml 的名称会跟着发生变化！！
                return projectPath + "/src/main/resources/mapper/"  + tableInfo.getEntityName() + "Mapper" + StringPool.DOT_XML;
            }
        });
        cfg.setFileOutConfigList(focList);
        mpg.setCfg(cfg);
        // 配置模板
        //不在java文件夹下面写入mapper文件
        TemplateConfig templateConfig = new TemplateConfig();
        templateConfig.setXml(null);
        mpg.setTemplate(templateConfig);
        // 策略配置
        StrategyConfig strategy = new StrategyConfig();
        strategy.setNaming(NamingStrategy.underline_to_camel);// _ tab_user tabUser
        strategy.setColumnNaming(NamingStrategy.underline_to_camel);
        strategy.setEntityLombokModel(true);
        strategy.setRestControllerStyle(true);
        // 公共父类
        // 写于父类中的公共字段
        //strategy.setSuperEntityColumns("id");// id @TabId
        //strategy.setInclude(scanner("表名，多个英文逗号分割").split(","));
        strategy.setControllerMappingHyphenStyle(true);
        strategy.setTablePrefix(pc.getModuleName() + "_");
        mpg.setStrategy(strategy);
        mpg.execute();
    }

 只需要运行一下上面的类里面的main方法即可

        d.配置dao接口

        e.启动springboot项目即可

 启动上面的main方法即可

        f.配置跨域请求

 
    /*
     *  配置跨域请求
     * */
    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
//        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.addAllowedHeader("*");// 允许所有的头
        corsConfiguration.addAllowedOrigin("*");// 允许所有源发出的请求
        corsConfiguration.addAllowedMethod("*");// 允许所有的方法  GET POST
        source.registerCorsConfiguration("/**", corsConfiguration);// 所有的路径
        return new CorsFilter(source);
    }

 

5、vue组件访问springboot

        vue组件里面的内容解析

6、查询功能

        a.给组件渲染数据

        b.后端响应数据

 

 上图即为获取数据成功

        c.前端接收数据

使用axios和后端进行交互

 d.修改table里面列的内容

e.完整的vue代码

 <template>
 <el-table
:data="tableData"
 style="width: 100%"
 :row-class-name="tableRowClassName">
 <el-table-column
 prop="id"
 label="编号"
 >
 </el-table-column>
 <el-table-column
 prop="username"
 label="姓名"
 >
 </el-table-column>
<el-table-column
prop="idcard"
label="身份证号">
</el-table-column>
<el-table-column
prop="telephone"
label="电话号码">
</el-table-column>
</el-table>
</template>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
<script>
export default {
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex%4 === 1) {
return 'warning-row';
} else if (rowIndex%4 === 3) {
return 'success-row';
}
return '';
}
},
data() {
return {
tableData: []
}
},
created(){
// 获取tableData的数据
// 使用axios发出请求
this.$axios.get("t-user").then(r=>{
// r.data 就是后端响应的数据 Result对象
// 想要获取的是集合的数据 Result对象里面的t的值即可
this.tableData=r.data.t;// 将后台获取的值赋值给tableData变量
})
}
}
 </script>

7、删除

        a.定义按钮

编写删除和修改之前先添加对应的按钮

        b.定义函数

 

         d. 提取该方法

 g. 完整删除代码