03-vuePC端项目(注册，发送请求获取数据用async,await，关掉eslint的检查，默认、具名、作用域插槽)

2024-03-14 04:48
文章标签 项目 请求 注册 03 检查 默认 发送 eslint 作用域 async 获取数据 await 插槽 关掉 具名 vuepc

本文主要是介绍03-vuePC端项目(注册，发送请求获取数据用async,await，关掉eslint的检查，默认、具名、作用域插槽)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

完成注册页面

今天主要就是完成注册页面(Dialog对话框),跟昨天一样也是用elementui做一个表单的框架出来发送请求并且完成注册
主要参考elementui的文档

register.vue(注册组件是登录组件的子组件)
<template><div class="register"><el-dialog  center :visible.sync="dialogVisible" width="600px"><div slot="title" class="title">注册</div><el-form :model="registerForm" :rules="rules" label-width="100px" ref="registerRef"><!-- 头像上传 --><el-form-item label="头像" prop="avatar"><!-- action 上传文件的url地址,name就是上次文件时候的参数 --><el-uploadclass="avatar-uploader":action="uploadAction"name="image":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"><img v-if="imageUrl" :src="imageUrl" class="avatar" /><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload></el-form-item><!--  --><el-form-item label="昵称" prop="username"><el-input v-model="registerForm.username"></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="registerForm.email"></el-input></el-form-item><el-form-item label="手机" prop="phone"><el-input v-model="registerForm.phone"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="registerForm.password" show-password></el-input></el-form-item><el-form-item label="图形码" prop="code"><el-row><el-col :span="17"><el-input v-model="registerForm.code"></el-input></el-col><el-col style="margin-left:10px" :span="6"><img class="captcha" :src="codeURL" @click="getCode" alt /></el-col></el-row></el-form-item><el-form-item label="验证码" prop="rcode"><el-row><el-col :span="17"><el-input v-model.number="registerForm.rcode"></el-input></el-col><el-col style="margin-left:10px" :span="6"><el-button @click="getRcode">获取用户验证码</el-button></el-col></el-row></el-form-item></el-form><span slot="footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="submit">确 定</el-button></span></el-dialog></div>
</template><script>
export default {name: "Register",//   props: ["isShow"],data() {return {// 头像的请求地址uploadAction: process.env.VUE_APP_BASEURL + "/uploads",// 要上传头像的srcimageUrl: "",// 图形码的请求地址codeURL: process.env.VUE_APP_BASEURL + "/captcha?type=sendsms",dialogVisible: false,//   dialogVisible: this.isShowregisterForm: {// 这里面的数据，将来是要提交给服务器username: "",phone: "",email: "",avatar: "", //头像地址password: "",code: "", //图形码rcode: "" //验证码},//校验规则rules: {avatar:[{ required: true, message: "头像不能为空", trigger: "blur" }],username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],email: [{required: true,validator: (rule, value, callback) => {if (!value) {callback(new Error("邮箱不能为空"));return;}// 邮箱的正则const reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/; //邮箱正则if (!reg.test(value)) {return callback(new Error("邮箱不合法!"));}callback();},trigger: "blur"}],phone: [{required: true,validator: (rule, value, callback) => {if (!value) {return callback(new Error("手机号不能为空"));}const reg = /^1[3456789][0-9]{9}$/; //手机号正则if (!reg.test(value)) {return callback(new Error("手机号不合法"));}callback();},trigger: "blur"}],password: [{ required: true, message: "密码不能为空", trigger: "blur" },{ min: 6, message: "长度在不能小于6个字符", trigger: "blur" }],code: [{ required: true, message: "图形码不能为空", trigger: "blur" },{ min: 4, max: 4, message: "图形码必须是4位", trigger: "blur" }],rcode: [// { required: true, message: '验证码不能为空', trigger: 'blur' },// { min: 4,max:4,message: '验证码必须是4位', trigger: 'blur' }{required: true,validator: (rule, value, callback) => {if (!value) {return callback(new Error("验证码不能为空"));}if (!Number.isInteger(value)) {callback(new Error("请输入数字值"));}callback();},trigger: "blur"}]}};//   watch: {//       isShow:function(newValue){//           this.dialogVisible=newValue//       }//   },},methods: {getCode() {this.codeURL =process.env.VUE_APP_BASEURL +"/captcha?type=sendsms&r=" +Math.random() * 999;},//用async await方式,就不用then了async getRcode() {const res = await this.$axios.post("/sendsms", {code: this.registerForm.code,phone: this.registerForm.phone});if (res.data.code == 200) {this.registerForm.rcode = res.data.data.captcha;} else {//如果错误就弹出错误弹出框提示你this.$message.error(res.data.message);//   并且重新刷新获得新的图形码this.getCode();}// this.$axios.post("/sendsms", {//   code: this.registerForm.code,//   phone: this.registerForm.phone// })// .then(res => {//   // console.log(res);//   //    把获取回来的验证码输入在rcode输入框中//   if (res.data.code == 200) {//     this.registerForm.rcode = res.data.data.captcha;//   }else{//       //如果错误就弹出错误弹出框提示你//       this.$message.error(res.data.message);//     //   并且重新刷新获得新的图形码//        this.getCode()//   }// });},//头像上传成功后的回调函数handleAvatarSuccess(res) {//把返回的路径给imageUrl赋值,让注册页面显示刚上传的头像this.imageUrl = process.env.VUE_APP_BASEURL + "/" + res.data.file_path;//给registerForm中的avatar模型赋值this.registerForm.avatar = res.data.file_path;},// 头像上传之前的回调函数beforeAvatarUpload(file) {const isImage =file.type === "image/jpeg" ||file.type === "image/gif" ||file.type === "image/png";const isLt2M = file.size / 1024 / 1024 < 2;if (!isImage) {this.$message.error("上传头像图片只能是 JPG/png/ 格式!");}if (!isLt2M) {this.$message.error("上传头像图片大小不能超过 2MB!");}//如果是要进行上传文件的请求,我们必须返回true,才能进行文件上传return isImage && isLt2M;},// 点击确定按钮对整个form表单做最后一次校验submit() {this.$refs.registerRef.validate(async valid => {if (!valid) return;const res = await this.$axios.post("/register", this.registerForm);console.log(res);//请求成功后if (res.data.code == 200) {// 弹出登录成功的提示框this.$message({message: "注册成功",type: "success"});//  请求成功后要把当前窗口消失this.dialogVisible = false;} else {this.$message.error(res.data.message);}});}}
};
</script><style lang="less">
//这里我就不复制了太多了
</style>

