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

news/2024/7/14 19:41:14/文章来源:https://blog.csdn.net/dafsq/article/details/139174373

项目环境准备 

工程创建 

安装依赖 

项目调整

注册功能

页面结构 

接口文档

 数据绑定和校验

 数据接口调用

解决跨域问题

 登录功能

接口文档

数据绑定和校验

 数据接口调用

项目演示

 

项目的后端接口参考: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.luyixian.cn/news_show_1052419.aspx

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

相关文章

Android studio版本和Android gradle plugin版本对应表

1.Android studio 版本的升级&#xff0c;一个方面上看主要是升级对AGP最高版本的支持 2.那为什么AGP要出高版本呢&#xff0c;主要支持高版本的API&#xff0c;真是一环扣一环

Android数据缓存框架 - 内存数据载体从LiveData到StateFlow

引言&#xff1a;所有成功者的背后&#xff0c;都有一份艰苦的历程&#xff0c;不要只看到了人前的风光&#xff0c;而低估了他们背后所付出的努力。 随着flow到流行度越来越高&#xff0c;有开发者呼吁我使用flow&#xff0c;于是我就如你们所愿&#xff0c;新增了StateFlow作…

STM32学习和实践笔记(30):窗口看门狗(WWDG)实验

1.WWDG介绍 1.1 WWDG简介 上一章我们已经介绍了IWDG&#xff0c;知道它的工作原理就是一个12位递减计数器不断递减计数&#xff0c;当减到0之前还未进行喂狗的话&#xff0c;产生一个MCU复位。 窗口看门狗WWDG其实和独立看门狗类似&#xff0c;它是一个7位递减计数器不断的往…

基于机器学习预测未来的二氧化碳排放量(随机森林和XGBoost)

基于机器学习预测未来的二氧化碳排放量&#xff08;随机森林和XGBoost&#xff09; 简介&#xff1a; CO2排放是当今全球关注的环境问题之一。本文将使用Python对OWID提供的CO2排放数据集进行分析&#xff0c;并尝试构建机器学习模型来预测未来的CO2排放趋势。我们将探索数据…

图形学概述

图形学应用 游戏 游戏的画面好坏如何鉴定呢&#xff1f; 看游戏画面是否够亮&#xff1a;渲染中全局光照的好坏 《只狼》 为什么卡通游戏画面看起来是卡通的呢&#xff1f; 《无主之地3》 这些都是图形学需要着手解决的问题 电影 电影《黑客帝国》的特效也是通过计算机…

一个超级简单的Python UI库:NiceGUI

大家好&#xff0c;图形用户界面&#xff08;GUI&#xff09;的开发往往被看作是一项复杂且繁琐的任务。Python作为一门强大的编程语言&#xff0c;提供了许多优秀的库来帮助开发者实现这一目标。今天&#xff0c;我们将介绍一个名为NiceGUI的库&#xff0c;它能帮助你轻松构建…

大模型PEFT(一)之推理实践学习记录

1. 简介 多种模型: LLaMA、Mistral、Mixtral-MoE、Qwen、Yi、Gemmha、Baichuan、ChatGLM、Phi等等。集成方法:(增量)预训练、指令监督微调、奖励模型训练、PPO训练和DPO训练。多种精度:32比特全参数微调、16比特冻结微调、16比特LORA微调和基于AQLM/AWQ/GPTQ/LLM.int8 的2/4/8…

EtherCAT总线掉线如何自动重启

EtherCAT通信如果是从站掉线我们可以勾选上自动重启功能如下图所示&#xff1a; 1、自动重启从站 待续.....

词法与语法分析器介绍

概述 词法和语法可以使用正则表达式和BNF范式表达&#xff0c;而最终描述文法含义的事状态转换图 Lex与YACC 词法分析器Lex 词法分析词Lex&#xff0c;是一种生成词法分析的工具&#xff0c;描述器是识别文本中词汇模式的程序&#xff0c;这些词汇模式是在特殊的句子结构中…

欧科云链:Web3.0时代 具备链上数据分析能力的公司愈发凸显其价值

