javaweb课程设计（网上订餐平台）

目录

前言

一 实验目的

二 总体设计

1 相关知识

2 功能要求

3 模块

3.1 已实现的模块：

3.2 未实现的模块：

4 数据库

三 部分功能展示

1 注册模块

检查用户名和验证码

2 管理员用户

2.1 管理菜品

2.2 订单管理

3 普通用户

3.1 点单

3.2 我的订单管理

3.3 个人信息修改

四 系统实现

1 项目结构

2 用到的插件

3 代码

3.1 pom.xml文件

3.2 mybatis-config.xml 

3.3 goods.html

3.4 mangerOrder.html

3.5 login.html

3.6 register.html

3.7 order.html

3.8 myOrder.html

3.9 myInfo.html

3.10 后端

---

前言

        首先，该文章的内容是根据我做课设的题目写的，其中包含我课设报告的部分内容，所以仅供大家学习参考，希望为大家提供一些简单思路，请不直接抄袭所有内容。

        其次，我不是专门学习前后端方向的，所以代码里面有许多冗余或者不规范的部分，因为我只是想着如何将我需要的功能实现，请大家根据情况自己的能力进行优化。

        最后因为我之前完全没进行过web编程，只是有一点数据库基础，也就是之前数据可课设学习了一点，所以我是花了一周多时间在b站看黑马程序员的视频进行学习的。这次课设的所有的页面都是根据在视频中学到的那一个品牌管理页面参考element-ui官网修改后得到的，也正是因为前一周多时间在看视频学习，所以后面做题目的时间不够，我不得以是从后面往前面做的，也就是先写的功能部分，最后写的注册登录，绑定用户信息和订单以及其他的信息，所以存在的问题可能较多，有些功能并没有做出来，一些实现的功能可能存在bug，希望大家在写的时候，先规划好相关界面关联情况，想好逻辑再进行编程。

一 实验目的

        WEB应用技术课程设计是计算机软件工程专业的一个综合性实践教学环节，是学习完《Internet与Web编程》课程后进行的一次全面的综合练习。其目的在于促进学生复习和巩固计算机软件设计知识，加深对软件设计方法、软件设计技术和设计思想的理解，并能运用所学软件设计知识和WEB工程技术进行综合软件设计，通过本课程设计让学生进行简单WEB应用软件系统的开发，掌握软件设计的方法和面向对象程序设计的基本技术，提高学生在软件开发方面的综合应用能力。

二 总体设计

1 相关知识

        本次课设参考视频：黑马程序员JavaWeb基础教程，Java web从入门到企业实战完整版，用到的开发化境：Idea，用到的前端知识是基础的前端三剑客html、css和js，还有较为流行的技术vue、element和axios，服务器所需要的是servlet和java编程以及持久层框架mybatis，系统所用的数据库系统是mysql数据库管理系统，并且配备了可视化工具navicat，以便于管理开发。

2 功能要求

（1）门店管理
（2）菜品管理
（3）用户注册
（4）用户点餐、查看修改菜单
（5）模拟支付
（6）订单管理
（7）配送管理

3 模块

3.1 已实现的模块：

（1）注册模块：注册普通用户，在我的设计中系统自带一个管理员用户“zhangsan:123”。

（2）登录模块：登录用户。

（3）菜品管理模块：管理菜品。

（4）订单管理模块：管理员操作订单。

（5）点单模块：用户下单。

（6）我的订单模块：用户管理个人订单。

（7）个人中心模块：提供收货地址、联系电话和密码的修改功能。

（8）模拟支付：选择支付方式支付订单。

3.2 未实现的模块：

（1）门店管理模块。

（2）配送管理模块。

4 数据库

（1）tb_user表：储存用户信息

（2）tb_goods表：存储菜品信息

（3）tb_order表：存储订单信息

三 部分功能展示

1 注册模块

检查用户名和验证码

（1）初始用户表

 （2）检测用户名

 （3）检测验证码

（4）注册成功

2 管理员用户

2.1 管理菜品

（1）初始tb_goods表

（2）多条件动态查询，下面只对“已售尽”商品进行查询

（3） 批量删除菜品

删除后会重新进行查询 

tb_goods表

（4）单个删除黄金炒饭，不进行展示

（5）新增和修改较为简单也不进行展示

2.2 订单管理

（1）初始tb_order表

（2）批量删除前三个和单个删除订单，和管理菜品类似，不做展示，只给出删除后的tb_order表

3 普通用户

3.1 点单

（1）初始tb_order表和上面的批量删除和单个删除后的表一样，这也是我设计的问题，没考虑好，导致管理员的表和普通用户的表共用了同一个，大家可以将管理员的表改为用户支付成功之后的订单表

（2）在第一个页面选择一些菜品

在第二个页面选择一些菜品，在这个地方是有个bug的，就是刷新页面价格会变成0，但是支付成功之后，价格是没问题的，因为这个数据是在前端用变量保存的，刷新之后变量重新初始化了，大家可以把这个价格改成统计从服务器查询到的数据的价格总和在赋值给保存价格的变量

 （3）选择支付方式

（4）结算成功后的tb_order表

3.2 我的订单管理

这些功能和前面有些类似，不再进行展示

3.3 个人信息修改

 也比较简单不再进行展示

四 系统实现

1 项目结构

2 用到的插件

3 代码

3.1 pom.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>brand-case1</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>
    <properties>
        <maven.compiler.source>11</maven.compiler.source>
        <maven.compiler.target>11</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>
    <dependencies>
        <!--Servlet-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>

<!--        <dependency>-->
<!--            <groupId>org.example</groupId>-->
<!--            <artifactId>brand-case</artifactId>-->
<!--            <version>1.0-SNAPSHOT</version>-->
<!--            &lt;!&ndash;排除依赖&ndash;&gt;-->
<!--            <exclusions>-->
<!--                <exclusion>-->
<!--                    <groupId>junit</groupId>-->
<!--                    <artifactId>junit</artifactId>-->
<!--                </exclusion>-->
<!--            </exclusions>-->
<!--        </dependency>-->
        <!--MyBatis-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.5</version>
        </dependency>
        <!--MySQL-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.18</version>
        </dependency>


        <!--fastjson-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.62</version>
        </dependency>
        <!--   测试     -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.13.2</version>
            <scope>test</scope>
        </dependency>


    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <version>2.2</version>
                <configuration>
                    <port>8081</port>
                    <!--<path>/brand-case1/login.html</path>-->
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

3.2 mybatis-config.xml 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>

    <typeAliases>
        <package name="com.wx.pojo"/>
    </typeAliases>

    <environments default="development">
        <environment id="development">
            <transactionManager type="JDBC"/>
            <dataSource type="POOLED">
                <property name="driver" value="com.mysql.cj.jdbc.Driver"/>
                <property name="url" value="jdbc:mysql:///infodb?serverTimezone=UTC&amp;useUnicode=true&amp;characterEncoding=gbk"/>
                <property name="username" value="root"/>
                <property name="password" value="203521"/>
            </dataSource>
        </environment>
    </environments>
    <mappers>
       <!--扫描mapper-->
        <package name="com.wx.mapper"/>
    </mappers>
