# jmall

**Repository Path**: JohnsonSmile/jmall

## Basic Information

- **Project Name**: jmall
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-04
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# mall

**Project setup**
```
npm install
```

**Compiles and hot-reloads for development**
```
npm run serve
```

**Compiles and minifies for production**
```
npm run build
```

**Lints and fixes files**
```
npm run lint
```

**Customize configuration**
See [Configuration Reference](https://cli.vuejs.org/config/).

## 1. 搭建项目结构

```shell
.
├── README.md
├── babel.config.js
├── node_modules
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── api # api相关
│   ├── assets # icon图标
│   ├── components # 组件
│   ├── main.js 
│   ├── pages # 所有的页面
│   ├── router.js # 路由相关
│   ├── storage # 浏览器持久化
│   ├── store # vuex相关
│   └── util # 所有工具类
└── vue.config.js # webpack配置相关
```
页面划分如下：
```shell
pages
├── cart  # 购物车
│   └── Cart.vue
├── home  # 主页
│   ├── Home.vue
│   └── Index.vue
├── login # 登录
│   └── Login.vue
├── order # 订单
│   ├── Order.vue
│   ├── OrderConfirm.vue
│   ├── OrderList.vue
│   └── OrderPay.vue
├── pay # 支付
│   └── Alipay.vue
├── product # 产品
│   ├── Detail.vue
│   └── Product.vue
└── register  # 注册
    └── Register.vue
```

## 2. 安装依赖

```shell
$ npm i axios vuex vue-router --save
```
开发依赖
```shell
npm i vue-lazyload element-ui node-sass sass-loader vue-awesome-swiper swiper vue-axios vue-cookie --save-dev
```

## 3. 路由封装

```javascript
import Vue from 'vue'
import Router from 'vue-router'

import Home from './pages/home/Home'
import Index from './pages/home/Index'
import Product from './pages/product/Product'
import Detail from './pages/product/Detail'
import Cart from './pages/cart/Cart'
import Order from './pages/order/Order'
import OrderConfirm from './pages/order/OrderConfirm'
import OrderList from './pages/order/OrderList'
import OrderPay from './pages/order/OrderPay'
import Alipay from './pages/pay/Alipay'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      redirect: '/index',
      children: [
        {
          path: 'index',
          name: 'index',
          component: Index,
        },
        {
          path: 'product/:id',
          name: 'product',
          component: Product,
          children: [
            {
              path: 'detail',
              name: 'product-detail',
              component: Detail,
            },
          ],
        },
      ],
    },
    {
      path: '/cart',
      name: 'cart',
      component: Cart,
    },
    {
      path: '/order',
      name: 'order',
      component: Order,
      children: [
        {
          path: 'confirm',
          name: 'order-confirm',
          component: OrderConfirm,
        },
        {
          path: 'list',
          name: 'order-list',
          component: OrderList,
        },
        {
          path: 'pay',
          name: 'order-pay',
          component: OrderPay,
        },
      ],
    },
    {
      path: '/alipay',
      name: 'alipay',
      component: Alipay,
    },
  ],
})

```
并在`main.js`中注册路由
```javascript
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app')
```
## 4. Storage封装
```javascript
const STORAGE_KEY = 'jmall'

export default {
  setItem(key, value, module) {
    if (module) {
      let val = this.getItem(module)
      val[key] = value
      this.setItem(module, val)
      return
    }
    let val = this.getStorage()
    val[key] = value
    window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val))
  },
  getItem(key, module) {
    if (module) {
      let value = this.getItem(module)
      if (value) return value[key]
    }
    return this.getStorage()[key]
  },
  getStorage() {
    return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}')
  },
  clear(key, module) {
    let val = this.getStorage()
    if (module) {
      if (val[module]) delete val[module][key]
    } else {
      delete val[key]
    }
    window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val))
  },
}

```

## 5. 接口错误拦截
修改package.json, 传递环境变量参数
```javascript
"scripts": {
    "dev": "vue-cli-service serve --mode=development",
    "test": "vue-cli-service serve --mode=test",
    "build": "vue-cli-service build --mode=production",
    "lint": "vue-cli-service lint"
  },
  ```
创建`./env`来设置env的url
```javascript
let baseURL

switch (process.env.NODE_ENV) {
  case 'development':
    baseURL = 'http://dev.mall.cn/api'
    break
  case 'test':
    baseURL = 'http://test.mall.cn/api'
    break
  case 'production':
    baseURL = 'http://prod.mall.cn/api'
    break
  default:
    baseURL = 'http://dev.mall.cn/api'
    break
}

export default {
  baseURL,
}
```

```javascript
import axios from 'axios'
import VueAxios from 'vue-axios'
import env from './env'

axios.defaults.baseURL = env.baseURL
axios.defaults.timeout = 8000
// 设置拦截器，返回数据的处理
axios.interceptors.response.use(function(resp) {
  var res = resp.data
  if (res.status == 0) {
    return res.data
  } else if (res.status == 1001) {
    window.location.href = '/#/login'
  } else {
    alert(res.msg)
  }
})

Vue.use(VueAxios, axios)
```

## 6. Mock搭建
安装`mock.js`
```bash
$ npm install mockjs --save-dev
```

在入口文件添加如下代码:
```javascript
/// 是否使用mock
const mock = true
if (mock) {
  require('./mock/api')
  axios.defaults.baseURL = '/api'
}
```
在`./mock/api`中写出来
```javascript
import Mock from 'mockjs'
Mock.mock('/api/user/login', {
  code: 0,
  msg: 'success',
  data: {
    uname: '张三',
    uid: 20200101010,
  },
})
```