00:00
下面呢,我们来写线路的controller和页面。首先是controller。我们叫看错了。把它拷进来,那我们来看一下。这分页我们不说了,和之前的其实一样。他这块是。分页。然后是删除。然后呢是添加。然后修改。我们这块的话呢。再来看一下我们的线路添加,因为我们线路添加这一块要写我们的,呃,线路的这个所属分类,还有所属的商家,所以我们这边需要把它生成下拉框,我们这边model还是没有导入包。
01:09
UIUI上面这个。那这一块呢,还有我们的修改也是一样的,修改也需要我们准备下拉框修改数据。也是一样的。那么接下来的话呢,我们把前端的页面也给它拷进来。这块。那么拷入我们的页面,页面以后呢,我们来写上我们的CTRL里边来写我们的图片上传功能。找到我们的E。
02:03
就是我们这个。能学到这一款。那这一块呢,首先呢,是我们项目的项目的部署目录。我们把它放到了我们的根目录,就我们Tom。根目录叫一个save pass。然后呢,我们的根数request点。Context。Sole。Get我们的,然后get的real。我们在这块呢,呃,需要再加一个,加上我们把它放到我们的下。
03:02
然后。然后是叫我们的阿姨妹姐。放到我们的这个目录下,所以在这一块呢,我们给它换一下。放到这个里边。那么接下来的话呢,我们需要处理我们文件名重复的问题,就我们上传完一个文件,再上传另一个文件的时候,它可能会覆盖掉,这个呢,就是我们的,呃,处理我们的文件名重复处理。文件名重复,那么这一块呢,我们处理。呃,文件名相同的,用的是我们的UUID。我们的UUID。然后呢,产生一个随机数,我们red有ID,然后呢,把它转换成to string,呃,我们的to string。
04:02
然后我们还需要。Replace。哦。在这一块呢,我们要去除它中间的这个减号,然后这样。还要需要加上它的,呃,我们文件名。不是点JPG吗?或者别的这一块呢,还需要就处理我们有一个中间有个点,然后呢,再加上我们的文件这个feel name。我们的YouTube这块应该是用我们的U来加上我们后边这个扩展名get extension,然后呢,这一块需要用我们的二姨妹姐。想得到它原始的。名称通过原始名称呢。就我们这个。
05:01
我来给他返回。Introduce。这一块呢,我们叫name。那这一块呢,就是通过我们的原始的文件名。来看一下原始的文件名,最后呢,来得到它的文件的这个扩展名。好的,我们继续。那么接下来的话呢,我们需要去判断我们这个目录的这个名称,我们刚创建,刚创建的时候呢,这个目录肯定是不存在的,对吧,那不存在的话,我们这块的话就需要就是先来创建。你这块是上传目录。上传目录。不存在。先创建,然后呢,我们这块用我们的feel。
06:10
我们这块是用个feel,又一个。然后呢,我们这个传到我们的这一块。我们创建到这边,然后呢,我们进行一个判断,If呢,我们的feel。点我们的一个类,这个呢,是存在我们不存在的这样。然后呢,用我们的f.make d make Dis。好,这样的话,然后呢,我们进行文件的保存,保存文件。
07:00
用我们的这个multi part feel这个对象,然后呢,这边应该它有一个叫transfer to。我们需要传两个参数,第一个呢,是我把我们的这个。Film传进来,然后呢,我们的文件名呢,是叫我们的film name。好。这块呢,选这块呢,选择我们的transfer to,然后另一个我们的feel。首先呢,是我们。文件,然后呢,把我们的文件名file name。写进来好,然后呢,上传完毕以后呢,我们还需要把这个文件名作为相对路径传到我们这个root当中来看我们用root。
08:06
点我们的set而已。背景。这块呢,需要传我们就我们这个。我们把它放拿进来。在这。然后呢,后边需要再加上我们的。那这个呢,是我们的设置root。我们的RMG。属性等于图片。相对路径,然后呢,我们最后再保存我们的root就可以了,那这这个呢,是我们spring mvc的文件上传,接下来呢,我们来看一下页面,那么在这个页面页面部分呢,我们来看一下我们的文档和笔记。
09:22
在这一块页面部分呢,使于使用的是我们基于boottrap图片上传插件啊,叫input,然后呢说我们的boottrap input是一款非常优秀的H5文件上传插件,它呢支持我们的文件预览和多选的一系列的特性,然后呢还支持我们BOOTP3和四版本,具有非常多的特性,比如说多文件选择。那么这个插件呢,最简单的就是最简单的能够帮我们完成这个文件上传的功能,且使用我们的bootstrapt这个样式,还可以支持我们多种文件的预览啊,Images啊,Text h HTML video这些,另外呢,它还支持我们的阿贾克斯的方式上传文件,这块呢,我们没有用到,还可以看到我们的上传进度,支持拖拽的方式添加和删除文件,那他们的它的用法呢,其实也很简单来看一下,就是说如果我们将一个CSS的class等于F属性赋予我们的input标签,什么意思呢?就把它把这个class等于few放到我们的input标签当中,这个插件呢,就会把就会自动的把我们的这个字段啊,Input当中,标签当中的这个字段转换为我们的文件输入的控件,它这个方式有两种啊,第一种方式呢,就使用我们的这种input标签当中加入我们的class等file,第二种方式呢,就是采用我们的啊javascript。
10:48
啊,单独初始化我们的插件,那么在这块这一块呢,需要注意的就是我们如果使用我们的这个input标签当中的class等于feel啊,使用我们这个class等于fail这种方式呢,我们就不使用,不采用我们的Java script,要采用第二种呢,就把第一种我们就不加了,因为这这种重复的话,它会失去这个效果啊来看一下,就我们的这个这个呢,是我们的第一种方式,首先啊引入我们的这个依赖我们这块呢。
11:19
我们就不再多说这个东西了,这个是我们的,把这个依赖插件放到我们的HTML当中。然后呢,这个是第一种方法,这个呢是第二种方法,我们的。这一块这个是我们的回旋的option这个括号当中,好的,那接下来呢,我们来启动我们的idea,看一下效果。好,启动完成以后,打开我们浏览器。然后我们进行刷新。
12:17
然后进入我们的旅游线路。然后呢,点击一个添加。然后这一块呢,我们随便选一个北京,我们叫17日。所属的分类呢,我们给他换一个。国内有我们。全球自由行吧。这个呢,我们不画。然后我们选择1万缩略图,这一块我们来看一下。我们点击选择文件。然后呢,随便选一个。诶可以,然后我们点击提交。来看一下。没有问题。然后呢,我们来看一下我们的表。
13:06
点开我们的呃,Root tab抵抗root这个表。我们来新建一个查询。我们的查询。Top。我们新建一个查询,然后呢,我们在这一块呢,我们select我们的r image。这个。然后呢,我们从从我们的tab这个表中,我们来执行一下这条语句,我们来看一下。好,我们能够看到我们的这个图片啊,它是一个。随机产生的一个名称。然后呢,我们再来看我们这个修改这部分。那么在修改的时候呢,也需要我们来处理图片这块呢,还涉及到一个我们的图片的一个回显这块呢,用到一个属性叫我们的initial preview1这样的一个数组类型。
14:11
我们先用我们内联JS得到它的一个相对路径,然后把它的相对路径呢放到我们这个数组当中,我们来进行回显,如果说是有原原来图片存在的话,我们给它覆盖掉这样子。那么在修改的这个页面需要注意的一点就是啥,我们这块也需要引入这个相关依赖的这个插件。那么我们来看一下修改这块。我的idea,我们打开我们的页面,不是idea。这块呢,我们旅游线路,然后呢,刚才把我们上传上的那张那个信息点击修改。你看它这个图片就出来了,然后我们给它修改一下,改成。三日游。
15:03
这块呢,我们价钱给它换一下。我们交100块钱。然后呢,我们把图片重新选择一下。好,这样的话呢,我们就把这个图片。就给他完成了。这样。然后呢,我们再来看一下它这个图片啊,我们这边修改的方法我们还没有做,所以我们选完图片以后来看一下。我们随便选一个图片,选完以后这块是能够换的,但是我们提交以后回来再看它还是原来的图片。那接下来呢,我们就把我们controller这块,我们修需要修改的这一块,我们给它来实现一下。那因为我们这一块,我们修改的这个逻辑和我们添加的这块是一样的,我们把这个方法给它进行一个重构。
16:07
就我们这块。往下到这儿。然后我们的T。然后呢,是我们的这个。那么然后呢,我们把这个就是我们这个这个方法,我们给它复制,然后呢,来拿到我们修改这一块。这。完成以后呢,我们来进行再重启一下。我们再来看一下这个效果。
17:00
好,我们完成了以后,我们打开浏览器,我们来看一下这个。我们刷新。嗯,我们刷新以后呢,呃,我们这个图没有了,就因为我们重新部署以后,把这个图片删了,这是我们idea自己删的,没有关系,然后我们重新来选择一张图片。我们选择第一个,然后呢,我们点击提交。我们再回过头来再看一下。诶。这个时候呢,我们就可以看到我们这个功能已经实现了,我们再来选择重新选一个选还是我们选这个吧,粉的这个,然后来提交再来看一下。好的,没有问题。
我来说两句