Python实战案例:tornado接口vue客户端的堂食点餐系统（上）

Python实战案例:tornado接口vue客户端的堂食点餐系统（上）

---

现在的点餐系统比较流行，饮食经营类的商家店铺中每张桌上都贴有一个二维码，扫描二维码之后，出现点餐的界面，因为比较流行，这里就用扫描点餐的界面说明一下vue客户端开发和python的web开发框架tornado的使用。

一、vue的介绍

Vue，读音类似于View,是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 。

Vue自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。这里的案例我们是采用Vue和ElementUI的结合使用，来进行堂食点餐系统的开发。

二、Vue的安装

Vue的安装条件是首先需要安装NodeJS，安装完nodejs后直接可以使用Npm命令直接下载安装vue。

Nodejs的安装可以通过官方网站进行下载，官方网站如下图所示。

上图中的官方网站导航中“下载”一项，就可以进入NodeJS的下载页面。如下图所示。

如图中下载界面所示，选择对应的系统和操作系统位数就可以下载NodeJS的安装文件，NodeJs的安装比较容易，打开下载的exe文件，“下一步”一直点击下去就可以完成安装。下图为NodeJS安装过程中的界面。

NodeJS安装成功后，可以在cmd的windows命令提示窗口中使用node -v命令查看NodeJS的版本，相当于查看NodeJS的安装是否正常。如下图所示。

对于这个命令窗口也可以使用npm -v查看npm的版本，npm全称【node package management】，是nodejs内置的软件包管理器。毫无疑问，npm是用来管理软件包的。执行npm -v查看版本后如下图所示。

对于前端来讲，npm这个管理软件包的程序安装成功后，就可以安装vue，使用命令:

npm install -g vue-cli

这里的参数-g表示的是全局安装。这样可以在命令提示符下的任何一个地方都可以调用npm。

安装后会显示出vue-cli的版本号，上图中安装的版本是2.9.6，在这台演示电脑上的版本是6.13.4。

三、Vue脚手架创建新项目

在windows命令行提示窗口中，输入下面格式的命令：

vue init webpack 项目名称

输入命令后，窗口需要连接网络，下载相关的vue模板，然后询问的就是项目的名称。如下图所示。

上图中的项目名称默认为myfresh，直接采用默认即可，这个项目的名称也是用vue-cli脚手架产生vue项目时自己使用的项目名称。直接回车，继续下一步，进入到项目描述。如下图所示。

上图中所述的项目描述，默认是“A Vue.js Project”，表示一个Vue的项目，如果需要对这部分描述作一些功能上的说明，可以在后面键入需要描述的内容，如果不需要，直接回车，进入到下一步，询问项目的作者。如下图所示。

如果你需要指明作者，就在这一步中指示说明。直接在后面键入具体的作者信息，也可以直接回车，确认没有作者的名字。进入到下一步，询问是运行加编译的模式还是仅运行模式。如下图所示。

从图中显示可以看出，Runtime+Compiler即运行加编译的模式是Vue recommended for most users的，也就是推荐给大多数用户的。这里我们也不做选择，直接回车执行，进入到下一步，询问是否安装vue-router的路由组件，如下图所示。

路由是进行地址网页请求的关键，这里必须安装vue-router，选择”y”即可进入下一步，询问vue语法格式验证的操作。如下图所示。

对于语法格式验证，这里选择“n”，不进行语法格式的验证，然后进入下一步，询问是否安装单元测试的内容。如下图所示。

对于unit tests的单元测试，这里也选择“n”，可以不安装单元测试，继续下一步，询问是否使用e2e用户界面测试，一般不选择使用Nightwatch进行用户界面测试，敲入“n”，回车进入下一步，询问使用npm管理软件包还是yarn管理软件包。如下图所示。

这里使用默认的NPM管理软件包。直接回车，进入vue模板的初始化安装。如下图所示。

至此，项目会从网站上下载内容去初始化vue的项目myfresh。执行成功后如下图所示。

