从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（一）

时间  2019-12-28
标签 部署 vue express 实现 迷你 应用 繁體版
原文   原文链接

Vue 是尤雨溪在 2014 年建立的一个前端框架，目前 Github Star 数高达 150K，是 Star 数最高的前端项目，而且 Vue 有着极为活跃的社区生态以及专职团队进行维护以确保项目能够健康长久地发展。javascript

目前中国不少互联网公司前端程序员的招聘要求都要求程序员掌握 Vue，像滴滴、美团、饿了么等大厂也在重度使用 Vue 进行开发，而且有着像 Element 、mpvue、iView 这样优秀的基于 Vue 开源项目存在，因此学习 Vue 是一个不错的投资，当你学会 Vue，就能够快速开发项目，这样不只能够接外包挣外快，并且当有了必定的项目经验，还能够在一线互联网大厂找到一份不错的工做。css

看到这里你心动了嘛？心动不如行动！而最幸运的是，本教程将会一步一步带你以实战的方式实现一个迷你全栈电商网站。并在实战的过程当中，了解 Vue 的全貌，如今就打开电脑，跟随个人脚步，完全掌握 Vue 开发！本系列教程的规划以下：html

  1. 第一部分（也就是这篇教程）：用 Vue 搭建前端项目的骨架，实现基于嵌套、动态路由的多页面跳转。
  2. 第二部分：用 Express 实现后端 REST API，并使用 MongoDB 进行数据存储。
  3. 第三部分（✍写做中）：经过 Vue 的双向数据绑定和模板语法实现数据添加，并用 Vuex 实现前端的状态管理。
  4. 第四部分（✍写做中）：用 Element UI 组件库让界面更加专业美观，而且用 Docker 和 Docker Compose 部署咱们的全栈项目。

若是您以为咱们的教程写得还不错，请记得给咱们点个赞哦！鼓励咱们更快更好地写完剩下的教程！你也能够在评论区留言，告诉咱们想要实现什么功能，咱们必定会仔细考虑的哦！前端

快速入门

代码

你能够在 Github 查看本教程最终的源码：源码地址。vue

项目准备

安装依赖

安装 Node.js，你能够去 Node.js 官网下载安装包，经过安装包安装会同时安装 Node.js 包管理工具 Npm，用于便捷的管理项目依赖和下载第三方包。java

打开终端，输入以下命令测试是否安装成功：node

node -v # v10.16.0
npm -v # 6.9.0
复制代码

若是在你的终端有如上输出，那么表明你安装成功。webpack

提示git

经过上面安装包安装，你会安装最新的 Node 稳定版本，这可能和个人机器上的 Node 版本不一致，可是不用担忧，本教程使用到的代码语法适用于绝大多数新的或更老的 Node。程序员

安装 vue-cli，在绝大多数场景下，咱们使用 vue-cli 来初始化咱们的 vue 项目，本教程也不例外，在终端运行以下命令来安装：

npm install -g vue-cli
复制代码

打开终端，输入以下命令测试是否安装成功：

vue --version # 2.9.6
复制代码

提示

虽然 Vue 3.x 已经正式推出，可是这篇教程用的是主流、稳定的 Vue 2.x 版本。因为 Vue 的总体思想基本没有改变，因此不影响咱们的学习。在接下来的教程中，咱们会迁移到 Vue 3.x，并经过讲解新老 Vue 版本的差别让你更好地理解 Vue 的演变。

上面两个安装步骤已经足够完成咱们的教程的学习，可是我想额外推荐你一款编辑器，VSCode，你能够经过访问 VSCode 官网安装。

在 VSCode 里面找到 Vue 插件，能够得到代码语法高亮以及自动格式化很是便捷的功能，而且 VSCode 自然对 JavaScript 的支持，会大大提升咱们的开发效率，本教程所涉及项目的开发都是使用 VSCode 完成的。

初始化项目

打开终端输入以下命令初始化咱们的 Vue 项目：

vue init webpack vue-online-shop-frontend
复制代码

命令行接着会显示一些列选项让你选择，具体咱们的选择以下图：

提示

其中 Author 字段你能够填本身的昵称，而后咱们在选择了安装 vue-router 以后，其余的都选择了 no，由于本篇教程是面向初学者的实战教程，若是引入了过多和 Vue 核心无关的概念，就会引发不少困惑，因此这里咱们不配置它们

当项目初始化成功以后，接下来经过以下命令开启项目：

# code vue-online-shop-frontend # 若是你使用了 VSCode 编辑器，能够用这行命令打开项目
cd vue-online-shop-frontend && npm start
复制代码

接着打开浏览器，访问 http://localhost:8080/ 查看咱们初始好的项目效果。

注意

