Dedecms二次开发:电影网站星星评分功能技术

2019-04-2506:56:24网站建设与开发Comments3,186 views字数 1055阅读模式
Dede创建内容网站,此处以创建的电影网站为背景,实现星星评分功能。
1F
星星评分功能
Dedecms二次开发:电影网站星星评分功能技术
思考:这个星星评分功能的实现思路和步骤?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

从以前的网站中,观察这个效果,得到实现思路:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

① 前端效果:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

a) 一个完整的星星其实是由两个一半星星图片组成的文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

rank_1.gif + rank_2.gif = 一个金色星星文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

rank_3.gif + rank_4.gif = 一个灰色星星文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

所以,评分值是10分制,那么星星图片的总数就是20个。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

b) 星星的图片的存储位置 /templets/a67/images/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

Dedecms二次开发:电影网站星星评分功能技术
c) 随着鼠标的移动,可以看到,鼠标悬放图片的左边全部变成金色星星,右边则变成了灰色星星。d) 当我们点击星星图片,则上方的评分值和评分人数会发生对应的计算,产生新的结果。【这里很明显就设计到了后台的逻辑操作,也就是更新数据库了。】文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

②后台步骤:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

1. 接收到前端的点击图片以后的变化,接收到前端发送过来的参数。【这里我们使用ajax发送到服务器】文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

2. 服务器会进行一定的计算然后产生新的评分值 和 评分人数,这两个值肯定要存入数据库的【 数据库操作 】文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

3. 把最终结果告诉给前端,前端得到结果以后,及时更新。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

步骤:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

· 前端实现星星评分效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

a. 打开内容页的模板,然后找到对应的代码,把所有的星星图片换成灰色的。
Dedecms二次开发:电影网站星星评分功能技术
b. 使用DOM 操作获取到对应的星星图片,实现随着我们鼠标悬放显示对应星星颜色的效果。代码:模板文件中引入jQuery并测试jQuery是否成功引入。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

Dedecms二次开发:电影网站星星评分功能技术文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

Dedecms二次开发:电影网站星星评分功能技术
代码实现星星颜色的变化:Dedecms二次开发:电影网站星星评分功能技术文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html
效果:
Dedecms二次开发:电影网站星星评分功能技术
· 实现星星评分的后台功能思考:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

1. 前端通过什么方式才能在页面不刷新的情况下把数据发送到后台?ajax文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

2. 需要哪些数据到后台去?评分值、 当前电影的ID文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

js代码:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

Dedecms二次开发:电影网站星星评分功能技术文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

当没有分数传输到后台时执行的js代码:Dedecms二次开发:电影网站星星评分功能技术文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html
模板自定义参数的写法:Dedecms二次开发:电影网站星星评分功能技术文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html
ajax发送数据到后台:发送后台哪个页面?这里dedecms推荐把第三方扩展的功能全部写在 /plus目录中。所以,我们可以直接创建一个后台的php页面在plus中,接收 ajax发送的数据。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

这个页面我们先创建好,例如我们现在创建一个页面 页面到 /plus目录当中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

Dedecms二次开发:电影网站星星评分功能技术
接着在这个php页面中, 我们先写一段接收我们前端发送过来数据。
Dedecms二次开发:电影网站星星评分功能技术
Dedecms二次开发:电影网站星星评分功能技术
Dedecms二次开发:电影网站星星评分功能技术
· 分析dedecms的数据库操作类获取一条数据用来执行查询语句。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html
Dedecms二次开发:电影网站星星评分功能技术
2. ExecuteNoneQuery2执行一个返回影响记录条数的SQL语句就是我们的update语句。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

Dedecms二次开发:电影网站星星评分功能技术文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

上边两个方法的应用。
Dedecms二次开发:电影网站星星评分功能技术
查看ajax的执行结果。Dedecms二次开发:电影网站星星评分功能技术文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html
Dedecms二次开发:电影网站星星评分功能技术
Json  格式数据如何转化   $data = json_encode(‘数组’)
3F
把结果输出到前端

在模板中声明要接收的数据是json格式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html

Dedecms二次开发:电影网站星星评分功能技术
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11434.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/cms/11434.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定