vue3:八、登录界面实现-页面初始搭建、基础实现

一、初始工作

1、创建登录文件

在src/views中创建文件LoginView.vue文件

2、创建路由

在router/index.js中增加登录的信息

代码

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [//将子项全部存入一个大的路由中layout/index.vue,页面刚进入时调用的时layout/index.vue,在为导航条,默认显示页面/home的内容{path: '/',name: 'main',component: () => import('@/layout/index.vue'),children: [{path: '/home',name: 'home',component: HomeView,},{path: '/about',name: 'about',component: () => import('../views/AboutView.vue'),},]},//登录{path: '/login',name: 'login',component: () => import('@/views/LoginView.vue'),meta: {title: '登录'}},//404{path: '/:pathMatch(.*)*',name: 'not-found',component: () => import('@/views/NotFoundView.vue'),meta: {title: '页面未找到'}},],
})
export default router

二、搭建登录页面

1、实现效果

2、组件

LoginView.vue

实现底色为紫色,中间为白色卡片的登录效果,白色卡片左侧为图片效果,右侧为表单登录组件

<template><div class="page_all flex flex-center"><div class="login_all flex flex-between"><div class="login_left flex flex-center"><img src="/svg/login.png"></div><div class="login_right flex flex-center flex-column"><div class="form flex flex-center flex-column"><div class="title flex flex-center">CMS管理系统</div><el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="el-form demo-ruleForm":size="formSize" status-icon><el-form-item prop="username"><el-input v-model="ruleForm.username" placeholder="请输入账号" /></el-form-item><el-form-item prop="password"><el-input v-model="ruleForm.password" show-password placeholder="请输入密码" /></el-form-item><el-form-item class="btn-group"><el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button><el-button @click="resetForm(ruleFormRef)">重置</el-button></el-form-item></el-form></div></div></div></div>
</template>

代码解析 

表单实现 

参考路径:Form 表单 | Element Plus

①. <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="el-form demo-ruleForm" :size="formSize" status-icon>

  • ref="ruleFormRef":
    给表单组件设置一个引用名 ruleFormRef,方便在 Vue 组件中通过 this.$refs.ruleFormRef 访问表单实例。

  • :model="ruleForm":
    将表单数据绑定到 ruleForm 对象,ruleForm 是一个 Vue 组件的 data 属性,通常用于存储表单字段的值。

  • :rules="rules":
    绑定表单验证规则,rules 是一个 Vue 组件的 data 属性,定义了表单字段的验证逻辑。

  • class="el-form demo-ruleForm":
    给表单添加 CSS 类名,用于样式控制。

  • :size="formSize":
    动态设置表单的尺寸(如 largemediumsmall),formSize 是一个 Vue 组件的 data 属性。

  • status-icon:
    在表单验证时显示验证状态图标(如成功、失败)。


②. <el-form-item prop="username">

  • ​**prop="username"**:
    指定该表单项绑定的字段名 username,用于表单验证和数据绑定。


③. <el-input v-model="ruleForm.username" placeholder="请输入账号" />

  • ​**v-model="ruleForm.username"**:
    将输入框的值双向绑定到 ruleForm.username,用户输入的内容会实时更新到 ruleForm.username

  • ​**placeholder="请输入账号"**:
    设置输入框的占位符文本,提示用户输入账号。


④. <el-form-item prop="password">

  • ​**prop="password"**:
    指定该表单项绑定的字段名 password,用于表单验证和数据绑定。


⑤. <el-input v-model="ruleForm.password" show-password placeholder="请输入密码" />

  • ​**v-model="ruleForm.password"**:
    将输入框的值双向绑定到 ruleForm.password,用户输入的内容会实时更新到 ruleForm.password

  • ​**show-password**:
    启用密码显示/隐藏切换功能,用户可以通过点击图标切换密码的可见性。

  • ​**placeholder="请输入密码"**:
    设置输入框的占位符文本,提示用户输入密码。

⑥. <el-form-item class="btn-group">

  • ​**class="btn-group"**:
    给表单项添加 CSS 类名,用于样式控制。