项目说明:在这里插入图片描述

注册

UI界面搭建

  • el-dialog

    • 弹出框
    • 当我们点击了登录页面的注册按钮时候，我们就需要把那个Dialog显示出来
    • el-dialog的显示和隐藏，是由它的一个属性:visible
    • 当我们需要自定义title或是footer的时候，我们需要使用到具名插槽
                     <div slot="title"> 定义标题的内容</div><div slot="footer">自定义底部的内容</div>//现在我们是使用el-dialog中提供好的名字叫做 title 和 footer的插槽

  • el-form,表单

  • 点击登录页面的注册按钮，显示register组件

    • 1、先让register组件成为login组件的子组件
    • 2、使用子组件的时候，给子组件设置一个 ref 属性
    • 3、点击注册按钮的时候，通过 refs 拿到子组件的实例，然后更改子组件中模型的数据 this.$refs.registerRef.dialogVisible = true
获取用户输入的内容
  • el-form model
  • el-form-item 里面的 el-input 的 v-model 来实现
  • 步骤：
    • 1、在模型中定义模型对象
      并且模型中的属性，要结合后台接口文档来看，要跟后台接口文档中的属性保持一致【因为传递过去的属性，要和后台要求的一致】
    • 2、给el-form绑定一个 model 属性
    • 3、给el-form-item里面的 el-input 进行双向数据绑定
    • 4、如果它自带的规则，无法满足我们的需求，我们就可以来自定义规则
验证
  • el-form rules
  • el-form-item prop
  • 步骤
    • 1、定义好一个模型，它是一个对象 rules，里面可以写一个一个的校验规则
    • 2、记得给 el-form 绑定 rules 这个属性
    • 3、记得给 el-form-item 设置 prop 这个属性才行，这样的校验规则才起作用
完成刷新图形码的功能
  • 更改图形验证码的地址,发送的url地址后面加随机参数
头像上传

