前台和后台

最新推荐文章于 2024-07-12 19:47:55 发布

菜菜子吖

最新推荐文章于 2024-07-12 19:47:55 发布

阅读量244

点赞数

分类专栏： ajax 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_68761656/article/details/127568021

版权

ajax 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<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;
    }



}

后台