Vue2-黑马(十一)

这篇具有很好参考价值的文章主要介绍了Vue2-黑马(十一)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录:

(1)vue2-联调准备

 (2)vue2-登录实战-国际化

 (3)vue2实战-登录-login-index.vue


(1)vue2-联调准备

登录这个请求,并不是发给后台的,现在还没后台,它发给9527,9527里面也有一段代码,返回假的moke响应,包含了登录的模拟数据

Vue2-黑马(十一)

它会找到mock文件夹:响应的代码在user.js里面:

Vue2-黑马(十一)

获取用户的详细信息:

Vue2-黑马(十一) 接收用户的请求,查看查询参数,返回对应的成功失败信息 Vue2-黑马(十一)

 Vue2-黑马(十一)

 怎么演示是发送给mock下的请求呢:点击网路,在点击登录按钮:查看发送的请求

Vue2-黑马(十一)

发送2个请求一个login,一个info 

 Vue2-黑马(十一)

 通过9527地址可以看到发送的是9527,没有发送给后端,后面还有user/login可以在项目中搜索一下,可以找到在那个文件中登录的Vue2-黑马(十一)

 搜到2个:第二个是发送请求的Vue2-黑马(十一)

axios的封装: 

Vue2-黑马(十一) Vue2-黑马(十一)

mock文件夹下的user.js是用来接收请求和处理请求的

Vue2-黑马(十一)

我们如果不想把这个请求发送给他自己啦,想要发送给后端服务器:需要做一个前后端的连调:在发送请求的源头开始找,在axios中找:

发送axios的请求: 加的前缀

Vue2-黑马(十一)

 搜索这个:选择第一个登录请求时的dev-apiVue2-黑马(十一)

只要把这个改啦:那么以后axios发送请求的地址都改啦 

 Vue2-黑马(十一)

 Vue2-黑马(十一)

 修改之后重启项目服务器,在次发送请求查看地址

Vue2-黑马(十一)

 开发后端的代码:Vue2-黑马(十一)

Vue2-黑马(十一)

我们想把路径中的vue-element-admin进行替换 

Vue2-黑马(十一)

 在项目中查询进行替换:

 Vue2-黑马(十一)

 Vue2-黑马(十一)

当输入正确的密码:前端有一个校验:自己设置的密码小于3,它会有校验,我们可以关掉

Vue2-黑马(十一)

 在index.vue:

Vue2-黑马(十一)

 修改一下校验的代码:Vue2-黑马(十一)

 重新登录就登陆成功啦:有一个请求list没有写,失败啦Vue2-黑马(十一)

 在axios创建中,请求拦截器,在每次发送请求的时候多带一个请求头,请求头来携带tocken,每次要把tocken发送给服务器,服务器根据你的tocken做身份校验

加这个tocken的名子交X-tockenVue2-黑马(十一)

 服务端这边写的登录拦截器:的tocken名字跟前端的不一样:Vue2-黑马(十一)

 修改一下前端:Vue2-黑马(十一)

 (2)vue2-登录实战-国际化

下面学习登录的流程:

页面的是国际话的,可以选择对应的语言,我们如果要子啊index.vue的登录页面找登录这个字的按钮时找不到的按文字去搜索是搜不到的

Vue2-黑马(十一)

Vue2-黑马(十一)

 我们项目采用element ui   按钮使用el-button我们根据标签的名字去找才能找到对应的地方,第一按钮,有一个事件查看

Vue2-黑马(十一)

 Vue2-黑马(十一)

国际化:我们这个系统中使用的国际化是使用的vue中的一个插件名字叫做vue-i18n

 我们做这个阿国际化,我们需要准备好国际化的资源文件,说白了把这些文字做好翻译几种语言的个一份,这些文件叫做资源文件,

Vue2-黑马(十一)

有四种语言的国际化文件,把界面上所有需要翻译的部分做成资源文件每种语言一份,如果想要更多的语言多翻译几份

