SpringBoot+Vue实现页面的简单增删改查：

后端SpringBoot部分：1---目录结构：2---实体类：package com.demo.entity;import lombok.Data;/*** Created by houyuanbo* on 2019/12/9 13:50** @Description ：实体类*/@Datapublic class User {priv...

haijiao12138

6298人浏览 · 2019-12-11 15:40:35

haijiao12138 · 2019-12-11 15:40:35 发布

后端SpringBoot部分：

1---目录结构：

2---实体类：

package com.demo.entity;

import lombok.Data;

/**
 * Created by houyuanbo
 * on 2019/12/9 13:50
 *
 * @Description ：实体类
 */
@Data
public class User {
    private int userId;
    private String userDate;
    private String userName;
    private String userAddress;
}

3---mapper类：

package com.demo.mapper;

import com.demo.entity.User;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

/**
 * Created by houyuanbo
 * on 2019/12/9 13:57
 *
 * @Description ：数据库接口mapper接口类
 */
@Mapper
public interface UserMapper {

    /**
     * 通过名字查找信息
     * @param userName
     * @return  相同名字的信息的集合
     */
    public List<User> findUserByName(String userName);

    /**
     * 查找所有的员工名字的信息
     * @return 所有的员工
     */
    public List<User> ListUser();

    /**
     * 分页查询员工信息
     * @param starRows
     * @return 每一页的员工信息的集合
     */
    public List<User> queryPage(Integer starRows);

    /**
     * 每一行的个数
     * @return
     */
    public int getRowCount();

    /**
     * 插入员工信息
     * @param user
     * @return 是否成功
     */
    public int insertUser(User user);

    /**
     * 通过id删除员工信息
     * @param userId
     * @return 是否成功
     */
    public int delete(int userId);

    /**
     * 更新员工信息
     * @param user
     * @return  是否成功
     */
    public int Update(User user);


}

4---service层：

package com.demo.service;

import com.demo.entity.User;
import com.demo.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * Created by houyuanbo
 * on 2019/12/9 14:23
 *
 * @Description ：
 */
@Service
public class UserService {

    @Autowired
    UserMapper userMapper;

    public List<User> findByName(String userName) {
        return userMapper.findUserByName(userName);
    }

    public List<User> ListUser() {
        return userMapper.ListUser();
    }

    public List<User> queryPage(Integer starRows) {
        return userMapper.queryPage(starRows);
    }

    public int getRowCount() {
        return userMapper.getRowCount();
    }

    public User insertUser(User user) {
        userMapper.insertUser(user);
        return user;
    }

    public int delete(int userId) {
        return userMapper.delete(userId);
    }

    public int Update(User user) {
        return userMapper.Update(user);
    }


}

5---controller层：

package com.demo.controller;

import com.demo.entity.User;
import com.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

/**
 * Created by houyuanbo
 * on 2019/12/9 14:34
 *
 * @Description ：
 */

@CrossOrigin
@RestController
public class UserController {

    @Autowired
    UserService userService;

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

        int result = userService.delete(userId);
        return result;
    }

    /**
     * 更新员工
     *
     * @param user
     * @return
     */
    @RequestMapping(value = "/update", method = RequestMethod.POST)
    @ResponseBody
    public String update(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(User user) {
        return userService.insertUser(user);
    }

    /**
     * 查询所有
     *
     * @return
     */
    @RequestMapping(value = "/ListUser")
    @ResponseBody
    public List<User> ListUser() {
        return userService.ListUser();
    }

    /**
     * 通过名字查询  模糊查询
     *
     * @param userName
     * @return
     */
    @RequestMapping(value = "/ListByName")
    @ResponseBody
    public List<User> ListUserByName(String userName) {
        return userService.findByName(userName);
    }

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

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


}

6---启动类：

package com.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }

}

