SSM整合

最新推荐文章于 2025-07-31 19:38:27 发布

彼岸_hua

最新推荐文章于 2025-07-31 19:38:27 发布

阅读量130

点赞数

CC 4.0 BY-SA版权

文章标签： java maven 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_51472024/article/details/125362506

1.创建maven-web工程

修改web.xml的版本信息

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
         
</web-app>

2.添加依赖

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.sal</groupId>
  <artifactId>days061401</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>


  <dependencies>
    <!--spring-webmvc-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>5.2.15.RELEASE</version>
    </dependency>

    <!--mybatis依赖-->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.5.6</version>
    </dependency>

    <!--mybatis和spring整合的依赖-->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>2.0.6</version>
    </dependency>

    <!--mysql驱动-->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>8.0.28</version>
    </dependency>

    <!--druid连接池依赖-->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.2.1</version>
    </dependency>

    <!--lombok依赖-->
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.18.24</version>
    </dependency>
    <!--jackson java对象转换为json对象 @ResponseBody-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.13.2.2</version>
    </dependency>
    <!--servlet-api依赖-->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>4.0.1</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>5.2.15.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.12</version>
      <scope>compile</scope>
    </dependency>
    <dependency>
      <groupId>org.mybatis.generator</groupId>
      <artifactId>mybatis-generator-core</artifactId>
      <version>1.4.0</version>
    </dependency>
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.3.0</version>
    </dependency>

  </dependencies>
</project>

3.spring的配置信息

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:contxt="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">

<!--    包扫描-->
    <contxt:component-scan base-package="com.sal"/>
<!--    注解驱动-->
    <mvc:annotation-driven/>
<!--    放行静态资源-->
    <mvc:default-servlet-handler/>

    <mvc:interceptors>
        <mvc:interceptor>
            <mvc:mapping path="/**"/>
            <mvc:exclude-mapping path="/login"/>
            <mvc:exclude-mapping path="/css/**"/>
            <mvc:exclude-mapping path="/js/**"/>
            <!--            <mvc:exclude-mapping path="/imgs/**"/>-->
            <bean class="com.sal.interceptor.LoginInterceptor"/>
        </mvc:interceptor>
    </mvc:interceptors>

    <bean id="data" class="com.alibaba.druid.pool.DruidDataSource">
        <property name="driverClassName" value="com.mysql.cj.jdbc.Driver"/>
        <property name="url" value="jdbc:mysql://localhost:3306/mybatis?serverTimezone=Asia/Shanghai"/>
        <property name="username" value="root"/>
        <property name="password" value="123456"/>
<!--        默认连接池的个数-->
        <property name="initialSize" value="5"/>
<!--        最少的连接池的个数-->
        <property name="minIdle" value="5"/>
<!--        最大连接池个数-->
        <property name="maxActive" value="10"/>
<!--        最长等待时间 单位：毫秒-->
        <property name="maxWait" value="3000"/>
    </bean>

<!--    sqlSessionFactory 整合mybatis-->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="data"/>
<!--        设置mybatis的映射文件的路径-->
        <property name="mapperLocations" value="classpath:mapper/*.xml"/>
        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor">

                </bean>
            </array>
        </property>
    </bean>
<!--    为dao接口生成代理实现类-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<!--        为com.sal.dao包下的接口生成代理实现类-->
        <property name="basePackage" value="com.sal.dao"/>
    </bean>
</beans>