</configuration>

3.3 goods.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>goods</title>
  <style>
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
  </style>

</head>
<body>
<div id="goodsDiv">
  <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
    <el-menu-item index="1">
      <i class="el-icon-s-shop"></i>
      <a href="#" style="text-decoration: none"><span>门店管理</span></a>
    </el-menu-item>
    <el-menu-item index="2">
      <i class="el-icon-dish"></i>
      <a href="http://localhost:8081/brand-case1/goods.html" style="text-decoration: none"><span>菜品管理</span></a>
    </el-menu-item>
    <el-menu-item index="3" >
      <i class="el-icon-s-order"></i>
      <a href="http://localhost:8081/brand-case1/mangeOrder.html" style="text-decoration: none"><span>订单管理</span></a>
    </el-menu-item>
    <el-menu-item index="4">
      <a href="#" target="" style="text-decoration: none">
        <i class="el-icon-bicycle"></i>
        <a href="#" style="text-decoration: none"><span>配送管理</span></a>
      </a>
    </el-menu-item>
    <el-menu-item index="5">
      <i class="el-icon-switch-button"></i>
      <a href="http://localhost:8081/brand-case1/login.html" style="text-decoration: none"><span>退出登录</span></a>
    </el-menu-item>
  </el-menu>
  <!--搜索表单-->
  <el-form :inline="true" :model="goodsSearch" class="demo-form-inline">

    <el-form-item label="当前状态">
      <el-select v-model="goodsSearch.status" placeholder="当前状态">
        <el-option label="可下单" value="1"></el-option>
        <el-option label="已售尽" value="0"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="商家名称">
      <el-input v-model="goodsSearch.businessName" placeholder="商家名称"></el-input>
    </el-form-item>

    <el-form-item label="菜品名称">
      <el-input v-model="goodsSearch.goodsName" placeholder="菜品名称"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="selectByPageAndCondition">条件查询</el-button>
      <el-button type="primary" @click="selectByPage">查询所有</el-button>
    </el-form-item>
  </el-form>

  <!--按钮-->
  <el-row>
    <el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
    <el-button type="primary" plain @click="addDialogVisible = true">新增</el-button>
  </el-row>
  <!--添加数据对话框表单-->
  <el-dialog
          title="添加商品"
          :visible.sync="addDialogVisible"
          width="30%"
  >
    <el-form ref="form" :model="goodsAdd" label-width="80px">
      <el-form-item label="菜品名称">
        <el-input v-model="goodsAdd.goodsName"></el-input>
      </el-form-item>

      <el-form-item label="商家名称">
        <el-input v-model="goodsAdd.businessName"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="goodsAdd.addr"></el-input>
      </el-form-item>

      <el-form-item label="价格">
        <el-input v-model="goodsAdd.price"></el-input>
      </el-form-item>

      <el-form-item label="备注">
        <el-input type="textarea" v-model="goodsAdd.description"></el-input>
      </el-form-item>

      <el-form-item label="状态">
        <el-switch v-model="goodsAdd.status"
                   active-value="1"
                   inactive-value="0"
        ></el-switch>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="addGoods">提交</el-button>
        <el-button @click="addDialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>

  <!--表格-->
  <template>
    <el-table
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange"
    >
      <el-table-column
              type="selection"
              width="55"
              align="center">
      </el-table-column>
      <el-table-column
              type="index"
              width="50"
              align="center">
      </el-table-column>

      <el-table-column
              prop="goodsName"
              label="菜品名称"
              align="center"
      >
      </el-table-column>
      <el-table-column
              prop="businessName"
              label="商家名称"
              align="center"
      >
      </el-table-column>
      <el-table-column
              prop="addr"
              label="地址"
              align="center"
      >
      </el-table-column>
      <el-table-column
              prop="price"
              align="center"
              label="价格">
      </el-table-column>
      <el-table-column
              prop="statusStr"
              align="center"
              label="当前状态">
      </el-table-column>

      <el-table-column
              prop="operate"
              align="center"
              label="操作">
        <template slot-scope="scope">
          <el-row >
            <el-button
                    @click="updateTemp(scope.row)"
                    type="primary"
            >修改
            </el-button>
            <el-dialog
                    title="修改信息"
                    :visible.sync="updateDialogVisible"
                    width="30%"
            >
              <el-form ref="form" :model="goodsUpdate" label-width="80px" >
                <el-form-item label="菜品名称">
                  <el-input v-model="goodsUpdate.goodsName"></el-input>
                </el-form-item>

                <el-form-item label="地址">
                  <el-input v-model="goodsUpdate.addr"></el-input>
                </el-form-item>

                <el-form-item label="价格">
                  <el-input v-model="goodsUpdate.price"></el-input>
                </el-form-item>

                <el-form-item label="备注">
                  <el-input type="textarea" v-model="goodsUpdate.description"></el-input>
                </el-form-item>

                <el-form-item label="状态">
                  <el-switch v-model="goodsUpdate.status"
                             active-value="1"
                             inactive-value="0"
                  ></el-switch>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click.native.prevent="updateRow">提交</el-button>
                  <el-button @click="updateDialogVisible = false">取消</el-button>
                </el-form-item>
              </el-form>
            </el-dialog>
            <el-button
                    @click.native.prevent="deleteRow(scope.row.id)"
                    type="danger">删除
            </el-button>
          </el-row>
        </template>
      </el-table-column>

    </el-table>
  </template>

  <!--分页工具条-->
  <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount">
  </el-pagination>

</div>


<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>