Vue2-黑马(十一)

 我们在代码里怎么用着国际化的信息呢?我们使用文本插值{{}}使用$t函数加一个key去资源文件中去读取

Vue2-黑马(十一)

Vue2-黑马(十一)

 登录页面里并不是所有信息都做了国际化比如:下面函数的验证提示的是英语,没有做国际化怎么让这段信息做国际化呢

Vue2-黑马(十一)

 在英文中加一项:提示错误的国际化

Vue2-黑马(十一)

在中文中加一项:

Vue2-黑马(十一)

使用$t函数提换掉原来写死的文字:

Vue2-黑马(十一)

测试:密码输入2位,在中文情况下

Vue2-黑马(十一) 切换到英文:输入小于2位

Vue2-黑马(十一)

 (3)vue2实战-登录-login-index.vue

 起名字的话也是要加一个ref的属性:Vue2-黑马(十一)

Vue2-黑马(十一)

 Vue2-黑马(十一)

当点击了登录按钮之后,会执行登录方法:页面都是由小组件组成的,怎么找到组件呢?

this.$refs来帮助我们找起了名字的组件,它是一个对象

this.$refs.loginForm找到表单组件在调用里面.validate验证函数,this.loading:true让按钮加载,下面是发送请求的成功后者失败后this.loading:false加载关闭

this.$router.dispatch:这是调用vuex的actions:第一个参数是actions的名字,第二个是actions的额外参数:就是表单数据,其实与后台服务器通信是在acions里面进行的

Vue2-黑马(十一)

 看acions的代码,在store目录下的index代码 

Vue2-黑马(十一) 

我们修改一下请求代码,不使用.then的异步发送,使用同步发送:修改以后就没有那么多的函数嵌套啦,this.$router.push()  :进行页面跳转

Vue2-黑马(十一)

使用vuex生成 

 Vue2-黑马(十一)

 使用...mapActions()获取vuex中actions中的函数放到methods中vuex中分模块的要指明那个模块,指定生成的方法,放在methods中

Vue2-黑马(十一)

 

Vue2-黑马(十一)

 Vue2-黑马(十一)

 最后的方法Vue2-黑马(十一)

Vue2-黑马(十一) 

 测试登录:能够正常登录成功

push()跳转到哪里:有对象中的path决定 逻辑或的运算符 || 前面表达式为truthy的话它以前面作为最终的结果,如果前面是Falsy以后面表达式的结果

this.redirect如果有值的话使用this.redirect的否则跳转到/ 

Vue2-黑马(十一)

 

在一个页面charts/line地址下注销:

Vue2-黑马(十一)

 注销之后跳转到登录页面:地址带上了redirect=...Vue2-黑马(十一)

 当在次登录的时候由于带着redirect=...带了redirest的参数登录的时候以redirect为准,没有跳转到/根目录下去;点击登录直接跳转到这个页面

Vue2-黑马(十一)

 登录的时候,没有redirect参数:跳转到根目录:

Vue2-黑马(十一)

 跳转到根/路由又做了一次重定向

Vue2-黑马(十一) 文章来源地址https://www.toymoban.com/news/detail-415707.html

