回看vue_shop的一些补充

原创 已于 2022-03-01 18:31:48 修改 · 276 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

于 2022-02-22 16:11:50 首次发布
本文详细讲解了在Vue项目中使用Axios进行登录验证、数据绑定、全局挂载及处理跨域问题的方法，包括登录后的token存储、路由守卫和设置请求头。同时介绍了如何在主页实现全屏布局和子元素的移动效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

登录

每个文件的作用和位置
样式：调位置居中、flex模式的应用

data绑定问题 表单ref——重置、验证

axios的引入和使用：之后就可以使用this.$ http,像ref是this.$ ref.。。，this.$ router
axios的参数有的可以使用this.LoginForm（this的使用）
将axios全局挂载到VUE原型上
axios导入2
在这里插入图片描述

关于token：
写在登陆按钮的method里面
把产生的token（登陆成功后产生的数据data.token）放到sessionStorage
在这里插入图片描述

路由导航守卫
在这里插入图片描述

另一个问题，如果用户没有登陆，不能直接通过url访问
写在router.js里面
在这里插入图片描述
把用户的每个请求的请求头 挂载上 token
写在main函数的axios导入之后
在这里插入图片描述

跨域问题：有
问题：跨域用token来进行权限验证，不跨域cookie在客户端记录session在服务器端记录
解决：配置代理 vue.config.js proxy target里面，配置后端ip就行了
在这里插入图片描述

退出

在这里插入图片描述

主页

占满全屏：height 100%
flex： 在父元素设置
在这里插入图片描述

移动位置时
1、position：absolute left：50% bottom：0 —— 写在要移动的那个子盒子的类中
transform：translate（-50%）——子盒子中
找好父盒子和子盒子

created：
这个不是按某个按钮 然后执行的操作，而是出现页面自己就有的操作
（出现某个页面，页面里面的内容）

