平台登录页面实现（一）

news2024/11/30 6:53:54

在这里插入图片描述

文章目录

  • 一、实现用户名、密码、登录按钮、记住用户表单
    • 1、全局css代码定义在asserts/css/global.css
  • 二、用户名、密码、记住用户的双向绑定
  • 三、没有用户，点击注册功能实现
  • 四、实现输入用户名、密码、点击登录按钮进行登录操作
  • 五、实现表单项校验
  • 六、提交表单预验证
    • 1、在el-form标签通过ref属性，绑定一个methods中定义的方法
    • 2、在method中定义一个ref
    • 3、对表单进行预校验
  • 七、记住账号和密码
    • 1、保存token
    • 2、保存用户名
    • 3、判断是否需要记住用户的账号密码，将账号密码保存在localStorage中
    • 4、读取账号密码
    • 5、如果不需要记住账号密码将localStorage中的信息删除
  • 八、写好的登录页

一、实现用户名、密码、登录按钮、记住用户表单

<template>

	<LoginBackVue>
		<div class="login_box">
			<!-- 显示logo的地方 -->
			<div class="log"></div>
			<!-- 登录的表单 -->
				<el-form>
					<el-form-item>
						<el-input prefix-icon="User" placeholder="请输入用户名"/>
					</el-form-item>

					<el-form-item>
						<el-input prefix-icon="Lock" placeholder="请输入密码"/>
					</el-form-item>

					<el-form-item label="记住用户">
						<el-switch />
					</el-form-item>
		
					<el-form-item>
						<el-button color="#00608c" style="width: 100%" @click="onSubmit">登录</el-button>
					</el-form-item>
				</el-form>
			</div>
	</LoginBackVue>
</template>

<script>
import LoginBackVue from "@/components/LoginBack.vue";

export default{
	components:{
		LoginBackVue
	}
}

</script>

<style scoped>
	/* 设置登录框的宽高和位置居中 */
	.login_box{
		width: 500px;
		height:350px;
		margin: calc((100vh - 350px)/2) auto;
		text-align: center;
		color: white;
	}
</style>

1、全局css代码定义在asserts/css/global.css


/* --------------------登录页面--------------------- */

/* 修改element-plus 输入框表单的样式*/
.login_box .el-input__wrapper{
    background: none;
    box-shadow: none;
    border-bottom: solid 1px #00608c;
    border-radius: 0;
}
/* 修改输入框图表样式 */
.login_box .el-input__prefix{
    color: #fff;
    font-size: 20px;
}

在这里插入图片描述
main.js中导入，全局生效
在这里插入图片描述

二、用户名、密码、记住用户的双向绑定

<template>

	<LoginBackVue>
		<div class="login_box">
			<!-- 显示logo的地方 -->
			<div class="log"></div>
			<!-- 登录的表单 -->
				<el-form>
					<el-form-item>
						<el-input v-model="loginForm.username" prefix-icon="User" placeholder="请输入用户名"/>
					</el-form-item>

					<el-form-item>
						<el-input type="password" v-model="loginForm.password" prefix-icon="Lock" placeholder="请输入密码"/>
					</el-form-item>

					<el-form-item label="记住用户">
						<el-switch  v-model="loginForm.status" />
					</el-form-item>
		
					<el-form-item>
						<el-button color="#00608c" style="width: 100%" @click="onSubmit">登录</el-button>
					</el-form-item>
				</el-form>
			</div>
	</LoginBackVue>
</template>

<script>
import LoginBackVue from "@/components/LoginBack.vue";

export default{
	data(){
		return{
			loginForm:{
				username:"",
				password:"",
				status:false
			}
		}
	},
	components:{
		LoginBackVue
	}
}

</script>

<style scoped>
	/* 设置登录框的宽高和位置居中 */
	.login_box{
		width: 500px;
		height:350px;
		margin: calc((100vh - 350px)/2) auto;
		text-align: center;
		color: white;
	}



</style>

在这里插入图片描述

三、没有用户，点击注册功能实现

