项目实训四--前后端开发（前端）

一、开发步骤

本系统实现了管理员和用户之间的消息通知和意见反馈功能，使用Vue作为前端框架，Spring Boot作为后端框架，SQL数据库用于存储数据。

• 前端页面设计

• 前端接口设计

• 前端功能实现

• 数据结构实现

• 后端功能实现

二、前端开发

2.1.前端页面设计

左侧通知列表设计：

通知和反馈信息展示面板。该面板通过时间轴（Timeline）展示消息，并根据用户权限显示不同的提示信息。

<div class="session-panel">
                <div style="padding-bottom: 10px;font-weight: bolder;">
                    信息通知
                </div>
                <el-scrollbar style="height: 620px">
                    <div style="padding: 10px;float: left;">

                        <el-timeline>
                            <el-timeline-item v-if="tableData === null" timestamp="提示" placement="top">
                                <el-card style="border-radius: 20px;">
                                    <h3 v-if="user.root === 0">暂无消息通知</h3>
                                    <h3 v-if="user.root === 1">暂无建议反馈</h3>
                                </el-card>
                            </el-timeline-item>
                            <el-timeline-item v-for="msg in tableData" :timestamp="msg.time" placement="top">
                                <el-card style="height: 240px;border-radius: 20px;">
                                    <el-scrollbar>
                                        <h3>{{ msg.fromname }}(电话: {{ msg.fromphone }})</h3>
                                        <h3>-----------------------------------------------------------------
                                        </h3>
                                        <p style="font-weight:bolder;">{{ msg.content }}</p>
                                    </el-scrollbar>
                                </el-card>
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                </el-scrollbar>
            </div>

右侧输入面板设计：

根据用户权限（user.root）显示不同的标题（建议反馈或消息通知），并包含一个内容输入区域和发送按钮。

<div class="message-panel">


                <el-form ref="form" :model="form" :rules="rules" style="padding: 40px;">
                    <el-form-item v-if="user.root === 0">
                        <h3>建议反馈</h3>
                    </el-form-item>
                    <el-form-item v-if="user.root === 1">
                        <h3>消息通知</h3>
                    </el-form-item>
                    <el-form-item prop="content" style="">
                        <el-input clearable placeholder="内容" prefix-icon="message" type="textarea"
                            v-model="form.content" resize="none" :autosize="{ minRows: 10, maxRows: 10 }"
                            style="width: 100%;height: 180px; font-size: larger;" />
                    </el-form-item>
                    <el-form-item style="float: right;padding-top:110px ;">

                        <el-button style="width: 80px;height: 40px;" @click="send" type="primary">发送</el-button>
                    </el-form-item>

                </el-form>

            </div>

设计样式：

.home-view {
    display: flex;
    /* 与窗口同宽 */
    width: 100vw;
    /* 水平方向上剧中 */
    justify-content: center;

    .session-panel {
        background-color: rgb(231, 248, 255);
        width: 600px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        padding: 20px;
        position: relative;
        border-right: 1px solid rgba(black, 0.07);

        /* 标题*/
        .title {
            margin-top: 20px;
            font-size: 20px;
        }

        /* 描述*/
        .description {
            color: rgba(black, 0.7);
            font-size: 10px;
            margin-top: 10px;
        }
    }

    .chat-panel {
        /* 聊天面板flex布局，让会话列表和聊天记录左右展示 */
        display: flex;
        /* 让聊天面板圆润一些 */
        border-radius: 20px;
        background-color: white;
        /* 给一些阴影 */
        box-shadow: 0 0 20px 20px rgba(black, 0.05);
        /* 与上方增加一些间距 */
        margin-top: 40px;
        margin-bottom: 40px;

        /* 右侧消息记录面板*/
        .message-panel {
            width: 300px;
            height: 500px;
        }
    }
}
.msgbox {
    width: 45%;
    height: 330px;
    float: right;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
    background-color: rgba(255, 255, 255, 0.7);
}

2.2.前端接口设计

加载信息接口：

 request.get("/msg/" + this.user.id).then(res => {
                console.log(res)
                if (res.data.length !== 0)
                    this.tableData = res.data

            })

发送信息接口：

   request.post("/msg", this.form).then(res => {
                        if (res.code == "0") {
                            this.$message({
                                type: "success",
                                message: "发送成功"
                            })

                        } else {
                            this.$message({
                                type: "error",
                                message: res.msg
                            })
                        }

2.3.前端功能实现

加载信息功能：

通过发送 GET 请求来获取指定用户的消息数据，并将响应的数据赋值给 tableData。

load() {
            request.get("/msg/" + this.user.id).then(res => {
                console.log(res)
                if (res.data.length !== 0)
                    this.tableData = res.data

            })
        },

发送信息功能：

通过发送 POST 请求来提交用户的表单数据，并根据响应的结果显示不同的消息提示，并且输入表单做了验证。

send() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.form.userid = this.user.id
                    this.form.fromphone = this.user.phone
                    this.form.fromname = this.user.nickname
                    request.post("/msg", this.form).then(res => {
                        if (res.code == "0") {
                            this.$message({
                                type: "success",
                                message: "发送成功"
                            })

                        } else {
                            this.$message({
                                type: "error",
                                message: res.msg
                            })
                        }
                    })
                }
            })
        }