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

news2024/12/24 8:38:58

项目环境准备 

工程创建 

安装依赖 

项目调整

注册功能

页面结构 

接口文档

 数据绑定和校验

 数据接口调用

解决跨域问题

 登录功能

接口文档

数据绑定和校验

 数据接口调用

优化登录/注册成功提示框

项目演示

项目的后端接口参考：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是一个响应式对象，调用时现需要加上.value
    let 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:''
    }
}

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

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

优化登录/注册成功提示框

 在登录页面文件中导入组件修改登录函数内容

import { ElMessage } from 'element-plus'

ElMessage.error('服务异常');
ElMessage.success('登录成功!')

 保存运行查看效果

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

太阳能语音监控杆（球机LED款）有什么用

太阳能语音监控杆（球机LED款）有什么用

传统监控设备依赖电力支持&#xff0c;在偏远地区和没有网络地区难以发挥其作用&#xff0c;而鼎跃安全的太阳能语音监控杆&#xff08;球机LED款&#xff09;在传统监控基础上&#xff0c;进行了全面优化&#xff0c;解决了无电无网区域使用受限的问题。 太阳能语音监控杆&am…
阅读更多...
Postgresql源码（134）优化器针对volatile函数的排序优化分析

Postgresql源码（134）优化器针对volatile函数的排序优化分析

相关 《Postgresql源码&#xff08;133&#xff09;优化器动态规划生成连接路径的实例分析》 上一篇对路径的生成进行了分析&#xff0c;通过make_one_rel最终拿到了一个带着路径的RelOptInfo。本篇针对带volatile函数的排序场景继续分析subquery_planner的后续流程。 subquer…
阅读更多...
LeetCode题练习与总结：有序链表转换二叉搜索树--109

LeetCode题练习与总结：有序链表转换二叉搜索树--109

一、题目描述 给定一个单链表的头节点 head &#xff0c;其中的元素 按升序排序 &#xff0c;将其转换为平衡二叉搜索树。 示例 1: 输入: head [-10,-3,0,5,9] 输出: [0,-3,9,-10,null,5] 解释: 一个可能的答案是[0&#xff0c;-3,9&#xff0c;-10,null,5]&#xff0c;它表…
阅读更多...
eBPF可观测之网络流量控制和管理traffic control浅尝

eBPF可观测之网络流量控制和管理traffic control浅尝

目录 工程背景 环境准备 安装工具​​​ 安装依赖包 安装C依赖库 操作步骤 目录结构 代码展示 效果展示 拓展提升 工程背景 首先发表一个"暴论" eBPF在可观测方面的应用&#xff0c;就是各种google。 不需要学习内核&#xff0c;只要掌握ebpf开发套路。…
阅读更多...
3D应用开发工具HOOPS如何优化复杂3D大模型的实时渲染和交互？

3D应用开发工具HOOPS如何优化复杂3D大模型的实时渲染和交互？

在现代工程设计、仿真和可视化领域&#xff0c;处理和交互大型三维模型&#xff08;3D Models&#xff09;的需求日益增加。随着模型复杂度和数据量的增长&#xff0c;如何有效地管理和实时操作这些模型成为了一个关键挑战。HOOPS技术以其卓越的速度和效率&#xff0c;成为了应…
阅读更多...
java项目——图书管理系统

java项目——图书管理系统

文章目录 前言图书管理系统整体框架&#xff1a;book包user包Main包&#xff1a;iooperation包总结&#xff1a; 前言 针对这些天所学的javaSE的知识&#xff0c;用一个小项目来实践一下。 图书管理系统 整体框架&#xff1a; 采取面向对象的思想实现此项目&#xff0c;首先…
阅读更多...
SALOME源码分析：MDF框架

SALOME源码分析：MDF框架

SALOME是由EDF、CEA、Open CASCADE等联合开发的开源CAE集成平台。 作为一款开源CAE软件集成平台&#xff0c;SALOME以其现代化的架构设计、良好的扩展性&#xff0c;提供了几何建模、网格生成、数据同化、求解器调用、后处理可视化、流程管理、作业管理等方面的支持。而这一切…
阅读更多...
Shell编程中的循环语句和函数

Shell编程中的循环语句和函数

一、for循环语句 当面对各种列表重复任务时&#xff0c;使用简单的if语句已经难以满足需求&#xff0c;这时就需要for循环语句。for语句的结构为&#xff1a; for 变量 in 取值列表 do 命令序列 done 使用for循环语句时&#xff0c;需要指定一个变量及取值列表&#xff0c;针对…
阅读更多...
B站pink老师HTML5基础（一）

B站pink老师HTML5基础（一）

文章目录 一、网页1.什么是网页2.什么是HTML二、常用浏览器 三、Web标准四、HTML标签1.HTML基本结构标签 五、快捷键六、常用标签1.标题标签2.段落和换行标签3.文本格式化标签4.div标签和span标签5.图像标签6.图像路径7.超链接标签8.特殊字符 一、网页 1.什么是网页 2.什么是H…
阅读更多...
【Postman接口测试】第二节.Postman界面功能介绍（上）

【Postman接口测试】第二节.Postman界面功能介绍（上）