由图中可知，vue项目搭建成功后，会给出一些提示，使用cd命令进入到该项目目录中，接下来使用npm run dev执行项目。其实现在的项目就可以运行了。进入到该项目目录后，执行npm run dev后的结果如下图所示。

如上图所示的过程就是根据配置文件进行编译执行的过程。编译结束后如下图所示。

看到如上图所示的结果，就可以调用http://localhost:8000默认的地址进行访问，访问后就是vue搭建项目的首页。如下图所示。

这样，vue-cli脚本架就搭建成一个vue的项目。

四、element-ui的安装

Vue堂食点餐项目中使用element-ui的UI框架做布局，需要在vue的环境下安装element-ui插件，使用命令npm install element-ui，需要注意的是，安装后的插件要使用在当前项目下，这就需要加上参数--save来解决这样的问题。具体命令如下。

    npm   install  element-ui  --save

执行该命令，就会在vue-cli脚手架上创建的项中加入element-ui的插件。安装过程如下图所示。

五、Vue文件的认识

通过前面的操作，项目搭建成功，element-ui插件也安装完毕了。现在可以用编辑器打开这个项目，认识一下项目中各个文件的相关功能。

这里使用PyCharm做为编辑器，对Vue文件进行编辑。

PyCharm这个工具通过点击“File（文件）”菜单中的“Settings（设置）”项，在打开的对话框中，左边的树形结构有“plugins”插件的选项，然后在右边的“Marketplace”中找到“Vue”的选项。如下图所示。

从图中看，右边没有展示出Vue的选项来，原因在于右边的Vue已经安装成功，就会在右边Installed标签中显示已经安装成功的Vue选项。如下图所示。

由图中可见，右边的Installed标签下有一个Vue.js文件，这是已安装Vue的情况展示。如果没有安装就可以从Marketplace市场中下载安装即可，安装成功后点击apply允许一下，再ok一下即可完成PyCharm编辑器对Vue的支持。

现在用PyCharm编辑器菜单中的“Open”选项打开刚刚创建成功的Vue项目，如下图所示。

图中所示的是vue-cli脚手架创建的Vue项目结构图，看起来有好多个文件，每个文件有每个文件的功能，具体文件的相关作用解释如下。

其中最重要的文件package.json，这是一个项目基本信息文件，项目开发所需的模块，项目名称，版本等都在这个文件中，我们之前为Vue堂食点餐系统安装的插件element-ui就在这个文件的dependices中。如下图所示。

图中右边就是package.json的文件内容，文件中的dependencies中显示的插件名称和插件版本就是这个项目中需要的插件。

在根目录下存在index.html文件，这是项目的主页文件，也是项目的入口。

在src目录下存在main.js，App.vue以及在router文件夹下存在index.js

index.html为项目访问的首站点，一般我们之定义一个空的根节点，在main.js里面定义的实例将挂载到根节点下，内容都通过vue组件来进行填充。Vue组件文件在src中components组件的文件夹下。一般vue文件都会放在这里，Vue文件的后缀名为.vue，.vue的文件通常由三部分构成，分别用template模板、script脚本和style样式组成的。

【template】

其中模板只能包含一个父节点，也就是说顶层的div只能有一个,是子路由视图，后面的路由页面都显示在此处。打一个比喻吧，类似于一个插槽，跳转某个路由时，该路由下的页面就插在这个插槽中渲染显示。

【script】

vue通常用es6来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等。

【style】

样式通过style标签包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加scoped，

具体的vue文件格式如下图所示。

图中所示的Vue代码包括了三部分：template，script和style。其中template中用div包裹了一个元素<h1>，其内容输出msg变量的内容，msg用形如“{{}}”两个嵌套的大括号表示出来。这个msg的内容在script中有一个data方法，data（）方法中使用return返回一个json数据，这个数据中有msg的键，和“Welcome to Your Vue.js APP”键对应的值。最后一个部分是style样式设置，设置了h1的样式是字体加粗为正常。

Vue-cli脚手架创建的Vue项目，其它文件的说明如下。

六、Vue堂食点餐系统移动端标题栏创建

