前言

从0开始，学习东西一定要在官方网站学习，有很多同学会写代码，但是没有构建过项目，都是在别人脚手架上开发，这样不理解作者的思想

创建客户表

打开navicat链接上数据库执行脚本创建表

CREATE TABLE `wms_supplier` (
  `id` int NOT NULL AUTO_INCREMENT,
  `supplier_name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT NULL COMMENT '供应商名称',
  `link_man` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT NULL COMMENT '联系人',
  `mobile` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT NULL COMMENT '联系电话',
  `address` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT NULL COMMENT '地址',
  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin COMMENT='供应商';

编写vue界面

打开vscode，右键新建vue界面

查询功能

<el-table
:data="data.tableList"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>

<el-table-column prop="supplierName" label="供应商名称">
</el-table-column>
<el-table-column prop="linkMan" label="联系人"> </el-table-column>
<el-table-column prop="mobile" label="联系电话">
</el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
<el-table-column prop="createTime" label="创建时间">
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="data.q.page"
:page-sizes="[10, 50, 100]"
:page-size="data.q.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="data.total"
>
</el-pagination>

// 查询
const query = () => {
  proxy.$axios
    .get(proxy.domain + "/supplier/list", {
      headers: {
        token: localStorage.getItem("atoken"),
      },
      params: data.q,
    })
    .then(function (res) {
      if (res.data.code == 0) {
        //成功
        data.tableList = res.data.list;
        data.total = res.data.total;
      }
    });
};

新增、修改功能

<el-form :model="supplier" label-width="120px">
  <el-form-item label="供应商名称">
    <el-input v-model="data.supplier.supplierName"></el-input>
  </el-form-item>
  <el-form-item label="联系人">
    <el-input v-model="data.supplier.linkMan"></el-input>
  </el-form-item>
  <el-form-item label="联系电话">
    <el-input v-model="data.supplier.mobile"></el-input>
  </el-form-item>
  <el-form-item label="地址">
    <el-input v-model="data.supplier.address"></el-input>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="onSubmit">保存</el-button>
    <el-button @click="cancel">取消</el-button>
  </el-form-item>
</el-form>

// 保存
const onSubmit = (e) => {
  var customer = data.customer;
  var action = customer.id == null ? "save" : "update";
  proxy.$axios
    .post(proxy.domain + "/customer/" + action, customer, {
      headers: { token: localStorage.getItem("atoken") },
    })
    .then(function (res) {
      
      if (res.data.code == 0) {
        //成功
        data.showList = true;
        query();
      } else {
        ElMessage({message: res.data.msg, type: 'warning'})
      }
    });
};

删除功能

// 删除
const del = () => {
  if (data.ids.length == 0) {
    ElMessage({ message: "请选择数据", type: "warning" });
    return;
  }

  proxy.$axios
    .post(proxy.domain + "/customer/delete", data.ids, {
      headers: { token: localStorage.getItem("atoken") },
    })
    .then(function (res) {
      if (res.data.code == 0) {
        //成功
        query();
      } else {
        ElMessage({ message: res.data.msg, type: "warning" });
      }
    });
};

编写后台接口

编写entity、dao、service、controller，以及mybatis配置文件

查询接口

 /**
 * 列表
 */
@RequestMapping("/list")
public Result list(@RequestParam Map<String, Object> params){
	//查询列表数据
       Query query = new Query(params);

	List<CustomerEntity> customerList = customerService.queryList(query);
	int total = customerService.queryTotal(query);
	
	return Result.ok().put("list", customerList).put("total", total);
}

新增接口

	/**
	 * 保存
	 */
	@RequestMapping("/save")
	public Result save(@RequestBody CustomerEntity customer){
		customerService.save(customer);
		
		return Result.ok();
	}

修改接口

/**
 * 修改
 */
@RequestMapping("/update")
public Result update(@RequestBody CustomerEntity customer){
	customerService.update(customer);
	
	return Result.ok();
}

删除接口

/**
 * 删除
 */
@RequestMapping("/delete")
public Result delete(@RequestBody Integer[] ids){
	customerService.deleteBatch(ids);
	
	return Result.ok();
}