<template>

	<LoginBackVue>
		<div class="login_box">
			<!-- 显示logo的地方 -->
			<div class="log"></div>
			<!-- 登录的表单 -->
				<el-form>
					<el-form-item>
						<el-input v-model="loginForm.username" prefix-icon="User" placeholder="请输入用户名"/>
					</el-form-item>

					<el-form-item>
						<el-input type="password" v-model="loginForm.password" prefix-icon="Lock" placeholder="请输入密码"/>
					</el-form-item>

					<el-form-item label="记住用户">
						<el-switch  v-model="loginForm.status" />
					</el-form-item>
		
					<el-form-item>
						<el-button color="#00608c" style="width: 100%" @click="onSubmit">登录</el-button>
					</el-form-item>
				</el-form>
				<div class="isregister">没有账号？
					<span @click="register">点击注册</span>
				</div>
			</div>
	</LoginBackVue>
</template>

<script>
import LoginBackVue from "@/components/LoginBack.vue";

export default{
	data(){
		return{
			loginForm:{
				username:"",
				password:"",
				status:false
			}
		}
	},
	methods:{
		register(){
			this.$message({
				type:'warning',
				message:"平台未开放注册功能"
			})
		}
	},
	components:{
		LoginBackVue
	}
}

</script>

<style scoped>
	/* 设置登录框的宽高和位置居中 */
	.login_box{
		width: 500px;
		height:350px;
		margin: calc((100vh - 350px)/2) auto;
		text-align: center;
		color: white;
	}
	.isregister{
		width: 100%;
		text-align: left;
		
	}
	.isregister span{
		color: turquoise;
		cursor: pointer;
	}



</style>

四、实现输入用户名、密码、点击登录按钮进行登录操作

1、表单输入框，绑定输入的数据
2、点击登录按钮，发送请求完成登录

<template>

	<LoginBackVue>
		<div class="login_box">
			<!-- 显示logo的地方 -->
			<div class="log"></div>
			<!-- 登录的表单 -->
				<el-form>
					<el-form-item>
						<el-input v-model="loginForm.username" prefix-icon="User" placeholder="请输入用户名"/>
					</el-form-item>

					<el-form-item>
						<el-input type="password" v-model="loginForm.password" prefix-icon="Lock" placeholder="请输入密码"/>
					</el-form-item>

					<el-form-item label="记住用户">
						<el-switch  v-model="loginForm.status" />
					</el-form-item>
		
					<el-form-item>
						<el-button color="#00608c" style="width: 100%" @click="submitLogin">登录</el-button>
					</el-form-item>
				</el-form>
				<div class="isregister">没有账号？
					<span @click="register">点击注册</span>
				</div>
			</div>
	</LoginBackVue>
</template>

<script>
import LoginBackVue from "@/components/LoginBack.vue";

export default{
	data(){
		return{
			loginForm:{
				username:"",
				password:"",
				status:false
			}
		}
	},
	methods:{
		// 点击登录的方法
		async submitLogin(){
			const response=await this.$api.login(this.loginForm)
			if (response.status===200){
				// 提示登录成功
				this.$message({
					type:"success",
					message:"登录成功"
				})
				// 页面跳转(后面加)
				this.$router.push({"name":"home"})

			}
		},
		// 点击注册
		register(){
			this.$message({
				type:'warning',
				message:"平台未开放注册功能"
			})
		}
	},
	components:{
		LoginBackVue
	}
}

</script>

<style scoped>
	/* 设置登录框的宽高和位置居中 */
	.login_box{
		width: 500px;
		height:350px;
		margin: calc((100vh - 350px)/2) auto;
		text-align: center;
		color: white;
	}
	.isregister{
		width: 100%;
		text-align: left;
		
	}
	.isregister span{
		color: turquoise;
		cursor: pointer;
	}



</style>

在这里插入图片描述

五、实现表单项校验

步骤：
1、在el-form标签上绑定rules属性，指定校验的规则对象
在这里插入图片描述
2、在data中定义绑定校验规则
在这里插入图片描述
3、在el-form-item标签中指定校验的字段
在这里插入图片描述
在这里插入图片描述

<template>

	<LoginBackVue>
		<div class="login_box">
			<!-- 显示logo的地方 -->
			<div class="log"></div>
			<!-- 登录的表单 -->
				<el-form :rules="loginRules" :model="loginForm">
					<el-form-item prop="username">
						<el-input v-model="loginForm.username" prefix-icon="User" placeholder="请输入用户名"/>
					</el-form-item>

					<el-form-item prop="password">
						<el-input type="password" v-model="loginForm.password" prefix-icon="Lock" placeholder="请输入密码"/>
					</el-form-item>

					<el-form-item label="记住用户">
						<el-switch  v-model="loginForm.status" />
					</el-form-item>
		
					<el-form-item>
						<el-button color="#00608c" style="width: 100%" @click="submitLogin">登录</el-button>
					</el-form-item>
				</el-form>
				<div class="isregister">没有账号？
					<span @click="register">点击注册</span>
				</div>
			</div>
	</LoginBackVue>