Vue通过基础的 24 分栏，迅速简便地创建布局。

通过 row 和 col 组件，并通过 col 组件的span属性就可以自由地组合布局。

比如使用el-row和el-col这样的标签，也是ElementUI所持有的。利用span来分成两列，每一列占比12分栏。具体代码如下。

      <el-row  >
            <el-col :span="12">
                <div class="bg-purple-dark">
                    <h1>左列</h1>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="bg-purple">
                    <h1>右列</h1>
                </div>
            </el-col>
        </el-row>

这样就会把屏幕分成两个列，左列和右列。如下图所示。

ElementUI对容器提供了el-header头部容器和el-footer尾部容器。利用el-header头部容器来进行堂食点餐系统的标题栏设置。代码如下。

<div >
    <el-header >
      绝妙订餐系统
    </el-header>
</div>
<script>
</script>
<style scoped>
.el-header{
  background-color:darkgreen;
  color:white;
  line-height:60px;
  font-size:20px;
}
</style>

代码在Vue文件中的template模板中创建el-header头部容器，在这个头部容器的内容中设置“绝妙订餐系统”，需要注意的是，这个头部容器高度是60px，会把文件居中，其它样式是不存在的，需要对样式文件进行设置，因此在style样式中对el-header这个类进行设置，设置其样式文件中的背景颜色，字体颜色，行高和字体大小。最终el-header的运行结果如下图所示。

这样，Vue食堂点餐系统的标题栏设置成功。

七、Vue堂食点餐系统的左栏导航

一般的点餐系统左栏普遍都是一系列菜系的导航,可以通过el-menu和el-menu-item的组合实现导航的功能。具体格式如下。

<el-menu>
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">工作台1</el-menu-item>
    <el-menu-item index="2-2">工作台2</el-menu-item>
    <el-menu-item index="2-3">工作台3</el-menu-item>
  </el-submenu>
  <el-menu-item index="3" disabled>消息中心</el-menu-item>
</el-menu>

从格式上看，el-menu中包含有el-menu-item子项，这表示子项菜单是不能被展开的，如果子项菜单还可以被展开的话，可以使用el-submenu子菜单项，在el-submenu子菜单项中再使用el-menu-item菜单子项，这样el-submenu就是一个点击后可以展开的子菜单项。template是菜单项下的模板文字。如果el-menu-item菜单项中带有disabled参数，这个菜单项处于无效状态。利用这样的特点组织堂食点餐系统的左侧菜单导航的设置。代码如下。

<el-menu
  background-color="darkgreen"
  text-color="#fff"
 >
    <el-menu-item>
          <template>
              <i class="el-icon-s-platform"></i>
              <span>厨师推荐</span>
          </template>
    </el-menu-item>
    <el-menu-item>
          <template>
              <i class="el-icon-s-tools"></i>
              <span>精品凉菜</span>
          </template>
    </el-menu-item>
    <el-menu-item>
          <template>
                <i class="el-icon-user-solid"></i>
                <span>特色小炒</span>
          </template>
    </el-menu-item>
    <el-menu-item>
          <template>
                <i class="el-icon-message-solid"></i>
                <span>家常热菜</span>
          </template>
    </el-menu-item>
    <el-menu-item>
          <template>
                <i class="el-icon-message-solid"></i>
                <span>营养主食</span>
          </template>
    </el-menu-item>
    <el-menu-item>
          <template>
                <i class="el-icon-message-solid"></i>
                <span>调味饮料</span>
          </template>
      </el-menu-item>
</el-menu>

这段代码很容易理理，el-menu中包含了<el-menu-item>的ElementUI标签，每个<el-menu-item>标签中用template模板进行包含里面的内容，这其中的内容就是导航的具体名称，用span标签包含的内容就是堂食点餐系统的具体分项内容，前面的代码，这句就是使用了ElementUI中的icon图标元素，不同的图标对应了不同的class类名称，这个class类名称就是ElementUI框架提供的。从百度上搜索ElementUI的文档就可以找到关于ICON的图标文档。如下图所示。

