使用springboot+vue+mybatis-plus+element ui做一个简单的增删改查

tips：本人刚学编程纯纯的小白一个，内容不算好，但是可以值得借鉴；我本来也就打算用文章复习一下刚学的知识；如果内容不好，勿喷。题外话：做这个增删改查的时候可费了我大把大把的时间，刚开始学难免明知有坑还是要往里面跳，但这也不是个坏事，写代码不就是一遍一遍地去尝试，写的多了，踩得坑多了，你的知识你的认知就会越来越丰富。刚开始写这个增项改查的时候，不会写就去网上查各种例子，例子很多，五花八门，愣是一

码猴。

3020人浏览 · 2022-02-11 17:01:49

码猴。 · 2022-02-11 17:01:49 发布

tips：

本人刚学编程纯纯的小白一个，内容不算好，但是可以值得借鉴；希望能靠这篇文章能得到大神的指点；我本来也就打算用文章复习一下刚学的知识；本篇文章主要是介绍增删改查，其余的配置代码也就一笔带过。如果内容不好，勿喷。

题外话：

后端基础学不好，学了就忘，前端也一样，让人很难受。做这个增删改查的时候可费了我大把大把的时间，刚开始学难免明知有坑还是要往里面跳，但这也不是个坏事，写代码不就是一遍一遍地去尝试，写的多了，踩得坑多了，你的知识你的认知就会越来越丰富。

刚开始写这个增删改查的时候，不会写就去网上查各种例子，例子很多，五花八门，愣是一个也看不懂，看的我是脑子嗡嗡的，以至于后面有一段时间就感觉脑袋很沉，转不动了，有没有刚学编程的同学和我有一样的感受；前话说的有点多了，不说了，下面开整。

一.springboot+vue+mybatis-plus增删改查

工具：后台Eclipse

前台VsCode

数据库MySQL

先给大家献上后端的所有类

学过springboot的都知道上面几个层都有啥作用吧，其实有的层我也不知道有何作用，其中有的层命名不一样，按照自己命名方式来主要是舒服。有的我都觉着多余，但就是这么写，我也不敢违抗啊。

层级调用：controller层-servic层-manager层-dao层

正片开始了

pom文件的依赖


<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
			<exclusions>
				<exclusion>
					<groupId>org.apache.logging.log4j</groupId>
					<artifactId>log4j-to-slf4j</artifactId>
				</exclusion>
			</exclusions>
		</dependency>
		<!-- 热部署 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
		</dependency>
		<dependency>
			<groupId>io.springfox</groupId>
			<artifactId>springfox-staticdocs</artifactId>
			<version>${io.springfox.version}</version>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-aop</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-cache</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-configuration-processor</artifactId>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>commons-logging</groupId>
			<artifactId>commons-logging</artifactId>
			<version>1.2</version>
		</dependency>
		<dependency>
			<groupId>commons-lang</groupId>
			<artifactId>commons-lang</artifactId>
			<version>2.6</version>
		</dependency>
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
		</dependency>
		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>druid</artifactId>
			<version>1.1.8</version>
		</dependency>
		<dependency>
			<groupId>com.baomidou</groupId>
			<artifactId>mybatis-plus-boot-starter</artifactId>
			<version>3.3.1</version>
		</dependency>
		<dependency>
			<groupId>com.thetransactioncompany</groupId>
			<artifactId>cors-filter</artifactId>
			<version>2.6</version>
		</dependency>
		<dependency>
			<groupId>com.thetransactioncompany</groupId>
			<artifactId>java-property-utils</artifactId>
			<version>1.9.1</version>
		</dependency>
		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>fastjson</artifactId>
			<version>1.2.58</version>
		</dependency>
		<dependency>
			<groupId>net.sf.json-lib</groupId>
			<artifactId>json-lib</artifactId>
			<version>2.4</version>
			<classifier>jdk15</classifier>
		</dependency>
		<dependency>
			<groupId>joda-time</groupId>
			<artifactId>joda-time</artifactId>
		</dependency>
		<dependency>
			<groupId>org.jodd</groupId>
			<artifactId>jodd-http</artifactId>
			<version>3.9.1</version>
		</dependency>
		<dependency>
			<groupId>com.thoughtworks.xstream</groupId>
			<artifactId>xstream</artifactId>
			<version>1.4.11.1</version>
		</dependency>
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
		</dependency>
		<dependency>
			<groupId>io.springfox</groupId>
			<artifactId>springfox-swagger2</artifactId>
			<version>2.8.0</version>
		</dependency>
		<dependency>
			<groupId>io.springfox</groupId>
			<artifactId>springfox-swagger-ui</artifactId>
			<version>2.8.0</version>
		</dependency>
		<dependency>
			<groupId>commons-codec</groupId>
			<artifactId>commons-codec</artifactId>
		</dependency>
		<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.2</version>
		</dependency>
		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>easyexcel</artifactId>
			<version>2.2.6</version>
		</dependency>



		<dependency>
			<groupId>org.json</groupId>
			<artifactId>json</artifactId>
			<version>20171018</version>
		</dependency>
		<dependency>
			<groupId>io.springfox</groupId>
			<artifactId>springfox-swagger2</artifactId>
			<version>2.9.2</version>
		</dependency>
		<dependency>
			<groupId>io.springfox</groupId>
			<artifactId>springfox-swagger-ui</artifactId>
			<version>2.9.2</version>
		</dependency>

	</dependencies>