在当今激烈的市场竞争中&#xff0c;新兴互联网领域迅速崛起&#xff0c;Web2.0已相对成熟&#xff0c;用户创造数据&#xff0c;但不拥有数据。被视为新的价值互联网的Web3.0&#xff0c;赋予用户真正的数据自主权&#xff0c;它的到来被认为是打破Web2.0垄断的机遇。 在Web3…

【区块链】Postman功能接口测试

需要将完整的合约部署到fisco上以及启动后端的工程项目 启动WeBASE python3 deploy.py startAll 然后通过127.0.0.1&#xff1a;5002/WeBASE-Front启动webase 在工程日录下启动项目,检查配置文件conf.properties中的合约和用户信息足否与webase-front一致 运行trace的jar包项…

Qt 5前后调色板差异变化

Qt 5之前&#xff1a; QPalette palette;//调色板 设置背景颜色 palette.setColor(QPalette::Backgound, color...);Qt 5之后&#xff1a; 由原有的 Background 模式 更新为 Window 模式 QPalette palette;//调色板 设置背景颜色 palette.setColor(QPalette::Window, color..…

AI智能体研发之路-模型篇(四):一文入门pytorch开发

博客导读&#xff1a; 《AI—工程篇》 AI智能体研发之路-工程篇&#xff08;一&#xff09;&#xff1a;Docker助力AI智能体开发提效 AI智能体研发之路-工程篇&#xff08;二&#xff09;&#xff1a;Dify智能体开发平台一键部署 AI智能体研发之路-工程篇&#xff08;三&am…

python web自动化(Pytest实战)

1.UnitTest框架与Pytest框架对⽐ 1&#xff09; unittest框架介绍 Unittest则是Python语⾔的标准单元测试框架。 Unittest⽀持⾃动化测试&#xff0c;测试⽤例的初 始化、关闭和测试⽤例的聚合等功能&#xff0c;它有⼀个很重要的特性&#xff…

嵌入式UI开发-lvgl+wsl2+vscode系列:2、label(标签)+button(按钮)+slider(滑块)控件熟悉及其示例demo运行

文章目录 一、前言二、常见控件示例demo模拟环境运行及接口熟悉&#xff08;重要&#xff09;如何修改示例main函数测试各种示例1、label示例1.1、label示例1&#xff08;标签基础示例&#xff09;1.2、label示例2&#xff08;标签带阴影效果&#xff09;1.3、label示例3&#…

ComfyUI简单介绍

&#x1f353;什么是ComfyUI ComfyUI是一个为Stable Diffusion专门设计的基于节点的图形用户界面&#xff0c;可以通过各种不同的节点快速搭建自己的绘图工作流程。 软件打开之后是长这个样子&#xff1a; 同时软件本身是github上的一个开源项目&#xff0c;开源地址为&#…

编译原理 期末复习笔记整理(上)

资料借鉴&#xff1a; 【编译原理】期末复习 零基础自学_哔哩哔哩_bilibili 编译原理笔记 第一章 引论 1.编译原理逻辑过程&#xff1a; 词法分析 语法分析 语义分析 中间代码生成 编译代码生成 2.词法分析 任务: 输入源程序&#xff0c;对…

通用代码生成器应用场景三,遗留项目反向工程

通用代码生成器应用场景三&#xff0c;遗留项目反向工程 如果您有一个遗留项目&#xff0c;要重新开发&#xff0c;或者源代码遗失&#xff0c;或者需要重新开发&#xff0c;但是希望复用原来的数据&#xff0c;并加快开发。 如果您的项目是通用代码生成器生成的&#xff0c;…

Java应用中文件上传安全性分析与安全实践

✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天开心哦&#xff01;✨✨ &#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; 目录 引言 一. 文件上传的风险 二. 使用合适的框架和库 1. Spr…

NLP(17)--大模型发展(1)

前言 仅记录学习过程&#xff0c;有问题欢迎讨论 大模型的演化&#xff1a; ElMO : 类似双向lstm 结果和词向量拼接 预训练鼻祖 GPT :使用了Transformer 模型 开始使用Token &#xff08;发现预训练的作用&#xff09; Bert&#xff1a;认为双向比单向好 MLM(双向) 优于 LT…