⑦. <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>

  • ​**type="primary"**:
    设置按钮的类型为“主按钮”,通常显示为蓝色。

  • ​**@click="submitForm(ruleFormRef)"**:
    点击事件,调用 submitForm 方法并传入表单实例 ruleFormRef,用于提交表单。


⑧. <el-button @click="resetForm(ruleFormRef)">重置</el-button>

  • ​**@click="resetForm(ruleFormRef)"**:
    点击事件,调用 resetForm 方法并传入表单实例 ruleFormRef,用于重置表单。


⑨. </el-form>

  • 关闭表单组件。

3、样式

LoginView.vue - css

大体使用flex布局实现

<style>
.page_all {width: 100%;height: 100vh;background-color: #808cdd;
}.login_all {width: 50%;height: 60%;background-color: white;
}.login_left {width: 50%;height: 98%;
}.login_left img {width: 95%;height: 80%;object-fit: contain;
}.login_right {width: 50%;height: 100%;
}.title {font-size: 25px;color: #646cff;letter-spacing: 3px;height: 20%;
}.form {flex: 1;width: 90%;
}.el-form {width: 60%;
}.el-input__inner {font-size: 12px;
}.btn-group {width: 100%;margin-top: 30px;
}.btn-group button {width: 45%;
}.el-form-item__content {justify-content: space-between;
}
</style>

②base.css

修改主体颜色

/* color palette from <https://github.com/vuejs/theme> */
:root {--vt-c-white: #ffffff;--vt-c-white-soft: #f8f8f8;--vt-c-white-mute: #f2f2f2;--vt-c-black: #181818;--vt-c-black-soft: #222222;--vt-c-black-mute: #282828;--vt-c-indigo: #2c3e50;--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);--vt-c-text-light-1: var(--vt-c-indigo);--vt-c-text-light-2: rgba(60, 60, 60, 0.66);--vt-c-text-dark-1: var(--vt-c-white);--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);--el-color-primary: #646cff;--el-button-hover-bg-color: #868bf7;--el-color-primary-light-3: #868bf7;--el-color-primary-light-5:#b4b7ef;--el-color-primary-light-9:#e5e6f7;--el-color-primary-light-7:#c6c8fa;
}

③main.js 

@import './base.css';.flex {display: flex;
}.flex-between {justify-content: space-between;align-items: center;
}.flex-around {justify-content: space-around;align-items: center;
}.flex-center {justify-content: center;align-items: center;
}.flex-column {flex-direction: column;
}

三、js功能实现

1、引入方法

import { reactive, ref } from 'vue' //引入vue响应式
import { login } from '@/api/logininfo' //引入登录接口
import { useRouter } from 'vue-router'  //引入路由
import { ElMessage } from 'element-plus' //引入提示框
import { setToken } from '@/utils/token' //引入token设置

2、设置基本表单数据

//设置表单大小
const formSize = ref('default')
//设置表单数据
const ruleFormRef = ref()
const ruleForm = reactive({username: '',//账号password: '',//密码
})

3、设置验证规则

新加的验证规则可以使用validator也可使用pattern直接使用正则取限制

//设置验证规则
const rules = reactive({username: [{ required: true, message: '请输入账号', trigger: 'blur' },{ min: 3, max: 10, message: '长度请在3-10之间', trigger: 'blur' },],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, max: 20, message: '长度请在6-20之间', trigger: 'blur' },{validator: (rule, value, callback) => {const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/;if (!passwordPattern.test(value)) {callback(new Error('密码必须包含大写字母、小写字母、数字和特殊字符'));} else {callback();}}, trigger: 'blur'},// 或者// {pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/, message: '密码必须包含大写字母、小写字母、数字和特殊字符', trigger: 'blur'}],
})

4、引入路由

//设置路由
const router = useRouter();

5、封装接口

①新建api接口方法

新建api接口方法,用于管理用户登录时需要请求的方法

②方法实现

api/logininfo.js

引入request中的post和get方法,封装login方法执行登录的请求

import { post, get } from '@/utils/request'
// 登录
export function login(data) {return post({url: '/user/login',data})
}

6、表单提交

提交表单:

发送登录请求

  • 请求成功->提示成功消息->请求成功会返回一个token值,将这个token值存入本地缓存->跳转到主页面
  • 请求失败->提示失败消息