导航菜单的思想已经具备了，但是要把这个导航放在页面中，还需要具备布局的思维，ElementUI基础布局是24列，这里允许左侧导航占4列，利用el-row和el-col来限定这个左侧导航的位置，当然离不开span=4属性的帮助,具体代码如下。

<el-row>
    <el-col :span="4">
       <el-menu
         background-color="darkgreen"
         text-color="#fff"
        >
           <el-menu-item>
                 <template>
                     <i class="el-icon-s-platform"></i>
                     <span>厨师推荐</span>
                 </template>
           </el-menu-item>
           <el-menu-item>
                 <template>
                     <i class="el-icon-s-tools"></i>
                     <span>精品凉菜</span>
                 </template>
           </el-menu-item>
           <el-menu-item>
                 <template>
                       <i class="el-icon-user-solid"></i>
                       <span>特色小炒</span>
                 </template>
           </el-menu-item>
           <el-menu-item>
                 <template>
                       <i class="el-icon-message-solid"></i>
                       <span>家常热菜</span>
                 </template>
           </el-menu-item>
           <el-menu-item>
                 <template>
                       <i class="el-icon-message-solid"></i>
                       <span>营养主食</span>
                 </template>
           </el-menu-item>
           <el-menu-item>
                 <template>
                       <i class="el-icon-message-solid"></i>
                       <span>调味饮料</span>
                 </template>
             </el-menu-item>
       </el-menu>
   </el-col>
</el-row>

这里也有一些样式是el-menu-item导航项在鼠标经过和鼠标点击后的具体格式效果,vue文件的style部分具体代码如下。

.el-menu-item:hover{
    background:yellow!important;
    color:purple!important;

}
.el-menu-item.is-active{
    background:purple!important;
    color:white!important;

}

el-menu-item菜单子项对应hover伪选择器就是鼠标经过时发生的状况，对应is-active伪选择器就是鼠标点击后发生的状况。这两种情况都改变的是背景颜色background和前景颜色color，注意对兼容性很重要的!Important。

最终运行结果如下图所示。

八、Vue堂食点餐系统的餐饮食品列表区

餐饮点餐系统的食品列表区可以理解成一个el-table，在这个el-table中包括el-table-column列，根据项目的需求需要显示多少列，el-table-column就有几个列，这里的餐饮点餐系统设定需求有菜品、菜品图片和菜品价格。每个el-table的标签维度名称可以在el-table-column中添加label属性标签，其代表具体的维度意义，表格中的数据与label标签的意义相对应。一般列表中的数据是动态加载的，我们可以在data()初始化数据中加入foodlist餐饮食品列表，在el-table标签中设定这个表格的数据与data进行绑定，数据的双向绑定也是Vue框架的特点。因为数据需要显示在el-table-column中，所以会在el-table-column中添加prop属性，prop属性中的值就是双向绑定foodlist餐饮食品列表中的键。代码如下。

<el-table :data="foodlist"  height="330">
    <el-table-column label="菜名"  prop="name"></el-table-column>
    <el-table-column label="菜品图片"  prop="img">
          <template slot-scope="scope">
            <img :src="scope.row.img" width="170" height="124"/>
          </template>
    </el-table-column>
    <el-table-column label="菜品价格"  prop="price">
    </el-table-column>
 </el-table>

在这段代码中，el-table设置属性height=330表明高度是330，当餐饮食品列表的长度超过330的时候，餐饮食品列表就会出现竖向滚动条，就可以进行竖向滑动，如果不设置height这个参数，那么el-table就会将布局一直拉伸下去，如果布局的下面还有脚部，就需要把脚部作fixed定位，不然脚部就会被el-table元素的拉伸给顶到了底部。

还有在代码中注意的是，在属性prop=”img”的el-table-column这个标签里面包含了一个template模板，template模板有一个属性slot-scope=”scope”，这里要理解的是scope，框架ElementUI在处理el-table数据时，如果foodlist是给到table的记录集数据，scope是table内部基于foodlist生成出来的。这个scope数据用excel描绘一下，如下图所示。

