十七、网上商城项目（1）

本章概要

• 脚手架项目搭建
• 安装与配置 axios
• 首页
  • 页面头部组件
    • 头部搜索框组件
    • 头部购物车组件
    • 头部组件

本章结合前面所学知识，开发一个网上商城项目。

成品如下

17.1 脚手架项目搭建

选择好项目存放的目录，使用 Vue CLI 创建一个脚手架项目，项目名为 bookstore。
打开命令提示窗口，输入以下命令开始创建脚手架。

vue create bookstore

选择 Manually select features

然后选择以下功能（空格键设置是否选择）

接着按回车键，选择 Vue 的版本，选择 3.0，如下：

然后询问是否为路由器使用 history 模式，输入 y，如下：

然后选择 ESLint with error prevention only

剩下的一直按回车键就行了，最后生成的项目结构如下：

可以看到路由（router/index.js）和 Vuex 状态管理（store/index.js）的目录结构已经生成，在 main.js 中也将 router 和 Store 全部导入和注册。main.js 的代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'

createApp(App).use(store).use(router).mount('#app')

项目结构中还有一个 views 文件夹，在这个文件夹下存放页面及组件，如项目自带的 Home 组件。一般的小组件存放在 components 文件夹下，这些组件可以被复用，通常 views 组件不会被复用。

17.2 安装与配置 axios

本项目采用官网推荐的 axios 访问服务端接口提供的数据。使用 Visual Studio Code 打开项目目录，然后打开终端窗口，执行下面的命令安装 axios 和 vue-axios 插件。

npm install axios vue-axios -S

编辑项目的 main.js，引入 axios，如下：

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'
import axios from 'axios'
import VueAxios from 'vue-axios'

createApp(App).use(store).use(router).use(VueAxios, axios).mount('#app')

本项目是一个前端项目，与后台提供数据的服务端是分离的，分别部署在不同的服务器上，因此请求后台数据会涉及一个跨域访问的问题。为此，需要配置一个反向代理来解决这个问题，将请求转发给真正提供数据的后台服务器。
在项目的根目录下（注意是项目根目录，不是 src 目录）编辑一个名为 vue.config.js 的文件，该文件是 Vue 脚手架项目的配置文件，在这个配置文件中设置反向代理。如下：

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    proxy:{
      // api 是后端数据接口的上下文路径
      '/api':{
        // 这里的地址是后端数据接口的路径
        target : 'http://111.229.37.167',
        // 允许跨域
        changeOrigin:true,
      }
    }
  }
})

接下来，在main.js 文件中为 axios 配置全局的 baseURL 默认值。如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'
import axios from 'axios'
import VueAxios from 'vue-axios'

// 配置全局的 baseURL 默认值
axios.defaults.baseURL = "/api"
createApp(App).use(store).use(router).use(VueAxios, axios).mount('#app')

17.3 首页

前端页面的开发首选要做原型设计，最简单的原型设计就是画草图。本项目网上商城首页的布局如下：

本项目的首页大致可以分为 6 个部分，当然这已经是通过简化的商城首页了。划分出首页的每一部分，便于设计组件。粗略来看，至少需要 7 个组件（加首页组件本身），接下来就需要根据各部分的复杂程度、实现的功能是否可复用等因素去综合考量，最终确定组件的设计。

17.3.1 页面头部组件

考虑到搜索框与购物车可能会在多个地方被复用，因此决定将这两部分单独剥离处理，设计成两个组件，然后编写一个 Header 组件，将搜索框与购物车组件作为子组件在其内部调用。

1.头部搜索框组件

在 component 目录下新建 HeaderSearch.vue ，如下：

HeaderSearch.vue

说明：
（1）本项目的头部组件（Header 组件）在所有页面中都存在，搜索框展示未在其他组件中使用，在 Vue 的单文件组件开发中，建议与父组件紧密耦合的子组件以父组件为前缀命名，因此搜索框组件的名字在这里是 HeaderSearch。

采用这种命名约定的好处是父子组件的关系一目了然，而在 IDE 中，通常也是按照字母顺序来组织文件，这样相关联的文件自然就排在了一起，便于快速定位和编辑。另一种方式是在以父组件命名的目录中编写子组件，但这种方式会导致许多文件的名字相同，使得在 IDE 中快速切换文件变得困难。

此外，过多的嵌套子目录也增加了在 IDE 侧边栏中浏览组件所用的时间。当然，万事都不是绝对的，当项目非常复杂，组件数非常多（如100+）的情况下，采用合理的目录结构管理组件可能更加合适。本章后面的组件名也会采用与 HeaderSearch 相同的命名约定，不再重复说明。

（2）当点击“搜索”按钮时，将输入框中的内容作为查询参数附加在“/search”后面，然后跳转到搜索页面。同时为了避免用户使用相同的关键字查询，在这里做一个判断。

2.头部购物车组件

在 components 目录下新建 HeaderCart.vue ，如下：

HeaderCart.vue

说明：
（1）本项目采用 Vuex 进行全局状态管理，HeaderCart 组件通过store中定义的一个 getter（itemsCount）得到购物车中商品的数量。
（2）本项目采用模块管理应用中不同的状态，目前分为两个带命名空间的模块 cart 和 user，cart 模块主要是购物车中商品的存储与管理，user 模块主要是用户信息的存储和管理。后面会详细介绍本项目中的状态管理实现。
（3）单击“购物车”按钮，跳转到购物车页面。

3.头部组件

在 component 目录下新建 Header.vue。如下：

Header.vue

说明：
（1）通过 v-if/v-else 指令控制用户显示前和登录后显示的文字。用户没有登录时，显示的是“你好，请登录 免费注册”，登录后显示的是：“欢迎您，某某，退出登录”。
（2）等用户单击“退出登录”按钮时，提交 user/deleteUser mutation 删除在 store 中存储的用户信息。