vue实战 —— 图书商城移动端项目

介绍下项目功能

全部采用组件化封装思想，尽可能的去符合企业级项目，封装了自定义指令、app换肤等...

1、点击登录会判断正则，同时有小图标提示，错误显 X 正确显 ✔

2、登录按钮默认灰色，账号密码全部正确则变绿色

3、css布局 （最基础！）

4、Vue3 动画库

5、输入框搜索

6、。。。

前期回顾     

 综合热榜前6，js榜单第一，建议查看

Vue项目实战 —— 哔哩哔哩移动端开发_0.活在风浪里的博客-CSDN博客撑着下班前半小时我用vue写《哔哩哔哩 项目》移动端、新手还在哭、老鸟一直在笑。。。技术选型Vue2，技术栈有axios、Vh等，下班过来敲哈哈https://blog.csdn.net/m0_57904695/article/details/123594836

我故意写成两个项目，一个单独写登录注册和图书商城，但是没有js逻辑。另一个项目，单独写图书商城有js，这样将俩个分开，如果大家想要练习最适合不过，可以去写js逻辑，有一个项目是写好的，一个是没写的，方便 练习

---

 

效果图

 

 

 

 

 

 

 

 

 

 

 登录

 vuex store/index.js

import { createStore } from 'vuex'
import axios from 'axios'
export default createStore({
    state: {
        // 默认颜色
        backColor: '#cccccc',
        // 存放数据，页面默认渲染的数据
        books: [],
        // 用于搜索
        _books: [],
    },
    mutations: {
        changeBackColor(state) {
            state.backColor = '#' + Math.round(Math.random() * 16777216).toString(16)
        },
        changeBooks(state, arr) {
            state.books = arr
            state._books = deepClone(arr)

            function deepClone(obj) {
                if (typeof obj !== 'object' || obj == null) {
                    return obj
                }
                let result
                if (obj instanceof Array) {
                    result = []
                } else {
                    result = {}
                }
                for (let key in obj) {
                    if (obj.hasOwnProperty(key)) {
                        result[key] = deepClone(obj[key])
                    }
                }
                return result
            }
        },
    },

    actions: {
        async getDate({ commit }) {
            //将请求的数据中的 list取出来
            let data = await axios.get('/goods.json')
            console.log(data.data.list);
            commit('changeBooks', data.data.list)
        }
    },
    modules: {}
})

 登录子组件

 

登录后页面

 源码推送到主页的资源里了，需要的哥们儿到主页资源，down

如果感觉对你有帮助，收藏下方便找时快速翻到