我们传进去的foodlist，在table内部生成了类似于Excel的scope，因此，通过scope.row.img获取scope中img内容的路径，也就实现了读取到每一行中的img字段内容。

还有重要的一点，scope又并非是整个table，只是能通过scope.row获得当前的行数据，这是需要特别说明的。

然后就是这样的食品列表最终也要放到一个布局中，也就是放到一个el-col中，它的占位是在左侧导航的右边，也就是el-col去掉左侧导航占的4列，这个食品列表的导航应该占20列。代码如下。

<template>
  <div >
      <el-header >
        绝妙订餐系统
      </el-header>
       <el-row>
           <el-col :span="4">
              <el-menu
                background-color="darkgreen"
                text-color="#fff"
               >
                  <el-menu-item>
                        <template>
                            <i class="el-icon-s-platform"></i>
                            <span>厨师推荐</span>
                        </template>
                  </el-menu-item>
                  <el-menu-item>
                        <template>
                            <i class="el-icon-s-tools"></i>
                            <span>精品凉菜</span>
                        </template>
                  </el-menu-item>
                  <el-menu-item>
                        <template>
                              <i class="el-icon-user-solid"></i>
                              <span>特色小炒</span>
                        </template>
                  </el-menu-item>
                  <el-menu-item>
                        <template>
                              <i class="el-icon-message-solid"></i>
                              <span>家常热菜</span>
                        </template>
                  </el-menu-item>
                  <el-menu-item>
                        <template>
                              <i class="el-icon-message-solid"></i>
                              <span>营养主食</span>
                        </template>
                  </el-menu-item>
                  <el-menu-item>
                        <template>
                              <i class="el-icon-message-solid"></i>
                              <span>调味饮料</span>
                        </template>
                    </el-menu-item>
              </el-menu>
          </el-col>
         <el-col :span="20">
              <el-table :data="foodlist"  height="330">

                  <el-table-column label="菜名"  prop="name"></el-table-column>
                  <el-table-column label="菜品图片"  prop="img">
                        <template slot-scope="scope">
                          <img :src="scope.row.img" width="170" height="124"/>
                        </template>
                  </el-table-column>
                  <el-table-column label="菜品价格"  prop="price"></el-table-column>
            </el-table>
         </el-col>

      </el-row>

  </div>
</template>

<script>