</template>

<script>
import LoginBackVue from "@/components/LoginBack.vue";

export default{
	data(){
		return{
			// 登录输入的数据
			loginForm:{
				username:"",
				password:"",
				status:false
			},
			// 登录表单的校验规则
			loginRules:{
				// username的校验规则
				username:[{
					required:true,
					message:"用户名不能为空",
					trigger:'blur'
			}],
				// password的校验规则
				password:[{
					required:true,
					message:"密码不能为空",
					trigger:'blur'
				},
				{
					min:4,
					max:18,
					message:"密码长度需要在6-18位之间",
					trigger:'blur'
				}]
			}
		}
	},
	methods:{
		// 点击登录的方法
		async submitLogin(){
			const response=await this.$api.login(this.loginForm)
			if (response.status===200){
				// 提示登录成功
				this.$message({
					type:"success",
					message:"登录成功"
				})
				// 页面跳转(后面加)
				this.$router.push({"name":"home"})

			}else{
				this.$message({
					type:"error",
					message:response.data
				})
			}
		},
		// 点击注册
		register(){
			this.$message({
				type:'warning',
				message:"平台未开放注册功能"
			})
		}
	},
	components:{
		LoginBackVue
	}
}

</script>

<style scoped>
	/* 设置登录框的宽高和位置居中 */
	.login_box{
		width: 500px;
		height:350px;
		margin: calc((100vh - 350px)/2) auto;
		text-align: center;
		color: white;
	}
	.isregister{
		width: 100%;
		text-align: left;
		
	}
	.isregister span{
		color: turquoise;
		cursor: pointer;
	}



</style>

六、提交表单预验证

vue——》全局属性$refs={}
检测页面中是否有ref属性，如果有会将ref属性添加到$refs={}中
$refs={
loginRef:元素（组件）
}

1、在el-form标签通过ref属性，绑定一个methods中定义的方法

<el-form :model="loginForm" :rules="loginRules" ref="loginRef">

2、在method中定义一个ref

clickLogin(){
	// 对登录的表单数据进行验证
	this.$refs['loginRef'].validate((res)=>{
		if(res){
			this.submitLogin()
		}
	})
},

3、对表单进行预校验

methods:{
	clickLogin(){
		// 对登录的表单数据进行验证
		this.$refs['loginRef'].validate((res)=>{
			if(res){
				this.submitLogin()
			}
		})
	},
	
	// 发送请求到后端
	async submitLogin(){
		const response=await this.$api.login(this.loginForm)
		if(response.status===200){
			// 提示登录成功
			this.$message({
				type:'success',
				message:'登录成功'
			})
			// 页面跳转(后面加)
			this.$router.push({name:'index'})
			
		}else{
			this.$message({
				type:'error',
				message:response.data
			})
	}
	},
	register(){
		this.$message({
			type:'warning',
			message:'平台暂时未开放注册功能'
		})
	}
},

七、记住账号和密码

1、保存token

window.sessionStorage.setItem('token',response.data.token)

2、保存用户名

window.sessionStorage.setItem('username',response.data.username)

3、判断是否需要记住用户的账号密码，将账号密码保存在localStorage中

特别注意
需要将this.loginForm转换为json格式数据

if(this.loginForm.status){
	// 将账号密码转换为json字符串
	const uinfo=JSON.stringify(this.loginForm)
	// 进行编码（加密）
	const u=window.btoa(unescape(encodeURIComponent(uinfo)))
	// 存储到localStorage
	window.localStorage.setItem('uinfo：',u)
}

4、读取账号密码

created(){
		const uinfo=window.localStorage.getItem('uinfo')
		// 判断是否有账号密码
		if(uinfo){
			// 进行解密
			// const u= decodeURIComponent(escape(window.atob(uinfo)))
			// 转化位js对象,保存到loginForm
			this.loginForm =JSON.parse(uinfo)
		}
	}

5、如果不需要记住账号密码将localStorage中的信息删除

window.localStorage.removeItem('uinfo')

在这里插入图片描述

八、写好的登录页

