SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页

#创作灵感#

  • 最近闲着没事,顺便复习下Springboot、vue,于是就写了这份代码
  • 该项目具体功能:简单的crud和分页
  • 项目采用前后分离(springboot+vue)

一:项目展示

1效果展示如下:

2首页:

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第1张图片

 3修改:

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第2张图片

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第3张图片

 添加:

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第4张图片

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第5张图片

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第6张图片

 删除:

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第7张图片

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第8张图片

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第9张图片

二:创建项目

1:创建后端代码

左侧导航栏选择Spring Initializr

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第10张图片

 点击下一步,选择Spring Web和Mysql Driver依赖如下图:

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第11张图片

 点击创建即可:

配置文件源码:

在resources下创建application.yml

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第12张图片

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第13张图片

 配置文件代码如下:

##改变端口号
server:
  port: 8081

#配置数据源  datasource
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/encryptdb?serverTimezone=UTC
    username: root
    password: root
#mybatis配置
mybatis:
  type-aliases-package: org.spring.springboot.domain
  mapper-locations: classpath:mapper/*.xml

  我所用到的maven(在项目的pom.xml里面更改即可)依赖如下:





    4.0.0

    com.jl

    Crud_Two

    0.0.1-SNAPSHOT

    Crud_Two

    Crud_Two

    

        1.8

        UTF-8

        UTF-8

        2.6.13

    



    

        

            org.projectlombok

            lombok

            true

        

        

            org.springframework.boot

            spring-boot-starter-jdbc

        

        

            org.springframework.boot

            spring-boot-starter-web

        

        

            com.mysql

            mysql-connector-j

            runtime

        

        

            org.mybatis.spring.boot

            mybatis-spring-boot-starter

            2.1.3

        

        

        

            junit

            junit

            4.12

        

        

        

            org.springframework.boot

            spring-boot-starter-test

            test

            

                

                    org.junit.vintage

                    junit-vintage-engine

                

            

        

    





    

        

            

                org.springframework.boot

                spring-boot-dependencies

                ${spring-boot.version}

                pom

                import

            

        

    



    

        

            

                org.apache.maven.plugins

                maven-compiler-plugin

                3.8.1

                

                    1.8

                    1.8

                    UTF-8

                

            

            

                org.springframework.boot

                spring-boot-maven-plugin

                ${spring-boot.version}

                

                    com.jl.crud.CrudApplication

                    true

                

                

                    

                        repackage

                        

                            repackage

                        

                    

                

            

        

    

  项目整体结构如下:

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第14张图片

 首先在Pojo目录下创建实体类User

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第15张图片

 源码:

package com.jl.crud_two.Pojo;



import lombok.Data;



/**

 * @Author Jin

 * @Description

 * @Date 2024/1/6 14:52

 **/

@Data

public class User {

    private Integer id;

    private String name;

    private Integer age;

}

  在Mapper目录下创建UserMapper:

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第16张图片

 源码:

package com.jl.crud_two.Mapper;



import com.jl.crud_two.Pojo.User;

import org.apache.ibatis.annotations.Mapper;



import java.util.List;



/**

 * @Author Jin

 * @Description

 * @Date 2024/1/6 14:59

 **/

@Mapper

public interface UserMapper {

    /**

     * 分页查询员工信息

     * @param starRows

     * @return 每一页的员工信息的集合

     */

    public List queryPage(Integer starRows);



    /**

     * 每一行的个数

     * @return

     */

    public int getRowCount();



    /**

     * 插入

     * @param user

     * @return

     */

    public int insertUser(User user);



    /**

     * 通过id删除员工信息

     * @param id

     * @return 是否成功

     */

    public Integer delete(int id);



    /**

     * 更新员工信息

     * @param user

     * @return 是否成功

     */

    public int Update(User user);



    /**

     * 根据id查询

     * @param id

     * @return

     */

    public User byId(Integer id);

}

  在Service目录下创建UserService:

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第17张图片

 源码:

package com.jl.crud_two.Service;



import com.jl.crud_two.Mapper.UserMapper;

import com.jl.crud_two.Pojo.User;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;



import java.util.List;



/**

 * @Author Jin

 * @Description

 * @Date 2024/1/6 15:09

 **/

@Service

public class UserService {

    @Autowired

    UserMapper userMapper;





    /**

     * 分页

     * @param starRows

     * @return

     */

    public List queryPage(Integer starRows){

        return userMapper.queryPage(starRows);

    }



    /**

     * 每一行的个数

     * @return

     */

    public int getRowCount(){

        return userMapper.getRowCount();

    }



    /**

     * 插入

     * @param user

     * @return

     */

    public User insertUser(User user){

        userMapper.insertUser(user);

       return user;

    }



    /**

     * 通过id删除员工信息

     * @param id

     * @return 是否成功

     */

    public Integer delete(int id){

        return userMapper.delete(id);

    }



    /**

     * 更新员工信息

     * @param user

     * @return 是否成功

     */

    public int Update(User user){

        return userMapper.Update(user);

    }



    /**

     * 根据id查询

     * @param id

     * @return

     */

