解决：使用Photoswipe进行图片展示

python 2.7
Django 1.6.1
photoswipe

---

前言

对于前端的照片存储，已经在前一篇博文中进行展示，使用的是dropzone.js的包，图片存储的作用就是为了数据的再调用，所以在此片进行上次图片的前端展示，因为我是个前端萌新，所以方法比较稚嫩，希望观众老爷不要嘲笑，多多指教咯。

如何上传图片并保存请看：dropzone拖拽图片上传并保存到本地

---

样式的选择和调试请参考这里，非常好用---photoswipe教程事例

html

    
    


    
    


        
        
        

            

            

            

        

        
        


            


                

                


                

                

                

                

                
                
                

                    

                      

                        

                      
                    
                
            

            

                
 
            

            
            

            
            

            

                

            

          

        


//根据官方教程，这里的style不管写在哪都可以调用，因为class名字比较独特吧

javascript

urls.py

这里构成的是一种前端映射到view的函数比如说，网页的后缀变成了get_case3了，映射的处理的函数指的就是后面的get_case3(完全可以写的不一样，只要找对映射关系就可以了)

urlpatterns = patterns('enter.views',
    
    url(r"^get_case3/","get_case3"),
   
)

view.py

def get_case3(request):
  order_id = request.GET.get("order_id","")
  conn= MySQLdb.connect(
          host=你的host主机,
          port = 端口号,
          user='root',
          passwd=密码,
          db =数据库名字,
    )
  cur = conn.cursor()
  conn.set_character_set('utf8')
  cur.execute('SET NAMES utf8;')
  cur.execute('SET CHARACTER SET utf8;')
  cur.execute('SET character_set_connection=utf8;')
  # 选择出标号对应的所需要的图
  cur.execute("select img from  enter_img where order_id='"+order_id+"'")
  server_info_advance=cur.fetchall()
  advance_info2=[]
  for data3 in server_info_advance:
    dict_result={}
    dict_result["img"]=data3[0]
    advance_info2.append(dict_result)
  advance_info3=[]
  if len(advance_info2)<100: # 
    return advance_info2
  else:
    return  advance_info3
    

model的表现形式

# 数据库名字叫做enter_img
+-----+----------+-------------------------------------+
| id  | order_id | img                                 |
+-----+----------+-------------------------------------+
| 460 | 1234     | upload/1491036872.27WechatIMG2.png  |
+-----+----------+-------------------------------------+

这里回顾下过程，整个流程在于在前端触发一个带返回的id号，之后将这个id号代入后台进行数据库的索引，之后再从后台构造好传递到前端，前端在进行图片展示，photoswipe这个js包的作用就是完成图片比较酷炫展示的作用，其中要注意的是图片尺寸的选择，后续有空需要把自动获取尺寸的代码构造出来，目前如果不是非本分辨率的图片，放大后将呈现出很差的体验效果，后续可能会对图片上传时，对图片尺寸的进行获取和存值，这样再进行调出的时候，效果就会好很多。--来自自学前端三个礼拜的小白的心声

---

Pay Attention

• 关于id的传入，这里用的方法非常的朴素，应该是从一个页面点击该id然后获取该id下的明细，也就是涉及到页面跳转的概念了，然后再将id传递进入后台，再操作

---

最后

关于为啥我把上传图片和展示图片分成两篇来写，，，，，因为，，我懒啊，哈哈哈哈，不闹，片段剥离，有利于重复利用，嗯，就是酱紫

---

后续

解决问题毕竟还是需要进行复盘和记录，这样对以后的发展和回顾有非常大的益处，构造方法上的选择需要接轨目前主要的方法，对于前后台脱离的团队，需要进行标准的数据传输，前端妹子们可不管后台怎么构造方法，她们只要进行前端页面展示就可以了(然而ui，美工，后台都tm是我写0.0)，后续等我有空闲下来的时间，把整个构建构建工程和app的过程都仔细写一下，从整个项目中剥离出来让纯正小白也可以一下子学会，目前只能当为自己的学习笔记，如果思想对你有所帮助，我也很高兴。共勉