vue-shop电商管理后台
Node.js安装报错 - npm -v 查看版本无效
04-20 330
第一天 - 项目创建 在gitee上创建仓库 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 全局安装vue-cli cnpm install --global vue-cli 创建一个基于 webpack 模板的新项目 vue init webpack vue-shop 根据package.json文件,启动项目 npm run dev vue项目如何引入element-ui ??
vue_shop2 电商后台管理面试项目准备
m0_51414342的博客
05-31 284
项目记录一：P125 添加参数-渲染添加参数的对话框
Vue3通透教程 补充TS开发环境搭建
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-27 1410
在Vue组件中，使用TypeScript可以更好地定义Props的类型，确保传入的数据符合预期。props: {msg: {},// 在这里使用props});除了Props之外，我们还可以使用TypeScript来定义Emits的类型，确保在使用时不会传错参数。} >();} >();} >();
vue电商实战-黑马-01
神zhi殇的博客
06-21 4335
文章目录项目概述1.电商系统基本业务概述2.电商系统后台管理系统的功能划分3项目的开发模式及技术选型项目初始化前端项目初始化 b站：https://www.bilibili.com/video/BV1bE411p7As?p=2 项目概述 1.电商系统基本业务概述 电商系统一般都提供了：pc端、移动app端、移动web端、微信小程序等多种终端访问方式。 eg：京东： 1.pc端：https://www.jd.com/ 2.移动web：https://m.jd.com/ （手机浏览器打开京东网站） 3.app：
vue中的一些知识
zy的博客
01-26 1312
v-model 多用于表单元素实现双向数据绑定 v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或json v-show 显示内容 ,通过display=block/none来控制元素隐藏出现 v-hide 隐藏内容 同上 v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false） v-else-if 必须和v-if连用 v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误 v-bind
Vue3+TS知识点补充
weixin_43599321的博客
05-19 2678
在 Vue 3 中，使用 `v-model` 与 Vue 2 中的用法略有不同，主要是因为 Vue 3 中有了新的 `setup()` 函数和 `reactive()` 函数，这些函数使得我们可以更方便地编写组件逻辑。 在 Vue 3 中，`v-model` 可以使用 `modelValue` 和 `update:modelValue` 两个属性来实现双向数据绑定
Vue全家桶-电商后台管理系统项目开发
weixin_45946796的博客
09-02 3313
学习目标 能够基于Vue初始化项目 能够基于Vue技术栈进行项目开发 能够使用Vue第三方组件进行项目开发 能够说出前后端分离的开发模式 1. 项目概述 1.1电商项目基本业务概述 根据不同应用场景，电商系统一般提供了PC端、移动APP、移动Web、微信小程序等多种终端访问方式 不同的终端共用同一个服务器和数据库 ...
【Vue学习笔记】黑马程序员四小时速成VUE
DingDong的博客
12-30 4108
Vue学习 Vue基础 Vue简介 JavaScript框架 简化Dom操作 响应式数据驱动 Vue官方文档： https://cn.vuejs.org https://v3.cn.vuejs.org/ *Demo1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="I
Vue3学习
m0_75165868的博客
09-26 1521
安装基于vite的项目默认不支持css预处理器，需要开发者单独安装准备定制化的样式文件/* 只需要重写你需要的即可 */$colors: (// 主色),// 成功色),// 警告色),// 危险色),'error': (// 错误色),自动导入配置这里自动导入需要深入到elementPlus的组件中，按照官方的配置文档来自动导入定制化样式文件进行样式覆盖按需定制主题配置 （需要安装 unplugin-element-plus）// 导入对应包plugins: [
ERROR in ./src/views/AboutView.vue Module Error (from ./node_modules/vue-loader/dist/index.js): At least one <template> or <script> is required in a single file component. D:\Vue\vue_shop\vue_shop2\src\views\AboutView.vue
06-29
--至少有一些内容，哪怕是一个根元素 --></template>```或者```vue<script>//至少有一个script标签，哪怕为空export default{}</script>``` 3. **修复文件**：如果发现某个.vue文件缺少这两个标签，根据组件的用途...
vue 分模块打包 脚手架_关于vue-cli脚手架中webpack配置基础文件详解
weixin_30750349的博客
12-31 611
一、前言vue-cli是构建vue单页应用的脚手架，输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用，它使得我们的代码模块化，引入一些插件帮我们完善功能可以将文件打包压缩，图片转base64等。后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要，接下来我将基于webpack3.6.0版本结合文档将文件各个击破，纯干料。重点章节点...
css的white-space: pre
qq_51035159的博客
08-22 633
简单来说，这个组件的核心就是让用户能够粘贴任何文本内容（特别是配置文件、JSON等），并且保证粘贴的内容格式完全不变，然后可以原样发送给后端处理。- white-space: pre ：这是最关键的CSS属性，确保所有空格、制表符、换行符都被保留。- 用户粘贴的内容会完整存储在 inputJson.value 中，包括所有格式字符。- 使用Vue3的 v-model="inputJson" 实现双向数据绑定。- wrap="off" ：防止浏览器自动换行，保持原始的行结构。- 聚焦时的视觉反馈。
Vue中的keep-alive是什么意思？如何使用
北京百思可瑞教育
08-25 332
Vue.js的<keep-alive>组件用于缓存不活跃组件实例，提升性能。它能保留组件状态、避免重复渲染，并支持activated和deactivated生命周期钩子。可通过include、exclude和max属性控制缓存范围，适用于Tab页、表单等需要状态保留的场景。使用时需注意组件命名、内存管理和数据更新问题，可配合vue-router的meta字段实现条件缓存。合理使用该组件能显著提升SPA应用性能。
Vue3+TypeSprict+Element Plus 表单校验
BillKu的博客
08-22 347
在 Vue3 的表单校验中，trigger是用于指定 ​​ 的关键属性，它决定了校验逻辑的执行时机。
Vue 3.6：Vapor Mode——把虚拟 DOM“编译没了”的那一刻
粉丝们务必加入微信粉丝群
08-24 326
前端AI·探索：涵盖动效、React Hooks、Vue 技巧、LLM 应用、Python 脚本等专栏，案例驱动实战学习，点击二维码了解更多详情。Vue 3 通过静态提升、Patch Flag 等优化掉了大量浪费，但仍然要在运行时构建/对比 VNode。试跑，对照包体、渲染时间、内存峰值；，不再生成 VNode 也不做运行时 diff。——很多场景就是**“一行 flag”**。编译成“直达真实 DOM 的更新函数”，代码几乎不改，页面更快、包更小。的页面来说，几乎是“白拿的收益”。
后台管理系统-16-vue3之动态路由的实现
qq_20466211的博客
08-25 174
动态添加路由函数，解决多账号路由权限问题。
[vue3] 少量全局数据共享（不用 Vuex/Pinia）
qq_14993591的博客
08-25 322
/script>Vue 3 少量全局数据共享的最佳实践（无需 Vuex/Pinia）
在 Vue 3 + TypeScript 项目中实现主题切换功能
最新发布
weixin_46389242的博客
08-26 160
本文介绍了在Vue3+TypeScript项目中实现主题切换功能的完整方案。
CORS解决跨域问题的多个方案 - nginx站点配置 / thinkphp框架内置中间件 / 纯前端vue、vite的server.proxy代理
Rudon滨海渔村的博客
08-25 293
本文实测了三种常见的前后端跨域解决方案：1）Nginx/Apache服务器配置通过添加CORS响应头成功解决跨域问题；2）ThinkPHP框架中，传统中间件AllowCrossDomain有效，而新版跨域扩展不生效；3）Vue/Vite的前端代理配置（server.proxy）在实际测试中无效。文中详细记录了Nginx配置修改项和ThinkPHP中间件的正确使用方法，并指出Vite代理方案可能存在的局限性，为开发者提供了实用的跨域问题排查参考。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值