<script>
  new Vue({
    el: "#goodsDiv",

    mounted() {
      //当页面加载完成后，发送异步请求，获取数据
      this.selectByPage();
    },
    methods: {
      setUser(){
        axios({
          method: "get",
          url: "http://localhost:8081/brand-case1/goods/setUser"
        }).then(resp => {
          alert(resp.data+"，欢迎您进入网上订餐平台！");
        })
      },
      //查询分页的方法
      selectByPageAndCondition() {
        console.log(this.goodsSearch);
        axios({
          method: "post",
          url: "http://localhost:8081/brand-case1/goods/selectByPageAndCondition?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize,
          data: this.goodsSearch
        }).then(resp => {
          //设置表格数据
          this.tableData = resp.data.rows; //{rows:[],totalCount:100}
          //设置总记录数
          this.totalCount = resp.data.totalCount;
        })
      },
      selectByPage(){
        //alert(this.currentPage+this.pageSize);
        //this.currentPage=1;
        axios({
          method: "post",
          url: "http://localhost:8081/brand-case1/goods/selectByPage?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize
        }).then(resp => {
          //设置表格数据
          this.tableData = resp.data.rows; //{rows:[],totalCount:100}
          //设置总记录数
          this.totalCount = resp.data.totalCount;
          //this.setUser();
        })
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex %3 == 0) {
          return 'warning-row';
        } else if (rowIndex%3 == 1) {
          return 'success-row';
        }
        return '';
      },
      // 复选框选中后执行的方法
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection)
      },
      // 添加数据
      addGoods() {
        //console.log(this.goodsAdd);
        //发送ajax异步请求
        axios({
          method: "post",
          url: "http://localhost:8081/brand-case1/goods/add",
          data: this.goodsAdd
        }).then(resp => {
          if (resp.data == "success") {
            //添加成功
            //关闭窗口
            this.addDialogVisible = false;
            //重新查询所有
            this.selectByPage();
            //弹出消息提示
            this.$message({
              message: '添加成功',
              type: 'success'
            });
          }
        })
      },
      //分页
      handleSizeChange(val) {
        //console.log(`每页 ${val} 条`);
        //重新设置每页展示的条数
        this.pageSize = val;
        this.selectByPage();
      },
      handleCurrentChange(val) {
        //console.log(`当前页: ${val}`);
        //重新设置当前页码
        this.currentPage = val;
        this.selectByPage();
      },
      //批量删除
      deleteByIds() {
        //弹出确认的提示框
        this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //用户点击确定按钮
          //1.创建id数组 [1,2,3],从this.multipleSelection里面获取
          for (let i = 0; i < this.multipleSelection.length; i++) {
            let selectionElement = this.multipleSelection[i];
            this.selectedIds[i] = selectionElement.id;
          }
          //2.发送ajax请求
          axios({
            method: "post",
            url: "http://localhost:8081/brand-case1/goods/deleteByIds",
            //data:_this.selectedIds
            data: this.selectedIds
          }).then(resp => {
            if (resp.data == "success") {
              //删除成功
              //重新查询所有
              this.selectByPage();

              //弹出消息提示
              this.$message({
                message: '删除成功',
                type: 'success'
              });
            }
          })
        }).catch(() => {
          //用户点击取消按钮
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //删除
      deleteRow(id) {
        //this.id = val;
        //console.log(row);
        //弹出确认的提示框
        this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //用户点击确定按钮

          //1.发送ajax请求
          axios({
            method: "get",
            url: "http://localhost:8081/brand-case1/goods/deleteRow?id=" +id,
          }).then(resp => {
            if (resp.data == "success") {
              //删除成功
              //重新查询所有
              this.selectByPage();
              //弹出消息提示
              this.$message({
                message: '删除成功',
                type: 'success'
              });
            }
          })
        }).catch(() => {
          //用户点击取消按钮
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //修改
      updateTemp(row){
        this.goodsUpdate.id=row.id;
        this.updateDialogVisible=true;
      },
      updateRow() {
        console.log(this.goodsUpdate);
        axios({
          method: "post",
          url: "http://localhost:8081/brand-case1/goods/updateRow",
          data: this.goodsUpdate
        }).then(resp => {
          if (resp.data == "success") {
            //添加成功
            //关闭窗口
            this.updateDialogVisible = false;
            //重新查询所有
            this.selectByPage();
            //弹出消息提示
            this.$message({
              message: '修改成功',
              type: 'success'
            });
          }
        })
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    data() {
      return {
        activeIndex: '2',
        deleteId:'',
        //每页展示条目数
        pageSize: 5,
        //总记录数
        totalCount: 100,
        // 当前页码
        currentPage: 1,
        // 添加数据对话框是否展示的标记
        addDialogVisible: false,
        updateDialogVisible: false,
        // 品牌模型数据
        goodsAdd: {
          status: '',
          goodsName: '',
          businessName: '',
          id: "",
          price: "",
          description: "",
          addr:''
        },
        goodsUpdate: {
          status: '',
          goodsName: '',
          businessName: '',
          id: "",
          price: "",
          description: "",
          addr:''
        },
        goodsSearch: {
          status: '',
          goodsName: '',
          businessName: '',
          id: "",
          price: "",
          description: "",
          addr:''
        },
        //被选中的id
        selectedIds: [],
        // 复选框选中数据集合
        multipleSelection: [],
        // 表格数据
        tableData: []
        /*tableData: [{
            goodsName: '华为',
            businessName: '华为科技有限公司',
            price: '100',
            status: "1"
        }, {
            goodsName: '华为',
            businessName: '华为科技有限公司',
            price: '100',
            status: "1"
        }, {
            goodsName: '华为',
            businessName: '华为科技有限公司',
            price: '100',
            status: "1"
        }, {
            goodsName: '华为',
            businessName: '华为科技有限公司',
            price: '100',
            status: "1"
        }]*/
      }
    }
  })

</script>

</body>
</html>

3.4 mangerOrder.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>mangeOrder</title>
  <style>
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
  </style>

</head>
<body>
<div id="goodsDiv">
  <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
    <el-menu-item index="1">
      <i class="el-icon-s-shop"></i>
      <a href="#" style="text-decoration: none"><span>门店管理</span></a>
    </el-menu-item>
    <el-menu-item index="2">
      <i class="el-icon-dish"></i>
      <a href="http://localhost:8081/brand-case1/goods.html" style="text-decoration: none"><span>菜品管理</span></a>
    </el-menu-item>
    <el-menu-item index="3" >
      <i class="el-icon-s-order"></i>
      <a href="http://localhost:8081/brand-case1/mangeOrder.html" style="text-decoration: none"><span>订单管理</span></a>
    </el-menu-item>
    <el-menu-item index="4">
      <a href="#" target="" style="text-decoration: none">
        <i class="el-icon-bicycle"></i>
        <a href="#" style="text-decoration: none"><span>配送管理</span></a>
      </a>
    </el-menu-item>
    <el-menu-item index="5">
      <i class="el-icon-switch-button"></i>
      <a href="http://localhost:8081/brand-case1/login.html" style="text-decoration: none"><span>退出登录</span></a>
    </el-menu-item>
  </el-menu>
  <!--按钮-->
  <el-row>
    <el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
  </el-row>

  <!--表格-->
  <template>
    <el-table
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange"
    >
      <el-table-column
              type="selection"
              width="55"
              align="center">
      </el-table-column>
      <el-table-column
              type="index"
              width="50"
              align="center">
      </el-table-column>

      <el-table-column
              prop="username"
              label="用户名"
              align="center"
      >
      </el-table-column>
      <el-table-column
              prop="uTel"
              label="联系电话"
              align="center"
      >
      </el-table-column>
      <el-table-column
              prop="uAddr"
              label="送货地址"
              align="center"
      >
      </el-table-column>
      <el-table-column
              prop="goodsName"
              label="菜品名称"
              align="center"
      >
      </el-table-column>
      <el-table-column
              prop="businessName"
              label="商家名称"
              align="center"
      >
      </el-table-column>
      <el-table-column
              prop="addr"
              label="商家地址"
              align="center"
      >
      </el-table-column>
      <el-table-column
              prop="price"
              align="center"
              label="订单金额">
      </el-table-column>
      <el-table-column
              prop="num"
              align="center"
              label="数量">
      </el-table-column>
      <el-table-column
              prop="description"
              label="描述"
              align="center"
      >
      </el-table-column>
      <el-table-column
              prop="operate"
              align="center"
              label="操作">
        <template slot-scope="scope">
          <el-row>
            <!--<el-button
                    @click="updateTemp(scope.row)"
                    type="primary"
            >修改
              &lt;!&ndash;@click="updateTemp(scope.row)"&ndash;&gt;

              &lt;!&ndash;@click.native.prevent="updateRow(scope.row.id)"&ndash;&gt;
            </el-button>
            <el-dialog
                    title="修改信息"
                    :visible.sync="updateDialogVisible"
                    width="30%"
            >
              <el-form ref="form" :model="goodsUpdate" label-width="80px" >
                <el-form-item label="菜品名称">
                  <el-input v-model="goodsUpdate.goodsName"></el-input>
                </el-form-item>

                <el-form-item label="地址">
                  <el-input v-model="goodsUpdate.addr"></el-input>
                </el-form-item>

                <el-form-item label="价格">
                  <el-input v-model="goodsUpdate.price"></el-input>
                </el-form-item>

                <el-form-item label="备注">
                  <el-input type="textarea" v-model="goodsUpdate.description"></el-input>
                </el-form-item>

                <el-form-item label="状态">
                  <el-switch v-model="goodsUpdate.status"
                             active-value="1"
                             inactive-value="0"
                  ></el-switch>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click.native.prevent="updateRow">提交</el-button>
                  <el-button @click="updateDialogVisible = false">取消</el-button>
                </el-form-item>
              </el-form>
            </el-dialog>-->
            <el-button
                    @click.native.prevent="deleteRow(scope.row.id)"
                    type="danger">删除
            </el-button>
          </el-row>
        </template>
      </el-table-column>

    </el-table>
  </template>

  <!--分页工具条-->
  <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount">
  </el-pagination>

</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>

<script>
  new Vue({
    el: "#goodsDiv",

    mounted() {
      //当页面加载完成后，发送异步请求，获取数据
      this.selectByPage();
    },
    methods: {
      selectByPage(){
        //alert(this.currentPage+this.pageSize);
        //this.currentPage=1;
        axios({
          method: "post",
          url: "http://localhost:8081/brand-case1/goods/selectAllOrder?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize
        }).then(resp => {
          //设置表格数据
          this.tableData = resp.data.rows; //{rows:[],totalCount:100}
          //设置总记录数
          this.totalCount = resp.data.totalCount;
        })
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex %3 == 0) {
          return 'warning-row';
        } else if (rowIndex%3 == 1) {
          return 'success-row';
        }
        return '';
      },
      // 复选框选中后执行的方法
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection)
      },
      //分页
      handleSizeChange(val) {
        //console.log(`每页 ${val} 条`);
        //重新设置每页展示的条数
        this.pageSize = val;
        this.selectByPage();
      },
      handleCurrentChange(val) {
        //console.log(`当前页: ${val}`);
        //重新设置当前页码
        this.currentPage = val;
        this.selectByPage();
      },
      //批量删除
      deleteByIds() {
        //弹出确认的提示框
        if(this.multipleSelection.length!=0) {
          this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //用户点击确定按钮
            //1.创建id数组 [1,2,3],从this.multipleSelection里面获取
            for (let i = 0; i < this.multipleSelection.length; i++) {
              let selectionElement = this.multipleSelection[i];
              this.selectedIds[i] = selectionElement.id;
            }
            //2.发送ajax请求
            //var _this=this;
            axios({
              method: "post",
              url: "http://localhost:8081/brand-case1/goods/deleteOrderByIds",
              //data:_this.selectedIds
              data: this.selectedIds
            }).then(resp => {
              if (resp.data == "success") {
                //删除成功
                //重新查询所有
                //_this.selectAll();
                this.selectByPage();

                //弹出消息提示
                this.$message({
                  message: '删除成功',
                  type: 'success'
                });
              }
            })
          }).catch(() => {
            //用户点击取消按钮
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }else {
          alert("请先选择要删除的订单！");
        }
      },
      //删除
      deleteRow(id) {
        //this.id = val;
        console.log(id);
        //弹出确认的提示框
        this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //用户点击确定按钮

          //1.发送ajax请求
          //var _this=this;
          axios({
            method: "get",
            url: "http://localhost:8081/brand-case1/goods/deleteOrder?id=" +id,
            //data:_this.selectedIds
            //data: this.selectedIds
          }).then(resp => {
            if (resp.data == "success") {
              //删除成功
              //重新查询所有
              //_this.selectAll();
              this.selectByPage();

              //弹出消息提示
              this.$message({
                message: '删除成功',
                type: 'success'
              });
            }
          })
        }).catch(() => {
          //用户点击取消按钮
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //修改
      updateTemp(row){
        //this.goodsUpdate.goodsName=row.goodsName;
        //this.goodsUpdate.businessName=row.businessName;
        this.goodsUpdate.id=row.id;
        //this.goodsUpdate=row;
        //console.log(this.goodsUpdate);
        this.updateDialogVisible=true;
      },
      updateRow() {
        //this.goodsUpdate.id=id;
        console.log(this.goodsUpdate);
        //this.updateDialogVisible=false;
        axios({
          method: "post",
          url: "http://localhost:8081/brand-case1/goods/updateRow",
          //data:_this.brand
          data: this.goodsUpdate
        }).then(resp => {
          if (resp.data == "success") {
            //添加成功

            //关闭窗口
            //_this.addDialogVisible=false;
            this.updateDialogVisible = false;
            //重新查询所有
            //_this.selectAll();
            this.selectByPage();

            //弹出消息提示
            this.$message({
              message: '修改成功',
              type: 'success'
            });
          }
        })
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    data() {
      return {
        activeIndex: '3',
        deleteId:'',
        //每页展示条目数
        pageSize: 5,
        //总记录数
        totalCount: 100,
        // 当前页码
        currentPage: 1,
        // 添加数据对话框是否展示的标记
        addDialogVisible: false,
        updateDialogVisible: false,
        // 品牌模型数据
        goodsAdd: {
          status: '',
          goodsName: '',
          businessName: '',
          id: "",
          price: "",
          description: "",
          addr:''
        },
        goodsUpdate: {
          status: '',
          goodsName: '',
          businessName: '',
          id: "",
          price: "",
          description: "",
          addr:''
        },
        goodsSearch: {
          status: '',
          goodsName: '',
          businessName: '',
          id: "",
          price: "",
          description: "",
          addr:''
        },
        //被选中的id
        selectedIds: [],
        // 复选框选中数据集合
        multipleSelection: [],
        // 表格数据
        tableData: []
      }
    }
  })

</script>

</body>
</html>

3.5 login.html

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

<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link href="css/login.css" rel="stylesheet">
</head>

<body>
<div id="loginDiv">
    <form action="" method="post" id="form">
        <h1 id="loginMsg">LOGIN IN</h1>
        <p>Username:<input id="username" name="username" type="text" v-model="user.username"></p>

        <p>Password:<input id="password" name="password" type="password" v-model="user.password"></p>

        <div id="subDiv">
            <input type="button" class="button" value="login" @click="login">
            <input type="reset" class="button" value="reset">&nbsp;&nbsp;&nbsp;
            <a href="register.html">没有账号？点击注册</a>
        </div>
    </form>
</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el:"#loginDiv",
        methods:{
            login(){
                //console.log(this.user);
                axios({
                    method:"post",
                    url:"http://localhost:8081/brand-case1/user/select",
                    data:this.user
                }).then(resp=> {
                    if(resp.data=="failure"){
                        alert("请检查用户名与密码是否正确");
                        //document.getElementById("username_err").style.display="none";
                    }else{
                        console.log(resp.data);
                        if(resp.data.authority=='管理员'){
                            //alert("管理员登录成功");
                            location.href="http://localhost:8081/brand-case1/goods.html";
                        }else{
                            //alert("普通用户登录成功");
                            location.href="http://localhost:8081/brand-case1/order.html";
                        }
                    }
                })
            }
        },
        data:{
            user:{
                username:'',
                password:'',
                authority:''
            },
            checkCode:''
        }
    })