yml配置文件

端口：7002，可以自己更改，没必要按我的端口。

数据库：需要修改的也就最下面三行，连接自己的数据库，密码和用户

mybatis-plus：注释里有说明

前后分离就要跨域，所以要先配置跨域

最后的最后配置

mybatis-plus的配置

这是一个分页的配置

1.后端代码：

dao类

就这一段极少的代码，却拥有超强的功能，这也归功于继承的BaseMapper，简单来说继承了它，增删改查的语句我们也就不用写了，直接调用dao就行了。

@Repository
public interface UserDao extends BaseMapper<User>{

}

manager类

上面图片里的manager写错了

这是我在网上找到对manager的解释

A）对第三方平台封装的层，预处理返回结果及转化异常信息；
B）对 Service 层通用能力的下沉，如缓存方案、中间件通用处理；
C）与 DAO 层交互，对多个 DAO 的组合复用。

@Component
public class UserMannger {
	@Autowired
	private UserDao userDao;
	//获取全部用户
	public List<User> getAllUsers(){
		QueryWrapper<User> wrapper=new QueryWrapper<User>();
		return userDao.selectList(wrapper);
	}
	//根据id获取用户
	public User getById(String id) {
		return userDao.selectById(id);
	}
	//根据姓名获取用户
	public User getByName(String username) {
		QueryWrapper<User> wrapper=new QueryWrapper<User>();
		wrapper.eq("username", username);
		return userDao.selectOne(wrapper);
	}
	//根据角色获取用户
	public List<User> getByRole(String role) {
		QueryWrapper<User> wrapper=new QueryWrapper<User>();
		wrapper.eq("role",role);
		return userDao.selectList(wrapper);
	}
	//添加用户
	public int insert(User user) {
		return userDao.insert(user);
	}
	//删除用户
	public int delete(String id) {
		return userDao.deleteById(id);
	}
	//编辑用户
	public int update(User  user) {
		return userDao.updateById(user);
	}
	
}

service类

@Service
public class UserService {
	@Autowired
	private UserMannger userMannger;
	
