springboot + vue + iview 3.前后端结合·数据库查询（二）

程杉耘朵 2019-04-12 16:51:56

818

分类专栏： vue java

本文链接：https://blog.csdn.net/chsyd1028/article/details/89245514

版权

数据库

1.先在本地创建一个数据库，我起名vue-demo，执行sql如下

/*
 Navicat MySQL Data Transfer

 Source Server         : local
 Source Server Version : 50720
 Source Host           : localhost
 Source Database       : vue-demo

 Target Server Version : 50720
 File Encoding         : utf-8

 Date: 04/10/2019 16:10:24 PM
*/

SET NAMES utf8;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
--  Table structure for `user`
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) NOT NULL,
  `age` int(4) NOT NULL,
  `address` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

-- ----------------------------
--  Records of `user`
-- ----------------------------
BEGIN;
INSERT INTO `user` VALUES ('1', '程杉耘朵', '18', 'New York No. 1 Lake Park'), ('2', 'csyd', '10', 'London No. 1 Lake Park'), ('3', '小朵朵', '27', 'Sydney No. 1 Lake Park'), ('4', '小云朵', '11', 'Ottawa No. 2 Lake Park'), ('5', '耘朵', '26', '中国 上海 浦东');
COMMIT;

SET FOREIGN_KEY_CHECKS = 1;

2.在springboot的maven配置文件中加入数据库相关的dependency

<!--数据库-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>

3.在application.properties文件中加入数据库的连接配置，记得把账号密码替换成自己数据库的哦

#数据库
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/vue-demo
spring.datasource.username=账号
spring.datasource.password=密码
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

4.因为我懒得写实体类啊之类的，习惯了用mybatis-generator自动生成Mapper，实体类，Mapper.xml，这就要利用maven的插件来进行。

先在maven配置文件中，加入一段

<build>
        <plugins>
            <!--mybatis自动生成代码插件-->
            <plugin>
                <groupId>org.mybatis.generator</groupId>
                <artifactId>mybatis-generator-maven-plugin</artifactId>
                <version>1.3.6</version>
                <configuration>
                    <!-- 是否覆盖，true表示会替换生成的JAVA文件，false则不覆盖 -->
                    <overwrite>true</overwrite>
                </configuration>
                <dependencies>
                    <!--mysql驱动包-->
                    <dependency>
                        <groupId>mysql</groupId>
                        <artifactId>mysql-connector-java</artifactId>
                        <version>5.1.45</version>
                    </dependency>
                </dependencies>
            </plugin>
        </plugins>
    </build>

然后再resource中创建文件generatorConfig.xml，注意把账号密码替换掉哦。

<?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>

    <!-- defaultModelType="flat" 设置复合主键时不单独为主键创建实体 -->
    <context id="MySql" defaultModelType="flat">
        <!-- 生成的POJO实现java.io.Serializable接口 -->
        <plugin type="org.mybatis.generator.plugins.SerializablePlugin" />

        <!--注释-->
        <commentGenerator>
            <!-- 将数据库中表的字段描述信息添加到注释 -->
            <property name="addRemarkComments" value="true"/>
            <!-- 注释里不添加日期 -->
            <property name="suppressDate" value="true"/>
        </commentGenerator>
        <!-- 数据库连接 -->
        <jdbcConnection
                driverClass="com.mysql.jdbc.Driver"
                connectionURL="jdbc:mysql://localhost:3306/vue-demo"
                userId="账号"
                password="密码"/>

        <!-- 生成POJO对象，并将类放到com.csyd.pojo包下 -->
        <javaModelGenerator targetPackage="com.csyd.pojo" targetProject="src/main/java"></javaModelGenerator>
        <!-- 生成mapper xml文件，并放到resources下的mapper文件夹下 -->
        <sqlMapGenerator targetPackage="mapper"  targetProject="src/main/resources"></sqlMapGenerator>


        <!-- 生成mapper xml对应dao接口，放到com.csyd.dao包下-->
        <javaClientGenerator targetPackage="com.csyd.dao" targetProject="src/main/java" type="XMLMAPPER"></javaClientGenerator>

        <!-- table标签可以有多个，至少一个，tableName指定表名，可以使用_和%通配符 -->
        <table schema="vue-demo" tableName="user"
            domainObjectName="User" enableCountByExample="false"
            enableDeleteByExample="false" enableSelectByExample="false"
            enableUpdateByExample="false">
        </table>
    </context>
