SSM(Vue3+ElementPlus+Axios+SSM前后端分离)【四】

简介: SSM(Vue3+ElementPlus+Axios+SSM前后端分离)【四】

SSM(Vue3+ElementPlus+Axios+SSM前后端分离)–基础环境搭建【四】


项目介绍


项目功能/界面


● SSM 整合项目界面


9be773735a8465943317434e8943becd.png


创建表,使用逆向工程生成Bean、XxxMapper 和XxxMapper.xml

1. 创建furns_ssm 数据库和furns 表

-- 创建furns_ssm
DROP DATABASE IF EXISTS furns_ssm;
CREATE DATABASE furns_ssm;
USE furns_ssm;
-- 创建家居表
CREATE TABLE furn(
`id` INT(11) PRIMARY KEY AUTO_INCREMENT, ## id
`name` VARCHAR(64) NOT NULL, ## 家居名
`maker` VARCHAR(64) NOT NULL, ## 厂商
`price` DECIMAL(11,2) NOT NULL, ## 价格
`sales` INT(11) NOT NULL, ## 销量
`stock` INT(11) NOT NULL, ## 库存
`img_path` VARCHAR(256) NOT NULL ## 照片路径
);


使用MyBatis Generator 逆向工程生成bean mapper 接口和mapper.xml


当然也可以自己写,如果在开发中, 逆向工程生成的代码, 不能满足需要,再自己编写.

<!-- 修改mybatis-config.xml , 增加typeAliases 配置.-->
<configuration>
<!--
1. 如果一个包下有很多的类,我们可以直接引入包
2. 这样该包下面的所有类名,可以直接使用
-->
<typeAliases>
    <package name="com.nlc.furns.bean"/>
</typeAliases>
</configuration>


引入MyBatis Generator 包, 在pom.xml 配置

<dependency>
    <groupId>junit</groupId>
    <artifactId>junit</artifactId>
    <version>4.11</version>
    <scope>test</scope>
</dependency>
<!-- 引入mybatis 逆向工程依赖包-->
<dependency>
    <groupId>org.mybatis.generator</groupId>
    <artifactId>mybatis-generator-core</artifactId>
    <version>1.4.0</version>
</dependency>


创建furns_ssm\mbg.xml


参考文档https://mybatis.org/generator/ 进行配置, 这里给出了一个模板xml ,在上面修改即可

70fb4bd6013aead6a835a225b67f4c12.png

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
        PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
        "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">
<generatorConfiguration>
    <context id="DB2Tables" targetRuntime="MyBatis3">
        <!--        生成没有注释的bean-->
        <commentGenerator>
            <property name="suppressAllComments" value="true"/>
        </commentGenerator>
        <!--        配置数据库连接信息-->
        <jdbcConnection driverClass="com.mysql.jdbc.Driver"
                        connectionURL="jdbc:mysql://localhost:3306/furns_ssm?characterEncoding=utf8"
                        userId="root"
                        //password="自己的密码">注意记得把//删掉然后写自己的密码和端口
        </jdbcConnection>
        <javaTypeResolver>
            <property name="forceBigDecimals" value="false"/>
        </javaTypeResolver>
        <!--        指定javaBean生成的位置-->
        <javaModelGenerator targetPackage="com.nlc.furn.bean" targetProject=".\src\main\java">
            <property name="enableSubPackages" value="true"/>
            <property name="trimStrings" value="true"/>
        </javaModelGenerator>
        <!--        指定sql映射文件生成的位置
        1. 要根据自己的实际情况指定
        -->
        <sqlMapGenerator targetPackage="mapper" targetProject=".\src\main\resources">
            <property name="enableSubPackages" value="true"/>
        </sqlMapGenerator>
        <!--        指定dao接口生成的位置, 也就是mapper接口-->
        <javaClientGenerator type="XMLMAPPER" targetPackage="com.nlc.furn.dao" targetProject=".\src\main\java">
            <property name="enableSubPackages" value="true"/>
        </javaClientGenerator>
        <!--        指定要逆向生成的表和生成策略-->
        <table tableName="furn" domainObjectName="Furn"></table>
    </context>
</generatorConfiguration>


创建文件\test\MBGTest.java


RunningMyBatis Generator , 生成相关bean, mapper 接口和mapper.xml 参考官方问题来修改, 并完成测试

d16968363bebefcea2a9f6416b392630.png

public class MBGTest {
    @Test
    public void generator() throws Exception {
        List<String> warnings = new ArrayList<String>();
        boolean overwrite = true;
        //这里要指定你自己配置的mbg.xml
        //如果这样访问,需要将文件放在项目下
        File configFile = new File("mbg.xml");
        ConfigurationParser cp = new ConfigurationParser(warnings);
        Configuration config = cp.parseConfiguration(configFile);
        DefaultShellCallback callback = new DefaultShellCallback(overwrite);
        MyBatisGenerator myBatisGenerator = new MyBatisGenerator(config, callback, warnings);
        myBatisGenerator.generate(null);
    System.out.println("逆向生成OK");
    }
}


