Vue+springboot简单实现点餐系统开发

最新推荐文章于 2024-08-19 20:29:11 发布

海波booy

最新推荐文章于 2024-08-19 20:29:11 发布

阅读量3.5k

点赞数 4

分类专栏： WEB前端文章标签： vue html js css java

本文链接：https://blog.csdn.net/booy123/article/details/107207225

版权

本文详细介绍了如何使用Vue.js前端框架与Springboot后端结合，开发一个简单的点餐系统。从环境准备、底部导航、首页轮播、商品分类、商品列表到购物车功能的实现，逐一讲解了每个部分的关键步骤和技术实现，包括数据接口、路由配置、图标使用、axios数据获取等。

摘要由CSDN通过智能技术生成

项目进行前后端分离
后端采用springboot+mybatis+mysql数据库提供数据接口
前端采用Vue框架获取数据实现页面数据渲染、页面路由
借助springboot实现数据接口，主要内容是Vue实现前端页面功能的流程步骤

文章目录

一、准备环境

1、后台数据接口

轮播图片：http://localhost:8080/data/images

["http://localhost:8080/data/static/fl_03.jpg",
"http://localhost:8080/data/static/fl_06.jpg",
"http://localhost:8080/data/static/fl_11.jpg",
"http://localhost:8080/data/static/fl_14.jpg"]

商品分类：http://localhost:8080/data/types

[{
   "id":1,"name":"甜品","img":"http://localhost:8080/data/static/fl_03.jpg"},
{
   "id":2,"name":"蛋糕","img":"http://localhost:8080/data/static/fl_06.jpg"},
{
   "id":3,"name":"饼干","img":"http://localhost:8080/data/static/fl_11.jpg"},
{
   "id":4,"name":"面包","img":"http://localhost:8080/data/static/fl_14.jpg"}]

商品列表：http://localhost:8080/data/foods

[{
   "id":1,"name":"芒果慕斯","img":"http://localhost:8080/data/static/good.jpg","price":16,"star":5,"typeId":1},
{
   "id":2,"name":"蓝莓蛋挞","img":"http://localhost:8080/data/static/gooddetail.jpg","price":20,"star":4,"typeId":1},
{
   "id":3,"name":"草莓蛋糕","img":"http://localhost:8080/data/static/good.jpg","price":12,"star":5,"typeId":1},
{
   "id":4,"name":"黑森林","img":"http://localhost:8080/data/static/gooddetail.jpg","price":18,"star":5,"typeId":1},
{
   "id":5,"name":"风味曲奇","img":"http://localhost:8080/data/static/gooddetail.jpg","price":20,"star":5,"typeId":2}]

后端springboot项目结构为：
在这里插入图片描述

2、vue项目环境

1)、创建vue项目

创建教程：https://blog.csdn.net/booy123/article/details/107127049#2_862

2)、vue项目清理

删除文件：views目录下的文件，components目录下的文件

清理文件内容：

app.vue

<template>
  <div id="app">
  </div>
</template>

<style lang="scss">

</style>

路由js文件

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [

]

const router = new VueRouter({
   
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

清理后的项目结构图
在这里插入图片描述

二、底部导航

1、图标准备

地址：https://www.iconfont.cn/

选择需要的图标加入购物车>添加至项目，在个人中心项目中进行下载到本地，把下载的图标文件夹放在public下

2、初始页面组件

views目录下创建四个初始页面（Cart.vue、Index.vue、Order.vue、User.vue），空页面即可

模板代码：

<template>
    <div>个人中心</div>
</template>
<script>
export default {
    }
</script>
<style scoped>
</style>

3、路由配置

router/index.js进行路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/Index'
import User from '../views/User'
import Cart from '../views/Cart'
import Order from '../views/Order'

Vue.use(VueRouter)

const routes = [
  {
   
    path: '/index',
    component: Index
  },
  {
   
    path: '/user',
    component: User
  },
  {
   
    path: '/cart',
    component: Cart
  },
  {
   
    path: '/order',
    component: Order
  },
  {
   
    path: '*',
    component: Index
  }
]

const router = new VueRouter({
   
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

4、导航组件

<template>
  <nav>
    <ul>
      <router-link to="/index" tag="li" activeClass="active">
        <i class="iconfont">&#xe8b9;</i>
        首页
      </router-link>
      <router-link to="/cart" tag="li" activeClass="active">
        <i class="iconfont">&#xe6a7;</i>
        购物车
      </router-link>
      <router-link to="/order" tag="li" activeClass="active">
        <i class="iconfont">&#xe8ae;</i>
        订单