</generatorConfiguration>

配置好后，打开maven

打开之后，找到maven中generator的插件，右击开始执行

生成好后，项目结构如下

增加配置

1.在pom.xml中加上几个dependency，一个是关于mybatis的，一个是用作分页的插件，这个pagehelper要用springboot版的，这样就可以不用注入Bean了，然后我先使用了1.2.10版本，发现无法生效，最后改成之前用的1.2.3就好使了，不知道为啥

        <!--mybatis-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.3.2</version>
        </dependency>

        <!--pagehelper分页-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.3</version>
        </dependency>

2.application.properties加配置，配置mapper的位置，很重要，之前我就是忘了配置，然后一直找不到mapper的方法。

#mybatis（注意必不可缺！不然找不到mapper.）
mybatis.mapper-locations=classpath:/mapper/*Mapper.xml
mybatis.type-aliases-package=com.csyd.pojo

后端接口

1.UserMapper.xml 增加一个查询所有记录

<select id="selectAll" resultMap="BaseResultMap">
    select * from user order by id desc
  </select>

2.UserMapper.java 先再上面加上一个@Mapper注解，这样就自动注入了这个mapper了，然后加个接口

List<User> selectAll();

3.UserService.java 在service包中创建UserService.java类，因为只是简单联系，我就不规范一点，不做Impl接口实现了，

package com.csyd.service;

import com.csyd.dao.UserMapper;
import com.csyd.pojo.User;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * Created by ChengShanyunduo
 * 2019/4/10
 */
@Service
public class UserService {

    @Autowired
    private UserMapper userMapper;

    public PageInfo<User> userPage(Integer pageNum, Integer pageSize){
        PageHelper.startPage(pageNum, pageSize);
        List<User> userList = userMapper.selectAll();
        PageInfo<User> userPageInfo = new PageInfo<>(userList);
        return userPageInfo;
    }
}

4.UserController.java 增加接口

@CrossOrigin
    @RequestMapping("/user/userList")
    @ResponseBody
    public Result userList(Integer pageNum, Integer pageSize){
        PageInfo<User> userPage = userService.userPage(pageNum, pageSize);
        return ResultGenerator.genSuccessResult(userPage);
    }

5.用postman跑一下。没毛病

前端渲染

1.首先在Page1页面中写一个function，getUserList()，基于axios请求的post，因为axios默认的请求的数据是json的形式，而不是form表单的提交，所以我在后台中加了一个PageVo实体类，用于接收参数，然后前端页面中也加一个created，让他在加载页面的时候执行getUserList方法

Page1.vue 中的 export default

