介绍下项目功能

全部采用组件化封装思想，尽可能的去符合企业级项目，封装了自定义指令、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逻辑，有一个项目是写好的，一个是没写的，方便练习

效果图

<template><div class="home"><my-headerv-back="$store.state.backColor"right-text="切换主题"title="用户登录"@right-click="rightClick"/><div class="form"><my-inputlabel="手机号码"placeholder="请输入手机号码":icon="mobileIcon"v-model="mobile"></my-input><my-inputlabel="密码"placeholder="请输入密码":icon="pwdIcon"v-model="pwd"></my-input><button class="btn" :disabled="disabled" @click="$router.push('/about')">登陆</button></div></div>
</template><script>
import myHeader from "@/components/myHeader";
import myInput from "@/components/myInput";
import { ref, watch, watchEffect } from "vue";
import { useStore } from "vuex";
export default {name: "Home",components: {myHeader,myInput,},setup() {const disabled = ref(true);const mobile = ref("");const pwd = ref("");const mobileIcon = ref("");const pwdIcon = ref("");const color = ref("#cccccc");const store = useStore();// 手机号码正则表达式let regMobile = /^1[356789]\d{9}$/;let regPwd = /^[a-zA-Z]\w{5}$/;// watchEffect兼容数据变化的方法 但是只能用来兼容ref数据watchEffect(() => {if (regMobile.test(mobile.value) && regPwd.test(pwd.value)) {disabled.value = false;// 判断成功则将变量颜色赋值按钮color.value = store.state.backColor;} else {disabled.value = true;}});watch(() => mobile.value,() => {if (regMobile.test(mobile.value)) {mobileIcon.value = "iconfont duihao";} else {mobileIcon.value = "iconfont chahao";}});watch(() => pwd.value,() => {// console.log(regPwd.test(pwd.value));if (regPwd.test(pwd.value)) {pwdIcon.value = "iconfont duihao";} else {pwdIcon.value = "iconfont chahao";}});function rightClick() {// console.log(1);store.commit("changeBackColor");}return {rightClick,disabled,mobile,pwd,mobileIcon,pwdIcon,color,};},
};
</script>
<style lang="scss" scoped>
.form {width: 100%;margin-top: 200px;padding: 0 40px;
}
.btn {display: block;margin: 0 auto;width: 150px;height: 36px;border: none;outline: none;border-radius: 6px;background-color: v-bind(color);color: #fff;
}
.btn[disabled] {background-color: #ccc;color: #fff;
}
</style>

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 = arrstate._books = deepClone(arr)function deepClone(obj) {if (typeof obj !== 'object' || obj == null) {return obj}let resultif (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: {}
})

登录子组件

<template><div class="my-header"><span class="left">{{leftText}}</span><span class="title">{{title}}</span><span class="right" @click="clickEve">{{rightText}}</span></div>
</template>
<script>
export default {//  props接受数据有两种形式 一种是数组 另外一种是对象// 数组用法简单不多介绍// 对象props: {show: Boolean, // 只定义需要接受的数据的数据类型时的写法leftText: {type: String, // 要求接收的数据时字符串required: false, // 该数据不是必须传递的default: ''},rightText: {type: String,required: false,default: ''},title: String},setup(props, { emit }) {function clickEve() {emit('right-click')}return {clickEve}}
}
</script>
<style lang="scss" scoped>.my-header {width: 100%;height: 50px;display: flex;justify-content: space-between;background-color: orangered;align-items: center;.left,.right {flex-basis: 30%;text-align: center;}.right {color: skyblue;}.title {color: #fff;font-size: 24px;font-weight: bold;}}
</style>

<template><div class="my-input"><label>{{label}}</label><input type="text" :placeholder="placeholder" :value="modelValue" @input="iptChange"><span :class="icon" ></span></div>
</template>
<script>
export default {props: {label: String,placeholder: String,icon: String,modelValue: String},setup(props, { emit }) {function iptChange(e) {emit('update:modelValue', e.target.value)}return {iptChange}}
}
</script>
<style lang="scss" scoped>.my-input {width: 100%;display: flex;align-items: center;margin-bottom: 15px;label {width: 56px;flex-shrink: 0;font-size: 14px;overflow: hidden;white-space: nowrap;text-align: justify;text-align-last: justify;}input {height: 36px;margin-left: 5px;border: 1px solid #ccc;outline: none;border-radius: 6px;padding-left: 10px;margin-right: 10px;}.duihao {color: green;font-weight: 900;}.chahao {color: red;}}
</style>

登录后页面

<template><div class="about"><myHeader left-text="" title="图书商城" right-text="我的书架"></myHeader><div class="search"><input type="text" placeholder="请根据书名进行搜素" /></div><div class="my-card"><!-- 子组件负责接受父组件数据，定义结构样式，父组件负责传值 念及此 为封装思路 --><myCard v-for="item in books" :key="item._id" :item="item"></myCard></div></div>
</template>
<script>
import myHeader from "../components/myHeader";
import myCard from "../components/myCard.vue";
import { useStore } from "vuex";
import { computed } from "vue";
export default {setup() {const store = useStore();store.dispatch("getDate");// 在计算属性拿到这个值赋值一个变量，就不用每次都$store.state.booksconst books = computed(() => store.state.books);return {books,};},components: {myHeader,myCard,},
};
</script>
<style lang="scss" scoped>
.search {width: 100%;height: 40px;background-color: #ccc;padding: 5px;input {width: 100%;height: 30px;border: none;font-size: 17px;background-color: transparent;outline: none;padding-left: 10px;}
}
.my-card {height: calc(100% - 90px);overflow: auto;display: flex;flex-wrap: wrap;
}
</style>

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

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

vue实战 —— 图书商城移动端项目相关推荐

Vue3+Vant+Vue-cli+Restful api实战—图书商城移动端
Vue3+Vant+Vue-cli+Restful api实战-图书商城移动端经过将近一个月的努力,项目终于做完了,编写的时候在代码中写了很多注释,方便自己后期查看,有问题的小伙伴可以找我帮忙解决! ...
【Vue】Vue2创建移动端项目实战教程，创建移动端项目保姆级教程，接上一篇创建Vue2项目（下）
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.创建vue2项目二.移动端适配 1.安装插件flexible (适配移动端) 2.安装 postcss-pxto ...
Vue2积分商城PC端项目(六)
目录一.导航守卫(导航拦截.路由拦截) 1.1.全局导航守卫 1.2.组件内部导航守卫二.个人中心--购物车页面 2.1.个人中心左侧结构样式套用 2.2.重定向到购物车(二级路由) 2.3.购物 ...
Vue2积分商城PC端项目(一)
目录一.清空项目非必要文件二.样式初始化三.网站结构布置四.网站数据请求模块 4.1.发起请求 4.2.代理配置 4.3.API与Request封装 4.4.发起请求五.头部组件 5.1.版 ...
真 · 前端Vue实战：头条新闻开发项目（下）
现在在企业里面,Vue成为前端框架中最火的一个.由于其简单易学,越来越多的网站前端开始采用Vue开发,毋庸置疑,掌握Vue技术可以为你的职场增加更多的机会. 今晚,黑马程序员金牌讲师伍老师,将为大家 ...
Vue2积分商城PC端项目(四)
目录一.路由监听及其应用 1.1.路由监听的格式 1.2.路由监听的应用二.组件重载三.获取登录用户信息,请求头携带token 3.1.请求头携带token 3.2.获取用户登录信息四.用户信 ...
团队项目：惊喜商城pc端
惊喜商城pc端一.项目背景在这个飞速发展的互联网时代,人们对于去购物市场"人挤人"购物,更喜欢在线上足不出门但能买到自己想要的东西.此项目以某东商城为模板. 二.项目介绍本项 ...
springboot毕设项目：网上图书商城q3ulr（java+VUE+Mybatis+Maven+Mysql）
springboot毕设项目:网上图书商城q3ulr(java+VUE+Mybatis+Maven+Mysql) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBu ...
springboot毕设项目网上图书商城q3ulr（java+VUE+Mybatis+Maven+Mysql）
springboot毕设项目网上图书商城q3ulr(java+VUE+Mybatis+Maven+Mysql) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBui ...
Vue项目实战 —— 后台管理系统( pc端 ) 第三篇
前期回顾 Vue项目实战 -- 后台管理系统( pc端 ) 第二篇_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 -- 后台管理系统( pc端 ) 第一篇 _0.活在风浪里 ...

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

效果图

登录

vuex store/index.js

登录子组件

登录后页面

vue实战 —— 图书商城移动端项目相关推荐

最新文章

热门文章