</script>
</body>

</html>

3.6 register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div" id="app">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="login.html">登录</a>
    </div>
    <form id="reg-form" action="#" method="post">

        <table :model="user">

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username" v-model="user.username" v-on:blur="checkUsername">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名已存在</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password"  v-model="user.password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>
            <tr>
                <td>手机电话</td>
                <td class="inputs">
                    <input name="tel" type="text" id="tel" v-model="user.tel" >
                    <br>
                    <span id="tel_err" class="err_msg" style="display: none">手机电话格式错误</span>
                </td>

            </tr>
            <tr>
                <td>收货地址</td>
                <td class="inputs">
                    <input name="tel" type="text" id="addr" v-model="user.addr" >
                    <br>
                    <span id="addr_err" class="err_msg" style="display: none">地址格式错误</span>
                </td>

            </tr>
            <tr style="display: none">
                <td>权限</td>
                <td class="inputs">
                    <input name="authority" type="text" id="authority"  v-model="user.authority"  value="普通用户">
                </td>
            </tr>

            <tr>
                <td>验证码</td>
                <td class="inputs">
                    <input v-model="checkCode" type="text" id="checkCode">
                    <img id="checkCodeImage" src="/brand-case1/user/checkCode">
                    <a href="#" id="changeImg" @click="changeImg">看不清？</a>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="button" id="reg_btn" @click="add">
        </div>
        <br class="clear">
    </form>