	//获取全部用户
	public List<User> getAllUsers(){
		return userMannger.getAllUsers();
	}
	//根据id获取用户
	public User getById(String id) {
		return userMannger.getById(id);
	}
	//根据姓名获取
	public User getByName(String name) {
		return userMannger.getByName(name);
	}
	//根据角色获取
	public List<User> getByRole(String role) {
		return userMannger.getByRole(role);
	}
	//增加
	public int insert(User user) {
		return userMannger.insert(user);
	}
	//删除
	public int delete(String id) {
		return userMannger.delete(id);
	}
	//修改
	public int update(User user) {
		return userMannger.update(user);
	}
}

controller类

@RequestMapping("/UserController")
@RestController
public class UserController {
	@Autowired
	private UserService userService;
	@Autowired
	private LoginService loginService;
	
	//获取全部用户
	@RequestMapping("/getAllUsers")
	public List<User> getAllUsers() {
		return userService.getAllUsers();
	}
    //根据id获取用户
	@RequestMapping("/getById")
	public User getById(@RequestBody User user) {
		return userService.getById(user.getId());
	}
    //根据姓名获取用户
	@RequestMapping("getByName")
	public User getByName(@RequestBody User user) {
		return userService.getByName(user.getUsername());
	}
    //根据角色获取用户
	@RequestMapping("/getByRole")
	public List<User> getByRole(@RequestBody User user) {
		return userService.getByRole(user.getRole());
	}
    //新增
	@RequestMapping("/addUser")
	public int addUser(@RequestBody User user) {
		return userService.insert(user);
	}
    //删除
	@RequestMapping("/deleteUser/{id}")
	public int deleteUser(@PathVariable("id") String id) {
		return userService.delete(id);
	}
    //修改
	@RequestMapping("/editUser")
	public int editUser(@RequestBody User user) {
		return userService.update(user);
	}
}

后端代码也就这么多，下面献上前端代码

2.前端代码

自从学习了一点点的vue，我感觉我写代码就是Ctrl+c，很方便，但也有弊端，这样我就不能敲键盘了，键盘敲不烂，我就没理由换新键盘了。又说了点题外话，本人比较喜欢聊天，所以就说多了，哈哈哈哈哈哈哈哈。

直接给大家上代码。

main.js的代码

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios';

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

Vue.config.productionTip = false


Vue.use(ElementUI);

Vue.prototype.$axios = axios;
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

index.js

这个index是router里的index文件不要写到别处了。

import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

const routes = [
  
  {
    path: '/UserForm',
    name: 'UserForm',
    component: () => import(/* webpackChunkName: "about" */ '../views/UserForm.vue')
  },
  
]

const router = new VueRouter({
  routes
})

export default router

App.vue

<template>
  <div id="app">
    <div id="nav">
      
      <router-link to="/UserForm">用户管理</router-link>|
     
    </div>
    <router-view/>
  </div>
</template>

UserForm.vue