export default {
   name: 'OrderFood',
   data(){
          return {


              /*定义全局booklist*/
                foodlist:[{
                "name":"野蘑菇炖鸡",
                "img":"./static/images/mogu_ji.png",
                "price":58.00
              },{
                "name":"大盘鸡",
                "img":"./static/images/dapan_ji.png",
                "price":62.00
              },
              {
                "name":"爆椒鸡",
                "img":"./static/images/baojiao_ji.png",
                "price":48.00
              },{
                "name":"辣子鸡丁",
                "img":"./static/images/lazi_ji.png",
                "price":39.00
              },
              {
                "name":"麻辣鱼头",
                "img":"./static/images/mala_yu.png",
                "price":52.00
              },{
                "name":"酸菜鱼",
                "img":"./static/images/lazi_ji.png",
                "price":53.00
              },
              {
                "name":"红烧带鱼",
                "img":"./static/images/mala_yu.png",
                "price":42.00
              },{
                "name":"水煮肉片",
                "img":"./static/images/dapan_ji.png",
                "price":35.00
              },
              {
                "name":"毛血旺",
                "img":"./static/images/baojiao_ji.png",
                "price":30.00
              },{
                "name":"鱼香肉丝",
                "img":"./static/images/lazi_ji.png",
                "price":18.00
              },
              {
                "name":"烧大肠",
                "img":"./static/images/mala_yu.png",
                "price":28.00
              },{
                "name":"农家小炒肉",
                "img":"./static/images/lazi_ji.png",
                "price":25.00
              },
              {
                "name":"青椒肉丝",
                "img":"./static/images/mala_yu.png",
                "price":20.00
              },{
                "name":"京酱肉丝",
                "img":"./static/images/mala_yu.png",
                "price":19.00
              },{
                "name":"红烧肉（带饼）",
                "img":"./static/images/lazi_ji.png",
                "price":30.00
              },
              {
                "name":"回锅肉",
                "img":"./static/images/mala_yu.png",
                "price":16.00
              },{
                "name":"木须肉",
                "img":"./static/images/mala_yu.png",
                "price":18.00
              },{
                "name":"酸豆角炒肉末",
                "img":"./static/images/lazi_ji.png",
                "price":22.00
              },
              {
                "name":"鲜辣烤鱼",
                "img":"./static/images/mala_yu.png",
                "price":79.00
              },{
                "name":"干锅菜花",
                "img":"./static/images/mala_yu.png",
                "price":16.00
              },{
                "name":"干锅千页豆腐",
                "img":"./static/images/lazi_ji.png",
                "price":15.00
              },
              {
                "name":"西红柿烧牛楠",
                "img":"./static/images/mala_yu.png",
                "price":29.00
              },{
                "name":"绿豆牙炒馓子",
                "img":"./static/images/mala_yu.png",
                "price":13.00
              },{
                "name":"西红柿炒鸡蛋",
                "img":"./static/images/lazi_ji.png",
                "price":12.00
              },
              {
                "name":"酸辣土豆丝",
                "img":"./static/images/mala_yu.png",
                "price":14.00
              },{
                "name":"香菇青菜",
                "img":"./static/images/mala_yu.png",
                "price":17.00
              },{
                "name":"麻辣豆腐",
                "img":"./static/images/lazi_ji.png",
                "price":10.00
              },
              {
                "name":"鱼香茄子",
                "img":"./static/images/mala_yu.png",
                "price":15.00
              },{
                "name":"爆炒花哈",
                "img":"./static/images/mala_yu.png",
                "price":23.00
              },{
                "name":"豆芽粉条",
                "img":"./static/images/lazi_ji.png",
                "price":11.00
              },
              {
                "name":"红油耳丝",
                "img":"./static/images/mala_yu.png",
                "price":16.00
              },{
                "name":"变蛋黄豆",
                "img":"./static/images/mala_yu.png",
                "price":9.00
              },{
                "name":"麻辣花生米",
                "img":"./static/images/lazi_ji.png",
                "price":9.00
              },
              {
                "name":"水蒸蛋",
                "img":"./static/images/mala_yu.png",
                "price":10.00
              },{
                "name":"烧茄子",
                "img":"./static/images/mala_yu.png",
                "price":14.00
              },{
                "name":"炒饼丝",
                "img":"./static/images/lazi_ji.png",
                "price":8.00
              }]
          }
   } 
}
</script>


<style scoped>
  .el-header{
    background-color:darkgreen;
    color:white;
    line-height:60px;
    font-size:20px;
  }
  .el-menu-item:hover{
      background:yellow!important;
      color:purple!important;

  }
  .el-menu-item.is-active{
      background:purple!important;
      color:white!important;

  }

代码运行结果如下图所示。

九、Vue堂食点餐系统的脚部购物车部分

点餐系统中当用户点击完需要购买的菜品后，就要进行结算，脚部一般出现的是用户选择了哪几样菜品，最终的价格是多少。这个组件可以用el-row来进行布局，el-col确定左边的菜品统计信息条，一般宽度比较宽，可以占20，单纯的统计信息又比较单调，可以在左边放一个购物车的图标做为美化界面的产物，这个图标可以占位2,这样统计信息条占位18，右边的“去结算”按钮占位4，同时设置每个占位区的class类属性。代码如下。

<el-row>
      <el-col :span="2">
        <div class="bg-green-dark">
            <i class="el-icon-cart"></i>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="bg-green-dark">
          商品4件，20.00元
        </div>
      </el-col>
      <el-col :span="4">
        <div class="bg-red-dark">
          去结算
        </div>
      </el-col>