</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el:"#app",
        methods:{
            checkUsername(){
                axios({
                    method:"post",
                    url:"http://localhost:8081/brand-case1/user/checkUsername?username="+this.user.username,
                    data:this.user
                }).then(resp=> {
                    if(resp.data=="success"){
                        //alert("注册成功");
                        document.getElementById("username_err").style.display="none";
                    }else{
                        document.getElementById("username_err").style.display="";
                    }
                    //设置表格数据
                    //console.log(resp);
                })
            },
            add(){
                //alert(this.checkCode);
                axios({
                    method:"post",
                    url:"http://localhost:8081/brand-case1/user/add?checkCode="+this.checkCode,
                    data:this.user
                }).then(resp=> {
                    if(resp.data=="success"){
                        alert("注册成功");
                        document.getElementById("username_err").style.display="none";
                        location.href="login.html";
                    }else{
                        alert("验证码错误！");
                    }
                    //设置表格数据
                    //console.log(resp);
                })
            },
            changeImg(){
                document.getElementById("checkCodeImage").src="/brand-case1/user/checkCode?"+new Date().getMilliseconds();
            }
        },
        data:{
            user:{
                username:'',
                password:'',
                authority:'普通用户',
                tel:'',
                addr:''
            },
            checkCode:''
        }
    })
</script>
</body>
</html>

3.7 order.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>order</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        .rowName {
            font-size: 20px;
        }
    </style>

</head>
<body>
<div id="goodsDiv">
    <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item index="1">
            <i class="el-icon-shopping-cart-2"></i>
            <a href="http://localhost:8081/brand-case1/order.html" style="text-decoration: none"><span>点单</span></a>
        </el-menu-item>
        <el-menu-item index="2">
            <i class="el-icon-s-order"></i>
            <a href="http://localhost:8081/brand-case1/myOrder.html" style="text-decoration: none"><span>我的订单</span></a>
        </el-menu-item>
        <el-menu-item index="3">
            <i class="el-icon-user-solid"></i>
            <a href="http://localhost:8081/brand-case1/myInfo.html" style="text-decoration: none"><span>个人中心</span></a>
        </el-menu-item>
        <el-menu-item index="4">
            <i class="el-icon-switch-button"></i>
            <a href="http://localhost:8081/brand-case1/login.html" style="text-decoration: none"><span>退出登录</span></a>
        </el-menu-item>
    </el-menu>
    <!--搜索表单-->
    <el-form :inline="true" :model="goodsSearch" class="demo-form-inline">

        <el-form-item label="当前状态">
            <el-select v-model="goodsSearch.status" placeholder="当前状态">
                <el-option label="可下单" value="1"></el-option>
                <el-option label="已售尽" value="0"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="商家名称">
            <el-input v-model="goodsSearch.businessName" placeholder="商家名称"></el-input>
        </el-form-item>

        <el-form-item label="菜品名称">
            <el-input v-model="goodsSearch.goodsName" placeholder="菜品名称"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="selectByPageAndCondition">条件查询</el-button>
            <el-button type="primary" @click="selectByPage">查询所有</el-button>
        </el-form-item>
    </el-form>

    <!--按钮-->
    <!--<el-row>
        <el-button type="danger" plain @click="deleteByIds">全选</el-button>
        &lt;!&ndash;<el-button type="primary" plain @click="addDialogVisible = true">新增</el-button>&ndash;&gt;
    </el-row>-->
    <!--表格-->
    <template>
        <el-table
                :data="tableData"

                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange"
        >
           <!-- <el-table-column
                    type="selection"
                    width="55"
                    align="center">
            </el-table-column>-->
            <el-table-column
                    type="index"
                    width="50"
                    align="center">
            </el-table-column>

            <el-table-column
                    prop="goodsName"
                    label="菜品名称"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="businessName"
                    label="商家名称"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="description"
                    label="菜品描述"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="statusStr"
                    align="center"
                    label="当前状态">
            </el-table-column>
            <el-table-column
                    prop="price"
                    align="center"
                    label="价格">
            </el-table-column>
            <el-table-column
                    prop="num"
                    align="center"
                    label="数量">
                <template slot-scope="scope">
                    <el-input-number v-model="scope.row.num" @change="handleChange(scope.row)" :min="0"
                                     label="计数器">
                    </el-input-number>
                </template>
            </el-table-column>

        </el-table>
        <el-table
                :data="sum"

                row-class-name="rowName"
                style="width: 100%">
            <el-table-column
                    prop="test"
                    label=""
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="test"
                    label=""
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="test"
                    label="">
            </el-table-column>
            <el-table-column
                    prop="test"
                    label="">
            </el-table-column>
            <el-table-column
                    prop="test"
                    label="">
            </el-table-column>
            <el-table-column
                    prop="test"
                    label="">
            </el-table-column>
            <el-table-column
                    prop="test"
                    label="">
            </el-table-column>
            <el-table-column
                    prop="text"
                    v-model="sum.text"
                    align="right">
            </el-table-column>
            <el-table-column
                    prop="total"
                    v-model="sum.total"
                    align="left">
            </el-table-column>
            <el-table-column
                    prop="submit"
                    align="left"
                    label="">
                <template slot-scope="scope">
                    <el-row>
                        <el-button
                                type="primary" size="20px" @click="DialogVisible=true">去结算
                        </el-button>
                        <el-dialog
                                title="模拟支付"
                                :visible.sync="DialogVisible"
                                width="30%">
                            <el-form ref="form"  label-width="80px" >
                                <el-form-item label="支付方式" >
                                    <el-radio-group v-model="temp">
                                        <el-radio label="支付宝"></el-radio>
                                        <el-radio label="微信"></el-radio>
                                        <el-radio label="云闪付"></el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click.native.prevent="commit">提交</el-button>
                                    <el-button @click="DialogVisible = false">取消</el-button>
                                </el-form-item>
                            </el-form>
                        </el-dialog>
                    </el-row>
                </template>
            </el-table-column>
            <!--<el-table-column
                    prop="submit"
                    align="left">
                <template slot-scope="scope">
                    <el-button
                            @click.native.prevent="commit"
                            type="primary" size="20px">去结算
                    </el-button>
                </template>
            </el-table-column>-->
        </el-table>
    </template>

    <!--分页工具条-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">
    </el-pagination>