文章目录 前言一、Postman前言介绍二、Postman界面导航说明三、使用Postman发送第一个请求四、Postman 基础功能介绍 4.1 常见类型的接口请求 4.1.1 查询参数的接口请求 4.1.2 表单类型的接口请求 4.1.3 上传文件的表单请求 4.1.4 JSON 类…
阅读更多...
New Phytologist：杨树特有miRNA在调控杨树抗旱中的分子机制

New Phytologist：杨树特有miRNA在调控杨树抗旱中的分子机制

2024年3月6日&#xff0c;林木遗传育种全国重点实验室、北京林业大学生物科学与技术学院尹伟伦与夏新莉教授课题组在New Phytologist&#xff08;中科院一区&#xff0c;影响因子9.4&#xff09;期刊发表了题为“The miR6445-NAC029 module regulates drought tolerance by reg…
阅读更多...
iec61850通信协议是什么

iec61850通信协议是什么

EC 61850是国际电工委员会&#xff08;IEC&#xff09;制定的一个用于电力系统自动化的国际标准。该协议广泛应用于变电站自动化、配电网自动化和智能电网等领域&#xff0c;旨在实现不同设备和系统之间的互操作性和高效通信。本文将详细介绍IEC 61850通信协议的特点、架构、关…
阅读更多...
N进制计数器【02】

N进制计数器【02】

大容量N进制计数器 集成计数器容量的扩展 集成计数器级联扩展容量 【例1】由两片 74LS161 级联组成 256 进制&#xff08;8位二进制&#xff09;同步加法计数器 【解】级联时&#xff0c;外加时钟信号同时接到各片计数器的时钟输入端&#xff0c;用前级计数器的进位输出 C…
阅读更多...
使用ssh连接ubuntu

使用ssh连接ubuntu

一、下载连接工具 常见的连接工具右fianlshell、xshell等等。在本文章中使用的finalshell&#xff0c;工具可以去官网上下载&#xff0c;官网下载。 二、Ubuntu中配置shh 1、使用下面指令更新软件包&#xff08;常用于下载安装或更新软件时使用&#xff0c;更新到最新的安装…
阅读更多...
如何取消公众号的在线客服绑定授权

如何取消公众号的在线客服绑定授权

1&#xff0c;功能设置 2&#xff0c;公众号设置 3&#xff0c;查看详情&#xff0c;取消
阅读更多...
Excel表格保护密码遗忘怎么办？三秒钟破解密码，轻松解锁！

Excel表格保护密码遗忘怎么办？三秒钟破解密码，轻松解锁！

在我们的日常工作中&#xff0c;Excel表格是一个非常实用的工具&#xff0c;但在某些情况下&#xff0c;我们可能会遇到密码忘记的问题&#xff0c;或者在尝试打开或删除文件时被锁定。别担心&#xff0c;这里有三个简单的解决方法来帮助您解决问题。 一、尝试默认密码或常见密…
阅读更多...
香橙派 AIpro 昇腾 Ascend C++ 分类模型适配

香橙派 AIpro 昇腾 Ascend C++ 分类模型适配

香橙派 AIpro 昇腾 Ascend C 分类模型适配 flyfish 文章目录 香橙派 AIpro 昇腾 Ascend C 分类模型适配前言一、PyTorch官网resnet模型处理方式1、PyTorch模型 导出 onnx格式2、完整测试 输出top1结果3、完整测试 输出top5结果 二、YOLOv8官网resnet模型Python处理方式三、昇腾…
阅读更多...
摸鱼大数据——Hive表操作——分区表

摸鱼大数据——Hive表操作——分区表

1、介绍 特点: 分区表会在HDFS上产生目录。查询数据的时候使用分区字段筛选数据&#xff0c;可以避免全表扫描&#xff0c;从而提升查询效率 注意: 如果是分区表&#xff0c;在查询数据的时候&#xff0c;如果没有使用分区字段&#xff0c;它回去进行全表扫描&#xff0c;会降低…
阅读更多...
【哈希】闭散列的线性探测和开散列的哈希桶解决哈希冲突（C++两种方法模拟实现哈希表）（1）

【哈希】闭散列的线性探测和开散列的哈希桶解决哈希冲突（C++两种方法模拟实现哈希表）（1）

&#x1f389;博主首页&#xff1a; 有趣的中国人 &#x1f389;专栏首页&#xff1a; C进阶 &#x1f389;其它专栏&#xff1a; C初阶 | Linux | 初阶数据结构 小伙伴们大家好&#xff0c;本片文章将会讲解 哈希函数与哈希 之 闭散列的线性探测解决哈希冲突 的相关内容。 如…
阅读更多...
【Elasticsearch】Centos7安装Elasticsearch、kibana、IK分词

【Elasticsearch】Centos7安装Elasticsearch、kibana、IK分词

目录 本文安装包下载地址注意安装elasticsearch1.上传文件2.解压elasticsearch-6.3.1.tar.gz3.开启远程连接权限4.修改其他配置[root用户操作]5.重启虚拟机6.启动es7.外部访问 安装kibana-61.解压2.配置3.启动kibana4.访问5.在开发工具中做数据的增删改查操作 安装IK分词1.wind…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023