</el-row>
对应的样式代码如下。
.el-icon-cart{
   width:60px;
   height:60px;
   background: url("../assets/image/cart.png") center no-repeat;
   background-size:100% 100%;
   margin-top:-10px;
}
.el-icon-cart:before{
  visibility: hidden;
}
.bg-green-dark{
  background-color:black;
  height:60px;
  line-height:60px;
  color:white;
}
.bg-red-dark{
  background-color:darkred;
  color:white;
  height:60px;
  line-height:60px;
}

整体Vue堂食点餐系统的布局就基本完成了，全部代码如下。

<template>
  <div >
      <el-header >
        绝妙订餐系统
      </el-header>
       <el-row>
           <el-col :span="4">
              <el-menu
                background-color="darkgreen"
                text-color="#fff"
               >
                  <el-menu-item>
                        <template>
                            <i class="el-icon-s-platform"></i>
                            <span>厨师推荐</span>
                        </template>
                  </el-menu-item>
                  <el-menu-item>
                        <template>
                            <i class="el-icon-s-tools"></i>
                            <span>精品凉菜</span>
                        </template>
                  </el-menu-item>
                  <el-menu-item>
                        <template>
                              <i class="el-icon-user-solid"></i>
                              <span>特色小炒</span>
                        </template>
                  </el-menu-item>
                  <el-menu-item>
                        <template>
                              <i class="el-icon-message-solid"></i>
                              <span>家常热菜</span>
                        </template>
                  </el-menu-item>
                  <el-menu-item>
                        <template>
                              <i class="el-icon-message-solid"></i>
                              <span>营养主食</span>
                        </template>
                  </el-menu-item>
                  <el-menu-item>
                        <template>
                              <i class="el-icon-message-solid"></i>
                              <span>调味饮料</span>
                        </template>
                    </el-menu-item>
              </el-menu>
          </el-col>
         <el-col :span="20">
              <el-table :data="foodlist" height="330">

                  <el-table-column label="菜名"  prop="name"></el-table-column>
                  <el-table-column label="菜品图片"  prop="img">
                        <template slot-scope="scope">
                          <img :src="scope.row.img" width="170" height="124"/>
                        </template>
                  </el-table-column>
                  <el-table-column label="菜品价格"  prop="price"></el-table-column>
           </el-table>
         </el-col>

      </el-row>
      <el-row>
            <el-col :span="2">
              <div class="bg-green-dark">
                  <i class="el-icon-cart"></i>
              </div>
            </el-col>
            <el-col :span="18">
              <div class="bg-green-dark">
                商品0件，0元
              </div>
            </el-col>
            <el-col :span="4">
              <div class="bg-red-dark">
                去结算
              </div>
            </el-col>
      </el-row>

  </div>
</template>

