以新增用户为例子解释前后端整体连接方式详解（Service、Mapper、Controller、Entity）

目录

​编辑

前端

1、点击新增用户按钮执行 handleAdd() 方法

2、添加用户表单校验：（这里明显是简介版本，还有很大的优化空间）

3、点击表单里的确 定按钮通过 submitForm() 方法 来提交表单内容实现增加用户：

后端

1、C层--控制层（Conroller层）：Controller

2、M层--业务层（Model层）：Service——Serviceimpl

3、M层--业务层（Model层）：Mapper——Mapper.xml

4、V层--视图层（View层）：在Controller里操作完返回前端去做具体的显示

整合mybatis连接数据库（druid连接池方式连接）

1、添加mybatis依赖和Druid依赖

2、配置好Datasource---在application-druid.yml中

3、配置Mybatis---在application.yml中

---

前端

1、点击新增用户按钮执行 handleAdd() 方法

<el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['system:user:add']"
            >新增</el-button>
          </el-col>

 /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      getUser().then(response => {
        this.postOptions = response.posts;
        this.roleOptions = response.roles;
        this.open = true;
        this.title = "添加用户";
        this.form.password = this.initPassword;
      });
    },

2、添加用户表单校验：（这里明显是简介版本，还有很大的优化空间）

     // 表单校验
      rules: {
        userName: [
          { required: true, message: "用户名称不能为空", trigger: "blur" },
          { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
        ],
        nickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "用户密码不能为空", trigger: "blur" },
          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
        ],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phonenumber: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      }

3、点击表单里的确 定按钮通过 submitForm() 方法 来提交表单内容实现增加用户：

这里测试的是添加用户，所以放上addUser(）的js代码。

  <el-button type="primary" @click="submitForm">确 定</el-button>

  /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.userId != undefined) {
            updateUser(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addUser(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

// 新增用户
export function addUser(data) {
  return request({
    url: '/system/user',
    method: 'post',
    data: data
  })
}