茶.

app

main.js

import Vue from 'vue'
import App from './App.vue'
//轮播图element插件
import ElementUI from 'element-ui'
//图片懒加载
import VueLazyload from 'vue-lazyload'

// import lkj from '../test'


//集成
//Element 插件
Vue.use(ElementUI)
import 'element-ui/lib/theme-chalk/index.css';
//懒加载图片
Vue.use(VueLazyload, {
  loading: require('./statics/site/images/01.gif')
})

//导入路由
import router from './router'
//导入过滤器
import './filters/index.js'

//导入vuex 数据仓库

import store from './store/index.js'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

router

import Vue from 'vue'
import VueRouter from 'vue-router'

import {bus} from "../common/common.js"

Vue.use(VueRouter)

//导入组件
    //1.商品列表部分
import goodslist from '../components/goods/goodslist.vue'
    //2.商品详情部分
import goodsinfo from '../components/goods/goodsinfo.vue'
import shopcart from '../components/shopcart/shopcart.vue'
import order from '../components/order/order.vue'
import login from '../components/account/login.vue'
import pay from '../components/pay/pay.vue'
import paySuccess from '../components/pay/paySuccess.vue'
import VipCenter from '../components/VipCenter/Vipcenter.vue'
import theOrder from '../components/VipCenter/theOrder.vue'
import checkOrder from '../components/VipCenter/checkOrder.vue'


//设置网络请求部分放这里,方便后期维护
import axios from 'axios'
//把axios放到vue的原型中
Vue.prototype.$axios = axios
axios.defaults.baseURL = 'http://47.106.148.205:8899/'
axios.defaults.withCredentials=true

//创建路由对象
const router = new VueRouter({
    routes:[
        {path:'/',redirect:'/goodslist'},
        {name:'goodslist',path:'/goodslist',component:goodslist},
        {path:'/goodsinfo/:goodsid',component:goodsinfo},
        {path:'/shopcart',component:shopcart},
        {path:'/login',component:login},
        {path:'/order',meta:{needLogin : true},component:order},
        {path:'/pay',meta:{needLogin : true},component:pay},
        {path:'/paySuccess',meta:{needLogin : true},component:paySuccess},
        {path:'/VipCenter',meta:{needLogin : true},component:VipCenter},
        {path:'/theOrder',meta:{needLogin : true},component:theOrder},
        {path:'/checkOrder',meta:{needLogin : true},component:checkOrder}
    ]
})

router.beforeEach((to,from,next) =>{
    //先保存进来的地址的信息,要判断先除开login进来的
    if(to.fullPath !='/login'){
        //保存地址
        localStorage.setItem('lastVisitPath',to.fullPath)
    } 
    //验证登陆判断
    if(to.meta.needLogin){
        const url = `site/account/islogin`
        axios.get(url).then(response =>{
            if(response.data.code === 'logined'){
                //登陆成功也要隐藏,调用自定义属性
                bus.$emit('loginSuccess')
                next()
            }else{
                router.push({path:'/login'})
            }
        })
    }else{
        next()
    }
})


//es6导出
export default router

filters

import Vue from 'vue'

//导入改时间的插件moment 
import moment from 'moment'

//定义全局过滤器
Vue.filter('dateFmt',(input,formatString='YYYY-MM-DD')=>{
    return moment(input).format(formatString)
})

store

//引入
import Vue from 'vue'
import Vuex from 'vuex'


//集成
Vue.use(Vuex)


//按需导入
import {addLocalGoods,getTotalCount,updateLocalGoods,deleteGoods,deleteLocalGoodsById} from '../common/localStorageTool.js'

//创建空白仓库
const store  = new Vuex.Store({
    state:{//要操作的数据
        buyCount : 0
    },
    getters:{ // 从仓库往外取东西
        getBuyCount:state=>{
            return state.buyCount > 0 ? state.buyCount :  getTotalCount()
            //从新调用统计商品的方法
        }
    },
    mutations:{ //同往仓库中操作数据
        addGoods(state,goods){
            // state.buyCount += goods.count
            //改为调用存储到本地的方法
            state.buyCount = addLocalGoods(goods)
        },
        updateGoods(state,goods){
            state.buyCount = updateLocalGoods(goods)
        },
        deleteGoodsById(state,goodsId){
            state.buyCount = deleteLocalGoodsById(goodsId)
        }

    }

})

//导出到
export default store

common.js

import Vue from 'vue'
const bus = new Vue()

//导出
export {bus}

localStorageTool.js

const KEY = 'goods'


//先取出本地已有的数据
    //1.封装一个获取本地数据的的函数,要么有数据,要么就是一个空的对象
const getLocalGoods = () => {
    return JSON.parse(localStorage.getItem(KEY) || '{}')
}

//2.统计本地最新的商品的总数
const getTotalCount =() =>{
    //2.1获取本地数据
    const localGoods = getLocalGoods()
    // console.log(localGoods);
    
    //2.2取数数组里面的所有商品的key值,相加,则为所有商品的总数
    let totalCount = 0
    for(const key in localGoods){
        totalCount += localGoods[key]

        // console.log(totalCount)
    }
    return totalCount
}

    //3.把goods中的商品存储的本地
const addLocalGoods = goods => {

    //3.1先获取本地数据
    const localGoods = getLocalGoods()
        
        console.log(localGoods);
        
    //先判断有没有商品id这个值
    if(localGoods[goods.goodsId]){

        localGoods[goods.goodsId] += goods.count
    }else{
        localGoods[goods.goodsId] = goods.count
    }
    // console.log(localGoods,localGoods[goods.goodsId]);

    localStorage.setItem(KEY,JSON.stringify(localGoods))

    return getTotalCount()
}

const updateLocalGoods = goods=>{
    //1.获取本地数量数,调用方法
    const localGoods = getLocalGoods()
    //更新
    localGoods[goods.goodsId] = goods.count
    //保存本地
    localStorage.setItem(KEY,JSON.stringify(localGoods))

    //返回数据
    return getTotalCount()

}

//根据id删除商品
const deleteLocalGoodsById = goodsId =>{
    //1.获取本地数量数,调用方法
    const localGoods = getLocalGoods()
    //删除
    
    delete localGoods[goodsId]
    //保存数据到本地

     localStorage.setItem(KEY,JSON.stringify(localGoods))

     //从新计算总和
     return getTotalCount()
}

//按需导出
export {addLocalGoods,getTotalCount,getLocalGoods,updateLocalGoods,deleteLocalGoodsById}

login.vue

goodsinfo.vue

goodslist.vue

order.vue

pay.vue

paySuccess.vue

shopcart.vue

inputnumber.vue

checkOrder.vue

theOrder.vue

Vipcenter.vue

package.json

{
  "name": "szhmqd21_vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "dzh-qrcode": "^1.0.4",
    "element": "^0.1.4",
    "element-ui": "^2.4.6",
    "iview": "^3.1.0",
    "jquery": "^3.3.1",
    "moment": "^2.22.2",
    "v-distpicker": "^1.0.17",
    "vue": "^2.5.17",
    "vue-lazyload": "^1.2.6",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.1",
    "@vue/cli-plugin-eslint": "^3.0.1",
    "@vue/cli-service": "^3.0.1",
    "vue-template-compiler": "^2.5.17"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

vue.config.js

module.exports = {
    lintOnSave: false,
    baseUrl: './',
    productionSourceMap: false,
    // configureWebpack: {
    //     externals: {
    //         vue: 'Vue'
    //     }
    // }
}