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

 

数据库

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

        
            mysql
            mysql-connector-java
        
        
            org.springframework.boot
            spring-boot-starter-jdbc
        

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配置文件中，加入一段

        
            
            
                org.mybatis.generator
                mybatis-generator-maven-plugin
                1.3.6
                
                    
                    true
                
                
                    
                    
                        mysql
                        mysql-connector-java
                        5.1.45
                    
                
            
        
    

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

配置好后，打开maven

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

生成好后，项目结构如下

增加配置

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

        
        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            1.3.2
        

        
        
            com.github.pagehelper
            pagehelper-spring-boot-starter
            1.2.3
        

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 * from user order by id desc
  

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

List 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 userPage(Integer pageNum, Integer pageSize){
        PageHelper.startPage(pageNum, pageSize);
        List userList = userMapper.selectAll();
        PageInfo userPageInfo = new PageInfo<>(userList);
        return userPageInfo;
    }
}

4.UserController.java 增加接口

@CrossOrigin
    @RequestMapping("/user/userList")
    @ResponseBody
    public Result userList(Integer pageNum, Integer pageSize){
        PageInfo 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

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

对应的参数加到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();
      }

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

展示效果

 

这样。这个简易的管理系统demo就算搞定了。我把代码传到github和gitee上，感兴趣的同学可以去下载，下载之后记得把application.properties和generatorConfig.xml中数据库的账号密码给改掉才能运行哦。

 

Github后端地址 ：https://github.com/chsyd1028/vueproject

Github前端地址 ：https://github.com/chsyd1028/blog-vue

Gitee后端地址 ：https://gitee.com/csyd/vueproject

Gitee前端地址 ：https://gitee.com/csyd/blog-vue