页面添加头像功能练习

1:导入用户的头像这个功能不难实现,导入头像其实就是在原有的用户上添加一项新的功能而已需要用到Ajax的post请求方法和数据库的物理路径的记录,还有并不是所有的用户都可以使用者一项功能那就是超级管理员,超级管理员拥有页面的全部功能的权限一般是给开发人员进行页面调试来使用的是不能出现任何的问题其余的用户就只有一小部分的权限操作所以没有太多的限制操作。
在MVC项目里开发的时候都需要配合SQL数据库来使用,页面上传递过来的数据都需要依靠SQL数据库来进行保存使用数据库在项目开发的时候起到了非常大的用处。
在项目飞机定票系统添加导入头像这个功能的时候需要用到数据库,头像不像int数据可以保存到SQL中所以在添加这一项功能前还需要在数据库中设置意见新的数据类型图片名称设置为picture而数据类型设置为nvarchar(500)的长度。如图
在这里插入图片描述

在数据库设置好后剩下的就是MVC的事了,添加新的功能前还需要重新把数据库导入一遍主要的目的还是在mvc里已经引用的数据库是不会自动的更新的需要制定的删除某张表在重新单独的引入到数据库中也就是更新模型的操作把删除的表重新引入就可以了。
在这里插入图片描述

2:页面布局,添加新的功能在页面上也需要添加新的布局如下图

在这里插入图片描述

然后就是表格的渲染,渲染表格添加头像的名称,这一步需要到控制器中添加新的方法比如给头像进行数据赋值的操作,因为它属于B-PNR用户表里说以数据查询的代码不需要进行任何的修改操作直接进行赋值操作就可以了。
表格的渲染,如图
在这里插入图片描述

Templet的是layui的方法它和onclick同一个意思的后面就是方法的名称因为还有一个头像,上面定义的方法是为了定义一个按钮
在这里插入图片描述
在这里插入图片描述

’这些就是定义的方法,主要用来显示图片和按钮的操作在显示图片操作的时候需要用到控制器的方法判读用户有没有图片。
在这里插入图片描述

图片双击事件,这个事件是用来调出文件读取器的一个方法需要配合jqury的文件选择点击事件才可以使用,这个事件就直接替代了按钮直接双击图片的区域就可以调用出文件读取器了。
上传头像的时候还需要用到文件格式的判断,文件格式的判断用的是正则表达式的方法来判断的利用正则判断文件的后缀然后在进行过滤如果符合是符合的文件就传递到控制器进行保存的操作如果不符合文件图片的格式就触发else的文字提示。
在这里插入图片描述

判断文件是靠页面上的if判断来进行判断的,这判断首先要声明一个var的变量这个变量。

在这里插入图片描述

图片格式正确的话就传递到控制器里进行判断的操作,在控制器中添加新的方法的时候需要把方法添加到事务里面添加到事务里面主要是防止传递数据的时候防止突然断网之类的情况出现然后导致数据库的数据异常。
判断是否上传图片就主要靠判断的操作。
在这里插入图片描述

判断文件不为null个文件必须大于0才会执行保存的代码,否则就执行else的代码不做任何的操作,为了上传图片 不做然和的处理 把数据库中的图片直接设置到user对象
在这里插入图片描述

在判断的时候有可能用户已经存在头像了这个时候就需要用到另一个的判断,实现是保存的操作实现是判断了用户没有头像userPicture.ContentLength > 0的时候就开始执行保存的代码保存需要用到IO流的保存方法,首先判断文件的类型(imgExtension)然后就是获取文件的后缀(userPicture. FileName)
在这里插入图片描述

执行完后就开始重新命名文件的操作了,命名的操作是用日期作为文件的名称通过获取本地时间代码DateTime.Now.ToUniversalTime然后转换为字符串然后进行拼接就可以获得全新的文件名,文件命名号了后就是保持图片的操作图片不能保存到数据库中需要在控制器中添加一个Server.MapPath的方法来指定它的路径才可以进行保存的操作如图。
在这里插入图片描述

Document这个路径是本地项目的路径将图片保存到userPicture的文件夹里面,最后一步保存
在这里插入图片描述

还有一种情况就是用户已经存在图片了,那么就是先判断在删除方法依然是IO流的方法删除找到指定的路径后再进行if判断文件是否存在
在这里插入图片描述

利用IO流判断文件是否存在,如果文件存在的话就执行利用同样的方式IO流删除指定的文件,在用Delete的方法来删除指定的文件。
:页面的数据请求,之前的post请求对图片这种文件没有效果因为这种文件post是请求不到数据的所有要利用Ajax的请求才能把图片订单数据请求到页面上,这个方法和之前的post不一样Ajax是使用FormDate发送数据的,
在这里插入图片描述

Form的功能就是继承了FormData的功能发送数据
区别在于和普通的post方法多了一段form.append的方法而已

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值