devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：AllinToyou | 2024-02-07 17:27:07

赞

踩

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分栏。具体代码如下。

  1.       <el-row  >
  2.             <el-col :span="12">
  3.                 <div class="bg-purple-dark">
  4.                     <h1>左列</h1>
  5.                 </div>
  6.             </el-col>
  7.             <el-col :span="12">
  8.                 <div class="bg-purple">
  9.                     <h1>右列</h1>
  10.                 </div>
  11.             </el-col>
  12.         </el-row>

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

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

  1. <div >
  2.     <el-header >
  3.       绝妙订餐系统
  4.     </el-header>
  5. </div>
  6. <script>
  7. </script>
  8. <style scoped>
  9. .el-header{
  10.   background-color:darkgreen;
  11.   color:white;
  12.   line-height:60px;
  13.   font-size:20px;
  14. }
  15. </style>

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

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

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

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

  1. <el-menu>
  2.   <el-menu-item index="1">处理中心</el-menu-item>
  3.   <el-submenu index="2">
  4.     <template slot="title">我的工作台</template>
  5.     <el-menu-item index="2-1">工作台1</el-menu-item>
  6.     <el-menu-item index="2-2">工作台2</el-menu-item>
  7.     <el-menu-item index="2-3">工作台3</el-menu-item>
  8.   </el-submenu>
  9.   <el-menu-item index="3" disabled>消息中心</el-menu-item>
  10. </el-menu>

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

  1. <el-menu
  2.   background-color="darkgreen"
  3.   text-color="#fff"
  4.  >
  5.     <el-menu-item>
  6.           <template>
  7.               <i class="el-icon-s-platform"></i>
  8.               <span>厨师推荐</span>
  9.           </template>
  10.     </el-menu-item>
  11.     <el-menu-item>
  12.           <template>
  13.               <i class="el-icon-s-tools"></i>
  14.               <span>精品凉菜</span>
  15.           </template>
  16.     </el-menu-item>
  17.     <el-menu-item>
  18.           <template>
  19.                 <i class="el-icon-user-solid"></i>
  20.                 <span>特色小炒</span>
  21.           </template>
  22.     </el-menu-item>
  23.     <el-menu-item>
  24.           <template>
  25.                 <i class="el-icon-message-solid"></i>
  26.                 <span>家常热菜</span>
  27.           </template>
  28.     </el-menu-item>
  29.     <el-menu-item>
  30.           <template>
  31.                 <i class="el-icon-message-solid"></i>
  32.                 <span>营养主食</span>
  33.           </template>
  34.     </el-menu-item>
  35.     <el-menu-item>
  36.           <template>
  37.                 <i class="el-icon-message-solid"></i>
  38.                 <span>调味饮料</span>
  39.           </template>
  40.       </el-menu-item>
  41. </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属性的帮助,具体代码如下。

  1. <el-row>
  2.     <el-col :span="4">
  3.        <el-menu
  4.          background-color="darkgreen"
  5.          text-color="#fff"
  6.         >
  7.            <el-menu-item>
  8.                  <template>
  9.                      <i class="el-icon-s-platform"></i>
  10.                      <span>厨师推荐</span>
  11.                  </template>
  12.            </el-menu-item>
  13.            <el-menu-item>
  14.                  <template>
  15.                      <i class="el-icon-s-tools"></i>
  16.                      <span>精品凉菜</span>
  17.                  </template>
  18.            </el-menu-item>
  19.            <el-menu-item>
  20.                  <template>
  21.                        <i class="el-icon-user-solid"></i>
  22.                        <span>特色小炒</span>
  23.                  </template>
  24.            </el-menu-item>
  25.            <el-menu-item>
  26.                  <template>
  27.                        <i class="el-icon-message-solid"></i>
  28.                        <span>家常热菜</span>
  29.                  </template>
  30.            </el-menu-item>
  31.            <el-menu-item>
  32.                  <template>
  33.                        <i class="el-icon-message-solid"></i>
  34.                        <span>营养主食</span>
  35.                  </template>
  36.            </el-menu-item>
  37.            <el-menu-item>
  38.                  <template>
  39.                        <i class="el-icon-message-solid"></i>
  40.                        <span>调味饮料</span>
  41.                  </template>
  42.              </el-menu-item>
  43.        </el-menu>
  44.    </el-col>
  45. </el-row>

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

  1. .el-menu-item:hover{
  2.     background:yellow!important;
  3.     color:purple!important;
  4.  
  5. }
  6. .el-menu-item.is-active{
  7.     background:purple!important;
  8.     color:white!important;
  9.  
  10. }

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餐饮食品列表中的键。代码如下。

  1. <el-table :data="foodlist"  height="330">
  2.     <el-table-column label="菜名"  prop="name"></el-table-column>
  3.     <el-table-column label="菜品图片"  prop="img">
  4.           <template slot-scope="scope">
  5.             <img :src="scope.row.img" width="170" height="124"/>
  6.           </template>
  7.     </el-table-column>
  8.     <el-table-column label="菜品价格"  prop="price">
  9.     </el-table-column>
  10.  </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列。代码如下。

  1. <template>
  2.   <div >
  3.       <el-header >
  4.         绝妙订餐系统
  5.       </el-header>
  6.        <el-row>
  7.            <el-col :span="4">
  8.               <el-menu
  9.                 background-color="darkgreen"
  10.                 text-color="#fff"
  11.                >
  12.                   <el-menu-item>
  13.                         <template>
  14.                             <i class="el-icon-s-platform"></i>
  15.                             <span>厨师推荐</span>
  16.                         </template>
  17.                   </el-menu-item>
  18.                   <el-menu-item>
  19.                         <template>
  20.                             <i class="el-icon-s-tools"></i>
  21.                             <span>精品凉菜</span>
  22.                         </template>
  23.                   </el-menu-item>
  24.                   <el-menu-item>
  25.                         <template>
  26.                               <i class="el-icon-user-solid"></i>
  27.                               <span>特色小炒</span>
  28.                         </template>
  29.                   </el-menu-item>
  30.                   <el-menu-item>
  31.                         <template>
  32.                               <i class="el-icon-message-solid"></i>
  33.                               <span>家常热菜</span>
  34.                         </template>
  35.                   </el-menu-item>
  36.                   <el-menu-item>
  37.                         <template>
  38.                               <i class="el-icon-message-solid"></i>
  39.                               <span>营养主食</span>
  40.                         </template>
  41.                   </el-menu-item>
  42.                   <el-menu-item>
  43.                         <template>
  44.                               <i class="el-icon-message-solid"></i>
  45.                               <span>调味饮料</span>
  46.                         </template>
  47.                     </el-menu-item>
  48.               </el-menu>
  49.           </el-col>
  50.          <el-col :span="20">
  51.               <el-table :data="foodlist"  height="330">
  52.  
  53.                   <el-table-column label="菜名"  prop="name"></el-table-column>
  54.                   <el-table-column label="菜品图片"  prop="img">
  55.                         <template slot-scope="scope">
  56.                           <img :src="scope.row.img" width="170" height="124"/>
  57.                         </template>
  58.                   </el-table-column>
  59.                   <el-table-column label="菜品价格"  prop="price"></el-table-column>
  60.             </el-table>
  61.          </el-col>
  62.  
  63.       </el-row>
  64.  
  65.   </div>
  66. </template>
  67.  
  68. <script>
  69.  
  70. export default {
  71.    name: 'OrderFood',
  72.    data(){
  73.           return {
  74.  
  75.  
  76.               /*定义全局booklist*/
  77.                 foodlist:[{
  78.                 "name":"野蘑菇炖鸡",
  79.                 "img":"./static/images/mogu_ji.png",
  80.                 "price":58.00
  81.               },{
  82.                 "name":"大盘鸡",
  83.                 "img":"./static/images/dapan_ji.png",
  84.                 "price":62.00
  85.               },
  86.               {
  87.                 "name":"爆椒鸡",
  88.                 "img":"./static/images/baojiao_ji.png",
  89.                 "price":48.00
  90.               },{
  91.                 "name":"辣子鸡丁",
  92.                 "img":"./static/images/lazi_ji.png",
  93.                 "price":39.00
  94.               },
  95.               {
  96.                 "name":"麻辣鱼头",
  97.                 "img":"./static/images/mala_yu.png",
  98.                 "price":52.00
  99.               },{
  100.                 "name":"酸菜鱼",
  101.                 "img":"./static/images/lazi_ji.png",
  102.                 "price":53.00
  103.               },
  104.               {
  105.                 "name":"红烧带鱼",
  106.                 "img":"./static/images/mala_yu.png",
  107.                 "price":42.00
  108.               },{
  109.                 "name":"水煮肉片",
  110.                 "img":"./static/images/dapan_ji.png",
  111.                 "price":35.00
  112.               },
  113.               {
  114.                 "name":"毛血旺",
  115.                 "img":"./static/images/baojiao_ji.png",
  116.                 "price":30.00
  117.               },{
  118.                 "name":"鱼香肉丝",
  119.                 "img":"./static/images/lazi_ji.png",
  120.                 "price":18.00
  121.               },
  122.               {
  123.                 "name":"烧大肠",
  124.                 "img":"./static/images/mala_yu.png",
  125.                 "price":28.00
  126.               },{
  127.                 "name":"农家小炒肉",
  128.                 "img":"./static/images/lazi_ji.png",
  129.                 "price":25.00
  130.               },
  131.               {
  132.                 "name":"青椒肉丝",
  133.                 "img":"./static/images/mala_yu.png",
  134.                 "price":20.00
  135.               },{
  136.                 "name":"京酱肉丝",
  137.                 "img":"./static/images/mala_yu.png",
  138.                 "price":19.00
  139.               },{
  140.                 "name":"红烧肉（带饼）",
  141.                 "img":"./static/images/lazi_ji.png",
  142.                 "price":30.00
  143.               },
  144.               {
  145.                 "name":"回锅肉",
  146.                 "img":"./static/images/mala_yu.png",
  147.                 "price":16.00
  148.               },{
  149.                 "name":"木须肉",
  150.                 "img":"./static/images/mala_yu.png",
  151.                 "price":18.00
  152.               },{
  153.                 "name":"酸豆角炒肉末",
  154.                 "img":"./static/images/lazi_ji.png",
  155.                 "price":22.00
  156.               },
  157.               {
  158.                 "name":"鲜辣烤鱼",
  159.                 "img":"./static/images/mala_yu.png",
  160.                 "price":79.00
  161.               },{
  162.                 "name":"干锅菜花",
  163.                 "img":"./static/images/mala_yu.png",
  164.                 "price":16.00
  165.               },{
  166.                 "name":"干锅千页豆腐",
  167.                 "img":"./static/images/lazi_ji.png",
  168.                 "price":15.00
  169.               },
  170.               {
  171.                 "name":"西红柿烧牛楠",
  172.                 "img":"./static/images/mala_yu.png",
  173.                 "price":29.00
  174.               },{
  175.                 "name":"绿豆牙炒馓子",
  176.                 "img":"./static/images/mala_yu.png",
  177.                 "price":13.00
  178.               },{
  179.                 "name":"西红柿炒鸡蛋",
  180.                 "img":"./static/images/lazi_ji.png",
  181.                 "price":12.00
  182.               },
  183.               {
  184.                 "name":"酸辣土豆丝",
  185.                 "img":"./static/images/mala_yu.png",
  186.                 "price":14.00
  187.               },{
  188.                 "name":"香菇青菜",
  189.                 "img":"./static/images/mala_yu.png",
  190.                 "price":17.00
  191.               },{
  192.                 "name":"麻辣豆腐",
  193.                 "img":"./static/images/lazi_ji.png",
  194.                 "price":10.00
  195.               },
  196.               {
  197.                 "name":"鱼香茄子",
  198.                 "img":"./static/images/mala_yu.png",
  199.                 "price":15.00
  200.               },{
  201.                 "name":"爆炒花哈",
  202.                 "img":"./static/images/mala_yu.png",
  203.                 "price":23.00
  204.               },{
  205.                 "name":"豆芽粉条",
  206.                 "img":"./static/images/lazi_ji.png",
  207.                 "price":11.00
  208.               },
  209.               {
  210.                 "name":"红油耳丝",
  211.                 "img":"./static/images/mala_yu.png",
  212.                 "price":16.00
  213.               },{
  214.                 "name":"变蛋黄豆",
  215.                 "img":"./static/images/mala_yu.png",
  216.                 "price":9.00
  217.               },{
  218.                 "name":"麻辣花生米",
  219.                 "img":"./static/images/lazi_ji.png",
  220.                 "price":9.00
  221.               },
  222.               {
  223.                 "name":"水蒸蛋",
  224.                 "img":"./static/images/mala_yu.png",
  225.                 "price":10.00
  226.               },{
  227.                 "name":"烧茄子",
  228.                 "img":"./static/images/mala_yu.png",
  229.                 "price":14.00
  230.               },{
  231.                 "name":"炒饼丝",
  232.                 "img":"./static/images/lazi_ji.png",
  233.                 "price":8.00
  234.               }]
  235.           }
  236.    } 
  237. }
  238. </script>
  239.  
  240.  
  241. <style scoped>
  242.   .el-header{
  243.     background-color:darkgreen;
  244.     color:white;
  245.     line-height:60px;
  246.     font-size:20px;
  247.   }
  248.   .el-menu-item:hover{
  249.       background:yellow!important;
  250.       color:purple!important;
  251.  
  252.   }
  253.   .el-menu-item.is-active{
  254.       background:purple!important;
  255.       color:white!important;
  256.  
  257.   }

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

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

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

  1. <el-row>
  2.       <el-col :span="2">
  3.         <div class="bg-green-dark">
  4.             <i class="el-icon-cart"></i>
  5.         </div>
  6.       </el-col>
  7.       <el-col :span="18">
  8.         <div class="bg-green-dark">
  9.           商品4件，20.00元
  10.         </div>
  11.       </el-col>
  12.       <el-col :span="4">
  13.         <div class="bg-red-dark">
  14.           去结算
  15.         </div>
  16.       </el-col>
  17. </el-row>
  18. 对应的样式代码如下。
  19. .el-icon-cart{
  20.    width:60px;
  21.    height:60px;
  22.    background: url("../assets/image/cart.png") center no-repeat;
  23.    background-size:100% 100%;
  24.    margin-top:-10px;
  25. }
  26. .el-icon-cart:before{
  27.   visibility: hidden;
  28. }
  29. .bg-green-dark{
  30.   background-color:black;
  31.   height:60px;
  32.   line-height:60px;
  33.   color:white;
  34. }
  35. .bg-red-dark{
  36.   background-color:darkred;
  37.   color:white;
  38.   height:60px;
  39.   line-height:60px;
  40. }

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

  1. <template>
  2.   <div >
  3.       <el-header >
  4.         绝妙订餐系统
  5.       </el-header>
  6.        <el-row>
  7.            <el-col :span="4">
  8.               <el-menu
  9.                 background-color="darkgreen"
  10.                 text-color="#fff"
  11.                >
  12.                   <el-menu-item>
  13.                         <template>
  14.                             <i class="el-icon-s-platform"></i>
  15.                             <span>厨师推荐</span>
  16.                         </template>
  17.                   </el-menu-item>
  18.                   <el-menu-item>
  19.                         <template>
  20.                             <i class="el-icon-s-tools"></i>
  21.                             <span>精品凉菜</span>
  22.                         </template>
  23.                   </el-menu-item>
  24.                   <el-menu-item>
  25.                         <template>
  26.                               <i class="el-icon-user-solid"></i>
  27.                               <span>特色小炒</span>
  28.                         </template>
  29.                   </el-menu-item>
  30.                   <el-menu-item>
  31.                         <template>
  32.                               <i class="el-icon-message-solid"></i>
  33.                               <span>家常热菜</span>
  34.                         </template>
  35.                   </el-menu-item>
  36.                   <el-menu-item>
  37.                         <template>
  38.                               <i class="el-icon-message-solid"></i>
  39.                               <span>营养主食</span>
  40.                         </template>
  41.                   </el-menu-item>
  42.                   <el-menu-item>
  43.                         <template>
  44.                               <i class="el-icon-message-solid"></i>
  45.                               <span>调味饮料</span>
  46.                         </template>
  47.                     </el-menu-item>
  48.               </el-menu>
  49.           </el-col>
  50.          <el-col :span="20">
  51.               <el-table :data="foodlist" height="330">
  52.  
  53.                   <el-table-column label="菜名"  prop="name"></el-table-column>
  54.                   <el-table-column label="菜品图片"  prop="img">
  55.                         <template slot-scope="scope">
  56.                           <img :src="scope.row.img" width="170" height="124"/>
  57.                         </template>
  58.                   </el-table-column>
  59.                   <el-table-column label="菜品价格"  prop="price"></el-table-column>
  60.            </el-table>
  61.          </el-col>
  62.  
  63.       </el-row>
  64.       <el-row>
  65.             <el-col :span="2">
  66.               <div class="bg-green-dark">
  67.                   <i class="el-icon-cart"></i>
  68.               </div>
  69.             </el-col>
  70.             <el-col :span="18">
  71.               <div class="bg-green-dark">
  72.                 商品0件，0元
  73.               </div>
  74.             </el-col>
  75.             <el-col :span="4">
  76.               <div class="bg-red-dark">
  77.                 去结算
  78.               </div>
  79.             </el-col>
  80.       </el-row>
  81.  
  82.   </div>
  83. </template>
  84.  
  85. <script>
  86. export default {
  87.    name: 'OrderFood',
  88.    data(){
  89.           return {
  90.                 /*定义全局booklist*/
  91.                 foodlist:[{
  92.                 "name":"野蘑菇炖鸡",
  93.                 "img":"./static/images/mogu_ji.png",
  94.                 "price":58.00
  95.               },{
  96.                 "name":"大盘鸡",
  97.                 "img":"./static/images/dapan_ji.png",
  98.                 "price":62.00
  99.               },
  100.               {
  101.                 "name":"爆椒鸡",
  102.                 "img":"./static/images/baojiao_ji.png",
  103.                 "price":48.00
  104.               },{
  105.                 "name":"辣子鸡丁",
  106.                 "img":"./static/images/lazi_ji.png",
  107.                 "price":39.00
  108.               },
  109.               {
  110.                 "name":"麻辣鱼头",
  111.                 "img":"./static/images/mala_yu.png",
  112.                 "price":52.00
  113.               },{
  114.                 "name":"酸菜鱼",
  115.                 "img":"./static/images/lazi_ji.png",
  116.                 "price":53.00
  117.               },
  118.               {
  119.                 "name":"红烧带鱼",
  120.                 "img":"./static/images/mala_yu.png",
  121.                 "price":42.00
  122.               },{
  123.                 "name":"水煮肉片",
  124.                 "img":"./static/images/dapan_ji.png",
  125.                 "price":35.00
  126.               },
  127.               {
  128.                 "name":"毛血旺",
  129.                 "img":"./static/images/baojiao_ji.png",
  130.                 "price":30.00
  131.               },{
  132.                 "name":"鱼香肉丝",
  133.                 "img":"./static/images/lazi_ji.png",
  134.                 "price":18.00
  135.               },
  136.               {
  137.                 "name":"烧大肠",
  138.                 "img":"./static/images/mala_yu.png",
  139.                 "price":28.00
  140.               },{
  141.                 "name":"农家小炒肉",
  142.                 "img":"./static/images/lazi_ji.png",
  143.                 "price":25.00
  144.               },
  145.               {
  146.                 "name":"青椒肉丝",
  147.                 "img":"./static/images/mala_yu.png",
  148.                 "price":20.00
  149.               },{
  150.                 "name":"京酱肉丝",
  151.                 "img":"./static/images/mala_yu.png",
  152.                 "price":19.00
  153.               },{
  154.                 "name":"红烧肉（带饼）",
  155.                 "img":"./static/images/lazi_ji.png",
  156.                 "price":30.00
  157.               },
  158.               {
  159.                 "name":"回锅肉",
  160.                 "img":"./static/images/mala_yu.png",
  161.                 "price":16.00
  162.               },{
  163.                 "name":"木须肉",
  164.                 "img":"./static/images/mala_yu.png",
  165.                 "price":18.00
  166.               },{
  167.                 "name":"酸豆角炒肉末",
  168.                 "img":"./static/images/lazi_ji.png",
  169.                 "price":22.00
  170.               },
  171.               {
  172.                 "name":"鲜辣烤鱼",
  173.                 "img":"./static/images/mala_yu.png",
  174.                 "price":79.00
  175.               },{
  176.                 "name":"干锅菜花",
  177.                 "img":"./static/images/mala_yu.png",
  178.                 "price":16.00
  179.               },{
  180.                 "name":"干锅千页豆腐",
  181.                 "img":"./static/images/lazi_ji.png",
  182.                 "price":15.00
  183.               },
  184.               {
  185.                 "name":"西红柿烧牛楠",
  186.                 "img":"./static/images/mala_yu.png",
  187.                 "price":29.00
  188.               },{
  189.                 "name":"绿豆牙炒馓子",
  190.                 "img":"./static/images/mala_yu.png",
  191.                 "price":13.00
  192.               },{
  193.                 "name":"西红柿炒鸡蛋",
  194.                 "img":"./static/images/lazi_ji.png",
  195.                 "price":12.00
  196.               },
  197.               {
  198.                 "name":"酸辣土豆丝",
  199.                 "img":"./static/images/mala_yu.png",
  200.                 "price":14.00
  201.               },{
  202.                 "name":"香菇青菜",
  203.                 "img":"./static/images/mala_yu.png",
  204.                 "price":17.00
  205.               },{
  206.                 "name":"麻辣豆腐",
  207.                 "img":"./static/images/lazi_ji.png",
  208.                 "price":10.00
  209.               },
  210.               {
  211.                 "name":"鱼香茄子",
  212.                 "img":"./static/images/mala_yu.png",
  213.                 "price":15.00
  214.               },{
  215.                 "name":"爆炒花哈",
  216.                 "img":"./static/images/mala_yu.png",
  217.                 "price":23.00
  218.               },{
  219.                 "name":"豆芽粉条",
  220.                 "img":"./static/images/lazi_ji.png",
  221.                 "price":11.00
  222.               },
  223.               {
  224.                 "name":"红油耳丝",
  225.                 "img":"./static/images/mala_yu.png",
  226.                 "price":16.00
  227.               },{
  228.                 "name":"变蛋黄豆",
  229.                 "img":"./static/images/mala_yu.png",
  230.                 "price":9.00
  231.               },{
  232.                 "name":"麻辣花生米",
  233.                 "img":"./static/images/lazi_ji.png",
  234.                 "price":9.00
  235.               },
  236.               {
  237.                 "name":"水蒸蛋",
  238.                 "img":"./static/images/mala_yu.png",
  239.                 "price":10.00
  240.               },{
  241.                 "name":"烧茄子",
  242.                 "img":"./static/images/mala_yu.png",
  243.                 "price":14.00
  244.               },{
  245.                 "name":"炒饼丝",
  246.                 "img":"./static/images/lazi_ji.png",
  247.                 "price":8.00
  248.               }]
  249.           }
  250.    },
  251. }
  252. </script>
  253.  
  254.  
  255. <style scoped>
  256.   .el-header{
  257.     background-color:darkgreen;
  258.     color:white;
  259.     line-height:60px;
  260.     font-size:20px;
  261.   }
  262.   .el-menu-item:hover{
  263.       background:yellow!important;
  264.       color:purple!important;
  265.  
  266.   }
  267.   .el-menu-item.is-active{
  268.       background:purple!important;
  269.       color:white!important;
  270.  
  271.   }
  272.   .el-icon-cart{
  273.      width:60px;
  274.      height:60px;
  275.      background: url("../assets/image/cart.png") center no-repeat;
  276.      background-size:100% 100%;
  277.      margin-top:-10px;
  278.   }
  279.   .el-icon-cart:before{
  280.     visibility: hidden;
  281.   }
  282.   .bg-green-dark{
  283.     background-color:black;
  284.     height:60px;
  285.     line-height:60px;
  286.     color:white;
  287.   }
  288.   .bg-red-dark{
  289.     background-color:darkred;
  290.     color:white;
  291.     height:60px;
  292.     line-height:60px;
  293.   }
  294. </style>

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

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

项目对应的视频地址:

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

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/66574
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号