//表单提交
const submitForm = async (formEl) => {if (!formEl) returnawait formEl.validate((valid, fields) => {if (valid) {console.log('submit!');// 1、请求登录接口进行登录// 参数为ruleFormconsole.log(ruleForm)// 2、请求登录接口进行登录login( ruleForm ).then(res => {console.log('res:', res)if (res.code == 1) {// 3、提示成功信息ElMessage.success(res.msg || '登录成功')//存入该账号的tokensetToken(res.data.token)// 4、跳转页面router.push('/')}else {ElMessage.error(res.msg || '登录失败')}})} else {console.log('error submit!', fields)}})
}

7、重置表单

//重置表单
const resetForm = (formEl) => {if (!formEl) returnformEl.resetFields()
}

注:这里使用的request.js的请求方法是拼接方法

export const get = (obj) => {obj.method = 'GET'if (obj.data) {obj.url += '?' + Object.keys(obj.data).map(key => key + '=' + obj.data[key]).join('&')}return request(obj)
}
export const post = (obj) => {obj.method = 'POST'return request(obj)
}

另外一种请求

如果使用的request.js的请求是

// 封装GET请求
export const get = (url, params = {}) => {return request.get(url, { params });
};
// 封装POST请求
export const post = (url, data = {}) => {return request.post(url, data);
};
// 导出request实例
export default request;

那么页面请求方法就是

接口为api/logininfo.js

import { post } from '@/utils/request';// 登录
export function login(data) {return post('/user/login', data); // 直接传递url和data
}

页面请求为 

login(ruleForm).then(res => {
console.log('res:', res)
if (res.code == 1) {// 2、提示成功信息ElMessage.success(res.msg || '登录成功')//记住密码设置console.log('记住密码?:', remember.value);if(remember.value){setLoginInfo({username: ruleForm.username,password: ruleForm.password})}else{removeLoginInfo();}// return// 3、设置tokensetToken(res.data.token)// 4、跳转页面router.push('/')
}
else {ElMessage.error(res.msg || '登录失败')
}

四、接口实现

1、建立新接口

建立接口/user/login

设置请求参数username和password

2、设置期望 

登录成功

登录失败

五、测试是否成功

1、页面样式

2、测试文本框

①登录文本框

必填测试

长度测试

②密码文本框

必填测试

长度测试

规范测试

③登录失败

根据apifox设置的期望,输入账号不等于test时,登录失败

④登录成功

在登录前查看本地缓存

登录成功后页面跳转,本地缓存中存入返回的token

六、完整代码

1、LoginView.vue

<template><div class="page_all flex flex-center"><div class="login_all flex flex-between"><div class="login_left flex flex-center"><img src="/svg/login.png"></div><div class="login_right flex flex-center flex-column"><div class="form flex flex-center flex-column"><div class="title flex flex-center">CMS管理系统</div><el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="el-form demo-ruleForm":size="formSize" status-icon><el-form-item prop="username"><el-input v-model="ruleForm.username" placeholder="请输入账号" /></el-form-item><el-form-item prop="password"><el-input v-model="ruleForm.password" show-password placeholder="请输入密码" /></el-form-item><el-form-item class="btn-group"><el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button><el-button @click="resetForm(ruleFormRef)">重置</el-button></el-form-item></el-form></div></div></div></div> 
</template>
<script setup>
//引入方法
import { reactive, ref } from 'vue' //引入vue响应式
import { login } from '@/api/logininfo' //引入登录接口
import { useRouter } from 'vue-router'  //引入路由
import { ElMessage } from 'element-plus' //引入提示框
import { setToken } from '@/utils/token' //引入token设置//设置表单大小
const formSize = ref('default')
//设置表单数据
const ruleFormRef = ref()
const ruleForm = reactive({username: '',password: '',
})//设置路由
const router = useRouter();
//设置验证规则
const rules = reactive({username: [{ required: true, message: '请输入账号', trigger: 'blur' },{ min: 3, max: 10, message: '长度请在3-10之间', trigger: 'blur' },],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, max: 20, message: '长度请在6-20之间', trigger: 'blur' },{validator: (rule, value, callback) => {const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/;if (!passwordPattern.test(value)) {callback(new Error('密码必须包含大写字母、小写字母、数字和特殊字符'));} else {callback();}}, trigger: 'blur'},// 或者// {pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/, message: '密码必须包含大写字母、小写字母、数字和特殊字符', trigger: 'blur'}],
})//表单提交
const submitForm = async (formEl) => {if (!formEl) returnawait formEl.validate((valid, fields) => {if (valid) {console.log('submit!');// 1、请求登录接口进行登录// 参数为ruleFormconsole.log(ruleForm)// 2、请求登录接口进行登录login( ruleForm ).then(res => {console.log('res:', res)if (res.code == 1) {// 3、提示成功信息ElMessage.success(res.msg || '登录成功')//存入该账号的tokensetToken(res.data.token)// 4、跳转页面router.push('/')}else {ElMessage.error(res.msg || '登录失败')}})} else {console.log('error submit!', fields)}})
}
//重置表单
const resetForm = (formEl) => {if (!formEl) returnformEl.resetFields()
}</script>
<style>
.page_all {width: 100%;height: 100vh;background-color: #808cdd;
}.login_all {width: 50%;height: 60%;background-color: white;
}.login_left {width: 50%;height: 98%;
}.login_left img {width: 95%;height: 80%;object-fit: contain;
}.login_right {width: 50%;height: 100%;
}.title {font-size: 25px;color: #646cff;letter-spacing: 3px;height: 20%;
}.form {flex: 1;width: 90%;
}.el-form {width: 60%;
}.el-input__inner {font-size: 12px;
}.btn-group {width: 100%;margin-top: 30px;
}.btn-group button {width: 45%;
}.el-form-item__content {justify-content: space-between;
}
</style>

2、main.css

@import './base.css';.flex {display: flex;
}.flex-between {/*将弹性容器内的子元素沿主轴 均匀分布,第一个子元素位于主轴起点,最后一个元素位于主轴终点,中间的元素之间等距相等*/justify-content: space-between;align-items: center;
}/* 水平轴上对齐 */
.flex-around {/*项目在主轴上均匀分布,每个项目两侧间距相等,第一个项目和最后一个项目距离容器边缘的艰苦是其他项目之间间距的一半*/justify-content: space-around;align-items: center;
}.flex-center {justify-content: center;align-items: center;
}
/* 隐藏底部的按钮 */
.vue-devtools__panel[data-v-e9063f7b]{display: none;
}
.flex-column {flex-direction: column;
}
/* 设置表单宽度 */
.el-form{width:100% !important;
}

3、base.css

/* color palette from <https://github.com/vuejs/theme> */
:root {--vt-c-white: #ffffff;--vt-c-white-soft: #f8f8f8;--vt-c-white-mute: #f2f2f2;--vt-c-black: #181818;--vt-c-black-soft: #222222;--vt-c-black-mute: #282828;--vt-c-indigo: #2c3e50;--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);--vt-c-text-light-1: var(--vt-c-indigo);--vt-c-text-light-2: rgba(60, 60, 60, 0.66);--vt-c-text-dark-1: var(--vt-c-white);--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);--el-color-primary: #646cff;--el-button-hover-bg-color: #868bf7;--el-color-primary-light-3: #868bf7;--el-color-primary-light-5:#b4b7ef;--el-color-primary-light-9:#e5e6f7;--el-color-primary-light-7:#c6c8fa;
}/* semantic color variables for this project */
:root {--color-background: var(--vt-c-white);--color-background-soft: var(--vt-c-white-soft);--color-background-mute: var(--vt-c-white-mute);--color-border: var(--vt-c-divider-light-2);--color-border-hover: var(--vt-c-divider-light-1);--color-heading: var(--vt-c-text-light-1);--color-text: var(--vt-c-text-light-1);--section-gap: 160px;
}/* 
@media (prefers-color-scheme: dark) {:root {--color-background: var(--vt-c-black);--color-background-soft: var(--vt-c-black-soft);--color-background-mute: var(--vt-c-black-mute);--color-border: var(--vt-c-divider-dark-2);--color-border-hover: var(--vt-c-divider-dark-1);--color-heading: var(--vt-c-text-dark-1);--color-text: var(--vt-c-text-dark-2);}
} *//* *,
*::before,
*::after {box-sizing: border-box;margin: 0;font-weight: normal;
} */body {min-height: 100vh;color: var(--color-text);background: var(--color-background);transition:color 0.5s,background-color 0.5s;line-height: 1.6;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;font-size: 15px;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;margin: 0;
}

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

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

相关文章

dify+mysql的诗词助手

目录 数据库表结构&#xff1a; 数据库查询的http服务搭建&#xff1a; 流程引擎搭建&#xff1a; 开始&#xff0c; HTTP查询数据库&#xff0c; LLM数据分析&#xff0c; 直接回复&#xff0c; 效果测试&#xff1a; 下载链接&#xff1a; 数据库表结构&#xff1a;…

jenkins 配置邮件问题整理

版本&#xff1a;Jenkins 2.492.1 插件&#xff1a; A.jenkins自带的&#xff0c; B.安装功能强大的插件 配置流程&#xff1a; 1. jenkins->系统配置->Jenkins Location 此处的”系统管理员邮件地址“&#xff0c;是配置之后发件人的email。 2.配置系统自带的邮件A…

谷歌Chrome或微软Edge浏览器修改网页任意内容

在谷歌或微软浏览器按F12&#xff0c;打开开发者工具&#xff0c;切换到console选项卡&#xff1a; 在下面的输入行输入下面的命令回车&#xff1a; document.body.contentEditable"true"效果如下&#xff1a;

blender使用初体验(甜甜圈教程)

使用blender 建模了甜甜圈&#xff0c;时间空闲了&#xff0c;但愿能创建点好玩的吸引人的东西

Adobe Firefly 技术浅析(三):GANs 的改进

生成式对抗网络(GANs)在图像生成领域取得了显著的进展,但原始的 GANs 在训练稳定性、生成质量以及多样性方面存在一些挑战。Adobe Firefly 在其图像生成技术中采用了多种改进的 GANs 方法,以提高生成图像的质量和多样性。 1. 条件生成式对抗网络(cGANs) 1.1 基本原理 …

go GRPC学习笔记

本博文源于笔者正在学习的gprc&#xff0c;相关配套书籍素材来源是《Go编程进阶实战》&#xff0c;博文内容主要包含了RPC模式讲解&#xff0c;RPC通过htttp访问、拦截器、提高服务端与客户端容错的内容配置 在此之前需要下载protoc&#xff0c;这里不做下载过程 1、RPC模式 …

CentOS 系统安装 docker 以及常用插件

博主用的的是WindTerm软件链接的服务器&#xff0c;因为好用 1.链接上服务器登入后&#xff0c;在/root/目录下 2.执行以下命令安装docker sudo yum install -y yum-utilssudo yum-config-manager \--add-repo \https://download.docker.com/linux/centos/docker-ce.reposudo…

MindGYM:一个用于增强视觉-语言模型推理能力的合成数据集框架,通过生成自挑战问题来提升模型的多跳推理能力。

2025-03-13&#xff0c;由中山大学和阿里巴巴集团的研究团队提出了MindGYM框架&#xff0c;通过合成自挑战问题来增强视觉-语言模型&#xff08;VLMs&#xff09;的推理能力。MindGYM框架通过生成多跳推理问题和结构化课程训练&#xff0c;显著提升了模型在推理深度和广度上的表…

论文阅读笔记——LORA: LOW-RANK ADAPTATION OF LARGE LANGUAGE MODELS

LoRA 论文 传统全面微调&#xff0c;对每个任务学习的参数与原始模型相同&#xff1a; m a x Φ ∑ ( x , y ) ∈ Z ∑ t 1 ∣ y ∣ l o g ( P Φ ( y t ∣ x , y < t ) ) 式(1) max_{\Phi}\sum_{(x,y)\in Z}\sum^{|y|}_{t1}log(P_{\Phi}(y_t|x,y<t)) \qquad \text{式(…

Umi-OCR 全家桶

介绍&#xff1a; 下载 访问官网地址 https://github.com/hiroi-sora/umi-ocrhttps://github.com/hiroi-sora/umi-ocr 点击下载&#xff08;.exe 文件 安装即可&#xff09; 桌面使用 安装完毕后去安装路径下点击 Umi-OCR.exe &#xff08;默认不会生成桌面的快捷方式&…

oracle中OS BLOCK的含义

在Oracle数据库中&#xff0c;OS BLOCK&#xff08;操作系统数据块&#xff09;是指操作系统层面上的数据块&#xff0c;它与Oracle数据库内部的逻辑存储单元BLOCK&#xff08;数据块&#xff09;有所区别但密切相关。以下是对OS BLOCK的详细解释&#xff1a; 定义与概念 OS BL…

mac部署GPT-SoVITS,生成粤语踩坑点及使用记录

自己录音&#xff0c;普通话或者粤语 注意&#xff1a; 与在其他设备上训练的模型相比&#xff0c;在mac上使用gpu训练的模型的质量明显较低&#xff0c;因此我们暂时使用cpu代替。 Install Xcode command-line tools by running xcode-select --install.Install FFmpeg by …

STM32-SPI通信外设

目录 一&#xff1a;SPI外设简介 SPI框图​编辑 SPI逻辑 ​编辑 主模式全双工连续传输 ​编辑 非连续传输 二&#xff1a;硬件SPI读写W25Q64 1.接线&#xff1a; 2. 代码 SPI外设的初始化 生成时序 一&#xff1a;SPI外设简介 STM32内部集成了硬件SPI收发电路&#…

游戏引擎学习第158天

回顾和今天的计划 我们在这里会实时编码一个完整的游戏&#xff0c;没有使用引擎或库&#xff0c;一切都由我们自己做所有的编程工作&#xff0c;游戏中的每一部分&#xff0c;无论需要做什么&#xff0c;我们都亲自实现&#xff0c;并展示如何完成这些任务。今天&#xff0c;…

指令微调 (Instruction Tuning) 与 Prompt 工程

引言 预训练语言模型 (PLMs) 在通用语言能力方面展现出强大的潜力。然而&#xff0c;如何有效地引导 PLMs 遵循人类指令&#xff0c; 并输出符合人类意图的响应&#xff0c; 成为释放 PLMs 价值的关键挑战。 指令微调 (Instruction Tuning) 和 Prompt 工程 (Prompt Engineerin…

实验三 Python 数据可视化 Python 聚类-K-means(CQUPT)

一、实验目的 Python 数据可视化&#xff1a; 1、学习使用 jieba、wordcloud 等类库生成词云图。 2、学习使用 Matplotlib 库进行数据可视化。 Python 聚类-K-means&#xff1a; 1、理解聚类非监督学习方法的基本原理。 2、掌握 Python、numpy、pandas、sklearn 实现聚类…

Linux--git

ok&#xff0c;我们今天来学习如何在Linux上建立链接git 版本控制器Git 不知道你⼯作或学习时&#xff0c;有没有遇到这样的情况&#xff1a;我们在编写各种⽂档时&#xff0c;为了防⽌⽂档丢失&#xff0c;更改 失误&#xff0c;失误后能恢复到原来的版本&#xff0c;不得不…

凸优化算法学习笔记:决策单调性与 wqs二分

文章目录 前言决策单调性单调矩阵&#xff0c;完全单调矩阵&#xff0c;蒙日阵决策单调性优化 d p dp dp线性 d p dp dp分治&#xff08;离线&#xff09;二分队列&#xff08;在线&#xff09;SMAWK 区间 d p dp dp 练习题LOJ6039 w q s wqs wqs 二分&#xff08;蒙日阵最短…

基于YOLOv8深度学习的PCB缺陷检测识别系统【python源码+GUI界面+数据集+训练代码】

目录 一、界面功能展示 二、前言摘要 三、GUI界面演示 &#xff08;一&#xff09;用户加载自定义模型 &#xff08;二&#xff09;单张图像检测 &#xff08;三&#xff09;检测图像文件夹 &#xff08;四&#xff09;检测视频 &#xff08;五&#xff09;保存 四、模…

Matlab 多项式拟合点法线(二维)

文章目录 一、简介二、实现代码三、实现效果一、简介 这个思路其实很简单,假设我们有一组曲线点,我们可以对其拟合曲线并计算其导数来获取每个点的法向量,当然这一思路也可以扩展至三维。具体过程如下所示: 二、实现代码 %% *********