<template> <div> <h1 align="center">SpringBoot阶段机试,ts={{ts}}</h1> <el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form-item label="客户名称"> <el-input v-model="formInline.name" placeholder="客户名称" clearable></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="getList()">查询</el-button> <el-button type="primary" @click="handleAdd()">添加</el-button> </el-form-item> </el-form> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="id" label="编号" width="180"></el-table-column> <el-table-column prop="name" label="名称" width="180"></el-table-column> <el-table-column prop="phone" label="电话" width="180"></el-table-column> <el-table-column prop="addr" label="地址" width="180"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" @click="handleLook(scope.row)">查看</el-button> <el-button size="mini" @click="handleUpdate(scope.row)">修改</el-button> <el-button size="mini" type="danger" @click="handleDel(scope.row.id)">删除</el-button> </template> </el-table-column> </el-table> <el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false"> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="客户名称" :label-width="formLabelWidth" prop="name"> <el-input v-model="form.name" autocomplete="off"></el-input> </el-form-item> <el-form-item label="联系号码" :label-width="formLabelWidth" prop="phone"> <el-input v-model="form.phone" autocomplete="off"></el-input> </el-form-item> <el-form-item label="联系地址" :label-width="formLabelWidth" prop="addr"> <el-input type="textarea" :rows="2" placeholder="请输入地址" v-model="form.addr" autocomplete="off"> </el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogFormVisible = false">取 消</el-button> <el-button type="primary" @click="submitForm('form')">确 定</el-button> </div> </el-dialog> <!-- 查看 --> <el-dialog :title="title" :visible.sync="dialogFormVisible1" :close-on-click-modal="false"> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="客户名称" :label-width="formLabelWidth" prop="name"> <el-input v-model="form.name" autocomplete="off" :disabled="true"></el-input> </el-form-item> <el-form-item label="联系号码" :label-width="formLabelWidth" prop="phone"> <el-input v-model="form.phone" autocomplete="off" :disabled="true"></el-input> </el-form-item> <el-form-item label="联系地址" :label-width="formLabelWidth" prop="addr"> <el-input type="textarea" :rows="2" placeholder="请输入地址" v-model="form.addr" autocomplete="off" :disabled="true"> </el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogFormVisible = false">取 消</el-button> <el-button type="primary" @click="submitForm('form')">确 定</el-button> </div> </el-dialog> </div> </template> <script> export default { data: function() { return { ts: new Date().getTime(), formInline: { name: '', }, tableData: [], dialogFormVisible: false, dialogFormVisible1: false, form: { name: '', phone: '', addr: '', }, formLabelWidth: '120px', title: '', textarea: '', rules: { name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }, { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' } ], phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }, { min: 8, max: 11, message: '请输入 8 到 11 位数字', trigger: 'blur' } ], addr: [{ required: true, message: '请输入地址', trigger: 'blur' }], } }; }, methods: { onSubmit() { console.log('submit!'); }, getList() { let url = this.axios.urls.CUSTOMER_LIST; let data = this.formInline; this.axios.post(url, data).then(resp => { this.tableData = resp.data; }); }, handleAdd() { this.title = '添加客户'; this.form.name = ''; this.form.phone = ''; this.form.addr = ''; this.dialogFormVisible = true; }, handleUpdate(row) { this.title = '修改客户'; this.form = row; this.dialogFormVisible = true; this.bian = false; }, handleLook(row) { this.title = '查看客户'; this.form = row; this.dialogFormVisible1 = true; this.bian = false; }, handleDel(id){ this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { let url=this.axios.urls.CUSTOMER_DEL; let data={id:id}; this.axios.post(url,data).then(res=>{ if(res.data.code==0){ this.$message({ type: 'success', message: '删除成功!' }); this.getList(); }else{ this.$message({ type: 'success', message: '删除失败!' }); } }); }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); }); }, submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { // alert('submit!'); if (this.title == "添加客户") { //添加功能 let url = this.axios.urls.CUSTOMER_ADD; let data = this.form; this.axios.post(url, data).then(res => { if (res.data.code == 0) { this.$message("添加成功!!!"); this.getList(); } }); } else { //修改功能 let url = this.axios.urls.CUSTOMER_UPDATE; let data = this.form; this.axios.post(url, data).then(res => { if (res.data.succes) { alert("修改失败"); this.getList(); } }); } this.dialogFormVisible = false; } else { console.log('error submit!!'); return false; } }); } }, created() { this.getList(); }, } </script> <style> </style>
前台
package com.zking.spboot.controller; import com.zking.spboot.model.Customer; import com.zking.spboot.service.CustomerService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.HashMap; import java.util.List; import java.util.Map; @CrossOrigin @RestController @RequestMapping("/customer") public class CustomerController { @Autowired private CustomerService customerService; @RequestMapping("/list") public List<Customer> list(Customer customer){ List<Customer> customerslist=customerService.list(customer); return customerslist; } @RequestMapping("/add") public Object add(Customer customer){ Map<String,Object> res=new HashMap<>(); customerService.insert(customer); res.put("code","0"); res.put("msg","增加成功"); return res; } @RequestMapping("/del") public Object del(Integer id){ Map<String,Object> res=new HashMap<>(); customerService.deleteByPrimaryKey(id); res.put("code","0"); res.put("msg","删除成功"); return res; } @RequestMapping("/update") public boolean update(Customer customer){ int i=customerService.updateByPrimaryKeySelective(customer); if(i>0){ return true; } else { return false; } } @RequestMapping("/look") public Customer look(Integer id){ Customer look=customerService.selectByPrimaryKey(id); return look; } }
后台