<template>

	<LoginBackVue>
		<div class="login_box">
			<!-- 显示logo的地方 -->
			<div class="log"></div>
			<!-- 登录的表单 -->
				<el-form :rules="loginRules" :model="loginForm" ref="loginRef">
					<el-form-item prop="username">
						<el-input v-model="loginForm.username" prefix-icon="User" placeholder="请输入用户名"/>
					</el-form-item>

					<el-form-item prop="password">
						<el-input type="password" v-model="loginForm.password" prefix-icon="Lock" placeholder="请输入密码"/>
					</el-form-item>

					<el-form-item label="记住用户">
						<el-switch  v-model="loginForm.status" />
					</el-form-item>
		
					<el-form-item>
						<el-button color="#00608c" style="width: 100%" @click="clickLogin">登录</el-button>
					</el-form-item>
				</el-form>
				<div class="isregister">没有账号？
					<span @click="register">点击注册</span>
				</div>
			</div>
	</LoginBackVue>
</template>

<script>
import LoginBackVue from "@/components/LoginBack.vue";

export default{
	data(){
		return{
			// 登录输入的数据
			loginForm:{
				username:"",
				password:"",
				status:false
			},
			// 登录表单的校验规则
			loginRules:{
				// username的校验规则
				username:[{
					required:true,
					message:"用户名不能为空",
					trigger:'blur'
			}],
				// password的校验规则
				password:[{
					required:true,
					message:"密码不能为空",
					trigger:'blur'
				},
				{
					min:4,
					max:18,
					message:"密码长度需要在6-18位之间",
					trigger:'blur'
				}]
			}
		}
	},
	methods:{
		clickLogin(){
			// 对登录的表单数据进行校验
			this.$refs['loginRef'].validate((res) =>{
				if(res){
					this.submitLogin()
				}
			})
		},

		// 点击登录的方法
		async submitLogin(){

			const response=await this.$api.login(this.loginForm)
			if (response.status===200){
				// 保存token,用户名
				window.sessionStorage.setItem('token',response.data.token)
				window.sessionStorage.setItem('uname',response.data.username)
				// 判断是否需要记住用户名和密码
				if(this.loginForm.status){
					//将账号密码信息保存到localStorage中
					// 将账号密码转换为json字符串
					const uinfo=JSON.stringify(this.loginForm)
					// 存储到localStorage
					window.localStorage.setItem('uinfo',uinfo)
				}else{
					window.localStorage.removeItem('uinfo')
				}
				// 提示登录成功
				this.$message({
					type:"success",
					message:"登录成功"
				})
				// 页面跳转(后面加)
				this.$router.push({"name":"index"})

			}else{
				this.$message({
					type:"error",
					message:response.data
				})
			}
		},
		// 点击注册
		register(){
			this.$message({
				type:'warning',
				message:"平台未开放注册功能"
			})
		}
	},
	components:{
		LoginBackVue
	},


	created(){
		const uinfo=window.localStorage.getItem('uinfo')
		// 判断是否有账号密码
		if(uinfo){
			// 进行解密
			// const u= decodeURIComponent(escape(window.atob(uinfo)))
			// 转化位js对象,保存到loginForm
			this.loginForm =JSON.parse(uinfo)
		}
	}
}

</script>

<style scoped>
	/* 设置登录框的宽高和位置居中 */
	.login_box{
		width: 500px;
		height:350px;
		margin: calc((100vh - 350px)/2) auto;
		text-align: center;
		color: white;
	}
	.isregister{
		width: 100%;
		text-align: left;
		
	}
	.isregister span{
		color: turquoise;
		cursor: pointer;
	}



</style>

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

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

相关文章

[python 刷题] 153 Find Minimum in Rotated Sorted Array

[python 刷题] 153 Find Minimum in Rotated Sorted Array

[python 刷题] 153 Find Minimum in Rotated Sorted Array 题目&#xff1a; Suppose an array of length n sorted in ascending order is rotated between 1 and n times. For example, the array nums [0,1,2,4,5,6,7] might become: [4,5,6,7,0,1,2] if it was rotated 4…
阅读更多...
年度顶级赛事来袭：2023 CCF大数据与计算智能大赛首批赛题上线！

年度顶级赛事来袭：2023 CCF大数据与计算智能大赛首批赛题上线！