到了这里,关于Vue2-黑马(十一)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • SpringBoot2+Vue2实战(十一)bug解决

    修改路由 router/index.js router/index.js 1.新建页面 2.页面添加菜单 3.给管理员分配菜单 3.重新登录 4.点进刚分配的菜单 5.404 router/index.js store/index.js 优化创建路由,防止频繁创建

    2024年02月13日
    浏览(43)
  • 09 使用Vue+el-form+form-validate实现管理端登录接口联调前准备工作实战

    这是《Vue + SpringBoot前后端分离项目实战》专栏的第7篇博客,感谢你能从成千上万篇博客中打开这一篇,和我一起学习前端开发实战知识,让我们一起开始吧。 目录 前言 一、上节回顾和本节介绍 1. 上节回顾

    2024年02月16日
    浏览(40)
  • nginx vue2+webpack 和 vue3+vite 配置二级目录访问

    我们开发中会遇到这样的需求,让我们用服务器nginx部署一个用域名的二级目录来访问项目 https:xxx/二级目录/ 来放访问项目 目录 思路 1、nginx配置(vue2 和 vue3配置的nginx相同) 2、vue2+webpack的配置 (1)vue.config.js配置 (2)router配置 3、vue3+vite的配置 (1)vite.config.js配置 (

    2024年02月09日
    浏览(57)
  • Vue系列第四篇:Vue2 + Element开发登录页面

           Vue开发中Element是一个比较受欢迎的界面库,实际开发中Vue2搭配Element UI开发,Vue3搭配Element plus开发,今天就用Vue2 + Element来开发登录页面。 目录 1.Element UI介绍 1.1官网 1.2element-ui安装 2.开发环境准备 2.1core-js安装 2.2浏览器自动打开和关闭useEslint校验配置 2.3Element UI全局

    2024年02月16日
    浏览(46)
  • 基于vue2的uniapp 微信一键登录,获取手机号

    基于vue2的uniapp商城项目中的微信一键登录功能 (后台是node.js写的) 目前文档中该接口针对非个人开发者,所以只能用文档中提供的测试号实现一下功能。 我在实现微信一键登录的时候,获取手机号总是失败。 我浏览的是微信小程序的文档微信小程序开发文档 实现获取手机

    2024年02月09日
    浏览(55)
  • 【h5+微信小程序】vue2实现h5扫码登录功能

    需要实现在同域名的h5页面上增加一个微信扫码登录的功能,如果用户已经有小程序的账号,可以直接登录。 使用 :vue2+微信小程序原生开发 可以实现上述功能的 前提 是:同一用户,对同一个微信开放平台下的不同应用,UnionID是相同的。域名已经配置。 可以用什么来区分

    2024年02月14日
    浏览(66)
  • vue2和elementUI 打造落日余晖登录页和滑块校验

    标题很夸张,实则是AI的功能,今天咱也搞一个登录页,其实满简单的一个东东,大家也都会用到,本次仅限前端,没有任何后台交互,技术 vue 、 vue-router 、 element-ui ,因为背景图是落日,所以就叫它 落日余晖登录页 吧 使用指令直接构建的,选择vue2版本 构建后的项目,删

    2024年02月05日
    浏览(47)
  • Vue系列第五篇:Vue2(Element UI) + Go(gin框架) + nginx开发登录页面及其校验登录功能

       本篇使用Vue2开发前端,Go语言开发服务端,使用nginx代理部署实现登录页面及其校验功能。 目录 1.部署结构 2.Vue2前端 2.1代码结构 2.1源码 3.Go后台服务 3.2代码结构 3.2 源码 3.3单测效果 4.nginx 5.运行效果 6.问题总结   index.html !DOCTYPE html html   head     meta charset=\\\"utf-8\\\"     m

    2024年02月15日
    浏览(57)
  • vue2+vant2+rem+axios+钉钉自动登录 h5模板

    请轻轻的点一下这里~ Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。 本示例 Node.js 14.17.0 对应配置 .env.staging config/env.staging.js 对应配置 .env.production config/env.production.js package.json 里的 scripts 配置 serve stage build ,通

    2024年02月03日
    浏览(32)
  • vue2项目中调取登录接口登录以后获取个人信息以后,储存在哪里,怎么在不同的页面展示想要的信息?

    在Vue2项目中,可以将个人信息存储在Vuex状态管理中或者浏览器的本地存储中,具体取决于项目的需求和规模。 1. Vuex状态管理 在Vuex中定义一个user模块,用于存储用户信息,可以在登录成功后将用户信息存储到该模块中。 // store/user.js    const state = {          userInfo: \\\'\\\'  

    2023年04月25日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包