7

Vue书店

demo地址
源码地址

1.案例所用技术

2.能有什么收获


  • 初步熟悉vue-cli手交架;

  • 初步学会处理vue-router路由管理,状态管理的内容,以及用iview简单布局;


3.书店的功能需求

  • 主导航是首页书单、以及图书管理

  • 图书管理包含添加图书修改图书删除图书

  • 效果如下图:
    clipboard.png


4.功能实现

  • (1)安装vue-cli

    • a:npm install -g vue-cli(只用安装一次,以后直接从b开始);

    • b:vue init webpack my-projectmy-project是文件名);

    • c:cd my-project(进入文件夹);

    • d:npm install(安装依赖);

    • e:npm run dev(启动服务);
      我们实现简单的操作逻辑所用的操作集中在src目录下

  • (2)组件

    • Home 首页组件

    • List 书单组件

    • Manger 图书管理

    • Delete 删除组件

    • Add 增加组件

    • Update 修改组件

  • (3)vue-router路由管理

    • 为了方便路由管理,我们将用这样的结构来描述路由

      import Vue from 'vue'  //引入vue
      import Router from 'vue-router'  //引入vue-router
      import Home from '../components/Home.vue'  //引入各个组件
      import List from '../components/List.vue'
      import Add from '../components/Add.vue'
      import Manger from '../components/Manger.vue'
      import Detail from '../components/Detail.vue'
      import Update from '../components/Update.vue'
      import Delete from '../components/Delete.vue'
      
      Vue.use(Router);     //在vue中使用vue-router
      
      const routes = [            //定义路由
        {path:'/home',           //主路由
         component:Home},        //组件 
        {path:'/list',
         component:List},
        {path:'/manger',
         component:Manger,
        children:[              //子路由
          {path:'add',          
          component:Add},
          {path:'update',
          component:Update},
          {path:'delete',
          component:Delete}]},
      { path:'/detail/:id',    //子路由动态绑定
      name:'detail',         //子路由名 
      component:Detail}]
      export default new Router({  //导出路由
      routes})
  • (4)vuex状态管理

    • getters
      getters的作用参见Vue值理解Getters,在这里getters的作用就是拿到store仓库里面存放的bookInfo书单。

      export const  books =state => state.bookInfo //导出
    • types

          export const BOOK_ADD = 'BOOK_ADD'
          export const BOOK_DELETE = 'BOOK_DELETE'
          export const BOOK_UPDATE = 'BOOK_UPDATE'
    • mutations
      mutations的作用就是用来操作state里面的数据,而且在vuex里面只有在mutations里面才能操作state里面的数据,详情参考Vuex之理解Mutations

      import {BOOK_ADD, BOOK_DELETE,BOOK_UPDATE} from './types'
         //引入types
      const  mutations ={  //定义mutations
      [BOOK_ADD](state,book){    //增加图书方法
      if(state.bookInfo.length == 0){
        book.id=1
      }else{
       book.id= state.bookInfo[state.bookInfo.length-1].id+1
      }
         state.bookInfo.push(book)  //其实就是store里面的state里面的bookInfo增加一本书
         },
         [BOOK_DELETE](state,bid){  //删除图书的方法
       state.bookInfo=state.bookInfo.filter(item=>{ //通过id删掉bookInfo里面指定的图书
         return  item.id != bid
       })
         },
         [BOOK_UPDATE](state,book){//更新图书的方法 
         state.bookInfo.map(item=>{
       if(item.id == book.id){  
         return book}})}} 
         export defalut mutaions  
    • actions
      actions是用来提交mutations里面的方法的,而且可以异步操作。详情见Vuex之理解Actions

      import {BOOK_ADD, BOOK_DELETE,BOOK_UPDATE} from './types'
      const  actions ={
      addBook:({commit},book)=>commit('BOOK_ADD',book),
      deleteBook:({commit},id)=>commit('BOOK_DELETE',id),
      updateBook:({commit},book)=>commit('BOOK_UPDATE',book),}
      export default actions
    • index
      定义state,就是定义状态,也就是数据,详情见Vuex之理解state

      import Vue from 'vue'
      import Vuex from 'vuex'
      import * as getters from './getters' //引入getters
      import actions from './actions'   //引入actions
      import mutations from  './mutations' //引入mutations
      
      Vue.use(Vuex)
      const state ={  
       bookInfo:[{
       id:1,
       bookName:'Vue权威指南',
       imgUrl:'http://i-3.391k.com/2016/9/21/b2235ffb-4fbd-427e-b49f-3b60f1af4492.png',
       price:12},
       {id:2,
       bookName:'Vue实践揭秘',
       imgUrl:'http://img5.imgtn.bdimg.com/it/u=2842506561,1290810338&fm=11&gp=0.jpg',
       price:12}]
      }
      export  default  new Vuex.Store({//导出store
       state,
       getters,
       mutations,
       actions})
  • (5)main.js
    主文件

     import Vue from 'vue'
     import App from './App'
     import iview from 'iview'  //引入iview
     import  router from './router/index'
     import 'iview/dist/styles/iview.css'//引入iview的css文件
     import store from './store'//引入store状态管理
    
     Vue.config.productionTip = false
    
     Vue.use(iview)
    
     new Vue({
       el: '#app',
       router,
       store,
       template: '<App/>',
       components: { App }
     })
  • (6)组件代码
    这里用删除组件举例

    <template>
    <div class="listContainer">
     <Col span="5" offset="1" v-for="(book ,index)in books" :key="index" class="text">
     //v-for循环拿到每本书,注意key,不然会警告
     <Card >
       <p slot="title">{{book.bookName}}</p>
       <img  class="bookimg" :src="book.imgUrl" alt="">
       <p>售价:{{book.price}}</p>
       <Icon type="close-round"></Icon>
       <Button type="error" @click="deleteBook(book.id)">删除</Button>
       //点击时触发删除函数,将要删除的图书id传过去
     </Card>
     </Col>
    </div>
    </template>
    <script>
    import { mapGetters } from 'vuex'
    export default{
     name: 'Home',
     computed:{
       ...mapGetters({//拿到getters里面的函数
         books:'books'  
       })
     },
     methods:{
       deleteBook(id){
         this.$store.dispatch('deleteBook',id)
         //用dispatch方法触发actions里面deleteBook函数,并传入id
       }
     }
    }
    </script>
  • update增加购物车
    demo地址
    源码地址


何凯
966 声望174 粉丝

Never too late to learn!