使用Junit 测试Spring 和MyBatis 是否整合成功, 能通过MyBatis 添加furn 到数据库


  1. 修改bean: Furn.java


6112bc512d5d2708a25479c6f5cfd3d4.png

创建furns_ssm\src\test\java\com\nlc\furns\dao\FurnMapperTest.java完成对furn 表的crud 测试操作

public class FurnMapperTest {
    @Test
    public void insertSelective() {
        //1. 获取到容器
        ApplicationContext ioc =
                new ClassPathXmlApplicationContext("applicationContext.xml");
        //2获取FurnMapper
        FurnMapper furnMapper = ioc.getBean(FurnMapper.class);
        //System.out.println("furnMapper--" + furnMapper.getClass());
        //3.添加数据
        Furn furn =
                new Furn(null, "北欧风格沙发~~", "与之家~~", new BigDecimal(180), 666,
                        70, "assets/images/product-image/1.jpg");
        int affected = furnMapper.insertSelective(furn);
        System.out.println("affected--" + affected);
        System.out.println("操作成功~");
    }
    @Test
    public void deleteByPrimaryKey() {
        //1. 获取到容器
        ApplicationContext ioc =
                new ClassPathXmlApplicationContext("applicationContext.xml");
        //2获取FurnMapper
        FurnMapper furnMapper = ioc.getBean(FurnMapper.class);
        int affected = furnMapper.deleteByPrimaryKey(6);
        System.out.println("affected--" + affected);
        System.out.println("操作成功");
    }
    @Test
    public void updateByPrimaryKey() {
        //1. 获取到容器
        ApplicationContext ioc =
                new ClassPathXmlApplicationContext("applicationContext.xml");
        //2获取FurnMapper
        FurnMapper furnMapper = ioc.getBean(FurnMapper.class);
        Furn furn = new Furn();
        furn.setId(5);
        furn.setName("风格家居-小沙发");
        //会修改所有的字段,如果没有设置字段对应的属性值,那么默认是null
        //int affected = furnMapper.updateByPrimaryKey(furn);
        //根据你设置属性对应字段,生成sql语句
        int affected = furnMapper.updateByPrimaryKeySelective(furn);
        System.out.println("affected--" + affected);
        System.out.println("操作成功~");
    }
    @Test
    public void selectByPrimaryKey() {
        //1. 获取到容器
        ApplicationContext ioc =
                new ClassPathXmlApplicationContext("applicationContext.xml");
        //2获取FurnMapper
        FurnMapper furnMapper = ioc.getBean(FurnMapper.class);
        Furn furn = furnMapper.selectByPrimaryKey(1);
        System.out.println("furn--" + furn);
        System.out.println("操作成功~");
    }
}


注意事项和细节说明


insertSelective 和insert 的区别


1.insertSelective–选择性保存数据;

比如User 里面有三个字段:id,name,age,password

但是只设置了一个字段;

User u=new user();

u.setName(“张三”);

insertSelective(u);


2.insertSelective 执行对应的sql 语句的时候,只插入对应的name 字段;(主键是自动添加的,默认插入为空)


insert into tb_user (id,name) value (null,“张三”);


3.而insert 则是不论设置多少个字段,统一都要添加一遍,不论你设置几个字段,即使是一个

User u=new user();

u.setName(“张三”);

insert(u);

insert into tb_user (id,name,age,password) value (null,“张三”,null,null)

相关文章
|
1月前
|
资源调度 JavaScript
|
1月前
|
缓存 JavaScript 搜索推荐
|
30天前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
85 4
|
1月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第8天】
108 1
|
1月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第5天】
131 1
|
2月前
|
JavaScript
vue 中 axios 的安装及使用
本文介绍了在Vue项目中安装和使用axios的方法。首先通过命令`npm install axios --save-dev`安装axios,然后在组件的`created`生命周期钩子中使用`axios.get`异步获取数据,并将获取的数据更新到组件的`data`中。文中提供了完整的示例代码,包括安装命令、验证安装成功的步骤、Vue组件的模板、脚本和样式。
vue 中 axios 的安装及使用
|
2月前
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
42 4
|
2月前
|
JavaScript API
Vue3基础(十qi)___安装使用axios
本文介绍了如何在Vue3项目中安装和使用axios进行HTTP请求,包括在main.js中引入axios并挂载到全局属性,以及在组件中通过`getCurrentInstance`获取全局axios实例来发送请求的方法。
35 0
Vue3基础(十qi)___安装使用axios
|
2月前
|
JavaScript 前端开发
vue配合axios连接express搭建的node服务器接口_简单案例
文章介绍了如何使用Express框架搭建一个简单的Node服务器,并使用Vue结合Axios进行前端开发和接口调用,同时讨论了开发过程中遇到的跨域问题及其解决方案。
57 0
vue配合axios连接express搭建的node服务器接口_简单案例