久等了&#xff01; 大数据与人工智能领域年度顶级盛事——2023 CCF大数据与计算智能大赛——首批赛题已上线&#xff0c;大赛火力全开&#xff0c;只等你来挑战&#xff01; 大赛介绍 CCF大数据与计算智能大赛&#xff08;CCF Big Data & Computing Intelligence Contes…
阅读更多...
嵌入式Linux应用开发-第十二章设备树的改造

嵌入式Linux应用开发-第十二章设备树的改造

嵌入式Linux应用开发-第十二章设备树的改造 第十二章 LED模板驱动程序的改造&#xff1a;设备树12.1 总结3种写驱动程序的方法12.2 怎么使用设备树写驱动程序12.2.1 设备树节点要与platform_driver能匹配12.2.2 设备树节点指定资源&#xff0c;platform_driver获得资源 12.3 开…
阅读更多...
基于vue+Element Table Popover 弹出框内置表格的封装

基于vue+Element Table Popover 弹出框内置表格的封装

文章目录 项目场景&#xff1a;实现效果认识组件代码效果分析 封装&#xff1a;代码封装思路页面中使用 项目场景&#xff1a; 在选择数据的时候需要在已选择的数据中对比选择&#xff0c;具体就是点击一个按钮&#xff0c;弹出一个小的弹出框&#xff0c;但不像对话框那样还需…
阅读更多...
第79步 时间序列建模实战：支持向量机回归建模

第79步 时间序列建模实战：支持向量机回归建模

基于WIN10的64位系统演示 一、写在前面 这一期&#xff0c;我们介绍支持向量机&#xff08;SVM&#xff09;回归。 同样&#xff0c;这里使用这个数据&#xff1a; 《PLoS One》2015年一篇题目为《Comparison of Two Hybrid Models for Forecasting the Incidence of Hemor…
阅读更多...
Linux shell编程学习笔记4：修改命令行提示符格式（内容和颜色）

Linux shell编程学习笔记4：修改命令行提示符格式（内容和颜色）

一、命令行提示符格式内容因shell类型而异 Linux终端命令行提示符内容格式则因shell的类型而异&#xff0c;例如CoreLinux默认的shell是sh&#xff0c;其命令行提示符为黑底白字&#xff0c;内容为&#xff1a; tcbox:/$ 其中&#xff0c;tc为当前用户名&#xff0c;box为主机…
阅读更多...
CSP-J第二轮试题-2021年-1.2题

CSP-J第二轮试题-2021年-1.2题

文章目录 参考&#xff1a;总结 [CSP-J 2021] 分糖果题目背景题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 样例 #2样例输入 #2样例输出 #2 样例 #3样例输入 #3样例输出 #3 提示答案1答案2-优化 [CSP-J 2021] 插入排序题目描述输入格式输出格式样例 #1样例输入 #1样…
阅读更多...
趣解设计模式之《小王的披萨店续集》

趣解设计模式之《小王的披萨店续集》

〇、小故事 在《小王的披萨店》这篇文章中&#xff0c;我们介绍了小王开披萨店的故事&#xff0c;并且为了解决多种口味披萨的扩展问题&#xff0c;引出了简单工厂和工厂方法模式。但是&#xff0c;故事仍在继续&#xff0c;如果芝加哥的披萨店和纽约的披萨店&#xff0c;要求…
阅读更多...
T8161B T8403 T8448 ICS TRIPLEX 具有支持物联网边缘的计算机视觉

T8161B T8403 T8448 ICS TRIPLEX 具有支持物联网边缘的计算机视觉

T8161B T8403 T8448 ICS TRIPLEX 具有支持物联网边缘的计算机视觉 edge Xpert(1.8版)现在提供了一个用于计算机视觉的插件&#xff0c;使用户能够在边缘运行他们的人工智能算法和视觉模型。基于英特尔的OpenVINO工具包&#xff0c;Edge Xpert计算机视觉服务为用户提供了在现…
阅读更多...
「大数据-2.2」使用命令操作HDFS文件系统

「大数据-2.2」使用命令操作HDFS文件系统

目录 一、HDFS文件系统基本信息 1. HDFS的路径表达形式 2.HDFS和Linux的根目录的区分 二、 使用命令操作HDFS文件系统 0. Hadoop的两套命令体系 1. 创建文件夹 2. 查看指定目录下内容 3. 上传文件到HDFS指定目录下 4. 查看HDFS文件内容 5. 下载HDFS文件 6. 拷贝HDFS文件 7.…
阅读更多...
快速幂算法-python

快速幂算法-python