注意点: elementui中的头像上传不是使用的axios,用的input输入框中的action以及name属性搭配使用
在这里插入图片描述

注册

           发送请求,把registerForm中的值带过去为参数



如何把之前通过promise.then获取数据的方式，改成通过 async & awiat 来获取数据

  • 1、我们要把我们的函数，变成一个异步函数
  • 2、在我们异步函数内部，就可以使用 await 的方式来获取请求的数据
  • 3、注意，我们在使用 async & await 的时候，一定要成对使用

关掉eslint的检查

  • 1、在项目根目录创建一个文件 vue.config.js 【一定要创建在项目根目录，并且名字也必须是 vue.config.js】
  • 2、在vue.config.js中，编写代码，关闭eslint的检查,默认是true
module.exports = {// 选项...lintOnSave: false
};
  • 3、因为更改了配置文件，所以大家一定要记得，重新运行项目，它才会起作用

插槽

  • el-dialog
  • 注意点
    • 例如：elementui的轮播图
    • 插槽一般用于父子组件中
      一般我们把插槽定义在子组件中
      在父组件中，去写我们的内容，替换子组件中插槽
  • 作用: 占位和替换
  • 默认插槽，就像是子组件有一个装东西的solt口子，父组件中导入子组件的时候在子组件标签内填入的东西就会填满那个口子
    • 没有名字
    • 步骤
      1、先整一个父组件和子组件
      2、在父组件中使用子组件

child.vue子组件:

<template><div id="childId">子组件<br/><!-- 占位和将来被替换，有点类似于 router-view --><slot /></div>
</template>

parent.vue父组件:

<template><div id="parentId">父组件<hr><child><!-- <span style="color:red;">测试默认操作</span> --><!-- <h1>111</h1> --><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589894473467&di=2a3113bedacd5e5c08d856f2a00bc758&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201704%2F11%2F20170411194843_HGBrC.thumb.700_0.jpeg" alt=""></child></div>
</template><script>
import child from './child'
export default {components: {child}
}
</script>

在这里插入图片描述

  • 具名插槽，就像是子组件有一个装东西的并且还有名字solt口子，父组件中导入子组件的时候在子组件标签内找到对应的名字的口子并往里面填入东西
    • el-dialog中的标题
    • 插槽有名字，我们就叫具名插槽

child.vue子组件:

<template><div id="childId">子组件<br /><div style="border: 1px solid red;"><slot name="title"/></div><br /><div style="border: 1px solid green;"><slot /></div><br /><div style="border: 1px solid yellow;"><slot name="footer"/></div></div>
</template>

parent.vue父组件:

<template><div id="parentId">父组件<hr><child><div slot="title">标题</div>内容<span slot="footer"> 底部 </span></child></div>
</template><script>
import child from './child'
export default {components: {child}
}
</script>

在这里插入图片描述

  • 作用域插槽比如 el-table中就有使用
    • 使用：
      父组件中：接收來自子组件的值：
       <template slot-scope="scope"> scope.row.xxx  </template>
    父组件中， 把子组件中的值，传递给父组件：
        <!-- row是属性的名字，传递的时候写的啥名字，就收的时候，也要写成啥名字 --><td><slot :row="要传递的值" /></td>

mytable.vue子组件:

<template><div><table border="1"><tr><th>名称</th><th>地址</th><th>状态</th></tr><tr v-for="(item, index) in data" :key="index"><td>{{item.name}}</td><td>{{item.address}}</td><!-- 把遍历到这一行的数据,传递给父组件 --><td><slot :row="item" /></td></tr></table></div>
</template><script>
export default {props: {data: {type: Array,default: function() {return [];}}}
};
</script><style>
</style>

parent.vue父组件:

<template><div>我是父组件<br /><!-- 把list传给子组件 --><mytable :data="list"><template slot-scope="scope"><span :style="{color:scope.row.status===0?'green':'red'}">{{scope.row.status===0?'好':'坏'}}</span></template></mytable></div>
</template><script>
import mytable from "./components/mytable";
export default {components: {mytable},data() {return {list: [{ id: 1, name: "腾讯", address: "深南大道110号", status: 1 },{ id: 2, name: "华为", address: "坂田大道220号", status: 0 },{ id: 3, name: "大疆", address: "深圳湾120号", status: 0 }]};}
};
</script><style>
</style>

