cpanel wordpress,泰州网站快速排名优化,网站运营主要做什么工作,wordpress 漂亮主题前端#xff1a;Vue学习 - 智慧商城项目 1. vue组件库 vant-ui2. postcss插件 vw 适配3. 路由配置4. 登录页面静态布局4.1 封装axios实例访问验证码接口4.2 vant 组件 轻提示4.3 短信验证倒计时4.4 登录功能4.5 响应拦截器 统一处理错误4.6 登录权证信息存… 前端Vue学习 - 智慧商城项目 1. vue组件库 vant-ui2. postcss插件 vw 适配3. 路由配置4. 登录页面静态布局4.1 封装axios实例访问验证码接口4.2 vant 组件 轻提示4.3 短信验证倒计时4.4 登录功能4.5 响应拦截器 统一处理错误4.6 登录权证信息存储4.7 storage存储模块 vuex持久化处理4.8 添加请求loading效果 5. 页面访问拦截6. 首页布局7. 搜索历史管理8. 商品详情页9. 加入购物车 1. vue组件库 vant-ui
安装命令为
npm i vantlatest-v2vant官网链接为vant默认打开的是vant最新版本4这里使用vant2链接为vant2 有两种导入方式全部导入和按需导入全部导入直接在main.js加入下述代码即可。
import Vue from vue;
import Vant from vant;
import vant/lib/index.css;Vue.use(Vant);此时在vue文件中就可以添加相应的vant组件代码了但是性能低。 按需导入首先需要安装babel-plugin-import插件插件下载命令如下
//安装插件
npm i babel-plugin-import -D然后在babel.config.js文件中添加下述代码
module.exports {plugins: [[import, {libraryName: vant,libraryDirectory: es,style: true}, vant]]
};之后只需要在main.js中引入vant中对应组件并进行注册即可。
import { Button } from vant;Vue.use(Button)随着项目逐渐增大可以把对应的按需导入组件代码写到专门的js文件中然后在main.js中引入即可。
2. postcss插件 vw 适配
postcss插件相关内容链接为postcss postcss插件安装命令为
npm install postcss-px-to-viewport1.1.1 -D然后在根项目下新建postcss.config.js文件填入下述配置
module.exports {plugins:{postcss-px-to-viewport:{viewportWidth: 375// 标准屏幕宽度}}
}上述设置了375此时 80vw300px计算方式为 300/375*100 80。
3. 路由配置
凡是单个页面独立展示的都是一级路由。 一级路由有登录页面、首页、搜索页、搜索列表页、商品详情页、结算支付页、订单管理页二级路由在首页下有首页、分类、购物车、我的。 路由配置代码如下
import Vue from vue
import VueRouter from vue-router
// 引入一级路由组件
import Login from /views/login/Login.vue
import Layout from /views/layout/Index.vue
import MyOrder from /views/myorder/MyOrder.vue
import Pay from /views/pay/Pay.vue
import ProDetail from /views/prodetail/ProDetail.vue
import List from /views/search/List.vue
import Index2 from /views/search/Index2.vue
// 引入二级路由组件
import Home from /views/layout/Home.vue
import Cart from /views/layout/Cart.vue
import Category from /views/layout/Category.vue
import User from /views/layout/User.vueVue.use(VueRouter)const routes [{path:/login,component:Login},{path:/,component:Layout,children:[// 二级路由{path:/home,component:Home},{path:/category,component:Category},{path:/cart,component:Cart},{path:/user,component:User}],redirect:/home// 重定向},{path:/search,component:Index2},{path:/searchList,component:List},{path:/prodetail/:id,component:ProDetail},// 动态路由{path:/pay,component:Pay},{path:/myorder,component:MyOrder}
]const router new VueRouter({routes
})export default router
运行结果
4. 登录页面静态布局
使用vant的NavBar组件
import { NavBar } from vant;// 导航栏
Vue.use(NavBar);templatediv classloginvan-nav-bar title登录 left-arrow click-leftonClickLeft/div classlogin-bp classlogin-info手机号注册/pp classlogin-info-2未注册的手机号登录后会自动注册/pinput typetext placeholder请输入手机号码 classphone margin-b-20div classimg-code margin-b-20input typetext placeholder请输入图形验证码img src/static/code.png alt/divdiv classxx-code margin-b-20input typetext placeholder请输入短信验证码button获取验证码/button/divbutton classlogin-btn登录/button/div/div
/templatescript
export default {name:Login,methods:{onClickLeft(){this.$router.back();}}
}
/scriptstyle langless scoped.login-b{padding-top: 40px;padding-left: 30px;padding-right: 30px;.login-info{font-size: 35px;font-weight: 500;}.login-info-2{color: rgb(220, 223, 227);padding: 9px 0;font-size:14px;}input{width: 100%;border: none;border-bottom: 1px solid rgb(220, 223, 227) !important;height: 50px;line-height: 50px;font-size: 16px;}.margin-b-20{margin-bottom: 20px;}.img-code{position: relative;input{width: 220px;}img{width: 75px;position: absolute;bottom: 5px;right: 0;}}.login-btn{color: white;background-color: rgb(233, 189, 32);border: none ;width: 100%;height: 40px;line-height: 40px;border-radius: 20px;margin-top: 14px;}.xx-code{position: relative;input{width: 220px;}button{position: absolute;right: 0;bottom: 5px;border: none;background-color: white;color: rgb(233, 189, 32);}}}
/style运行结果
4.1 封装axios实例访问验证码接口
封装axios实例js代码如下
import axios from axiosconst instance axios.create({baseURL: http://localhost:9998/w,timeout: 1000,headers: { X-Custom-Header: foobar }
});// 添加请求拦截器
instance.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器
instance.interceptors.response.use(function (response) {// 对响应数据做点什么return response.data;
}, function (error) {// 对响应错误做点什么return Promise.reject(error);
});export default instance
// 导出配置使用封装好的axios实例访问接口如下
import request from /utils/request.jsexport const getPicCode function(){return request.get(?str_1/captcha/image)
}按需导出
4.2 vant 组件 轻提示
使用Toast请提示注册安装
import { Toast } from vant;Vue.use(Toast);
// 轻提示使用直接this.$toast(‘提示内容’)需要注意的是只能在组件内部使用。另外一种是在任何地方都可以使用。
import {Toast} from vantToast(提示内容)运行结果
4.3 短信验证倒计时
准备data数据三个分别为totalSecond、second、timer
data(){return{totalSecond:60, // 总秒数second:60, // 当前秒数timer:null}
}点击发送验证码按钮代码逻辑
getCode(){// timer判断防止重复点击if(!this.timer this.second this.totalSecond){this.timer setInterval((){this.second --;if(this.second 0){clearInterval(timer);this.timer null;this.second totalSecond;}// 倒计时显示为0关闭定时器},1000);}
}页面点击按钮页面布局为
button clickgetCode{{second totalSecond?获取验证码: second 秒之后重新发送}}/button运行结果 另外还存在一个问题就是离开这个页面时定时器还在运行需要在destroy函数中关闭当前定时器。 // 离开页面清除定时器destory(){clearInterval(this.timer);}下述是对输入的手机号和图片验证码进行验证
validFn(){if(!/^1[3-9]\d{9}$/.test(this.mobile)){this.$toast(请输入正确的手机号)return false;}if(!/^\w{4}$/.test(this.picCode)){this.$toast(请输入正确的图形验证码)return false;}// 正则表达式验证手机号码和图形验证码是否输入正确return true;
}请求短信验证码接口只是演示效果而已
// 短信验证码
// 短信验证码
export const getMsgCode function (captchaCode, captchaKey, mobile) {return request.post(?typecodestr_1/captcha/sendSmsCaptcha,{captchaCode,captchaKey,mobile})
}async getCode(){if(!this.validFn()){// 点击验证码按钮之后进行判断return }// timer判断防止重复点击if(!this.timer this.second this.totalSecond){await getMsgCode(this.picCode,this.picKey,this.mobile);this.$toast(短信发送成功);this.timer setInterval((){this.second --;// console.log(正在倒计时。。。);if(this.second 0){clearInterval(this.timer);this.timer null;this.second this.totalSecond;}// 倒计时显示为0关闭定时器},1000);}
}实现步骤
点击按钮实现倒计时效果倒计时之前进行校验手机号、图片验证码请求短信验证码接口添加相应提示
4.4 登录功能
登录之前仍需要对手机号、图片验证码和短信验证码进行校验然后调用相应的请求登录接口的方法发送请求请求成功后添加相应的提示并跳转。
export const codeLogin function(mobile,smsCode){return request.post(/w3?typecodeLogin,{mobile,smsCode})
}if(!this.validFn()) returnif(!/^\d{6}$/.test(this.msgCode)){this.$toast(请输入正确的短信验证码)return}const res await codeLogin(this.mobile,this.msgCode);console.log(res);this.$toast(登录成功)this.$router.push(/)4.5 响应拦截器 统一处理错误
上述请求对应接口只是在考虑请求结果正确的情况下。在封装的axios模块下的响应拦截器添加如下代码
import {Toast} from vant;// 添加响应拦截器
instance.interceptors.response.use(function (response) {// 对响应数据做点什么const res response.data;if(res.status ! 200){Toast(res.message);return Promise.reject(res.message);}return res;
}, function (error) {// 对响应错误做点什么return Promise.reject(error);
});运行结果
4.6 登录权证信息存储
vuex构建user模块存储登录权证。 构建user模块
export default{namespaced:true,state(){return{userInfo:{token:,userId:}}},mutations:{},actions:{},getters:{}
}挂载user到全局上去
import Vue from vue
import Vuex from vuex
import user from /store/modules/userVue.use(Vuex)export default new Vuex.Store({state: {},getters: {},mutations: {},actions: {},modules: {user}
})mutations中设置state相应的值
mutations:{setUserInfo(state,obj){state.userInfo obj;}
},页面中进行调用
this.$store.commit(user/setUserInfo,{token:res.token,userId:res.userId});4.7 storage存储模块 vuex持久化处理
封装storage模块利用本地存储进行vuex持久化处理。
const INFO_KEY lz_infoexport const getInfo (){const defaultObj {token:,userId:};const res localStorage.getItem(INFO_KEY);return res ? JSON.parse(res) : defaultObj;
}
// 获取个人信息export const setInfo (obj){localStorage.setItem(INFO_KEY,JSON.stringify(obj));
}
// 设置个人信息
export const removeInfo (){localStorage.removeItem(INFO_KEY);
}
// 移除个人信息在user模块使用
import { getInfo, setInfo } from /utils/storageexport default{namespaced:true,state(){return{userInfo:getInfo()}},mutations:{setUserInfo(state,obj){state.userInfo obj;setInfo(obj);}},actions:{},getters:{}
}运行结果 即使刷新了页面token信息也不会丢失。
4.8 添加请求loading效果
请求后台时添加loading效果。实现在请求拦截器中每次请求打开loading在响应拦截器中每次响应关闭loading。
// 添加请求拦截器
instance.interceptors.request.use(function (config) {// 在发送请求之前做些什么// 开启loading禁止背景点击Toast.loading({message:加载中..., // 设置轻提示内容forbidClick:true, // 禁止背景点击duration:0 // 不会自动消失})return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器
instance.interceptors.response.use(function (response) {// 对响应数据做点什么const res response.data;if(res.status ! 200){Toast(res.message);return Promise.reject(res.message);}else{Toast.clear();// 清除loading效果}return res;
}, function (error) {// 对响应错误做点什么return Promise.reject(error);
});5. 页面访问拦截
有的页面只有当用户满足一定条件下才能访问比如登录成功后才能查看购物车中商品信息。 这里可以考虑使用路由导航守卫全局前置守卫。所有的路由一旦被匹配到都会先经过全局前置守卫只有全局前置守卫放行才会真正解析渲染组件才能看到页面内容。 具体而言跳转路由后先经过全局前置守卫在这里边进行判断要跳转的页面的是否存在权限问题如果没有权限问题直接放行否则判断是否有token信息有的话直接跳到对应页面进行渲染即可否则跳转到登录页面。
在路由配置文件添加如下配置
import store from /store/indexconst urls [/pay,/myorder];router.beforeEach((to,from,next){// to 到哪个页面去的完整路由对象// from 从哪个页面来的完整路由对象// next() 是否放行if(!urls.includes(to.path)){next();return }const token store.getters.token;if(token){next();}else{next(/login);}
})export default routertoken是全局的配置如下
import Vue from vue
import Vuex from vuex
import user from /store/modules/userVue.use(Vuex)export default new Vuex.Store({state: {},getters: {token(state){return state.user.userInfo.token;}},mutations: {},actions: {},modules: {user}
})
运行结果
6. 首页布局 首页数据获取模块的封装
import request from /utils/requestexport const getHomeData (){return request.get(w4?pageId0str_1/page/detail);
}调用封装好的模块进行页面渲染
templatediv classhomevan-nav-bar title智慧商城 fixed/!-- 顶部 --van-search v-modelvalue placeholder请输入搜索关键词 /!-- 搜索框 --van-swipe :autoplay3000 :height200van-swipe-item v-for(image, index) in images :keyindeximg v-lazyimage.imgUrl //van-swipe-item/van-swipe!-- 轮播图 --van-grid square icon-size40 :column-num5van-grid-item v-for(item,index) in images2 :keyindex :iconitem.imgUrl :textitem.text //van-griddiv classmiddle-secimg :srctotalImg alt/divdiv classgoods-itemp classgoods-top-猜你喜欢-/pGoodItem v-foritem in proList :keyitem.goods_id :proitem/GoodItem/div/div
/templatescript
import GoodItem from /components/GoodItem.vue
import {getHomeData} from /api/homeexport default {name:Home,components:{GoodItem},data(){return{value:,images:[],// 轮播图images2:[],// 导航proList:[],totalImg:}},async created(){const {data:{pageData}} await getHomeData();console.log(pageData);this.images pageData.items[1].data;this.images2 pageData.items[3].data;this.proList pageData.items[6].data;this.totalImg pageData.items[4].data[0].imgUrl;}
}
/scriptstyle langless scoped.van-nav-bar{background-color: red;/deep/ .van-nav-bar__title{color: white;font-size: 16px;}}.van-search{margin-top:12.26667vw;;}.van-swipe{width: 100%;height: 200px;img{height: 200px;}/deep/ .van-swipe__indicator{background-color: red;}}/deep/ .van-icon__image{border-radius: 8px;}.middle-sec{width: 100%;img{width: 100%;}}.goods-item{margin-bottom: 40px;}.goods-top{height: 30px;width: 100%;text-align: center;line-height: 30px;font-size: 16px;}
/style7. 搜索历史管理
在搜索页面添加历史记录管理便捷用户操作。 点击搜索按钮或底下历史记录都能进行搜索若之前没有相同搜索关键字则直接追加到最前面若之前已有相同搜索关键字则该原有关键字移除再追加这样操作的话新搜索关键字可以在搜索历史记录中提前。 显示效果如下
8. 商品详情页
商品详情页下需要通过该商品id获取对应信息及获取对应的用户评论数据。界面如下
9. 加入购物车
只有登录的用户才能加入购物车。 只需要判断token是否存在就可以发送购物车的请求如果token不存在那么给个提示引导用户登录然后再跳回来这个页面。具体实现视频链接在这加入购物车