看了大神讲解&#xff0c;理论在这里&#xff1a;快速幂算法&#xff08;全网最详细地带你从零开始一步一步优化&#xff09;-CSDN博客 例题&#xff1a;求整数 base 的 整数 power 次方&#xff0c;对整数 num_mod 取幂。 python 代码如下&#xff1a; import timedef norm…
阅读更多...
经历网 微信二维码 制作方法

经历网 微信二维码 制作方法

1、谷歌浏览器&#xff0c;打开要制作微信二维码的 网站页面 2、点击页面空白处&#xff08;此步为了使鼠标激活页面&#xff0c;可省&#xff09;&#xff0c;点击鼠标右键&#xff0c;弹窗 点选 为此页面创建二维码&#xff0c;点击下载到自己指定的地方。完成。 下载下来的…
阅读更多...
小黑子的java项目开发理解

小黑子的java项目开发理解

小黑子的理解 一、基于Maven模板构建的三种常见Java项目——基于maven二、通常的java目录结构utils层 工具包model层&#xff08;pojo层&#xff09;exceptions层 报错包dao层&#xff08;mapper层&#xff09;[impl包—查询数据库]service层 定义接口 [impl—实现事务]control…
阅读更多...
Docker-Windows安装使用

Docker-Windows安装使用

1.下载docker https://cr.console.aliyun.com/cn-hangzhou/instances/mirrors 2.配置虚拟化环境 通过控制面板“设置”启用 Hyper-V 角色 右键单击 Windows 按钮并选择“应用和功能”。选择相关设置下右侧的“程序和功能”。选择“打开或关闭 Windows 功能”。选择“Hyper-…
阅读更多...
Ubuntu性能分析-ftrace 底层驱动

Ubuntu性能分析-ftrace 底层驱动

1、框架介绍 ftrace内核驱动可以分为几部分：ftrace framework，RingBuffer，debugfs，Tracepoint，各种Tracer。 ftrace框架是整个ftrace功能的纽带，包括对内和的修改，Tracer的注册，RingBuffer的控制等等。 RingBuffer是静态动态ftrace的载体。 debugfs则提供了用户空间…
阅读更多...
【李沐深度学习笔记】Softmax回归

【李沐深度学习笔记】Softmax回归

课程地址和说明 Softmax回归p1 本系列文章是我学习李沐老师深度学习系列课程的学习笔记&#xff0c;可能会对李沐老师上课没讲到的进行补充。 Softmax回归 虽然它名字叫作回归&#xff0c;但是它其实是分类问题 本节课的基础 想要学会本节课得需要一点基础&#xff0c…
阅读更多...
day9.30

day9.30

消息队列实现进程之间通信方式代码&#xff0c;现象 #include<myhead.h>//消息结构体 typedef struct {long msgtype; char data[1024]; }Msg_ds;#define SIZE sizeof(Msg_ds)-sizeof(long) int main(int argc, const char *argv[]) {//1、创建key值…
阅读更多...
安全渗透测试基础之-Nessus漏洞扫描工具(安装下载)

安全渗透测试基础之-Nessus漏洞扫描工具(安装下载)

【注：本文中所需软件请回复公众号后获取，有任何问题请留言，看到会第一时间回复，毕竟我有自己的工作，分享经验并不是主业，不能时刻关注到。如果您觉得我写的好，请记得将公众号设为星标公众号，否则下次可能找不到。先谢谢各位愿意努力奋斗的小伙伴们了。】 本篇是安装下…
阅读更多...
UML学习笔记

UML学习笔记

前言 UML&#xff08;Unified Modeling Language&#xff09;是一种对软件密集系统进行可视化建模的一种语言。有了图后来就可以一目了然。 C中有好多继承图&#xff0c;我都看不懂&#xff0c;所以就来学习一波&#xff5e; -代表私有&#xff08;private&#xff09;的表示…
阅读更多...
经典网络解（三） 生成模型VAE | 自编码器、变分自编码器|有监督，无监督

经典网络解（三） 生成模型VAE | 自编码器、变分自编码器|有监督，无监督

文章目录 1 有监督与无监督2 生成模型2.1 重要思路 3 VAE编码器怎么单独用&#xff1f;解码器怎么单独用&#xff1f;为什么要用变分变分自编码器推导高斯混合模型 4 代码实现 之前我们的很多网络都是有监督的 生成网络都是无监督的&#xff08;本质就是密度估计&#xff09;&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023