</div>


<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>

<script>

    new Vue({
        el: "#goodsDiv",

        mounted() {
            //当页面加载完成后，发送异步请求，获取数据
            this.selectByPage();
        },
        methods: {
            setUser(){
                axios({
                    method: "get",
                    url: "http://localhost:8081/brand-case1/goods/setUser"
                }).then(resp => {
                    alert(resp.data+"，欢迎您进入网上订餐平台！");
                })
            },
            //查询分页的方法
            selectByPageAndCondition() {
                console.log(this.goodsSearch);
                axios({
                    method: "post",
                    url: "http://localhost:8081/brand-case1/goods/selectByPageAndCondition?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize,
                    data: this.goodsSearch
                }).then(resp => {
                    //设置表格数据
                    this.tableData = resp.data.rows; //{rows:[],totalCount:100}
                    //设置总记录数
                    this.totalCount = resp.data.totalCount;
                })
            },
            selectByPage() {
                //alert(this.currentPage+this.pageSize);
                //this.currentPage=1;
                axios({
                    method: "post",
                    url: "http://localhost:8081/brand-case1/goods/selectByPage?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize
                }).then(resp => {
                    //设置表格数据
                    this.tableData = resp.data.rows; //{rows:[],totalCount:100}
                    //设置总记录数
                    this.totalCount = resp.data.totalCount;
                    //this.setUser();
                })
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex %3 == 0) {
                    return 'warning-row';
                } else if (rowIndex%3 == 1) {
                    return 'success-row';
                }
                return '';
            },
            // 复选框选中后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;

                console.log(this.multipleSelection)
            },
            // 添加数据
            addGoods() {
                //console.log(this.goodsAdd);
                //发送ajax异步请求
                //var _this=this;
                axios({
                    method: "post",
                    url: "http://localhost:8081/brand-case1/goods/add",
                    data: this.goodsAdd
                }).then(resp => {
                    if (resp.data == "success") {
                        //添加成功

                        //关闭窗口
                        //_this.addDialogVisible=false;
                        this.addDialogVisible = false;
                        //重新查询所有
                        //_this.selectAll();
                        this.selectByPage();

                        //弹出消息提示
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                    }
                })
            },
            //分页
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                //重新设置每页展示的条数
                this.pageSize = val;
                //this.setNumAndS();
                //this.submit();
                this.selectByPage();
            },
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                //重新设置当前页码
                this.currentPage = val;
                //this.setNumAndS();
                //this.submit();
                this.selectByPage();
            },
            commit() {
                console.log(this.temp);
                axios({
                    method: "get",
                    url: "http://localhost:8081/brand-case1/goods/selectAll",
                }).then(resp => {
                    let j=0;
                    for (let i = 0; i < resp.data.length; i++) {
                        if(resp.data[i].num!=0){
                            this.selectedGoods[j]=resp.data[i];
                            j++;
                        }
                    }
                    //console.log(this.selectedGoods);
                    if(this.selectedGoods.length!=0){
                        if(this.temp==''){
                            alert("请选择结算方式！");
                        }else{
                            axios({
                                method: "post",
                                url: "http://localhost:8081/brand-case1/goods/addOrder?mode="+this.temp,
                                data: this.selectedGoods
                            }).then(resp => {
                                if(resp.data=="success"){
                                    alert("结算成功！");
                                    for (let i = 0; i < this.selectedGoods.length; i++) {
                                        this.selectedGoods[i].num=0;
                                        this.selectedGoods[i].s=0;
                                    }
                                    axios({
                                        method: "post",
                                        url: "http://localhost:8081/brand-case1/goods/setNumAndS",
                                        data:this.selectedGoods
                                    }).then(resp => {
                                        //设置表格数据
                                        this.selectedGoods=[];
                                        this.sum[0].total=0;
                                        this.selectByPage();
                                    })
                                    //console.log(this.selectedGoods);
                                }
                            })
                        }
                    }else{
                        alert("请选择菜品！");
                    }
                })
            },
            setNumAndS() {
                for (let i = 0; i < this.tableData.length; i++) {
                        this.selectedTemp[i] = this.tableData[i];
                }
                //console.log(this.selectedGoods);
                //this.selectedTemp=this.selectedGoods;
                axios({
                    method: "post",
                    url: "http://localhost:8081/brand-case1/goods/setNumAndS",
                    data: this.selectedTemp
                }).then(resp => {
                })
            },
            handleChange(row) {
                //console.log(row.num);
                //console.log(this.sum[0].total)
                if (row.s < row.price * row.num) {
                    this.sum[0].total = this.sum[0].total + row.price * row.num - row.s;
                } else {
                    this.sum[0].total = this.sum[0].total - row.s + row.price * row.num;
                }
                row.s = row.price * row.num;
                let a=new Array(row);
                //console.log(row);
                axios({
                    method: "post",
                    url: "http://localhost:8081/brand-case1/goods/setNumAndS",
                    data: a
                }).then(resp => {
                })
            },
            /*commit(){
                this.submit();
                //console.log(this.selectedGoods);
            },*/
            //批量删除
            deleteByIds() {
                //弹出确认的提示框
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //用户点击确定按钮
                    //1.创建id数组 [1,2,3],从this.multipleSelection里面获取
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        let selectionElement = this.multipleSelection[i];
                        this.selectedIds[i] = selectionElement.id;
                    }
                    //2.发送ajax请求
                    //var _this=this;
                    axios({
                        method: "post",
                        url: "http://localhost:8081/brand-case1/goods/deleteByIds",
                        //data:_this.selectedIds
                        data: this.selectedIds
                    }).then(resp => {
                        if (resp.data == "success") {
                            //删除成功
                            //重新查询所有
                            //_this.selectAll();
                            this.selectByPage();

                            //弹出消息提示
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        }
                    })
                }).catch(() => {
                    //用户点击取消按钮
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //删除
            deleteRow(id) {
                //this.id = val;
                //console.log(row);
                //弹出确认的提示框
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //用户点击确定按钮

                    //1.发送ajax请求
                    //var _this=this;
                    axios({
                        method: "get",
                        url: "http://localhost:8081/brand-case1/goods/deleteRow?id=" + id,
                        //data:_this.selectedIds
                        //data: this.selectedIds
                    }).then(resp => {
                        if (resp.data == "success") {
                            //删除成功
                            //重新查询所有
                            //_this.selectAll();
                            this.selectByPage();

                            //弹出消息提示
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        }
                    })
                }).catch(() => {
                    //用户点击取消按钮
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //修改
            updateTemp(row) {
                //this.goodsUpdate.goodsName=row.goodsName;
                //this.goodsUpdate.businessName=row.businessName;
                this.goodsUpdate.id = row.id;
                //this.goodsUpdate=row;
                //console.log(this.goodsUpdate);
                this.updateDialogVisible = true;
            },
            updateRow() {
                //this.goodsUpdate.id=id;
                console.log(this.goodsUpdate);
                //this.updateDialogVisible=false;
                axios({
                    method: "post",
                    url: "http://localhost:8081/brand-case1/goods/updateRow",
                    //data:_this.brand
                    data: this.goodsUpdate
                }).then(resp => {
                    if (resp.data == "success") {
                        //添加成功

                        //关闭窗口
                        //_this.addDialogVisible=false;
                        this.updateDialogVisible = false;
                        //重新查询所有
                        //_this.selectAll();
                        this.selectByPage();

                        //弹出消息提示
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                    }
                })
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        },
        data() {
            return {
                activeIndex: '1',
                deleteId: '',
                temp:'',
                //每页展示条目数
                pageSize: 5,
                //总记录数
                totalCount: 100,
                // 当前页码
                currentPage: 1,
                // 添加数据对话框是否展示的标记
                DialogVisible: false,
                updateDialogVisible: false,
                // 品牌模型数据
                goodsAdd: {
                    status: '',
                    goodsName: '',
                    businessName: '',
                    id: "",
                    price: "",
                    description: "",
                    addr: ''
                },
                goodsUpdate: {
                    status: '',
                    goodsName: '',
                    businessName: '',
                    id: "",
                    price: "",
                    description: "",
                    addr: ''
                },
                goodsSearch: {
                    status: '',
                    goodsName: '',
                    businessName: '',
                    id: "",
                    price: "",
                    description: "",
                    addr: ''
                },
                //被选中的id
                selectedIds: [],
                selectedGoods: [],
                selectedTemp: [],
                // 复选框选中数据集合
                multipleSelection: [],
                // 表格数据
                s1: 0,
                sum: [{
                    text: '总价:',
                    total: 0
                }],
                tableData: []
                /*tableData: [{
                    goodsName: '12987122',
                    businessName: '王小虎',
                    description: 'a',
                    price: 10,
                    status: 1,
                    num: '',
                    s: 0
                }, {
                    goodsName: '12987123',
                    businessName: '王小虎',
                    description: 'aa',
                    price: 12,
                    status: 1,
                    num: '',
                    s: 0
                }, {
                    goodsName: '12987124',
                    businessName: '王小虎',
                    description: 'aaa',
                    price: 9,
                    status: 1,
                    num: '',
                    s: 0
                }, {
                    goodsName: '12987125',
                    businessName: '王小虎',
                    description: 'aaaa',
                    price: 11,
                    status: 1,
                    num: '',
                    s: 0
                }, {
                    goodsName: '12987126',
                    businessName: '王小虎',
                    description: 'aaaaa',
                    price: 13,
                    status: 1,
                    num: '',
                    s: 0
                }]*/
            }
        }
    })

</script>

</body>
</html>

3.8 myOrder.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>myOrder</title>
  <style>
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
  </style>

</head>
<body>
<div id="goodsDiv">
  <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
    <el-menu-item index="1">
      <i class="el-icon-shopping-cart-2"></i>
      <a href="http://localhost:8081/brand-case1/order.html" style="text-decoration: none"><span>点单</span></a>
    </el-menu-item>
    <el-menu-item index="2">
      <i class="el-icon-s-order"></i>
      <a href="http://localhost:8081/brand-case1/myOrder.html" style="text-decoration: none"><span>我的订单</span></a>
    </el-menu-item>
    <el-menu-item index="3">
      <i class="el-icon-user-solid"></i>
      <a href="http://localhost:8081/brand-case1/myInfo.html" style="text-decoration: none"><span>个人中心</span></a>
    </el-menu-item>
    <el-menu-item index="4">
      <i class="el-icon-switch-button"></i>
      <a href="http://localhost:8081/brand-case1/login.html" style="text-decoration: none"><span>退出登录</span></a>
    </el-menu-item>
  </el-menu>
  <!--按钮-->
  <el-row>
    <el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
  </el-row>

  <!--表格-->
  <template>
    <el-table
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange"
    >
      <el-table-column
              type="selection"
              width="55"
              align="center">
      </el-table-column>
      <el-table-column
              type="index"
              width="50"
              align="center">
      </el-table-column>

      <el-table-column
              prop="goodsName"
              label="菜品名称"
              align="center"
      >
      </el-table-column>
      <el-table-column
              prop="businessName"
              label="商家名称"
              align="center"
      >
      </el-table-column>
      <el-table-column
              prop="addr"
              label="商家地址"
              align="center"
      >
      </el-table-column>
      <el-table-column
              prop="uAddr"
              label="收货地址"
              align="center"
      >
      </el-table-column>
      <el-table-column
              prop="uTel"
              label="联系电话"
              align="center"
      >
      </el-table-column>
      <el-table-column
              prop="description"
              label="菜品备注"
              align="center"
      >
      </el-table-column>
      <el-table-column
              prop="price"
              align="center"
              label="订单金额">
      </el-table-column>
      <el-table-column
              prop="num"
              align="center"
              label="数量">
      </el-table-column>

      <el-table-column
              prop="operate"
              align="center"
              label="操作">
        <template slot-scope="scope">
          <el-row>
            <el-button
                    @click="updateTemp(scope.row)"
                    type="primary"
            >修改
              <!--@click="updateTemp(scope.row)"-->

              <!--@click.native.prevent="updateRow(scope.row.id)"-->
            </el-button>
            <el-dialog
                    title="修改信息"
                    :visible.sync="updateDialogVisible"
                    width="30%"
            >
              <el-form ref="form" :model="goodsUpdate" label-width="80px" >
                <el-form-item label="收货地址">
                  <el-input v-model="goodsUpdate.uAddr"></el-input>
                </el-form-item>

                <el-form-item label="联系电话">
                  <el-input v-model="goodsUpdate.uTel"></el-input>
                </el-form-item>

                <el-form-item label="备注">
                  <el-input v-model="goodsUpdate.description"></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click.native.prevent="updateRow">提交</el-button>
                  <el-button @click="updateDialogVisible = false">取消</el-button>
                </el-form-item>
              </el-form>
            </el-dialog>
            <el-button
                    @click.native.prevent="deleteRow(scope.row.id)"
                    type="danger">删除
            </el-button>
          </el-row>
        </template>
      </el-table-column>

    </el-table>
  </template>

  <!--分页工具条-->
  <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount">
  </el-pagination>

</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>

<script>
  new Vue({
    el: "#goodsDiv",

    mounted() {
      //当页面加载完成后，发送异步请求，获取数据
      this.selectByPage();
    },
    methods: {
      selectByPage(){
        //alert(this.currentPage+this.pageSize);
        //this.currentPage=1;
        axios({
          method: "post",
          url: "http://localhost:8081/brand-case1/goods/selectOrder?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize
        }).then(resp => {
          //设置表格数据
          this.tableData = resp.data.rows; //{rows:[],totalCount:100}
          //设置总记录数
          this.totalCount = resp.data.totalCount;
        })
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex %3 == 0) {
          return 'warning-row';
        } else if (rowIndex%3 == 1) {
          return 'success-row';
        }
        return '';
      },
      // 复选框选中后执行的方法
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection)
      },
      //分页
      handleSizeChange(val) {
        //console.log(`每页 ${val} 条`);
        //重新设置每页展示的条数
        this.pageSize = val;
        this.selectByPage();
      },
      handleCurrentChange(val) {
        //console.log(`当前页: ${val}`);
        //重新设置当前页码
        this.currentPage = val;
        this.selectByPage();
      },
      //批量删除
      deleteByIds() {
        //弹出确认的提示框
        if(this.multipleSelection.length!=0) {
          this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //用户点击确定按钮
            //1.创建id数组 [1,2,3],从this.multipleSelection里面获取
            for (let i = 0; i < this.multipleSelection.length; i++) {
              let selectionElement = this.multipleSelection[i];
              this.selectedIds[i] = selectionElement.id;
            }
            //2.发送ajax请求
            //var _this=this;
            axios({
              method: "post",
              url: "http://localhost:8081/brand-case1/goods/deleteOrderByIds",
              //data:_this.selectedIds
              data: this.selectedIds
            }).then(resp => {
              if (resp.data == "success") {
                //删除成功
                //重新查询所有
                //_this.selectAll();
                this.selectByPage();

                //弹出消息提示
                this.$message({
                  message: '删除成功',
                  type: 'success'
                });
              }
            })
          }).catch(() => {
            //用户点击取消按钮
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }else {
          alert("请先选择要删除的订单！");
        }
      },
      //删除
      deleteRow(id) {
        //this.id = val;
        console.log(id);
        //弹出确认的提示框
        this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //用户点击确定按钮

          //1.发送ajax请求
          //var _this=this;
          axios({
            method: "get",
            url: "http://localhost:8081/brand-case1/goods/deleteOrder?id=" +id,
            //data:_this.selectedIds
            //data: this.selectedIds
          }).then(resp => {
            if (resp.data == "success") {
              //删除成功
              //重新查询所有
              //_this.selectAll();
              this.selectByPage();

              //弹出消息提示
              this.$message({
                message: '删除成功',
                type: 'success'
              });
            }
          })
        }).catch(() => {
          //用户点击取消按钮
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //修改
      updateTemp(row){
        //this.goodsUpdate.goodsName=row.goodsName;
        //this.goodsUpdate.businessName=row.businessName;
        this.goodsUpdate.id=row.id;
        //this.goodsUpdate=row;
        //console.log(this.goodsUpdate);
        this.updateDialogVisible=true;
      },
      updateRow() {
        //this.goodsUpdate.id=id;
        console.log(this.goodsUpdate);
        //this.updateDialogVisible=false;
        axios({
          method: "post",
          url: "http://localhost:8081/brand-case1/goods/updateOrder",
          //data:_this.brand
          data: this.goodsUpdate
        }).then(resp => {
          if (resp.data == "success") {
            //添加成功

            //关闭窗口
            //_this.addDialogVisible=false;
            this.updateDialogVisible = false;
            //重新查询所有
            //_this.selectAll();
            this.selectByPage();

            //弹出消息提示
            this.$message({
              message: '修改成功',
              type: 'success'
            });
          }
        })
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    data() {
      return {
        activeIndex: '2',
        deleteId:'',
        //每页展示条目数
        pageSize: 5,
        //总记录数
        totalCount: 100,
        // 当前页码
        currentPage: 1,
        // 添加数据对话框是否展示的标记
        addDialogVisible: false,
        updateDialogVisible: false,
        // 品牌模型数据
        goodsAdd: {
          status: '',
          goodsName: '',
          businessName: '',
          id: "",
          price: "",
          description: "",
          addr:''
        },
        goodsUpdate: {
          uTel: "",
          description: "",
          uAddr:''
        },
        goodsSearch: {
          status: '',
          goodsName: '',
          businessName: '',
          id: "",
          price: "",
          description: "",
          addr:''
        },
        //被选中的id
        selectedIds: [],
        // 复选框选中数据集合
        multipleSelection: [],
        // 表格数据
        tableData: []
      }
    }
  })

</script>

</body>
</html>

3.9 myInfo.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>myOrder</title>
  <style>
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
  </style>

</head>
<body>
<div id="goodsDiv">
  <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
    <el-menu-item index="1">
      <i class="el-icon-shopping-cart-2"></i>
      <a href="http://localhost:8081/brand-case1/order.html" style="text-decoration: none"><span>点单</span></a>
    </el-menu-item>
    <el-menu-item index="2">
      <i class="el-icon-s-order"></i>
      <a href="http://localhost:8081/brand-case1/myOrder.html" style="text-decoration: none"><span>我的订单</span></a>
    </el-menu-item>
    <el-menu-item index="3">
      <i class="el-icon-user-solid"></i>
      <a href="http://localhost:8081/brand-case1/myInfo.html" style="text-decoration: none"><span>个人中心</span></a>
    </el-menu-item>
    <el-menu-item index="4">
      <i class="el-icon-switch-button"></i>
      <a href="http://localhost:8081/brand-case1/login.html" style="text-decoration: none"><span>退出登录</span></a>
    </el-menu-item>
  </el-menu>

  <el-form ref="user" :model="user" label-width="80px">
    <el-form-item label="收货地址" prop="addr">
      <el-input v-model="user.addr" style="width: 200px"></el-input>
    </el-form-item>
    <el-form-item label="联系电话" prop="tel">
      <el-input v-model="user.tel" style="width: 200px"></el-input>
    </el-form-item>
    <el-form-item label="新密码" prop="pass">
      <el-input type="password" v-model="user.password"  style="width: 200px"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即修改</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>

</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>

<script>
  new Vue({
    el: "#goodsDiv",

    mounted() {
      //当页面加载完成后，发送异步请求，获取数据
      //this.selectByPage();
    },
    methods: {
      resetForm() {
        this.user={};
      },
      onSubmit(){
        //console.log(this.user);
        this.$confirm('此操作将修改用户信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //用户点击确定按钮
          axios({
            method:"post",
            url:"http://localhost:8081/brand-case1/goods/updateMsg",
            data:this.user
          }).then(resp=> {
            alert("修改成功");
          })
        }).catch(() => {
          //用户点击取消按钮
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    data() {
      return {
        user: {
          tel:'',
          addr:'',
          password:''
        },
        activeIndex: '3',
      }
    }
  })

</script>

</body>
</html>

3.10 后端

复制粘贴太慢了，直接上链接整个main文件夹，前端需要的webapp文件夹。