<script>
export default {
   name: 'OrderFood',
   data(){
          return {
                /*定义全局booklist*/
                foodlist:[{
                "name":"野蘑菇炖鸡",
                "img":"./static/images/mogu_ji.png",
                "price":58.00
              },{
                "name":"大盘鸡",
                "img":"./static/images/dapan_ji.png",
                "price":62.00
              },
              {
                "name":"爆椒鸡",
                "img":"./static/images/baojiao_ji.png",
                "price":48.00
              },{
                "name":"辣子鸡丁",
                "img":"./static/images/lazi_ji.png",
                "price":39.00
              },
              {
                "name":"麻辣鱼头",
                "img":"./static/images/mala_yu.png",
                "price":52.00
              },{
                "name":"酸菜鱼",
                "img":"./static/images/lazi_ji.png",
                "price":53.00
              },
              {
                "name":"红烧带鱼",
                "img":"./static/images/mala_yu.png",
                "price":42.00
              },{
                "name":"水煮肉片",
                "img":"./static/images/dapan_ji.png",
                "price":35.00
              },
              {
                "name":"毛血旺",
                "img":"./static/images/baojiao_ji.png",
                "price":30.00
              },{
                "name":"鱼香肉丝",
                "img":"./static/images/lazi_ji.png",
                "price":18.00
              },
              {
                "name":"烧大肠",
                "img":"./static/images/mala_yu.png",
                "price":28.00
              },{
                "name":"农家小炒肉",
                "img":"./static/images/lazi_ji.png",
                "price":25.00
              },
              {
                "name":"青椒肉丝",
                "img":"./static/images/mala_yu.png",
                "price":20.00
              },{
                "name":"京酱肉丝",
                "img":"./static/images/mala_yu.png",
                "price":19.00
              },{
                "name":"红烧肉（带饼）",
                "img":"./static/images/lazi_ji.png",
                "price":30.00
              },
              {
                "name":"回锅肉",
                "img":"./static/images/mala_yu.png",
                "price":16.00
              },{
                "name":"木须肉",
                "img":"./static/images/mala_yu.png",
                "price":18.00
              },{
                "name":"酸豆角炒肉末",
                "img":"./static/images/lazi_ji.png",
                "price":22.00
              },
              {
                "name":"鲜辣烤鱼",
                "img":"./static/images/mala_yu.png",
                "price":79.00
              },{
                "name":"干锅菜花",
                "img":"./static/images/mala_yu.png",
                "price":16.00
              },{
                "name":"干锅千页豆腐",
                "img":"./static/images/lazi_ji.png",
                "price":15.00
              },
              {
                "name":"西红柿烧牛楠",
                "img":"./static/images/mala_yu.png",
                "price":29.00
              },{
                "name":"绿豆牙炒馓子",
                "img":"./static/images/mala_yu.png",
                "price":13.00
              },{
                "name":"西红柿炒鸡蛋",
                "img":"./static/images/lazi_ji.png",
                "price":12.00
              },
              {
                "name":"酸辣土豆丝",
                "img":"./static/images/mala_yu.png",
                "price":14.00
              },{
                "name":"香菇青菜",
                "img":"./static/images/mala_yu.png",
                "price":17.00
              },{
                "name":"麻辣豆腐",
                "img":"./static/images/lazi_ji.png",
                "price":10.00
              },
              {
                "name":"鱼香茄子",
                "img":"./static/images/mala_yu.png",
                "price":15.00
              },{
                "name":"爆炒花哈",
                "img":"./static/images/mala_yu.png",
                "price":23.00
              },{
                "name":"豆芽粉条",
                "img":"./static/images/lazi_ji.png",
                "price":11.00
              },
              {
                "name":"红油耳丝",
                "img":"./static/images/mala_yu.png",
                "price":16.00
              },{
                "name":"变蛋黄豆",
                "img":"./static/images/mala_yu.png",
                "price":9.00
              },{
                "name":"麻辣花生米",
                "img":"./static/images/lazi_ji.png",
                "price":9.00
              },
              {
                "name":"水蒸蛋",
                "img":"./static/images/mala_yu.png",
                "price":10.00
              },{
                "name":"烧茄子",
                "img":"./static/images/mala_yu.png",
                "price":14.00
              },{
                "name":"炒饼丝",
                "img":"./static/images/lazi_ji.png",
                "price":8.00
              }]
          }
   },
}
</script>


<style scoped>
  .el-header{
    background-color:darkgreen;
    color:white;
    line-height:60px;
    font-size:20px;
  }
  .el-menu-item:hover{
      background:yellow!important;
      color:purple!important;

  }
  .el-menu-item.is-active{
      background:purple!important;
      color:white!important;

  }
  .el-icon-cart{
     width:60px;
     height:60px;
     background: url("../assets/image/cart.png") center no-repeat;
     background-size:100% 100%;
     margin-top:-10px;
  }
  .el-icon-cart:before{
    visibility: hidden;
  }
  .bg-green-dark{
    background-color:black;
    height:60px;
    line-height:60px;
    color:white;
  }
  .bg-red-dark{
    background-color:darkred;
    color:white;
    height:60px;
    line-height:60px;
  }
</style>

最终代码运行结果如图所示。

代码github地址：https://github.com/wawacode/tornado-vue-order_food_system。

项目对应的视频地址:

vue堂食系统1-vue与elementUI实现前端页面
https://www.bilibili.com/video/BV1iy4y1Y7zp/