7---mapper.xml层：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.demo.mapper.UserMapper">
    <resultMap id="result" type="com.demo.entity.User">
        <result property="userId" column="userId"></result>
        <result property="userDate" column="userDate"></result>
        <result property="userName" column="userName"></result>
        <result property="userAddress" column="userAddress"></result>
    </resultMap>

    <!--查询所有的方法-->
    <select id="ListUser" resultMap="result">
        select * from user;
    </select>

    <!--通过员工姓名查找员工-->
    <select id="findUserByName" parameterType="String" resultMap="result">
        select * from user where userName like concat(concat('%',#{username},'%')) order by userId desc;
    </select>

    <!--分页查询-->
    <select id="queryPage" parameterType="Integer" resultMap="result">
        select * from user order by userId desc limit #{startRows},5;
    </select>

    <!--查询用户的总条数-->
    <select id="getRowCount" resultType="Integer">/*返回值类型是Integer*/
        select count(*) from user;
    </select>

    <!--插入数据-->
    <insert id="insertUser" parameterType="com.demo.entity.User">
        insert into user(userId,userDate,userName,userAddress) values (
        #{userId},
        #{userDate,jdbcType=VARCHAR},
        #{userName,jdbcType=VARCHAR},
        #{userAddress,jdbcType=VARCHAR}
        )
    </insert>

    <!--删除-->
    <delete id="delete" parameterType="int">
        delete from user where userId=#{userId}
    </delete>

    <!--更新-->
    <update id="Update" parameterType="com.demo.entity.User">
        update user
            set user.userDate=#{userDate},
                user.userName=#{userName},
                user.userAddress=#{userAddress}
                    where user.userId=#{userId};
    </update>

</mapper>

8---配置层：

##数据源配置
spring.datasource.url=jdbc:mysql://localhost:3306/test1?useUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

##mybatis配置
mybatis.type-aliases-package=org.spring.springboot.domain
mybatis.mapper-locations=classpath:mapper/*.xml

##改变端口号
server.port=8081

9---依赖层：

<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.2.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
        <mybatis-spring-boot>1.2.0</mybatis-spring-boot>
        <mysql-connector>5.1.39</mysql-connector>
    </properties>

    <dependencies>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <!--SpringBoot  Web依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!--mysql连接驱动依赖-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>${mysql-connector}</version>
        </dependency>

        <!--SpringBoot mybatis依赖-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>${mybatis-spring-boot}</version>
        </dependency>
        <!--Junit 单元测试依赖-->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
        </dependency>
        <!--SpringBoot Test依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

10--数据库设计：

vue部分：

1---config包下:index.js文件修改：

    proxyTable: {
      '/': {
        target:'http://localhost:8081', // 你请求的第三方接口
        changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite:{  // 路径重写，
          '^/': ''  // 替换target中的请求地址
        }
      }
    },

2---增删改查主页面：

<template>
  <div>
    <!--标题-->
    <el-form class="title">
      vue to complish CRUD
    </el-form>

    <!--导航栏设计-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="search" class="search_name" size="mini" placeholder="输入姓名查询"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="text" @click="onSearch()" class="el-icon-search">查询</el-button>
      </el-form-item>

      <el-form-item>
        <el-button class="el-icon-refresh" type="text" @click="refreshData">刷新</el-button>
      </el-form-item>

      <el-form-item>
        <el-button class="el-icon-circle-plus-outline" type="text" @click="dialogVisible = true">添加</el-button>
      </el-form-item>

    </el-form>

    <el-table :data="tableData" highlight-current-row border style="width: 100%">
      <el-table-column label="编号">
        <template slot-scope="scope">
          <span>{{ scope.row.userId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="日期">
        <template slot-scope="scope">
          <i class="el-icon-time hidden-sm-and-down"></i>
          <span>{{ scope.row.userDate }}</span>
        </template>
      </el-table-column>

      <el-table-column label="姓名">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="right">
          <p>姓名: {{ scope.row.userName }}</p>
          <p>住址: {{ scope.row.userAddress }}</p>
          <p>日期：{{ scope.row.userDate }}</p>
          <div slot="reference" class="name-wrapper">
            <el-button type="text">{{ scope.row.userName }}</el-button>
          </div>
        </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="住址">
        <template slot-scope="scope">
          <span>{{ scope.row.userAddress }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right" width="190">
        <template slot-scope="scope">
          <el-button size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--添加对话框开始-->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm" size="medium">
      <el-dialog title="添加" :append-to-body='true' :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
        <el-input type="hidden" v-model="ruleForm.userId"/>


        <el-form-item label="时间" prop="userDate">
          <el-date-picker type="datetime" placeholder="选择日期" v-model="ruleForm.userDate" style="width: 100%;"></el-date-picker>
        </el-form-item>

        <el-form-item label="姓名" prop="userName">
          <el-input v-model="ruleForm.userName"></el-input>
        </el-form-item>

        <el-form-item label="住址" prop="userAddress">
          <el-input v-model="ruleForm.userAddress"></el-input>
        </el-form-item>


          <span slot="footer" class="dialog-footer">
            <el-button @click="cancel()" size="medium">取 消</el-button>
            <el-button @click="addUser()" type="primary" size="medium">确 定</el-button>
          </span>
      </el-dialog>
    </el-form>
    <!--添加对话框结束-->

    <!--编辑对话框开始-->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm" size="medium">
      <el-dialog title="编辑" :append-to-body='true' :visible.sync="dialogUpdate" width="50%" :before-close="handleClose">
        <el-input type="hidden" v-model="ruleForm.userId"/>
        <el-form-item label="时间" prop="userDate">
          <el-date-picker type="datetime" placeholder="选择日期" v-model="ruleForm.userDate" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="姓名" prop="userName">
          <el-input v-model="ruleForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="住址" prop="userAddress">
          <el-input v-model="ruleForm.userAddress"></el-input>
        </el-form-item>

        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel()" size="medium">取 消</el-button>
            <el-button @click="updateUser()" type="primary" size="medium">确 定</el-button>
          </span>
      </el-dialog>
    </el-form>
    <!--编辑对话框结束-->

    <br>
    <div class="pages">
      <el-pagination background :disabled = "disablePage" :current-page.sync="currentPage" small layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination>
    </div>

  </div>
</template>

<script>
    export default {
        data() {
            return {
                ruleForm: {
                    userId: '',
                    userName: '',
                    userDate: '',
                    userAddress: ''
                },
                rules: {
                    userName: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                        { min: 2, max: 7, message: '长度在 2 到 15 个字符', trigger: 'blur' }
                    ],
                    userAddress: [
                        { required: true, message: '请输入住址', trigger: 'blur' },
                        { min: 5, message: '长度大于 3 个字符', trigger: 'blur' }
                    ],
                },
                tableData: [],
                search: '',
                dialogVisible: false,
                dialogUpdate: false,
                pageSize: 5,
                currentPage: 1,
                total: 0,
                disablePage: false
            }
        },
        methods: {
            handleEdit(index, row) {//-------------------------------------------编辑操作
                this.dialogUpdate = true;
                this.ruleForm = Object.assign({}, row); //这句是关键！！！
            },
            handleDelete(index, row) {//-----------------------------------------删除操作
                console.log(index, row);
                console.log("========"+index);
                console.log("======="+row);
                this.$confirm('删除操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let postData = this.qs.stringify({
                        userId: row.userId,
                    });
                    this.axios({
                        method: 'post',
                        url:'http://localhost:8081/delete',
                        data:postData
                    }).then(response =>
                    {
                        this.getPages();
                        this.currentPage = 1;
                        this.axios.post('http://localhost:8081/page').then(response =>
                        {
                            this.tableData = response.data;
                        }).catch(error =>
                        {
                            console.log(error);
                        });
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        console.log(response);
                    }).catch(error =>
                    {
                        console.log(error);
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            handleCurrentChange() {
                console.log(`当前页: ${this.currentPage}`);
                let postData = this.qs.stringify({
                    page: this.currentPage
                });
                this.axios({
                    method: 'post',
                    url:'http://localhost:8081/page',
                    data:postData
                }).then(response =>
                {
                    this.tableData = response.data;
                }).catch(error =>
                {
                    console.log(error);
                });
            },
            cancel() {
                this.dialogUpdate = false;
                this.dialogVisible = false;
                this.emptyUserData();
            },
            /*表格清空函数*/
            emptyUserData(){
                this.ruleForm = {
                    userName: '',
                    userDate: '',
                    userAddress: ''
                }
            },
            addUser() {//----------------------------------------------添加用户操作
                let postData = this.qs.stringify({
                    userDate: this.ruleForm.userDate,
                    userName: this.ruleForm.userName,
                    userAddress: this.ruleForm.userAddress
                });
                this.axios({
                    method: 'post',
                    url:'http://localhost:8081/insert',
                    data:postData
                }).then(response =>
                {
                    this.axios.post('http://localhost:8081/page').then(response =>
                    {
                        this.tableData = response.data;
                        this.currentPage = 1;
                        this.$message({
                            type: 'success',
                            message: '已添加!'
                        });
                    }).catch(error =>
                    {
                        console.log(error);
                    });
                    this.getPages();
                    this.dialogVisible = false
                    console.log(response);
                }).catch(error =>
                {
                    console.log(error);
                });
            },

            updateUser() {//-----------------------------------------更新用户操作
                let postData = this.qs.stringify({
                    userId: this.ruleForm.userId,
                    userDate: this.ruleForm.userDate,
                    userName: this.ruleForm.userName,
                    userAddress: this.ruleForm.userAddress
                });
                this.axios({
                    method: 'post',
                    url:'http://localhost:8081/update',
                    data:postData
                }).then(response =>
                {
                    this.handleCurrentChange();
                    this.cancel();
                    this.$message({
                        type: 'success',
                        message: '更新成功!'
                    });
                    console.log(response);
                }).catch(error =>
                {
                    this.$message({
                        type: 'success',
                        message: '更新失败!'
                    });
                    console.log(error);
                });
            },

            onSearch() {//--------------------------------------------------搜索用户操作
                let postData = this.qs.stringify({
                    userName: this.search
                });
                this.axios({
                    method: 'post',
                    url: 'http://localhost:8081/ListByName',
                    data: postData
                }).then(response =>
                {
                    this.tableData = response.data;
                    this.disablePage = true;
                }).catch(error =>
                {
                    console.log(error);
                });
            },
            getPages() {//-----------------------------------------------------获取页码操作
                this.axios.post('http://localhost:8081/rows').then(response =>
                {
                    this.total = response.data;
                }).catch(error =>
                {
                    console.log(error);
                });
            },
            refreshData() {
                location.reload();
            }
        },
        created() {
            /*this.axios.get('static/user.json').then(response =>
            {
                this.tableData = response.data.tableData;
                this.total = response.data.tableData.length;
                // console.log(JSON.parse(JSON.stringify(response.data))['tableData'])
            });*/
            this.axios.post('http://localhost:8081/page').then(response =>
            {
                this.tableData = response.data;
            }).catch(error =>
            {
                console.log(error);
            });

            this.axios.post('http://localhost:8081/rows').then(response =>
            {
                this.total = response.data;
            }).catch(error =>
            {
                console.log(error);
            });

        },
    }
</script>
<style scoped>
  .title{
    text-align: center;
    font-size:35px;
    color: #8cc5ff;
    font-weight: bold;
  }
  .search_name{
    width: 200px;
  }
  .pages{
    margin: 0px;
    padding: 0px;
    text-align: right;
  }
</style>

3---router中index.js文件：

import Vue from 'vue'
import Router from 'vue-router'
import Login from "../components/Login";
import HelloWorld from "../components/HelloWorld";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',/*根目录下直接显示*/
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/login',/*根目录下直接显示*/
      name: 'login',
      component: Login
    }
  ]
})

4---App.vue文件：

<template>
  <div id="app">
    <el-row type="flex" justify="center">
      <el-col :xs="24" :sm="22" :md="20" :lg="20" :xl="18">
        <router-view/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'App',
    data(){
      return{

      }
    },
    methods:{

    }
}
</script>
<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0px;
    padding: 0px;
  }
</style>

5---main.js文件：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
import 'element-ui/lib/theme-chalk/display.css'

Vue.use(ElementUI)

import axios from 'axios'
Vue.prototype.axios = axios

import qs from 'qs'
Vue.prototype.qs=qs

Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

项目效果：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^