export default {
    data () {
      return {
        columns7: [ //这里是table的头设置
          {
            title: '名字',
            key: 'name',
            render: (h, params) => {
              return h('div', [
                h('Icon', {
                  props: {
                    type: 'person'
                  }
                }),
                h('strong', params.row.name)
              ]);
            }
          },
          {
            title: '年龄',
            key: 'age'
          },
          {
            title: '地址',
            key: 'address'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'default',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                }, '查看'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    // click: () => {
                    //   this.show(params.index)
                    // }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    // click: () => {
                    //   this.remove(params.index)
                    // }
                  }
                }, '删除')
              ]);
            }
          }
        ],
        data6: [] // 用于接收table需要渲染的数据,
        pageSize : 5,
        pageNum : 1,
      }
    },
    methods: {
      getUserList(){
        //请求出去的是json
        this.$axios
          .post('/user/userList', {
            pageNum : this.pageNum,
            pageSize : this.pageSize
          })
          .then(successResponse => {
            this.responseResult = JSON.stringify(successResponse.data);
            if (successResponse.data.code === 200) {
              this.data6 = successResponse.data.data.list;
              this.total = successResponse.data.data.total;
            }else {
              alert('系统错误');
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
    created: function () {
      this.getUserList();
    }

PageVo.java

package com.csyd.pojo.vo;

/**
 * Created by ChengShanyunduo
 * 2019/4/15
 */
public class PageVo {

    private int pageNum;

    private int pageSize;

    public int getPageNum() {
        return pageNum;
    }

    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }
}

显示结果

2.最后一步，因为之前的pageNum和pageSize都是写死的，这回要让他们联动起来。

首先我们可以去看一下iview的官网中的page http://v1.iviewui.com/components/page

大概了解之后，把之前的<Page>标签改变一下变成我需要的

<Page style="margin-top: 20px"
          :total="total" :page-size="pageSize" :page-size-opts="pageSizeOpts"
          show-total show-sizer
          @on-change="changePage" @on-page-size-change="changeSize"/>

对应的参数加到data中

total : undefined,
pageSizeOpts : [5, 10]

解释一下

:total 表示一共有多少条数据

:page-size 表示每页有多少个

:page-size-opts 这是一个数组，表示的是可以改变每页有多少条，我这里上面的参数为[5, 10]，就是说展示出来之后每页可以有5条或者10条的改变

show-total 展示总共有多少条

show-sizer 展示改变每页数量的选择框

@on-change 当改变页码时触发的方法

@on-page-size-change 当改变每页个数时触发的方法

最后加上这两个方法的实现

    changePage(page){
        this.pageNum = page;
        this.getUserList();
      },
      changeSize(pageSize){
        this.pageSize = pageSize;
        this.getUserList();
      }

这个页面的最后的全部内容，如下

<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem >用户管理</BreadcrumbItem>
    </Breadcrumb>
    <Divider />

    <Row>
      <Button icon="md-add" type="primary">添加</Button>
    </Row>

    <Table size="default" :columns="columns7" :data="data6" style="margin-top: 20px"></Table>
    <Page style="margin-top: 20px"
          :total="total" :page-size="pageSize" :page-size-opts="pageSizeOpts"
          show-total show-sizer
          @on-change="changePage" @on-page-size-change="changeSize"/>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        columns7: [ //这里是table的头设置
          {
            title: '名字',
            key: 'name',
            render: (h, params) => {
              return h('div', [
                h('Icon', {
                  props: {
                    type: 'person'
                  }
                }),
                h('strong', params.row.name)
              ]);
            }
          },
          {
            title: '年龄',
            key: 'age'
          },
          {
            title: '地址',
            key: 'address'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'default',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                }, '查看'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    // click: () => {
                    //   this.show(params.index)
                    // }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    // click: () => {
                    //   this.remove(params.index)
                    // }
                  }
                }, '删除')
              ]);
            }
          }
        ],
        data6: [], //用于接收table的数据
        pageSize : 5,
        pageNum : 1,
        total : undefined,
        pageSizeOpts : [5, 10]
      }
    },
    methods: {
      getUserList(){
        //请求出去的是json
        this.$axios
          .post('/user/userList', {
            pageNum : this.pageNum,
            pageSize : this.pageSize
          })
          .then(successResponse => {
            this.responseResult = JSON.stringify(successResponse.data);
            if (successResponse.data.code === 200) {
              this.data6 = successResponse.data.data.list;
              this.total = successResponse.data.data.total;
            }else {
              alert('系统错误');
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      changePage(page){
        this.pageNum = page;
        this.getUserList();
      },
      changeSize(pageSize){
        this.pageSize = pageSize;
        this.getUserList();
      }
    },
    created: function () {
      this.getUserList();
    }
  }
</script>

展示效果