若是你使用 VSCode 编辑器打开项目进行开发，在运行 code project-name 以前须要安装 code 脚本，具体我找了一篇教程：戳我访问。

初探脚手架代码

经过 vue-cli 初始化的脚手架代码中，咱们在整个教程中须要了解的就是如下五个文件：

  • src/main.js
  • index.html
  • src/App.vue
  • src/router/index.js
  • src/components/HelloWorld.vue

src/main.js

首先咱们来看一下 src/main.js，这个是 Vue 应用的入口。咱们经过导入 Vue 类、App 组件、router 路由，再加上 el ，将这些参数传给 Vue 类，生成一个 Vue 实例。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import router from './router';

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
});
复制代码

index.html

接着咱们来看一下 index.html 文件，它的代码是这样的：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-online-shop</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
复制代码

当咱们开启项目以后，Vue 所使用的构建工具 Webpack 将会：

  • 根据入口文件 src/main.js 里面声明的 el 属性（#app），找到 index.html 中 id 为app 的 DOM 节点
  • 把编译好的视图模板代码挂载到这个 DOM 节点下面
  • 将项目涉及的 JavaScript 和 CSS 代码以 script 和 link 的方式插入到 index.html 中
  • 开启开发服务器，打开浏览器，进而浏览器将 index.html 渲染，咱们就能够看到写好的 Vue 页面效果。

src/App.vue

src/App.vue 就是 Vue 为咱们提供的组件文件，使得咱们能够以组件的形式来组织代码，并经过组件的组合来构建任意规模的项目，代码以下：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <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>
复制代码

能够看到， App 组件包含了三个部分的代码：

  • template
  • script
  • style

其实就是对应了传统 Web "三剑客"，HTML、JavaScript、CSS。

这里在 template 部分展现了一张 Vue 的 logo 图片，而后显示此刻渲染的路由组件：<router-view />。咱们将在后面继续讲解路由，这里不懂也没有关系哦。script 部分，主要是导出了一个名为 App 的组件。style 部分就是咱们熟悉的 CSS 代码了。

提示

上面所讲的是比较小的组件的写法，当组件中涉及的代码较多时，咱们须要把 script 和 style 抽成独立的 .js 和 .css 文件。就像下面这样：

<!-- ./src/App.vue -->
<template> <div id="app"> <img src="./assets/hello.png"> <router-view/> </div> </template> <script src="./app.js"></script> <style src="./app.css"></style> 复制代码

Vue 组件和模板语法是 Vue 的核心概念，咱们在后面会以实战的形式重点讲解这些内容。

src/router/index.js

src/router/index.js 文件是 Vue 为咱们提供的路由文件，代码以下：

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
    },
  ],
});
复制代码

首先咱们导出了 Vue 类，以及 Router 类，以及咱们的 HelloWorld 组件。

接着咱们使用 Vue.use(Router) 告诉 Vue，咱们应用接入了路由。

在导出的路由实例中，咱们经过 routes 数组定义了项目全部的页面，每一个页面是一个相似 { path, name, component } 的对象。

好比初始化时生成的 HelloWorld.vue 就是咱们的网站首页 -- 也就是打开浏览器访问到的第一个页面，由于它的路径（path）定义为 / 。此外一个页面定义还须要 name，它表明此页面在 vue-router 中的标识符，component 则表明此页面渲染时的所用到的组件。

提示

这里咱们能够看到导出 HelloWorld 组件时，咱们在路径最前面加上了 "@"，那是由于咱们在 webpack 配置中将会 "@" 映射成 resolve('src')，也就是咱们项目目录下 src 文件夹的路径，最后咱们的 '@/components/HelloWorld' 的实际上的效果至关于取到了项目目录 src 文件夹里面的 components/HelloWorld 组件。

src/components/HelloWorld.vue

最后是 src/components/HelloWorld.vue 文件，是脚手架代码为咱们提供的一个实例组件，代码以下：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <!-- 省略其余模板代码 ... -->
  </div>
</template>

<script> export default { name: 'HelloWorld', data() { return { msg: 'Welcome to Your Vue.js App', }; }, }; </script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
复制代码

能够看到，其结构大体与 App.vue 相似。其中也有一些不一样，好比 script 里面的 data 字段，还有 template 中的 {{ }} 语法。这个咱们会在下一节进行讲解。

当咱们打开浏览器时，地址为：http://localhost:8080/ 此时路径为 /，激活 HelloWorld.vue 组件，因此最后咱们整个项目渲染 App.vue 的内容，显示的结构即为：

  • 一张 Vue logo 图
  • 咱们的 HelloWorld.vue 组件的内容

小结

