VUE学习
Justion_
这个作者很懒,什么都没留下…
展开
-
37 ,导航守卫 ,token过期时间
router--index.jsrouter.beforeEach((to,from,next)=>{ let nextRoute = ['Payment','Cart','Path','Order','pathIndex','path-list']; //是否是登录中 let userInfo = JSON.parse( localStorage.getItem('teaUserInfo') ); //当前进入的页面,是不是需要验证哪些页面原创 2022-05-10 12:59:07 · 221 阅读 · 0 评论 -
36,对接支付宝沙箱 交易状态 支付后
Order.vue<template> <div class="order container"> <header> <i class="iconfont icon-fanhui" @click="$router.back()"></i> <span>提交订单</span> <i class="iconfont icon-kefu"></i>原创 2022-05-10 12:17:46 · 932 阅读 · 0 评论 -
35,提交订单页
Cart.vue<template> <div class="cart container"> <header> <i class="iconfont icon-fanhui" @click="$router.back()"></i> <span>购物车</span> <span @click="isNavBar" v-text="isNavStatus ? '完成原创 2022-05-10 10:54:31 · 289 阅读 · 0 评论 -
34。编辑地址,删除地址
store---modules----indeximport Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);import user from './modules/user.js'import cart from './modules/cart.js'import path from './modules/path.js'import order from './modules/order.js'export defau原创 2022-04-24 17:22:31 · 488 阅读 · 0 评论 -
33,我的地址,添加地址页面布局
我的地址页面布局配置路由 { path: "/path", name: "Path", children:[ { path: "/", name: "pathIndex", component: () => import("../views/path/Path-Index.vue"), }, { path: "path-l原创 2022-04-16 09:10:03 · 282 阅读 · 0 评论 -
32,删除购物车 修改购物车
mutations-types.js//购物车export const CART_LIST = "cartList";export const CHECK_ALL = "checkAll";export const UN_CHECK_ALL = "unCheckAll";export const CHECK_ITEM = 'checkItem'cart.jsimport { CART_LIST, CHECK_ALL, UN_CHECK_ALL, CHECK_ITEM,原创 2022-03-29 21:43:15 · 577 阅读 · 0 评论 -
31,购物车的全选,单选 。购物车总的件数,和总计
cart.vue async getData() { let res = await http.$axios({ url: "/api/selectCart", method: "post", headers: { token: true, }, }); res.data.forEach((v) => { v["checked"] = true;原创 2022-03-23 21:44:31 · 336 阅读 · 0 评论 -
30,购物车用户登录需要刷新才能显示 vue页面缓存和不缓存的方法 无数据显示页 路由跳转this.$router.replace。push.go的区别
没有数据 显示 没有数据出现错误把Tabbar.vuemethods: { switchTab(path) { //判断是否点击的是同一个路由 if (this.$route.path == path) return; //对应跳转页面 this.$router.replace(path); }, },replace 换成 push1.this.$router.push()描述:跳转到不同的url,但...原创 2022-03-22 22:34:14 · 754 阅读 · 0 评论 -
29,vuex的更改 和当前用户购物车数据
store文件下mutations-types.jsexport const USER_LOGIN = "userLogin";export const INIT_USER = "initUser";export const Login_OUT = "loginOut";改成小写app.vueexport default { created() { this.$store.commit("initUser"); },};刷新 一样使用加入购物..原创 2022-03-22 21:46:53 · 181 阅读 · 0 评论 -
28.token
什么是token:token是一个令牌,用来验证用户的。作用(场景) : 验证用户 token是后端生成的 , 并且token是不能重复的token使用流程: 1.客户端使用用户名跟密码请求登录 2.服务端收到请求,去验证用户名与密码 3.验证成功后,服务端会签发一个 Token,再把这个 Token 发送给客户端 4.客户端收到 Token 以后可以把它存储起来,比如放在 Cookie 里或者 Local Storage ...原创 2022-03-22 20:22:13 · 11149 阅读 · 0 评论 -
27.购物车布局
cat.vue<template> <div class="cart container"> <header> <ul> <li @click="goBack"><i class="iconfont icon-fanhui"></i></li> <li><span>购物车</span></li>原创 2022-03-22 19:36:46 · 121 阅读 · 0 评论 -
25.找回密码
配置路由并新建相识的文件{ path: "/recovery", name: "Recovery", children: [ { path: "/", name: "index", component: () => import("../views/recovery/RecoveryIndex.vue"), }, { path: "btn", name: "原创 2022-03-13 14:57:50 · 139 阅读 · 0 评论 -
24,注册
前台页面<template> <div class="login container"> <header> <ul> <li @click="goback"><i class="iconfont icon-fanhui"></i></li> <li><span>用户注册</span></li>原创 2022-03-13 12:49:35 · 129 阅读 · 0 评论 -
23.使用腾讯云短信接口发送短信 做登陆功能
从图一到图二 <button :disabled="disabled" @click="sendCode">{{ codeMsg }}</button>data里面 disabled: false, codeNum: 8, codeMsg: "获取短信验证码", code: "",sendCode方法里 //点击获取短信验证码 sendCode() { //验证 if (!this....原创 2022-03-10 17:12:53 · 1781 阅读 · 0 评论 -
22前面验证和请求后端验证
data() { return { userTel: "", //用户输入的手机号 userpwd: "", //用户输入的验证码 //验证规则 rules: { //手机号验证 userTel: { rule: /^1[123456879]\d{9}$/, msg: "手机号不能为空,并且为11位", }, //密码的验证规则 ..原创 2022-03-09 08:31:20 · 659 阅读 · 0 评论 -
20.进入商品详情页Detail
like.vue组件中给li添加一个点击事件 @click="goDetail"对应的方法methods:{ goDetail(){ this.$router.push({ path:'/detail' }) } },对应home页面:添加click:true this.$nextTick(() => { this.oBetterScroll = new BetterScorll(t.原创 2022-03-04 23:04:27 · 452 阅读 · 0 评论 -
19,实现滑动和商品分类左右连动
list.vue:<template> <div class="list"> <header> <div class="returns"> <i class="iconfont icon-fanhui"></i> </div> <div class="search"> <i class="iconfont icon-Rec原创 2022-02-24 22:32:46 · 235 阅读 · 0 评论 -
18.分类页布局 加请求后台数据 渲染页面
sass的安装npm install sass-loader@7.3.1 --save-devnpm install --save-dev node-sass原创 2022-02-24 20:19:35 · 81 阅读 · 0 评论 -
17.搜索商品的价格和销量排序 功能 的完善 图片懒加载
1. 在search-list.vue里的data里新建:searchList:{} data() { return { //后台返回的值传给它 goodsList: [], searchList: { currentIndex: 0, data: [ //status:0都不亮,等于1 上箭头亮 等于2 下箭头亮 { name: "综合", key: "zh" },原创 2022-02-21 21:51:30 · 491 阅读 · 0 评论 -
15,axios的二次封装
home页面引入import { Indicator } from "mint-ui";methods: { async getData() { Indicator.open("加载中..."); let res = await axios({ url: "/api/index_list/0/data/1", }); this.items = Object.freeze(res.data.data.topBar);原创 2022-02-20 19:41:58 · 229 阅读 · 0 评论 -
muse-ui 和mintui ,less的安装使用
npm i muse-ui -S再启动项目报错是因为less 的版本太高了改成 这个"less": "^3.12.2","less-loader": "^6.2.0",再cnpm i在public下的index引入字体和图标<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"><link r.原创 2022-02-19 19:03:54 · 401 阅读 · 0 评论 -
13,子路由搭建和搜索详情
search 路由下新建:search.vue 内容移到 search-index.vuesearch-index.vue:<template> <div class="search-index"> <Header /> <section> <div class="search-history"> <h2> <i class="iconfo.原创 2022-02-18 20:58:09 · 123 阅读 · 0 评论 -
12,搜索页面布局
views下新建Search.vue页 并配置路由components下新建search 下新建header.vue组件<template> <header> <div class="search-return" @click="goBack"> <i class="iconfont icon-fanhui"></i> </div> <div class="search-main.原创 2022-02-17 22:02:27 · 438 阅读 · 0 评论 -
iconfont图标引入并使用
选 好的想要的图标,到购物车。到下载到本地css里的。url路径改到fonts这个然后到项目里直接引用显示原创 2022-02-17 21:55:50 · 161 阅读 · 0 评论 -
11, 点击 切换top
top的切换在server 后台写两个接口每 0, 1, 2,3,对应top里面的一栏这边写了两个用于项目测试将top中每一栏所需要的数据 复制到接口中比如: var express = requir...原创 2022-02-17 19:33:46 · 387 阅读 · 0 评论 -
10.页面布局,猜你喜欢
新建组件like<template> <div class="like"> <Card> <span>猜你喜欢</span> </Card> <ul> <li v-for="(item, index) in LikeList" :key="index"> <h2><img :src="item.imgUrl" alt=""原创 2022-02-15 23:08:43 · 253 阅读 · 0 评论 -
9.better-scroll 和ref的使用
解决一些问题h5布局整个复元素要加一个100%的宽vw 定死的高度vh 使用弹性盒子,头,底bar 固定.Header 和Home页 里面的固定定位删掉position: fixed;top: 0;left: 0;.ly-tab {position: fixed;top: 1.2rem;left: 0;}然后在Home中给加一个固定定位给.homeswiper组件里面的margin-top: 2.5rem; 删除在home页sectio...原创 2022-02-15 22:21:54 · 339 阅读 · 0 评论 -
8爆款推荐样式布局
home组件文件夹Recommend.vue<template> <div class="recommend"> <Card /> <ul> <li v-for="(item, index) in RecommendList" :key="index"> <h2> <img :src="item.imgUrl" alt="" /> &l原创 2022-02-15 20:27:42 · 260 阅读 · 0 评论 -
5,头部Header组件 ly-tab插件的使用
components 下新建home文件夹添加header.vue组件<template> <header> <h1>荼七网</h1> <div class="search"> <i class="iconfont icon-RectangleCopy"></i> <span>猜你喜欢</span> </div> <原创 2022-02-14 22:23:24 · 1350 阅读 · 6 评论 -
用火狐浏览器快速扒网页图片素材
进入网站ctrl + i全选,然后另存为指定文件夹就OK原创 2022-02-13 22:44:56 · 2217 阅读 · 0 评论 -
4.vue.config.js文件常用配置详解
module.exports = {// 所有 webpack-dev-server 的选项都支持 devServer: { open: true, // 设置浏览器自动打开项目 port: 1880, // 设置端口 proxy: { // 设置代理 '/api': { target: 'http://101.15.22.98', ...原创 2022-02-13 22:27:11 · 504 阅读 · 0 评论 -
2.开发者git 操作
一,git clone http://55555555555555在主分支下克隆代码指定分支克隆代码二,git clone -b 分支名称 地址三,是在远程的dev分支下,但是上传代码要在某一个分支上配置本地身份git config --global user.name "J11111111"git config --global user.email "xu111@163.com"1.dev分支看下日志 git log记录hash :09c233350d1bff原创 2022-02-09 23:56:29 · 182 阅读 · 0 评论 -
git 上传到gitee
简易的命令行入门教程:Git 全局设置:git config --global user.name "justin"git config --global user.email "x960657@163.com"创建 git 仓库:mkdir myblogscd myblogsgit inittouch README.mdgit add README.mdgit commit -m "first commit"git remote add origin git@gitee.com.原创 2022-02-04 12:31:20 · 152 阅读 · 0 评论 -
vue项目格式设置不要分号 和双引号改成单引号
在项目根目录下新建.prettierrc添加如上返回 重新格式化文件原创 2021-12-31 21:56:30 · 1240 阅读 · 0 评论 -
vue,下服务器 合并运行 配置快捷运行方案
npm install -g concurrentlynpm install -g nodemon"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "dev": "concurrently \"npm run serve\" \"nodemon server/index.js\"" },————————————————...原创 2021-12-01 22:48:30 · 496 阅读 · 0 评论