用Vue+Node搭建网上购物商城——记录篇

PC端网上购物商城

• github地址

前言

项目采用的技术栈: Vue+Node+MySQL
前端：用Vue-cli搭建，使用Vue全家桶+element-ui
后端：express框架
数据库：MySQL

其实项目初版本早就写完了，但感觉完成度不高，所以现在想完善这个项目，熟练下vue和node的开发运用，然后也记录一下我的开发过程

一、项目效果预览

商城前台部分

首页

选择所在城市

首页右侧的购物车提示区

分类展示页面

购物车

商品详情页

登录/注册

用户中心

用户中心

商城后台部分

商品信息页

添加商品

二、功能

普通用户

• 注册、登录（图形验证码）
• 定位 （腾讯地图定位功能）、自主选择所在城市
• 商品
  • 分类
  • 简单展示商品
  • 查看商品详情
  • 商品评论
• 分页功能
• 购物车功能
  • 加入购物车
  • 购物车商品数量增减
  • 清空购物车
  • 商品结算
• 多关键词模糊搜索商品 （关键词需为商品名称）
• 用户个人中心
  • 修改用户信息 （头像、昵称、简介…）
  • 修改手机号
  • 修改密码

管理员

• 登录（固定账号密码）
• 查看数据库商品信息
• 商品上架（添加商品）
• 删除/修改商品
• 分页功能

运行

项目后端服务器是基于node、MySQL开发，运行前请确认系统已安装相关应用

• github地址
• git clone

服务器端

• cd web-server
• 将web-server文件夹下的shop.sql导入MySQL数据库中
• npm install 安装依赖
• 修改web-server/src/config.js文件，此文件记录项目的全局变量，在文件中找到password、database、user属性，根据你的数据库信息修改它们的值
• npm run dev 在本地运行，启动服务器

客户端

• cd web-client
• npm install 安装依赖
• npm run dev 在本地运行
• 接着就可以在http://localhost:8080下访问到该项目

三、目录结构

web-client 前端部分：
├── build                      // 构建相关  
├── config                     // 配置相关
├── src                        // 源代码
│   ├── api                    
│   |   ├── ajax.js            // 使用axios，封装ajax
│   |   ├── index.js           // 后端接口，封装请求接口
│   ├── common                 // 字体、图片等静态资源
│   ├── components             // 全局公用组件
│   ├── config                 // 全局配置
│   |   ├── filters.js         // 全局过滤器
│   |   ├── utils.js           // 全局方法
│   |   ├── area.js            // 全国城市区域，配合element-ui级联选择器
│   ├── pages                  // 项目视图页面
│   ├── router                 // 路由配置
│   ├── store                  // Vuex数据存储器
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口文件
├── static                     // 静态资源
├── .babelrc                   // babel-loader 配置
├── .gitignore                 // git 忽略
├── index.html                 // 项目html
└── package.json               // 包依赖配置

web-server 后端部分：
├── db                         // MySQL数据连接  
├── public                     // 静态资源
├── routes                     // 后端路由,项目接口
├── static                     // 静态资源
├── src                        // 源代码
│   ├── app.js                 // 项目入口文件，配置，初始化
│   ├── config.js              // 全局公用参数记录
├── utils                      // 全局公用方法
├── views                      // 视图页面
├── .babelrc                   // babel-loader 配置
├── main.js                    // 入口文件
├── package.json               // 包依赖配置
├── README.md                  // 项目说明文件
└── shop.sql                   // 注入MySQL的sql语句

四、开发中的一些细节

• 跨域问题
  • 后端部分使用cors来解决跨域

  cd web-server
  npm i -S cors
  

  // 在 web-server/src/app.js 中引入
  import cors from 'cors'
  app.use(cors());
  

  • 前端部分进行跨域配置

  // 在 web-client/config/index.js 中进行配置
  proxyTable: {
      '/api': {  //使'api'代替服务器地址
         target: 'http://127.0.0.1:3000/', //源地址
         changeOrigin: true, //改变源
         pathRewrite: {
            '^/api': '' //路径重写
          }
      },
  },
  

• 按需加载组件（优化首屏加载速度）
  • 路由懒加载

  // web-client/src/router/index.js 示例
  const Home = ()=> import('./../pages/Home/Home');
  
  routes: [
  	{
  	  path: '/home',
  	  component: Home
  	},
  ]
  

• 前台页面顶部搜索区的显示和隐藏
  • 通常在购物商城中，会发现页面顶部会实现搜索框，考虑到它在多个页面都会出现，于是封装成全局组件，即 src\components\HeaderSearch\HeaderSearch.vue 并在App.vue中引入
    
  • 然后问题出现了，有些页面其实并不需要出现搜索框，比如商品详情页、登录/注册…于是决定在router内动态设置meta，来控制全局组件的显示和隐藏

  // 在 router\index.js 中设置mate  示例
  routes: [
  	{
  	  path: '/home',
  	  component: Home,
  	  // true 代表该路由页面显示相关的全局组件
  	  meta: {showHeaderTop: true, showHeaderSearch: true}
  	},
  ]
  

  // 在 App.vue 中根据 mate 控制组件显示与隐藏
  <template>
    <div id="app">
  	<HeaderTop v-show="$route.meta.showHeaderTop"/>  
          <HeaderSearch v-show="$route.meta.showHeaderSearch"/>
      	<keep-alive>
            <router-view></router-view>
          </keep-alive>
    </div>
  </template>
  

• 在Vue中，我们通常使用{{data}}插值表达式来页面取值，但是遇到需要异步请求获取数据后，再渲染到页面上时，实际上，页面渲染时会先显示数据的初始值，请求得到数据后，才会正常显示。所以有些三级表达式刚开始加载，得不到数据会报错。此时，可以结合v-if解决，在明确得到数据后，再渲染元素
• 封装Node与MySQL连接
  • 可以新建一个db\db.js文件,里面放数据库连接的代码，最后用export default conn;输出conn，这样在项目中操作数据库时，只需要连接一次即可，提升效率

  import mysql from 'mysql'
  import config from '../src/config'
  
  const  conn = mysql.createConnection({
      host: config.host, // 数据库的地址
      user: config.user, // 账号
      password: config.password, // 密码
      database: config.database, // 数据库名称
      multipleStatements: true,  // 允许多条sql同时查询
  });
  
  conn.connect();
  
  export default conn;