在这里插入图片描述

这篇关于03-vuePC端项目(注册，发送请求获取数据用async,await，关掉eslint的检查，默认、具名、作用域插槽)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/807240。

相关文章

springboot项目中常用的工具类和api详解

springboot项目中常用的工具类和api详解

《springboot项目中常用的工具类和api详解》在SpringBoot项目中,开发者通常会依赖一些工具类和API来简化开发、提高效率,以下是一些常用的工具类及其典型应用场景,涵盖Spring原生... 目录1. Spring Framework 自带工具类(1) StringUtils(2) Coll
阅读更多...
Spring Boot项目部署命令java -jar的各种参数及作用详解

Spring Boot项目部署命令java -jar的各种参数及作用详解

《SpringBoot项目部署命令java-jar的各种参数及作用详解》：本文主要介绍SpringBoot项目部署命令java-jar的各种参数及作用的相关资料,包括设置内存大小、垃圾回收... 目录前言一、基础命令结构二、常见的 Java 命令参数1. 设置内存大小2. 配置垃圾回收器3. 配置线程栈大小
阅读更多...
鸿蒙中Axios数据请求的封装和配置方法

鸿蒙中Axios数据请求的封装和配置方法

《鸿蒙中Axios数据请求的封装和配置方法》：本文主要介绍鸿蒙中Axios数据请求的封装和配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1.配置权限 应用级权限和系统级权限2.配置网络请求的代码3.下载在Entry中 下载AxIOS4.封装Htt
阅读更多...
Spring Boot项目中结合MyBatis实现MySQL的自动主从切换功能

Spring Boot项目中结合MyBatis实现MySQL的自动主从切换功能

《SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能》：本文主要介绍SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能,本文分步骤给大家介绍的... 目录原理解析1. mysql主从复制（Master-Slave Replication）2. 读写分离3.
阅读更多...
springboot filter实现请求响应全链路拦截

springboot filter实现请求响应全链路拦截

《springbootfilter实现请求响应全链路拦截》这篇文章主要为大家详细介绍了SpringBoot如何结合Filter同时拦截请求和响应,从而实现​​日志采集自动化,感兴趣的小伙伴可以跟随小... 目录一、为什么你需要这个过滤器？​​​二、核心实现：一个Filter搞定双向数据流​​​​三、完整代码
阅读更多...
AJAX请求上传下载进度监控实现方式

AJAX请求上传下载进度监控实现方式

《AJAX请求上传下载进度监控实现方式》在日常Web开发中,AJAX（AsynchronousJavaScriptandXML）被广泛用于异步请求数据,而无需刷新整个页面,：本文主要介绍AJAX请... 目录1. 前言2. 基于XMLHttpRequest的进度监控2.1 基础版文件上传监控2.2 增强版多
阅读更多...
Kotlin 作用域函数apply、let、run、with、also使用指南

Kotlin 作用域函数apply、let、run、with、also使用指南

《Kotlin作用域函数apply、let、run、with、also使用指南》在Kotlin开发中,作用域函数（ScopeFunctions）是一组能让代码更简洁、更函数式的高阶函数,本文将... 目录一、引言：为什么需要作用域函数？二、作用域函China编程数详解1. apply：对象配置的 “流式构建器”最
阅读更多...
一文教你如何将maven项目转成web项目

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一：修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加
阅读更多...
tomcat多实例部署的项目实践

tomcat多实例部署的项目实践

《tomcat多实例部署的项目实践》Tomcat多实例是指在一台设备上运行多个Tomcat服务,这些Tomcat相互独立,本文主要介绍了tomcat多实例部署的项目实践,具有一定的参考价值,感兴趣的可... 目录1.创建项目目录，测试文China编程件2js.创建实例的安装目录3.准备实例的配置文件4.编辑实例的
阅读更多...
PyCharm如何设置新建文件默认为LF换行符

PyCharm如何设置新建文件默认为LF换行符

《PyCharm如何设置新建文件默认为LF换行符》：本文主要介绍PyCharm如何设置新建文件默认为LF换行符问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录PyCharm设置新建文件默认为LF换行符设置换行符修改换行符总结PyCharm设置新建文件默认为LF
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2