4.配置web.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <servlet>
        <servlet-name>spring</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:sprinmvc.xml</param-value>
        </init-param>
        <!--当tomcat启动时创建DipatcherServlet 默认当访问controller路径时创建-->
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>spring</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <filter>
        <filter-name>encodingfilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </filter>
    <!--  将编码类型映射到那些文件上去  /*:所有的请求-->
    <filter-mapping>
        <filter-name>encodingfilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

</web-app>

5.generator生成代码

依赖：

    <!--generator-->
    <dependency>
      <groupId>org.mybatis.generator</groupId>
      <artifactId>mybatis-generator-core</artifactId>
      <version>1.4.0</version>
    </dependency>

配置文件

<?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>
<!--    mysql驱动jar的位置-->
    <classPathEntry location="D:\repMaven\mysql\mysql-connector-java\8.0.28\mysql-connector-java-8.0.28.jar" />

    <context id="DB2Tables" targetRuntime="MyBatis3">
<!--        数据源的配置信息-->
        <jdbcConnection driverClass="com.mysql.cj.jdbc.Driver"
                        connectionURL="jdbc:mysql://localhost:3306/mybatis?serverTimezone=Asia/Shanghai"
                        userId="root"
                        password="123456">
        </jdbcConnection>

        <javaTypeResolver >
            <property name="forceBigDecimals" value="false" />
        </javaTypeResolver>
<!--        java实体类的配置-->
        <javaModelGenerator targetPackage="com.sal.entity" targetProject=".\src\main\java">
            <property name="enableSubPackages" value="true" />
            <property name="trimStrings" value="true" />
        </javaModelGenerator>
<!--        映射文件的配置-->
        <sqlMapGenerator targetPackage="mapper"  targetProject=".\src\main\resources">
            <property name="enableSubPackages" value="true" />
        </sqlMapGenerator>
<!--        dao数据访问层的配置-->
        <javaClientGenerator type="XMLMAPPER" targetPackage="com.sal.dao"  targetProject=".\src\main\java">
            <property name="enableSubPackages" value="true" />
        </javaClientGenerator>

        <!--数据库表和实体的映射关系
              schema:数据库名称
              tableName: 表名
              domainObjectName:实体类名

              enableUpdateByExample:是否生成复杂的修改操作
        -->
        <table schema="mybatis" tableName="ssm_user" domainObjectName="User"
               enableDeleteByExample="false" enableSelectByExample="false" enableUpdateByExample="false" enableCountByExample="false" >

        </table>

    </context>
</generatorConfiguration>

测试：

@Test
    public void testZidong() throws Exception {
        List<String> warnings = new ArrayList<String>();
        boolean overwrite = true;
        File configFile = new File("generator.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);
    }

6.ssm+elementui+vue+axios完成单表的crud.

until下的CommonResult：

@Data
@NoArgsConstructor
@AllArgsConstructor
public class CommonResult {
    private Integer code;
    private String msg;
    private Object data;
}

service下的接口：

增删改查的：

public interface FruitsService {
    public Fruits getById(Integer id);
    public PageInfo<Fruits> findalls(Integer currentPage, Integer pageSize, Map map);
    public Integer updatee(Fruits fruits);
    public Integer insertt(Fruits fruits);
    public Integer delectt(int i);
}

登录的：

public interface UserService {
    public List<User> byidd(String username,String password);
    public Integer byiddd(String username,String password);

    public List<Integer> byidddd(String username, String password);
}

service下的impl包：

登录的：

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UserMapper userMapper;

    public List<User> byidd(String username,String password) {
        List<User> nameandRealname = userMapper.findNameandRealname(username, password);
        return nameandRealname;
    }

    public Integer byiddd(String username, String password) {
        Integer findname = userMapper.findname(username, password);
        System.out.println("shu"+findname);
        return findname;
    }

    public List<Integer> byidddd(String username, String password) {
        List<Integer> findnamehe = userMapper.findnamehe(username, password);
        System.out.println("shu--"+findnamehe);
        return findnamehe;
    }
}

主页面的：

@Service
public class FruitsServiceImpl implements FruitsService {

    @Autowired
    private FruitsMapper fruitsMapper;

    public Fruits getById(Integer id) {
        Fruits fruits = fruitsMapper.selectByPrimaryKey(id);
        return fruits;
    }

    public PageInfo<Fruits> findalls(Integer currentPage, Integer pageSize, Map map){
        System.out.println("service--"+currentPage+"-"+pageSize);
        PageHelper.startPage(currentPage,pageSize);
        List<Fruits> fruits = fruitsMapper.selectFindAll(map);
        PageInfo<Fruits> pageInfo = new PageInfo<Fruits>(fruits);
        System.out.println("service--"+fruits+"a");
        return pageInfo;
    }

    public Integer updatee(Fruits fruits){
        Integer i = fruitsMapper.updateByPrimaryKeySelective(fruits);
        return i;
    }

    public Integer insertt(Fruits fruits) {
        Integer i = fruitsMapper.insertSelective(fruits);
        return i;
    }

    public Integer delectt(int i) {
        Integer i1 = fruitsMapper.deleteByPrimaryKey(i);
        return i1;
    }
}

controller：

登录的：

@RestController
public class userController {

    @Autowired
    private UserService userService;

    @RequestMapping("login")
    public CommonResult byid(User user,HttpSession session){
        List<User> byidd = userService.byidd(user.getUsername(), user.getPassword());
        for(User a:byidd){
            if(a.getUsername().equals(user.getUsername()) && a.getPassword().equals(user.getPassword())){
                session.setAttribute("user",user.getUsername());
                return new CommonResult(2000,"登录成功",null);
            }
        }
        return new CommonResult(5000,"登录失败",null);
    }

    @RequestMapping("login01")
    public CommonResult byid01(User user){
        Integer byiddd = userService.byiddd(user.getUsername(), user.getPassword());
        System.out.println("name1"+byiddd);
        if(byiddd.equals(1)){
            return new CommonResult(2000,"登录成功",null);
        }
        return new CommonResult(5000,"登录失败",null);
    }

    @RequestMapping("login02")
    public CommonResult byid02(User user, HttpSession session){
        List<Integer> byidddd = userService.byidddd(user.getUsername(), user.getPassword());
        System.out.println("name1--"+byidddd);
        for(Integer i : byidddd){
            if(i.equals(1)){
                session.setAttribute("user",i);
                return new CommonResult(2000,"登录成功",null);
            }
        }
        return new CommonResult(5000,"登录失败",null);
    }

    @RequestMapping("quit")
    public CommonResult tui(HttpSession session){
        session.removeAttribute("user");
        return new CommonResult(2000,"退出成功",null);
    }
}

主页的：

@RestController
//@RequestMapping("fruits")
//@Slf4j
public class fruitsController {

    @Autowired
    private FruitsService fruitsService;

    @RequestMapping("byid")
    public Fruits ById(Integer id){
        Fruits byId = fruitsService.getById(id);
        System.out.println("by"+byId);
        return byId;
    }

    @RequestMapping("findall")
    public CommonResult echo01(Integer currentPage, Integer pageSize,@RequestBody Map map){
        System.out.println("controller--"+currentPage+"-"+pageSize);
        //log.info(currentPage+"-----"+pageSize);
        PageInfo<Fruits> findalls = fruitsService.findalls(currentPage,pageSize,map);
        System.out.println("controller-"+findalls);
        return new CommonResult(2000,"成功",findalls);
    }

    @RequestMapping("edit")
    public CommonResult update(Fruits fruits){
        Integer updatee = fruitsService.updatee(fruits);
        if(updatee!=null){
            return new CommonResult(2000,"修改成功",null);
        }
        return new CommonResult(5000,"修改失败",null);
    }

    @RequestMapping("insert")
    public CommonResult insert(Fruits fruits){
        Integer insertt = fruitsService.insertt(fruits);
        if(insertt!=null){
            return new CommonResult(2000,"添加成功",null);
        }
        return new CommonResult(5000,"添加失败",null);
    }

    @RequestMapping("del")
    public CommonResult delect(int id){
        Integer delectt = fruitsService.delectt(id);
        if(delectt!=null){
            return new CommonResult(2000,"删除成功",null);
        }
        return new CommonResult(5000,"删除失败",null);
    }
}

html：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <!--引入element得css样式-->
    <link type="text/css" rel="stylesheet" href="css/index.css"/>
    <!--引入vue得js文件 这个必须在element之前引入-->
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/qs.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <!--element得js文件-->
    <script type="text/javascript" src="js/index.js"></script>
    <style>
        .box{
            background-color: #13ce66;
        }
        body,.box{
            overflow: hidden;
            height: 100%;
        }

        #loginBox {
            width: 450px;
            height: 300px;
            background: white;
            border-radius: 3px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        #loginBox>.avatar_box{
            height: 130px;
            width: 130px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 10px #ddd;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
        }
        #loginBox>.avatar_box>img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
        .login_form {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 0 20px;
            box-sizing: border-box;
        }
    </style>
</head>
<body >
<div class="box">
    <div id="loginBox">
        <!-- 头像 -->
<%--        <div class="avatar_box">--%>
<%--            <img src="img/a9.jpg" />--%>
<%--        </div>--%>
        <el-form label-width="80px" :model="loginForm" :rules="rules" ref="loginFormRef" class="login_form">
            <el-form-item label="账号:" prop="username">
                <el-input v-model="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="password">
                <el-input v-model="loginForm.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>

<script>
    var app = new Vue({
        el: ".box",
        data: {
            loginForm: {},
            //校验规则
            rules: {
                username: [
                    {required: true, message: "请输入账号", trigger: "blur"},
                    {min: 3, max: 12, message: "账号的长度必须{3~12}", trigger: "blur"},
                ],
                password: [
                    {required: true, message: "请输入密码", trigger: "blur"},
                    {min: 3, max: 12, message: "密码的长度必须{6~12}", trigger: "blur"},
                ]
            }
        },
        methods: {
            submitForm() {
                var that = this;
                var qs = Qs;
                this.$refs['loginFormRef'].validate((valid) => {
                    if (valid) {
                        axios.post("login", qs.stringify(this.loginForm)).then(function (result) {
                            if (result.data.code === 2000) {
                                that.$message.success(result.data.msg);
                                location.href = "index.jsp"
                            } else {
                                //console.log(this.loginForm());
                                that.$message.error(result.data.msg);
                            }
                        });
                    }
                })
            }
        }
    })
</script>
</body>
</html>

主页的：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入element得css样式-->
    <link type="text/css" rel="stylesheet" href="css/index.css"/>
    <!--引入vue得js文件 这个必须在element之前引入-->
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/qs.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <!--element得js文件-->
    <script type="text/javascript" src="js/index.js"></script>

</head>
<body>
<!--创建一个标签使vue挂载到该标签上-->

<div id="app">
    <!--:data==绑定了vue中定义得数据tableData
        border表示设置表格边框
        el-table-column:表示列标签
           prop:该属性得名称必须和tableData中对象得属性名一致。
           label：表格得标题
           width: 设置列得宽度
    -->
    <div><h2>${sessionScope.user}，你好！</h2></div>
    <el-button @click="addDialogVisible=true" type="success" size="small" icon="el-icon-edit" plain>添加</el-button>
    <el-button type="info" @click="quit">退出</el-button>
    <el-form :inline="true" :model="selectFrom" class="demo-form-inline">
        <el-form-item label="姓名">
            <el-input v-model="selectFrom.name" placeholder="姓名"></el-input>
        </el-form-item>
<%--        <el-form-item label="活动区域">--%>
<%--            <el-select v-model="selectFrom.region" placeholder="活动区域">--%>
<%--                <el-option label="区域一" value="shanghai"></el-option>--%>
<%--                <el-option label="区域二" value="beijing"></el-option>--%>
<%--            </el-select>--%>
<%--        </el-form-item>--%>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    
    <el-dialog
            title="添加商品"
            :visible.sync="addDialogVisible"
            width="30%"
    >
        <!--:model==绑定表单数据-->
        <el-form :model="addform" :rules="addRules" ref="addRuleFrom">
            <el-form-item label="名称" label-width="80px" prop="name">
                <el-input v-model="addform.name" autocomplete="off"></el-input>
            </el-form-item>
            <!-- <el-form-item label="性别" label-width="40px">
                 <el-radio v-model="addform.empSex" :label="0">男</el-radio>
                 <el-radio v-model="addform.empSex" :label="1">女</el-radio>
             </el-form-item>-->
            <el-form-item label="价格" label-width="80px" prop="price">
                <el-input v-model.number="addform.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="库存" label-width="80px"prop="stock">
                <el-input v-model="addform.stock" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addEmp">确 定</el-button>
        </span>
    </el-dialog>


    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                label="编号"
        >
        </el-table-column>
        <el-table-column
                prop="name"
                label="名称"
        >
        </el-table-column>

        <el-table-column
                prop="price"
                label="价格(元)"
        >
        </el-table-column>
        <el-table-column
                prop="stock"
                label="库存(箱)">
        </el-table-column>

        <el-table-column
                fixed="right"
                label="操作"
        >
            <template slot-scope="scope">

                <el-button @click="edit(scope.row)" type="success" size="small" icon="el-icon-edit" plain>编辑</el-button>
                <el-button  @click="del(scope.row.id)" type="danger"  size="small" icon="el-icon-delete" plain>删除</el-button>

            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog
            title="修改信息"
            :visible.sync="editDialogVisible"
            width="30%"
    >
        <!--:model==绑定表单数据-->
        <el-form :model="editform" :rules="addRules" ref="editRuleForm">
            <el-form-item label="姓名" label-width="80px" prop="name">
                <el-input v-model="editform.name" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="价格" label-width="80px" prop="price">
                <el-input v-model.number="editform.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="库存" label-width="80px">
                <el-input v-model="editform.stock" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer"prop="stock">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editEmp">确定修改</el-button>
        </span>
    </el-dialog>
</div>
</body>
<!--表示自定义得js文件-->
<script>
    var app=new Vue({
        el:"#app",
        data:{
            selectFrom:{},
            //当前显示的页码变量
            currentPage:1,
            //下拉框选择的每页多少条数据
            pageSizes:[2, 3, 4, 5],
            //默认选择的显示条数
            pageSize:2,
            total:0,
            tableData:[],
            //添加对话框的显示和隐藏
            addDialogVisible:false,
            //修改对话框的显示和隐藏
            editDialogVisible:false,
            //添加表单数据
            addform:{},
            //修改表的数据
            editform:{},
            //定义添加表单校验
            addRules:{
                name:  [
                    { required: true, message: '请输入商品名称', trigger: 'blur' },
                ],
                age:  [
                    //{ required: true, message: '请输入年龄', trigger: 'blur' },
                    // { type:'number', message: '请输入数字', trigger: 'blur' }
                    { required: true, message: '价格不能为空'},
                    { type: 'number', message: '价格必须为数字值'}
                ],
                address:  [
                    { required: true, message: '请输入库存', trigger: 'blur' },
                ],
            }
        },
        //页面加载完毕后执行；
        created(){
            this.initTable();

        },
        methods: {
            onSubmit(){
                this.initTable();
            },
            //每页显示的条数大小改变时触发的方法
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable();
            },
            //页码改变时触发的方法
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTable();
            },
            edit(row){
                //显示修改弹出层
                this.editDialogVisible=true;
                //数据回显
                this.editform=row;
            },
            //确认修改
            editEmp(){
                var that=this;
                var qs=Qs;
                this.$refs['editRuleForm'].validate((valid) => {
                    // console.log(this.editform);
                    if (valid) { //表单校验通过
                        axios.post("edit",qs.stringify(this.editform)).then(function(result){
                            if(result.data.code===2000){
                                that.$message.success(result.data.msg);//弹出成功的消息
                                that.editDialogVisible=false; //隐藏修改对话框
                                that.initTable(); //重新加载表格数据
                            }
                        })
                    }
                });
            },
            //初始化表格数据
            initTable() {

                var that = this;
                //通过axios后台服务发送异步请求
                axios.post("findall?currentPage="+that.currentPage+"&pageSize="+that.pageSize,that.selectFrom).then(function (result) {
                    if (result.data.code === 2000) {//===:比较值和引用是否相同
                        // console.log(result);
                        that.tableData = result.data.data.list;
                        that.total = result.data.data.total;
                    }else if(result.data.code===5001){
                        that.$message.error(result.data.msg);
                        location.href="login.jsp"}
                })

            },
            del(id) {
                var that = this;
                axios.post("del?id="+id).then(function (result)
                {
                    if(result.data.code===2000) {
                        that.$message.success(result.data.msg)
                        that.initTable();
                    }
                })
                //var qs = Qs;
                //axios.post("EmpServlet", qs.stringify({"method": "delete", "id": id})).then(function (result) {
                //that.initTable(result);
                // })
            },
            addEmp(){
                var qs = Qs;
                var that = this;
                this.$refs['addRuleFrom'].validate((valid) => {
                    if (valid) {//表单校验通过
                        axios.post("insert", qs.stringify(this.addform)).then(function (result) {
                            if (result.data.code === 2000) {
                                that.$message.success(result.data.msg)
                                that.initTable();//重新加载表格
                                that.addDialogVisible = false; //隐藏弹出层
                            }
                        })
                    }
                });
            },
            quit(){
                var that = this;
                axios.post("quit").then(function(result){
                    if(result.data.code===2000){
                        that.$message.success(result.data.msg);
                        location.href="login.jsp";
                    }
                },)

            }
        }
    })
</script>
</html>

查询所有的语句功能：

sql：

  <select id="selectFindAll" resultType="com.sal.entity.Fruits">
    select * from mb_fruits
    <where>
      <if test="name!=null and name!=''">
        and name like concat('%',#{name},'%')
      </if>
    </where>
  </select>

dao下的：