<template>
  <div>
    <el-button type="primary" @click="getAllUsersBtn">查询所有用户</el-button>
    <el-input v-model="UserForm.id" style="width:100px"></el-input>
    <el-button type="primary" @click="getIdBtn">根据id查询</el-button>
    <el-input v-model="UserForm.username" style="width:100px"></el-input>
    <el-button type="primary" @click="getNameBtn">根据姓名查询</el-button>
    <el-input v-model="UserForm.role" style="width:100px"></el-input>
    <el-button type="primary" @click="getRoleBtn">根据角色查询</el-button>

    <el-button type="primary" @click="OpenAddBtn">添加用户</el-button>
    <template>
      <el-table :data="users" style="width: 100%" height="250">
        <el-table-column fixed prop="id" label="编号" width="150">
        </el-table-column>
        <el-table-column prop="username" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="userpassword" label="密码" width="120">
        </el-table-column>
        <el-table-column prop="role" label="角色" width="120">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="300">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="deleteBtn(scope.row)" type="text" size="small">
              删除
            </el-button>
            <el-button type="text" size="small" @click="openEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>

      </el-table>
    </template>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose1">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.userpassword"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option label="男" value="man"></el-option>
            <el-option label="女" value="woman"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="form.role" placeholder="请选择角色">
            <el-option label="学生" value="student"></el-option>
            <el-option label="老师" value="teacher"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBtn">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisible1" width="30%" :before-close="handleClose">
      <el-form ref="form" :model="EditForm" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="EditForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="EditForm.userpassword"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="EditForm.sex" placeholder="请选择性别">
            <el-option label="男" value="man"></el-option>
            <el-option label="女" value="woman"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="EditForm.role" placeholder="请选择角色">
            <el-option label="学生" value="student"></el-option>
            <el-option label="老师" value="teacher"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="EditBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      users: [],
      dialogVisible: false,
      dialogVisible1: false,
      form: {
        username: "",
        userpassword: "",
        sex: "",
        role: "",
      },
      UserForm: {
        id: "",
        username: "",
        userpassword: "",
        sex: "",
        role: "",
      },
      EditForm: {
        id: "",
        username: "",
        userpassword: "",
        sex: "",
        role: "",
      },
    };
  },
  methods: {
    getAllUsersBtn() {
      getAllUsersBtnAction(this);
    },
    OpenAddBtn() {
      this.dialogVisible = true;
    },
    addBtn() {
      addBtnAction(this);
    },
    getIdBtn() {
      getIdBtnAction(this);
    },
    getNameBtn() {
      getNameBtnAction(this);
    },
    getRoleBtn() {
      getRoleBtnAction(this);
    },
    deleteBtn(row) {
      const that = this;
      this.$axios
        .post("http://127.0.0.1:7002/crud/UserController/deleteUser/" + row.id)
        .then(function (res) {
          that.getAllUsersBtn();
        });
    },
    openEdit(row) {
      this.dialogVisible1 = true;
      this.EditForm = row;
    },
    EditBtn(row) {
      EditBtnAction(this);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleClose1(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
function getAllUsersBtnAction(vm) {
  vm.$axios
    .post("http://127.0.0.1:7002/crud/UserController/getAllUsers")
    .then(function (res) {
      vm.users = res.data;
      console.log(res);
    });
}
function addBtnAction(vm) {
  vm.$axios
    .post("http://127.0.0.1:7002/crud/UserController/addUser", vm.form, {
      "Content-Type": "application/json;charset=utf-8",
    })
    .then(function (res) {
      vm.dialogVisible = false;
      getAllUsersBtnAction(vm);
      console.log(res);
    })
    .catch(function (err) {
      console.log(err);
    });
}
function getIdBtnAction(vm) {
  let input = {
    id: vm.UserForm.id,
  };
  vm.$axios
    .post("http://127.0.0.1:7002/crud/UserController/getById", input, {
      "Content-Type": "application/json;charset=utf-8",
    })
    .then(function (res) {
      vm.users = [];
      vm.users.push(res.data);
      console.log(res);
    });
}
function getNameBtnAction(vm) {
  let input = {
    username: vm.UserForm.username,
  };
  vm.$axios
    .post("http://127.0.0.1:7002/crud/UserController/getByName", input, {
      "Content-Type": "application/json;charset=utf-8",
    })
    .then(function (res) {
      vm.users = [];
      vm.users.push(res.data);
      console.log(res);
    });
}
function getRoleBtnAction(vm) {
  let input = {
    role: vm.UserForm.role,
  };
  vm.$axios
    .post("http://127.0.0.1:7002/crud/UserController/getByRole", input, {
      "Content-Type": "application/json;charset=utf-8",
    })
    .then(function (res) {
      vm.users = res.data;
      console.log(res);
    });
}
function EditBtnAction(vm) {
  vm.$axios
    .post("http://127.0.0.1:7002/crud/UserController/getByRole", vm.EditForm, {
      "Content-Type": "application/json;charset=utf-8",
    })
    .then(function (res) {
      vm.dialogVisible1 = false;
    });
}
</script>

附上一段操作，看看结果如何，页面不精致，只求结果。

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}$/, //不连续的两位字母// /^