经过一窥 vue-cli 为咱们初始化的项目代码，咱们能够学到以下的知识：

  • Vue 经过组件来组织项目，单个组件就是咱们传统的 Web "三剑客"：HTML、JavaScript、CSS。
  • Vue 经过路由来定义多个页面，而且进行页面之间的跳转。
  • 一个页面是一个组件，一个组件能够由不少组件组成，经过这种组合式的思想，咱们能够编写任意复杂的项目。

编写你的第一个 Vue 页面

下面咱们来编写电商应用的首页。

编写页面组件

在 src/components 下面建立 Home.vue 文件，而后编写以下代码：

<template>
  <div>
    <div class="title">
      <h1>{{msg}}</h1>
    </div>
  </div>
</template>

<script> export default { name: 'home', data () { return { msg: 'Welcome to Your Vue.js App' }; }, } </script>
复制代码

在上面，咱们建立了一个名为 Home.vue 的 Vue 组件，能够看到它和咱们以前的 HelloWorld.vue 的内容大体相仿，可是也有一些不一样的地方：

  • 首先，咱们暂时没有写样式（没有 style 部分），而是先专一于基础知识的讲解。在后续教程中，咱们会使用 Element UI 组件库让咱们的界面变得专业美观。
  • 其次，咱们在 script 中引入了 data ，在 template 引入了插值语法 {{var}}。其中 data 是声明此组件的初始化数据，而 {{var}} 插值语法是方便将数据渲染到视图模板中；这里咱们将在 script 中定义的 data 中的 msg 插值到视图模板中，最终会渲染一个 h1 标签，标签内容就为 msg 的内容。

接入路由

接着，咱们在 src/router/index.js 路由中将主页路由 / 所绑定的组件从默认的 HelloWorld 修改成刚才写好的 Home 组件：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
  ],
});
复制代码

如今咱们保存代码，打开浏览器，就会显示刚才在 Home.vue 里面填写的那个标题：

使用路由进行多页面跳转

一个经典的电商应用一般包括以下部分：

  • 商品展现列表 （Home.vue）
  • 商品详情（Detail.vue）
  • 购物车（Cart.vue）

这里由于咱们追求简单，也将商品的后台管理页面 （Admin.vue）放入了项目中。

如今咱们先来实现商品展现列表、购物车和后台管理页面的模板内容。由于商品详情页后面将会使用组件进行复用，因此这里咱们暂时先不建立。

添加首页导航

首先修改 App.vue ，加入三个导航连接 router-link，方便让用户跳转到到本身想看的页面，代码以下：

<template>
  <div id="app">
    <nav>
      <div class="container">
        <ul class="nav__left">
          <li>
            <router-link to="/">Home</router-link>
          </li>
          <li>
            <router-link to="/admin">Admin</router-link>
          </li>
          <li>
            <router-link to="/cart">Cart</router-link>
          </li>
        </ul>
      </div>
    </nav>

    <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>
复制代码

这里咱们在头部添加了三个 router-link 表明咱们的头部导航。

router-link 和 a 标签相似，只不过 Vue 为它添加一些额外的优化逻辑。

建立后台管理页面

接着咱们编写 Admin.vue 组件，但这里稍微有点不一样，即咱们在 src/pages 下建立 Admin.vue 组件，由于对于页面级组件，咱们倾向于将其放到一个特殊 pages 文件夹，这样方便组织项目。其代码以下：

<template>
  <div>
    <div class="title">
      <h1>{{msg}}</h1>
    </div>
  </div>
</template>

<script> export default { name: 'home', data () { return { msg: 'Welcome to the Admin Page' } } } </script>
复制代码

能够看到这个页面内容和咱们以前的 Home.vue 内容类似。

建立购物车页面

而后是咱们的购物车页面 Cart.vue，代码以下：

<template>
  <div>
    <div class="title">
      <h1>{{msg}}</h1>
    </div>
  </div>
</template>

<script> export default { name: 'home', data () { return { msg: 'Welcome to the Cart Page' } } } </script>
复制代码

能够看到这个页面内容和咱们以前的 Home.vue 内容类似。

将新页面导入路由

最后，咱们把上一步中建立的 Home.vue 移到 src/pages 目录中，并在路由文件 src/routes/index.js 中导入这三个页面，代码以下：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/pages/Home';
import Admin from '@/pages/Admin';
import Cart from '@/pages/Cart';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/admin',
      name: 'Admin',
      component: Admin,
    },
    {
      path: '/cart',
      name: 'Cart',
      component: Cart,
    },
  ],
});
复制代码

保存代码，而后打开浏览器，咱们能够看到下面的效果：

你能够点击头部的三个导航连接，下面的标题内容会随着点击的连接变化。恭喜你，你已经成功地实现了一个基于 Vue 的多页面网站了！

使用嵌套路由和动态路由合理组织页面

