Vue3项目练习详细步骤(第一部分:项目构建,登录注册页面)

项目环境准备 

工程创建 

安装依赖 

项目调整

注册功能

页面结构 

接口文档

 数据绑定和校验

 数据接口调用

解决跨域问题

 登录功能

接口文档

数据绑定和校验

 数据接口调用

项目演示

 

项目的后端接口参考:https://blog.csdn.net/dafsq/category_12646722.html?spm=1001.2014.3001.5482

项目环境准备 

工程创建 

到需要的目录下使用命令创建vue 项目

vue create 项目名

 选择默认创建vue3项目

安装依赖 

创建成功后在项目目录下安装第三方依赖

npm install element-plus --save
npm install @element-plus/icons-vue
npm install axios
npm install sass -D

项目调整

Visual Studio Code打开项目目录

 修改main.js中的内容

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import locale from 'element-plus/dist/locale/zh-cn'const app = createApp(App)app.use(ElementPlus,{locale})
app.mount('#app')

删除项目下components目录中的所有内容

在src目录下新建api、utils、views这三个目录 

在utils目录下新建请求工具文件request.js 

//定制请求的实例//导入axios  npm install axios
import axios from 'axios';
//定义一个变量,记录公共的前缀  ,  baseURL
const baseURL = 'http://localhost:8080';
const instance = axios.create({baseURL})//添加响应拦截器
instance.interceptors.response.use(result=>{return result.data;},err=>{alert('服务异常');return Promise.reject(err);//异步的状态转化成失败的状态}
)export default instance;

 将项目需要的静态资源复制到assets目录下

静态资源获取:https://download.csdn.net/download/dafsq/89349949?spm=1001.2014.3001.5503

 修改App.vue中的内容

<template><div>hello vue3</div>
</template><script>export default {name: 'App',components: {}
}
</script><style></style>

 在项目目录下启动项目

npm run serve

访问查看

注册功能

页面结构 

 在views目录下新建Login.vue文件

在Login.vue 文件中完善代码

<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
//控制注册与登录表单的显示, 默认显示注册
const isRegister = ref(false)
</script><template><el-row class="login-page"><el-col :span="12" class="bg"></el-col><el-col :span="6" :offset="3" class="form"><!-- 注册表单 --><el-form ref="form" size="large" autocomplete="off" v-if="isRegister"><el-form-item><h1>注册</h1></el-form-item><el-form-item><el-input :prefix-icon="User" placeholder="请输入用户名"></el-input></el-form-item><el-form-item><el-input :prefix-icon="Lock" type="password" placeholder="请输入密码"></el-input></el-form-item><el-form-item><el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码"></el-input></el-form-item><!-- 注册按钮 --><el-form-item><el-button class="button" type="primary" auto-insert-space>注册</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = false">← 返回</el-link></el-form-item></el-form><!-- 登录表单 --><el-form ref="form" size="large" autocomplete="off" v-else><el-form-item><h1>登录</h1></el-form-item><el-form-item><el-input :prefix-icon="User" placeholder="请输入用户名"></el-input></el-form-item><el-form-item><el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码"></el-input></el-form-item><el-form-item class="flex"><div class="flex"><el-checkbox>记住我</el-checkbox><el-link type="primary" :underline="false">忘记密码?</el-link></div></el-form-item><!-- 登录按钮 --><el-form-item><el-button class="button" type="primary" auto-insert-space>登录</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = true">注册 →</el-link></el-form-item></el-form></el-col></el-row>
</template><style lang="scss" scoped>
/* 样式 */
.login-page {height: 100vh;background-color: #fff;.bg {background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,url('@/assets/login_bg.jpg') no-repeat center / cover;border-radius: 0 20px 20px 0;}.form {display: flex;flex-direction: column;justify-content: center;user-select: none;.title {margin: 0 auto;}.button {width: 100%;}.flex {width: 100%;display: flex;justify-content: space-between;}}
}
</style>

 在App.vue文件中引入Login.vue

注意如果发现项目报错:Module not found: Error: Can't resolve 'sass-loader' in 'D:\vue\vue_app'

有很多种情况,比如没安装SASS加载器 或者是安装了版本太高,不支持,下面这种是解决版本过高问题的

 在项目目录下运行以下命令

//首先清除我们已经安装过的版本:
npm uninstall node-sass 
npm uninstall sass-loader
npm uninstall style-loader
//注意我们清除的时候可以选择全局的清除 全局的安装,否则下次创建 项目还会有同样的错误 执行重复的操作
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/  //淘宝镜像安装
npm install sass-loader@7.3.1 --save-dev    //安装7.3.1版本的sass
npm install style-loader --save-dev // 安装style-loader

在main.js中引入静态文件包下的main.scss文件

import'./assets/main.scss'

保存刷新后查看页面 

接口文档

 数据绑定和校验

定义数据模型

//定义数据模型
const registerData = ref({username:'',password:'',rePassword:''
})

将数据绑定给表单

对表单项进行校验 

//二次校验密码的函数
const checkRePassword = (rule,value,callback) => {if(value == ''){callback(new Error('请再次确认密码'))} else if( value !== registerData.value.password){callback('二次确认密码不相同请重新输入')} else{callback()}
}//定义表单校验规则
const rules = ref({username:[{required:true,massage:'请输入用户名',trigger:'blur'},{min:5,max:16,message:'请输入长度5~16非空字符',trigger:'blur'}],password:[{required:true,massage:'请输入密码',trigger:'blur'},{min:5,max:16,message:'请输入长度5~16非空字符',trigger:'blur'}],rePassword:[{validator:checkRePassword,trigger:'blur'}] //校验二次输入密码是否相同
})

绑定表单校验

 保存刷新查看校验效果

 数据接口调用

  • 将之前的springboot项目启动
  • 启动redis

在api目录下创建user.js文件 

 在文件中完成调用接口函数的编写

//导入request.js请求工具
import request from '@/utils/request.js'//提供调用注册接口的函数
export const userRegisterService = (registerData) => {//借助UrlSearchParams完成传递const params = new URLSearchParams()for (let key in registerData){params.append(key,registerData[key]);}return request.post('/user/register',params);
}

定义调用接口注册函数

//调用后台接口完成注册
import {userRegisterService} from '@/api/user.js'
const register = async () => {//registerData是一个响应式对象,调用时现需要加上.valuelet result = await userRegisterService(registerData.value);if(result.code == 0) {//成功alert(result.msg ? result.massage:'注册成功');}else{//失败alert('注册失败')}
}

 在注册按钮处绑定注册请求单击事件

 

解决跨域问题

        由于浏览器的同源策略限制,向不同源(不同协议、不同域名、不同端口)发送ajax请求会失败 

在vue.config.js文件中完成配置代理

module.exports={lintOnSave:false, //关闭eslint语法检查配置devServer:{proxy:{'/api':{target:'http://localhost:8888', //这里后台的地址模拟的;应该填写你们真实的后台接口ws:false,changOrigin:true, //允许跨域pathRewrite:{'^/api':''}  //路径重写,请求的时候使用这个api就可以}}}
}

在request.js文件中将请求路径改为/api

 重启项目测试注册功能

已成功注册并且数据库中也成功添加了该用户的数据

 

 登录功能

接口文档

数据绑定和校验

        由于用户名和密码的数据和校验在定义注册数据模型是就已经定义好了,所以这里直接复用注册的数据和校验就可以了

 数据接口调用

在api文件中提供调用登录接口的函数

//提供调用登录接口的函数
export const userLoginService = (loginData) => {//借助UrlSearchParams完成传递const params = new URLSearchParams()for (let key in loginData){params.append(key,loginData[key]);}return request.post('/user/login',params);    
}

回到登录页面代码中完成登录单击事件函数 

//登录函数
import {userLoginService} from '@/api/user.js'
const login = async () =>{//调用接口完成登录let result = await userLoginService(registerData.value);if(result.code == 0){alert(result.msg ? result.msg : '登录成功')}else{alert('登录失败')}
}

给登录按钮绑定单击事件 

因为登录和注册是绑定的同一个数据模模型,所以要在每次登录和注册切换时清空数据

//定义函数,清空数据模型
const clearRegisterData = () =>{registerData.value = {username:'',password:'',rePassword:''}
}

 在切换注册和返回的按钮中绑定清空数据函数

刷新保存到页面中登录查看

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/16709.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

flutter使用dbus插件时,在终端无法使用“dart-dbus”命令

不用flutter的人&#xff0c;可能都不会找到这儿&#xff0c;遇到这个问题&#xff0c;所以这里默认flutter已经装过了&#xff0c;且对flutter如何使用插件也有所了解了。 由于我在项目中用到了dbus插件&#xff0c;用法如图所示&#xff0c;我需要使用这条命令来生成一个sou…

C语言---基础内容(万字)

C 语言是一种通用的、面向过程式的计算机程序设计语言。1972 年&#xff0c;为了移植与开发 UNIX 操作系统&#xff0c;丹尼斯里奇在贝尔电话实验室设计开发了 C 语言。 C 语言是一种广泛使用的计算机语言&#xff0c;它与 Java 编程语言一样普及&#xff0c;二者在现代软件程…

基于小波熵阈值的心电信号R波检测算法(MATLAB)

心脏兴奋电活动过程可由心电信号(ECG)来反映&#xff0c;心电信号也是医学上对心血管疾病诊断的重要科学依据。心电信号具有一定的随机性且一般情况下十分微弱&#xff0c;在信号采集、放大及变换过程中&#xff0c;心电信号容易受到人体呼吸及检测仪器等因素影响&#xff0c;从…

开发依赖与运行依赖

1. 概念 开发依赖&#xff1a;devDependencies 运行依赖&#xff1a;dependencies 2. 理解 &#xff08;1&#xff09;devDependencies 在线上状态不需要使用的依赖&#xff0c;就是开发依赖。为什么 npm 要把它单独分拆出来呢&#xff1f;最终目的是为了减少 node_modul…

golang、php,laravel框架对接stripe海外支付接口的总结和流程(通俗易懂)

目录 stripe是什么&#xff1f; 环境 配置后台 首先让管理员把你设置成为开发者 然后进入后台 然后你要创建产品&#xff0c;开单周期要写每天&#xff0c;我这里理解成每天都会有人买的 获取产品id 获取密钥&#xff0c;后续代码需要用到 支付代码 唤起支付页面 测…

摸鱼大数据——Hive表操作——基本操作

Hive表操作 Hive乱码解决 1、乱码现象 create database test1 comment "乱码测试"; use test1; CREATE TABLE orders ( orderId bigint COMMENT 订单id, orderNo string COMMENT 订单编号, shopId bigint COMMENT 门店id ); 2、处理步骤 注意&#…

Orange Pi AIpro——国产AI新星

初见香橙派AiPro 首先非常高兴能体验我们国产香橙派Aipro&#xff0c;在收到产品的时候还是被这精美的做工和强大的配置所折服。也为国内有这么多优秀的企业不断在进步和攀登而自豪。 比起我之前玩派的时候&#xff0c;同样的价格&#xff0c;现在给的实在是太多了&#xff…

前端JS必用工具【js-tool-big-box】学习,获取全球重点城市时间

我们去住一些旅馆的时候&#xff0c;或者一些国际性网站&#xff0c;经常可以看见他们的钟表会展示一些国家地区的时间&#xff0c;这个就是很常用的功能。但如果不常接触这个功能的开发网站呢&#xff0c;大家就看自己电脑右下角的时间展示&#xff0c;就是自己当前的具体时间…

新手一次过软考高级(系统规划与管理师)秘笈,请收藏!

2024上软考已经圆满结束&#xff0c;距离下半年的考试也只剩下半年不到的时间。需要备考下半年软考高级的小伙伴们可以抓紧开始准备了&#xff0c;毕竟高级科目的难度可是不低的。 今天给大家整理了——系统规划与管理师的备考资料 &#xff0c;都是核心重点&#xff0c;有PDF&…

艾体宝洞察 | Redis Enterprise对比ElastiCache

选择缓存数据库时&#xff0c;如何在Amazon ElastiCache和Redis Enterprise之间做出选择&#xff0c;应当考虑哪些标准&#xff1f; ElastiCache 通常可以满足基本的缓存需求&#xff0c;因此是一种适合初始阶段的解决方案。但随着使用量的增加&#xff0c;ElastiCache很快会变…

OrangePi AIpro上手初体验:

OrangePi AIpro上手初体验&#xff1a; 1.基本外观及功能接口简介2.点亮OrangePi AIpro开发板3.OrangePi AIpro功能体验3.1.目标检测3.2.OCR文字识别3.3.图像的曝光增强3.4.系统的整体性能(运行ROS) 4.OrangePi AIpro体验总结4.1.硬件及软件生态&#xff1a;4.2.使用体验及性能…

结构体和共用体

一.简述 结构体和共用体是C语言中两种重要的用户自定义数据类型&#xff0c;用于将不同类型的数据组合在一起。它们在内存布局、用途和访问方式上都有显著的区别和一些相似点。以下是详细的介绍&#xff1a; Ⅰ结构体 定义 struct Example {int a;float b;char c;}; ①内存布…

数据结构(三)循环链表

文章目录 一、循环链表&#xff08;一&#xff09;概念&#xff08;二&#xff09;示意图&#xff08;三&#xff09;操作1. 创建循环链表&#xff08;1&#xff09;函数声明&#xff08;2&#xff09;注意点&#xff08;3&#xff09;代码实现 2. 插入&#xff08;头插&#x…

【LeetCode刷题】滑动窗口解决问题:水果成篮、找到字符串中所有字母异位词

【LeetCode刷题】Day 9 题目1&#xff1a;904. 水果成篮思路分析&#xff1a;思路1&#xff1a;暴力枚举哈希表思路2&#xff1a;窗口滑动哈希表 题目2&#xff1a;438. 找到字符串中所有字母异位词思路分析&#xff1a;思路1&#xff1a;暴力枚举哈希表思路2&#xff1a;滑动窗…

极简编程:一行JS代码获取全球各城市当前时间!

之前在一些国际化网站看到过&#xff0c;他们展示了当前北京、纽约和伦敦的时钟&#xff0c;在一次住店的时候&#xff0c;我也看到了类似的3个时钟&#xff0c;甚至更多&#xff0c;有的会展示东京时间。 让我觉得获取一些全球重点城市的当前时间&#xff0c;会是一个很常用的…

【NumPy】关于numpy.add()函数,看这一篇文章就够了

&#x1f9d1; 博主简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…

使用Java读取Word表格数据封装到实体类中

1、引入pom文件&#xff1a; <!-- POI--><dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>5.2.3</version></dependency><dependency><groupId>org.apache.poi<…

简述对于Vue的diff算法理解

Vue 的 diff 算法&#xff0c;也称为“虚拟 DOM 的差异算法”或“Reactivity System”&#xff0c;是 Vue.js 框架中一个核心且高效的部分&#xff0c;它允许 Vue 在不需要重新渲染整个 DOM 的情况下&#xff0c;通过最小化地更新 DOM 来实现视图更新。以下是关于 Vue diff 算法…

5.4 Go 匿名函数与闭包

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

ASO优化0基础关键词应用指导

很多人还在为如何推广App而头疼&#xff0c;小柚肯定的告诉你。ASO优化是目前App推广中最基础的办法&#xff0c;是不可或缺的一个环节。ASO优化内容包括关键词、应用描述、评论等。关键词一般分为行业通用词、品牌词、竞品词等&#xff0c;优化师利用专业的ASO工具提供查询。为…