Node与Vue.js携手共筑全栈收银系统（下）

2023-11-02 13:23:15

前言

在上一篇文章中，我们已经完成了Node.js后端API的开发，包括用户注册、登录、获取用户数据等功能。现在，我们继续开发Vue.js前端部分，以完成整个全栈收银系统的构建。

前端开发

1. 项目搭建

首先，我们需要创建一个新的Vue.js项目。可以使用Vue CLI脚手架工具来快速创建一个项目。在终端中输入以下命令：

vue create vue-cashier

2. 安装依赖

进入项目目录，安装必要的依赖项：

cd vue-cashier
npm install

3. 创建组件

接下来，我们需要创建一些组件来构建我们的收银系统界面。首先，创建一个App.vue文件，这是Vue.js应用程序的根组件。在App.vue文件中，我们可以定义应用程序的整体结构和布局。

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

接下来，我们需要创建一些视图组件，例如登录组件、注册组件、产品列表组件、购物车组件等。这些组件将用于构建收银系统的各个功能模块。

4. 路由配置

为了管理应用程序的页面导航，我们需要配置路由。在src/router.js文件中，我们可以定义路由规则：

import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login.vue'
import Register from './components/Register.vue'
import Products from './components/Products.vue'
import Cart from './components/Cart.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/register',
      component: Register
    },
    {
      path: '/products',
      component: Products
    },
    {
      path: '/cart',
      component: Cart
    }
  ]
})

5. 数据交互

为了实现前后端的数据交互，我们需要在Vue.js中发送HTTP请求。可以使用axios库来简化HTTP请求的发送。在src/main.js文件中，我们可以安装并配置axios：

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.$axios = axios

axios.defaults.baseURL = 'http://localhost:3000/api'

现在，我们可以在Vue.js组件中使用this.$axios来发送HTTP请求。例如，在Products.vue组件中，我们可以获取产品列表：

export default {
  name: 'Products',
  data() {
    return {
      products: []
    }
  },
  created() {
    this.$axios.get('/products')
      .then(response => {
        this.products = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}