随着页面的增多，若是咱们把全部的页面都塞到一个 routes 数组里面会显得很乱，你没法肯定哪些页面存在关系。还好 vue-router 提供了嵌套路由的功能，让咱们能把相关联的页面组织在一块儿。

升级路由

在咱们的商城项目中，后台管理页 Admin 涉及到不少操做页面，好比：

  • /create 建立新的商品
  • /edit 编辑商品信息

让咱们经过嵌套路由的方式将它们组织在一块儿。首先在路由文件 src/router/index.js 中声明后台管理全部用到的页面组件（咱们立刻就会去实现它们）：

import Vue from 'vue';
import Router from 'vue-router';

import Home from '@/pages/Home';
import Cart from '@/pages/Cart';

// Admin Components
import Index from '@/pages/admin/Index';
import New from '@/pages/admin/New';
import Products from '@/pages/admin/Products';
import Edit from '@/pages/admin/Edit';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/admin',
      name: 'Admin',
      component: Index,
      children: [
        {
          path: 'new',
          name: 'New',
          component: New,
        },
        {
          path: '',
          name: 'Products',
          component: Products,
        },
        {
          path: 'edit/:id',
          name: 'Edit',
          component: Edit,
        },
      ]
    },
    {
      path: '/cart',
      name: 'Cart',
      component: Cart,
    },
  ],
});
复制代码

嵌套路由的用法就是给须要归为一类的页面设置一个入口页面，而后把这一类页面都放到这个路由页面路由定义的 children 字段数组中。

经过上面的代码咱们能够看到，Admin 类别下有四个组件，Index 是咱们 Admin 类别的入口组件，也是做为 path = /admin 的渲染组件，而后其余组件就放到 path = /admin 这个路由定义的 children 数组里，其定义和其余父级一致。

这样的嵌套写法带来了两个好处：

  • 很清晰的组织了一类页面，方便阅读。
  • 在定义路由的 path 的时候，复用了父级的 path，即如今咱们的 New 这个路由，它在浏览器中访问的路径为：'/admin' + 'new'，若是咱们统一放到 routes 数组的第一级定义，那么后面的 Products 和 Edit 的 path 都要带上诸如 /admin 和 /admin/edit/:id 这样长长的路径，显得特别复杂。

这里还有一个改变就是，咱们发现 Edit 这个路由的 path 有点不太同样，它有个特殊的标志 edit/:id，这种写法被称为动态路由，即 :id 会匹配任意字符串，因此用户访问 /admin/edit/<any-string> 都会激活 Edit 路由，从而渲染 Edit.vue 组件。

建立 Admin 的子页面

首先建立 Index.vue 入口组件，代码以下：

<template>
  <div>
    <div class="admin-new">
      <div class="container">
        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
          <ul class="admin-menu">
            <li>
              <router-link to="/admin">View Products</router-link>
            </li>
            <li>
              <router-link to="/admin/new">New Products</router-link>
            </li>
          </ul>
        </div>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
复制代码

能够看到，它做为嵌套路由的入口级组件，和咱们以前在 App.vue 里面看到的样子相似，在其中会有 router-link 导向更深层级的路由.

router-view 用于渲染子路由组件，好比咱们此时访问 /admin/new 页面，那么 router-view 部分会被替换成 New.vue 组件的内容，由于咱们在以前的嵌套路由定义中 path 为 new 的渲染组件为 New.vue。

建立 src/pages/admin/Edit.vue 组件，代码以下：

<template>
  <div>
    <div class="title">
      <h1>This is Admin/Edit/{{$route.params.id}}</h1>
    </div>
  </div>
</template>
复制代码

能够看到，当用户访问 /admin/edit/:id，会激活渲染 Edit.vue 组件，咱们能够经过 $route.params.id 的方式获取用户输入的路径 :id 部分。好比咱们在浏览器中输入 /admin/edit/52tuture，那么浏览器将会以 h1 的形式打出 "This is Admin/Edit/52tuture"。

提示

$route 这个变量是 Vue 在运行时为咱们自动插入到全部组件属性中的，全部咱们不用手动去管理它。

建立 src/pages/admin/New.vue，代码以下：

<template>
  <div>
    <div class="title">
      <h1>This is Admin/New</h1>
    </div>
  </div>
</template>
复制代码

建立 src/pages/admin/Products.vue ，代码以下：

<template>
  <div>
    <div class="title">
      <h1>This is Admin</h1>
    </div>
  </div>
</template>
复制代码

保存咱们编写的内容，打开浏览器，咱们能够看到以下内容：

至此，咱们的迷你全栈电商应用的第一部分就完成了，在接下来的教程中，咱们将用 Express 和 MongoDB 搭建这个电商应用的后端 API，不见不散哦~

想要学习更多精彩的实战技术教程？来图雀社区逛逛吧。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程