博客系统流程

Posted 2020-10-15

 

一、登录的基本流程：

登录
	—username
	-password
	-验证码：
	
		-前段向后台发送图片请求
		-后台生成一张图片
			-因为图片不应该存到磁盘所以导入io模块的BytesIO把图片存到内存
			-用PIL模块中的Image生成一张图片
			-用PIL模块中的ImageDraw给图片加文字
			-用PIL模块中的ImageFont给文字添加样式
			-导入random模块，生成的图片是随机的
			-生成图片的同时将生成的随机字符存入valid_list
			-用二进制的方法打开图片
			    —赋值给data
				-将valid_list转换为字符串赋值给valid_str
				-将valid_str存入session中便于验证键为：keepValidCode 值为：valid_str
				-将data返回给前端进行渲染
	-提交
		-给提交按钮绑定事件
			-发送ajax请求：
				-url为/login/
				-请求方式为POST
				-将data发送到后端
					-data里面存放用户名，密码，验证码的值
				-后端接收请求判断是否为ajax
					-如果是ajax
						-拿出request中的用户名，密码，验证码
						-首先拿出request中的验证码与session中keepValidCode的值进行比对
						-如果验证码比对成功则进行用户名和密码比对
						-全部比对成功则将login_response中is_login值设为True
						-将login_reponse进行序列化发送给前端
							-执行ajax中的success
							-接收后台响应数据data
							-将data进行反序列化
								-is_login的值为True进入index界面
								-否则对data中的error_msg进行渲染
						-如果比对出错
							-将错误信设成login_response中error_msg的值
							-将login_reponse序列化发送到前端
						
				-如不是ajax
					返回登录界面
				

二、注册的基本流程：

注册流程：
	form(在注册页面生成html标签定规则，检测用户输入信息，打包正确信息) 
	定义规则：
		-username
		-password
		-repeat_pwd
		-email
		
	注册：
	Form生成标签
		-username
		-password
		-repeat_pwd
		-email
	     avatar不是Form生成的	
		-avatar(相对位置)
			-三个标签(绝对位置,切设置三个标签的大小一致)
				-label用来在前端显示头像标题的
				
				其他两个标签向后移80，是重叠在一起的
				-img 用来放置头像图片文件的，为了使用户点图片上传
					 文件，所以重叠，点img就等于点了input开始里是在里边
					 放置默认图片，用户不上传就用静态文件中的的默认图片
				-input 用来上传图片打的为了img所以在这设透明度为0
		头像预览
			-给input绑定change事件
				-定义一个变量ele_file获取上传的文件
				-定义变量reader用来获取input中图片路径
					-给reader绑定onload事件将reader获取的图片路径替换img中的图片路径
				这样就实现了头像预览	
		-提交
			-submit
				-提交绑定click事件
					-定义formdata(打包存放数据)
				-发送ajax请求
					请求url：/reg/
				    请求方式：POST
					发送数据：formdata
		
	后端reg接收请求：
		-如果请求是ajax
			-定义form_obj接收前端发过来的数据进行验证
			-定义一个字典regRespones用来保存用户名和错误信息
			-如果数据验证成功
				-将数据赋值给各变量
				-在用户表中创建一条新记录
				-将用户名存入字典中的user中
			-否则直接将错误信息存入字典中的errorsList中
			-将字典regResponse进行序列化后发送至前端
	执行前端ajax中的success
		-先将data反序列化
			-data中user有值的话
				-进入登录页面
			-否则循环遍历errorsList
				-将错误信息渲染到对应的span中
				-给span添加样式是文字变为红色