    public User byId(Integer id){

        return userMapper.byId(id);

    }

}

  在resources目录下创建mapper目录:

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第18张图片

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第19张图片

 在mapper目录下创建UserMapper.xml

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第20张图片

 源码:







    

        

        

        

    



    

    



    

    



    

    

        insert into user(name, age)

        values (#{name}, #{age})

    



    

    

        delete

        from user

        where id = #{id}

    



    

    

        update user

        set user.name=#{name},

            user.age=#{age}

        where user.id = #{id};

    



    

    

  在Controller目录下创建UserController

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第21张图片

 源码:

package com.jl.cx.Controller;

import com.jl.cx.Pojo.User;
import com.jl.cx.Service.UserService;
import org.apache.ibatis.annotations.Param;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

/**
 * @Author Jin
 * @Description
 * @Date 2024/1/9 14:03
 **/
@RestController
@RequestMapping("/UserController")
public class UserController {
    @Autowired
    UserService userService;

    /**
     * 通过员工id删除员工
     *
     * @param id
     * @return
     */
    @RequestMapping(value = "/delete", method = RequestMethod.POST)
    public Integer delete(@Param("id") Integer id) {
        System.out.println(id);

        return userService.delete(id);
    }

    /**
     * 更新员工
     *
     * @param user
     * @return
     */
    @RequestMapping(value = "/update", method = RequestMethod.POST)
    @ResponseBody
    public String update(@RequestBody User user) {
        int result = userService.Update(user);
        if (result >= 1) {
            return "修改成功";
        } else {
            return "修改失败";
        }
    }

    /**
     * 插入员工
     *
     * @param user
     * @return
     */
    @RequestMapping(value = "/insert", method = RequestMethod.POST)
    public User insert(@RequestBody User user) {
        return userService.insertUser(user);
    }

    @RequestMapping(value = "/byId")
    @ResponseBody
    public User byId(Integer id) {
        return userService.byId(id);
    }

    /**
     * 查询页数
     *
     * @param page
     * @return
     */
    @RequestMapping(value = "/page", method = RequestMethod.POST)
    @ResponseBody
    public List page(Integer page) {
        int pageNow = page == null ? 1 : page;//传入的页数是null  就查询第一页   否则就根据传入的页数进行查询
        int pageSize = 5;
        int startRows = pageSize * (pageNow - 1);//开始的行数
        List list = userService.queryPage(startRows);
        return list;
    }

    @RequestMapping(value = "rows")
    @ResponseBody
    public int rows() {
        return userService.getRowCount();
    }

}

  后端代码编写完成,随后启动项目

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第22张图片


vue开始操作!!!


 2:创建vue项目

1:根据自己的需求,在对应的路径,输入cmd,

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第23张图片

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第24张图片

 2:在cmd里面输入:vue ui,如下图:

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第25张图片

 3:点击create,开始创建vue项目

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第26张图片

 4:点击Create a new project here,开始创建项目,详细操作如下图:

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第27张图片

 注意:在创建项目的时候,系统给了3种方式创建项目。

①:默认创建操作都一样,这里以vue2版本为主,

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第28张图片

 ②:选择第二个,如下图

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第29张图片

 ③:等待系统创建

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第30张图片

 ④:出现如下图,就代表这项目已成功创建,在这里可以对项目下载插件

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第31张图片

⑤:通过开发软件,来启动项目,分别输入指令:

  • npm-install; npm run serve;
  • npm i [email protected] -S;
  • npm i element-ui;
  •  npm install axios

如下图:

首先输入:npm-install

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第32张图片

以上下载依赖安装成功后,记得在main.xml里面引入依赖:

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第33张图片

 源码:

import Vue from 'vue'

import App from './App.vue'

import router from './router'



import VueRouter from 'vue-router'



// 前后端分离,必须装配这两个1.引入axios

import axios from 'axios'



// 引入elementUI

import ElementUi from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

import store from 'core-js/internals/shared-store'



Vue.config.productionTip = false



// 2.配置axios,Jquery对象$符号开头

Vue.prototype.$http = axios

Vue.config.productionTip = false

Vue.use(ElementUi, VueRouter)



new Vue({

  router,

  store,

  render: h => h(App)

}).$mount('#app')

 输入启动项目指令

npm run serve

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第34张图片

 看到该页面,项目创建成功

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第35张图片

1:配置vue.config.js:

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第36张图片

 源码:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  lintOnSave: false, // 关闭eslint校验
  transpileDependencies: true,

  devServer: {
    open: true, // 自动打开
    port: 8081, // 设置端口号
    host: '127.0.0.1', // 设置host
    proxy: {
      '/api': {
        target: 'http://localhost:8081',
        changeOrigin: true,
        chunkOrigins: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }

})

  开始编写crud页面

创建首页vue界面,index.vue

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第37张图片

 源码:











  配置index路由:

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第38张图片

 源码:

import Vue from 'vue'

import VueRouter from 'vue-router'

import index from '../components/index.vue'

Vue.use(VueRouter)



const routes = [

  {

    path: '/',

    name: 'index',

    component: index

  }

]



const router = new VueRouter({

  routes

})



export default router

  创建修改vue界面,update

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第39张图片

 源码:









  配置update路由:

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第40张图片

 源码:

import Vue from 'vue'
import VueRouter from 'vue-router'
import index from '../components/index.vue'
import update from '@/components/update.vue'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'index',
    component: index
  },
  {
    path: '/update',
    name: 'update',
    component: update
  }
]

const router = new VueRouter({
  routes
})

export default router

  创建添加vue界面,add.vue

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第41张图片

 源码:









  配置add路由

SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页_第42张图片

 源码:

import Vue from 'vue'
import VueRouter from 'vue-router'
import index from '../components/index.vue'
import update from '@/components/update.vue'
import add from '@/components/add.vue'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'index',
    component: index
  },
  {
    path: '/update',
    name: 'update',
    component: update
  },
  {
    path: '/add',
    name: 'add',
    component: add
  }
]

const router = new VueRouter({
  routes
})

export default router

由于删除是通过触发按钮进行操作的,所以删除没有单独的页面,删除功能在index界面。

项目下载地址:

链接:https://pan.baidu.com/s/15e5XQBth3lRpg9kK9JGlZg?pwd=2002 
提取码:2002

你可能感兴趣的:(vue.js,spring,boot,mybatis)