基于Element UI+Vue框架制作简单前端页面，且用axios做前后端交互的‘弹出框中镶嵌from表单’案例及其可能出现的一般问题解说

本文链接：https://blog.csdn.net/qq_51523569/article/details/113274874

1、引用（安装）框架，一cdn方式介绍（有网络的条件下引用）：
Vue框架：<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Element UI（因Element UI是基于vue实现的框架【组件库】，所以一般把Vue写在Element UI前面，防止引用出现纰漏）：<script src="https://unpkg.com/element-ui/lib/index.js"></script>
axios框架：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2、问题解说：
2.1、from表单点击提交隐藏且向台提交数据
在这里插入图片描述
2.2、传值data部分【通过v-model 获取from表单中的输入数据与data中的数据绑定】

data: function () {
            return {
                dialogVisible: false,
                isCollapse: true,
                medicalNews: {
                    title:'',
                    user: '',
                    desc: '',
                    date:''
                }
            }
        },

在这里插入图片描述
2.3、axios部分

methods: {    	
            //发布新闻
            addMedicalNews: function () {
            	var _this=this;
            	axios({
            	    method: 'get',
            	    url: 'http://localhost:8888/addMedicalNews.action',
            	    params:{
            	    	title:_this.medicalNews.title,
            	    	author:_this.medicalNews.user,
            	    	content:_this.medicalNews.content,
            	    	date:_this.medicalNews.date
            	    }
            	    	})
          	.then(function(response){
                    console.log(response);
                    if (response.data.code == 200) {	
                        alert(response.data.msg)

                    } else {
                        _this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            this.dialogFormVisible = false;

        },

在这里插入图片描述
2.4、后端部分：
@JsonFormat，是把后端日期字符串转为前端日期json对象；@DateTimeFormat（pattern=“yyyy-MM-dd”）是把前端日期对象转化为后端的josn日期对象

@RestController  //等于@Controller + @RequestMapping；请求访问的同时也把返回给前端的数据转化为json对象
public class MedicalNewsController {
	@Autowired  //注入对象【常用set方式注入，少用构造器和接口方式注入】
	private IMedicalNewsServiceImpl imnsi;
	private Optional<MedicalNews> opt;
	/*
	 * 增加新闻
	 */
	@GetMapping("addMedicalNews.action")  //请求方式及其地址
	
	public HttpResp add(String title,String author,String content,@JsonFormat @DateTimeFormat(pattern = "yyyy-MM-dd") Date date) {
	    MedicalNews m = new MedicalNews(title, author, content, date);
		imnsi.add(m);
		return new HttpResp(200,"添加成功",null,LocalDateTime.now());
	}

3、前端案例部分完整源码【略显单调，也可赋值粘贴修修改改使用】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻界面</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-header,
        .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
        }

        body>.el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
            min-height: 400px;
        }
    </style>
</head>

<body>
    <div id="divId">
        <el-dialog title="发布新闻" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
            <span>
                <el-form :inline="true">
                    <el-form-item label="新闻的标题">
                        <el-input v-model="medicalNews.title" placeholder="标题"></el-input>
                    </el-form-item>

                    <el-form-item label="新闻审批人">
                        <el-input v-model="medicalNews.user" placeholder="审批人"></el-input>
                    </el-form-item>

                    <el-form-item label="新闻的内容" >
                        <el-input type="textarea" v-model="medicalNews.desc"></el-input>
                    </el-form-item>

                    <el-form-item label="发布的时间">
                        <el-col>
                            <el-date-picker type="date" placeholder="选择日期" v-model="medicalNews.date"
                                style="width: 100%;">
                            </el-date-picker>
                        </el-col>
                    </el-form-item>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addMedicalNews();dialogVisible = false">发 布</el-button>
            </span>
        </el-dialog>

        <el-container>
            <el-header>
                </el-menu>
                <div class="line"></div>
                <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                    background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <el-menu-item index="1">处理中心</el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">我的工作台</template>
                        <el-menu-item index="2-1" @click="dialogVisible = true">发布新闻</el-menu-item>

                        <el-menu-item index="2-2" @click="deleteMedicalNews">删除新闻
                        </el-menu-item>
                        <el-menu-item index="2-3" @click="updateMedicalNews">修改新闻
                        </el-menu-item>
                        <el-submenu index="2-4">
                            <template slot="title">查询新闻</template>
                            <el-menu-item index="2-4-1" @click="findByIdMedicalNews">
                                按照新闻序号查询</el-menu-item>
                            <el-menu-item index="2-4-2" @click="findByAuthorMedicalNews">
                                按照新闻发布者查询</el-menu-item>
                            <el-menu-item index="2-4-3" @click="findByTimeMedicalNews">
                                按照新闻发布时间查询</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="3">消息中心</el-menu-item>
                    <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">新闻管理</a></el-menu-item>
                </el-menu>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                        <el-row class="tac">
                            <el-col :span="12">
                                <h5>默认颜色</h5>
                                <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen"
                                    @close="handleClose">

                                    <el-menu-item index="2">
                                        <i class="el-icon-document"></i>
                                        <span slot="title">日常业务</span>
                                    </el-menu-item>
                                    <el-menu-item index="2">
                                        <i class="el-icon-document"></i>
                                        <span slot="title">药品管理</span>
                                    </el-menu-item>
                                    <el-menu-item index="2">
                                        <i class="el-icon-document"></i>
                                        <span slot="title">查询统计</span>
                                    </el-menu-item>
                                    <el-menu-item index="2">
                                        <i class="el-icon-document"></i>
                                        <span slot="title">医护人员</span>
                                    </el-menu-item>

                                    <el-menu-item index="4">
                                        <i class="el-icon-setting"></i>
                                        <span slot="title">数据维护</span>
                                    </el-menu-item>
                                </el-menu>
                            </el-col>

                        </el-row>
                </el-aside>
                <el-container>
                    <el-main>Main</el-main>
                    <el-footer>Footer</el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>

</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var vue = new Vue({
        el: '#divId',
        data: function () {
            return {
                dialogVisible: false,
                isCollapse: true,
                activeIndex: '1',
                activeIndex2: '1',
                medicalNews: {
                    title:'',
                    user: '',
                    desc: '',
                    date:''

                }

            }
        },
        methods: {
        	
            //发布新闻
            addMedicalNews: function () {
            	var _this=this;
            	axios({
            	    method: 'get',
            	    url: 'http://localhost:8888/addMedicalNews.action',
            	    params:{
            	    	title:_this.medicalNews.title,
            	    	author:_this.medicalNews.user,
            	    	content:_this.medicalNews.content,
            	    	date:_this.medicalNews.date
            	    }
            	    	})
          	.then(function(response){
                    console.log(response);
                    if (response.data.code == 200) {	
                        alert(response.data.msg)

                    } else {
                        _this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            this.dialogFormVisible = false;

        },
            //删除新闻
            deleteMedicalNews:function(){

            },
            //修改新闻
            updateMedicalNews:function(){

            },
            //按照新闻序号查询新闻
            findByIdMedicalNews: function () {
                window.location.href("")
            },
            //按照新闻发布者查询新闻
            findByAuthorMedicalNews: function () {
                window.location.href("")
            },
            //按照新闻发布时间查询新闻
            findByTimeMedicalNews: function () {
                window.location.href("")
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    })
</script>
</html>