# vue-mall-low

**Repository Path**: hongjunyong/vue-mall-low

## Basic Information

- **Project Name**: vue-mall-low
- **Description**: 慕课-vue2+nodejs(express)+mongoDB打造商城系统（完成）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2018-03-07
- **Last Updated**: 2023-03-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-mall 
    vue2.0 + nodejs + mongoDB 打造商城系统
    
## 目录结构
    |- build
      |- build.js
      |- check-versions.js
      |- dev-client.js
      |- dev-server.js 读取json文件（模拟服务端数据接口）
      |- utils.js
      |- vue-loader.conf.js
      |- webpack.base.conf.js
      |- webpack.dev.conf.js 
      |- webpack.prod.conf.js
    |- config 配置文件
      |- dev.env.js
      |- index.js nodejs端口的配置、数据的访问地址
      |- prod.env.js
    |- dist 编译后的环境
    |- mock json数据
    |- resource 静态资源
    |- server nodejs环境（重点）
      |- bin
      |- models node实体
      |- public 公用文件（css）
      |- routes nodejs路由（服务端的路由）
      |- util 小工具：日期格式、金额格式化
      |- views nodejs静态页面（废弃，因为采用vue的框架）
      |- app.js nodejs入口配置文件
    |- src vue主要开发环境（重点）
      |- assets 静态资源（偏组件资源、图片会被打包成base64）
      |- components 组件
      |- router 配置路由（前端的路由）
      |- main.js 入口文件
      |- store Vuex的使用
    |- static 静态资源（图片不会被压缩、放图片比较大的）

## 项目启动三部曲
    1、运行vue：npm run dev
       生成上线目录（部署）：npm run build（生成dist目录）
    2、启动mongodb
    3、运行nodejs：直接右上角启动
    
    
## 项目依赖
    1、vue-lazyload 图片懒加载
    2、express-generator express生成器；
        查看版本：express --version
        生成express项目：express server
        启动node：cd server
                 node bin/www
                 
    3、ejs
    4、vue-infinite-scroll分页插件（页面向下滑，实现加载分页）
    


## mongodb命令：
    进入mongo：mongo
    查看有哪些数据库：show dbs
    创建数据库：use db_demo（创建了不能马上在可视窗口里面看到，表里面要有数据才可以看到）
    往数据库里插入数据：db.goods.insert({"prodectId":"10001","productName":"aaa","salePrice":249,"productImage":"1.jpg"})
    查看指定表里所有内容：db.goods.find()
    查询查看指定表里一条内容（并且会对数据进行格式化）：db.goods.findOne()
    创建一个表集合（相当数据库的建表）：db.createCollection("users")

## 细节
### 项目打包一片空白
    在config/index.js修改assetsPublicPath: './'
    
### nodejs取参数
    如果是get用req.param
    如果是post用req.body.xx  xx代表具体的参数

### 原始的获取url参数
    http://localhost:8080/?a=123#/orderSuccess?orderId=05275201804030936216
    location.search 输出：？a=123
    location.hash   输出：#/orderSuccess?orderId=05275201804030936216
    
### Vuex
    https://vuex.vuejs.org/zh-cn/
    
    安装：npm install vuex --save
    
    什么是vuex：
      vuex是一个专为Vue.js应用程序开发的状态管理模式
      
    为什么要用Vuex？
      当我们构建一个中大型的单页面应用程序时，Vuex可以更好的帮助我们在组件外部统一管理状态。
    
    Vuex核心概念：
      1、State    
        1） State是唯一的数据源
        2） 单一的状态树
        const Counter = {
          template: '<div>{{ count }}</div>',
          computed: {
            count () {
              // this.$store：vuex对象
              return this.$store.state.count
            }
          }
        }
        
      2、Getters
        1）通过Getters可以派生出一些新的状态
        const store = new Vuex.Store({
          state: {
            todos: {
              { id:1, text: '...', done: true},
              { id:2, text: '...', done: false}
            }
          },
          getters: {
            doneTodos: state => {
              // 返回是true 
              return state.todos.filter(todo => todo.done)
            }
          }
        }) 
      3、Mutaions 
        1）更改Vuex的store中的状态的唯一方法是提交mutation
        const store = new Vuex.Store({
          state: {
            count:1
          },
          mutations: {
            increment(state){
              // 变更状态
              state.count++
            }
          }
        })
        
        // 运行以上方法
        store.commit('increment');
        
      4、Actions
        1）Action提交的是mutation，而不是直接变更状态
        2）可以包含任意异步操作
        const store = new Vuex.Store({
          state: {
            count:0
          },
          mutations: {
            increment(state){
              // 变更状态
              state.count++
            }
          },
          actions: {
            increment(context){
              context.commit('increment');
            }
          }
        })
      
      5、Modules
        1）面对复杂的应用程序，当管理的状态比较多时，我们需要将Vuex的store对象分割成模块（modules）
        const muduleA = {
          state:{},
          mutaions:{},
          actions:{},
          getters:{}
        }
        
        const muduleB = {
          state:{},
          mutaions:{},
          actions:{}
        }
        
        const store = new Vuex.Store({
          modules:{
            a: muduleA,
            b :muduleB
          }
        })