javaweb课程设计实验报告

javaweb课程设计实验报告

一、设计作品介绍

1.基于Vue框架的客户及其选购商品的增删改查系统

该系统可以完成对于客户、商品信息、用户订单及订购信息等的增删改查操作

2.界面设计与数据交互

采用了element UI组件来设计界面样式，并通过Vue框架进行数据模型与界面组件的双向绑定，采用Ajax发送异步请求的方式来交互数据库，向服务器发送请求并根据相应条件来返回数据到界面上展示，供用户查看和操作。

具体如下：

以客户界面上的客户表格举例：

①数据模型：

new Vue({
        el: "#app",
        data() {
            return {
                //客户数组
                clients:[],
                // 客户模型数据
                client:{
                    clientId: '',
                    clientName: '',
                    clientAddress: '',
                    clientPhone: ''
                },

②界面表格组件

<!--客户搜索表单-->
            <el-form :inline="true" :model="client" class="demo-form-inline" v-if="activeName === 'first'">

                <el-form-item label="客户名">
                    <el-input v-model="client.clientName" placeholder="客户名"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="clientByName()">查询</el-button>
                    <el-button type="primary" plain @click="clientDialogVisible = true">新增</el-button>
                </el-form-item>
            </el-form>
            <!--客户表格-->
            <el-table
                    v-if="activeName === 'first'"
                    :data="clients"
                    style="width