1. 首页
  2. IT资讯

Dedecms二次开发星星评分功能 | 技术

“u003Cdivu003Eu003Cpu003EDede创建内容网站,此处以创建的电影网站为背景,实现星星评分功能。u003Cu002Fpu003Eu003Cpu003E1Fu003Cstrongu003E星星评分功能u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cp class=”ql-align-center”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F38b7058ade6c475590df2ae20f21f341″ img_width=”549″ img_height=”200″ alt=”Dedecms二次开发星星评分功能 | 技术” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E思考:u003Cu002Fpu003Eu003Cpu003E这个星星评分功能的实现思路和步骤?u003Cu002Fpu003Eu003Cpu003E从以前的网站中,观察这个效果,得到实现思路:u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E① 前端效果:u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Ea) 一个完整的星星其实是由两个一半星星图片组成的u003Cu002Fpu003Eu003Cpu003E rank_1.gif + rank_2.gif = 一个金色星星u003Cu002Fpu003Eu003Cpu003E rank_3.gif + rank_4.gif = 一个灰色星星u003Cu002Fpu003Eu003Cpu003E 所以,评分值是10分制,那么星星图片的总数就是20个。u003Cu002Fpu003Eu003Cpu003Eb) 星星的图片的存储位置 u002Ftempletsu002Fa67u002Fimagesu002Fu003Cu002Fpu003Eu003Cp class=”ql-align-center”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F0e780c1389c34f09bb562bf1d38bccff” img_width=”554″ img_height=”74″ alt=”Dedecms二次开发星星评分功能 | 技术” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Ec) 随着鼠标的移动,可以看到,鼠标悬放图片的左边全部变成金色星星,右边则变成了灰色星星。u003Cu002Fpu003Eu003Cpu003Ed) 当我们点击星星图片,则上方的评分值和评分人数会发生对应的计算,产生新的结果。【这里很明显就设计到了后台的逻辑操作,也就是更新数据库了。】u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E②后台步骤:u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E1. 接收到前端的点击图片以后的变化,接收到前端发送过来的参数。【这里我们使用ajax发送到服务器】u003Cu002Fpu003Eu003Cpu003E2. 服务器会进行一定的计算然后产生新的评分值 和 评分人数,这两个值肯定要存入数据库的【 数据库操作 】u003Cu002Fpu003Eu003Cpu003E3. 把最终结果告诉给前端,前端得到结果以后,及时更新。u003Cu002Fpu003Eu003Cpu003E步骤:u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E· 前端实现星星评分效果u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Ea. 打开内容页的模板,然后找到对应的代码,把所有的星星图片换成灰色的。u003Cu002Fpu003Eu003Cp class=”ql-align-center”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F490694796cc04afa98be26d7fa228ab4″ img_width=”505″ img_height=”215″ alt=”Dedecms二次开发星星评分功能 | 技术” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eb. 使用DOM 操作获取到对应的星星图片,实现随着我们鼠标悬放显示对应星星颜色的效果。u003Cu002Fpu003Eu003Cpu003E代码:模板文件中引入jQuery并测试jQuery是否成功引入。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F99a719fdffae4c738aaae201bf74ad07″ img_width=”554″ img_height=”347″ alt=”Dedecms二次开发星星评分功能 | 技术” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cp class=”ql-align-center”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F64f9aba9c9b2436b9a3201d1e972040c” img_width=”554″ img_height=”175″ alt=”Dedecms二次开发星星评分功能 | 技术” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003EPingfen.js代码实现星星颜色的变化:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002Fa17589d1b04d4006b2c1064465ac31d1″ img_width=”554″ img_height=”210″ alt=”Dedecms二次开发星星评分功能 | 技术” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E效果:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fc7250c56e81345e79e5c72ac56108ddf” img_width=”554″ img_height=”200″ alt=”Dedecms二次开发星星评分功能 | 技术” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E· 实现星星评分的后台功能u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E思考:u003Cu002Fpu003Eu003Cpu003E1. 前端通过什么方式才能在页面不刷新的情况下把数据发送到后台?ajaxu003Cu002Fpu003Eu003Cpu003E2. 需要哪些数据到后台去?评分值、 当前电影的IDu003Cu002Fpu003Eu003Cpu003Ejs代码:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fa32619d1d90b4d219f1648e66dfcbedb” img_width=”554″ img_height=”256″ alt=”Dedecms二次开发星星评分功能 | 技术” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E当没有分数传输到后台时执行的js代码:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fc2ebfba7cc8d48109db9d336fecf94e3″ img_width=”554″ img_height=”230″ alt=”Dedecms二次开发星星评分功能 | 技术” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E模板自定义参数的写法:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fc6133f305c52465188c7b3efbc888e62″ img_width=”554″ img_height=”238″ alt=”Dedecms二次开发星星评分功能 | 技术” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eajax发送数据到后台:u003Cu002Fpu003Eu003Cpu003E发送后台哪个页面?这里dedecms推荐把第三方扩展的功能全部写在 u002Fplus目录中。所以,我们可以直接创建一个后台的php页面在plus中,接收 ajax发送的数据。u003Cu002Fpu003Eu003Cpu003E这个页面我们先创建好,例如我们现在创建一个页面 pingfen.php页面到 u002Fplus目录当中。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002Fdda837aa0b1a438cb6094d26caccdabc” img_width=”554″ img_height=”330″ alt=”Dedecms二次开发星星评分功能 | 技术” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E接着在这个php页面中, 我们先写一段接收我们前端发送过来数据。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F309b819b0d914955980d60f9c489a0dd” img_width=”554″ img_height=”73″ alt=”Dedecms二次开发星星评分功能 | 技术” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003EPingfen.phpu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fb604c7c70c754a09a545faa183a00a1a” img_width=”554″ img_height=”291″ alt=”Dedecms二次开发星星评分功能 | 技术” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cp class=”ql-align-center”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F552a2ada51b74ff0ad189e44eaf9a5f3″ img_width=”554″ img_height=”290″ alt=”Dedecms二次开发星星评分功能 | 技术” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E· 分析dedecms的数据库操作类u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E1.getOne 获取一条数据用来执行查询语句。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fe6228d827ecd45a2a6072a6df8070647″ img_width=”546″ img_height=”248″ alt=”Dedecms二次开发星星评分功能 | 技术” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E2. ExecuteNoneQuery2u003Cu002Fpu003Eu003Cpu003E执行一个返回影响记录条数的SQL语句就是我们的update语句。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F0fa8d469db8e4335a708d7008e041b6f” img_width=”554″ img_height=”115″ alt=”Dedecms二次开发星星评分功能 | 技术” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E上边两个方法的应用。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F81742db1f120495b9dd928f5b36a9353″ img_width=”553″ img_height=”283″ alt=”Dedecms二次开发星星评分功能 | 技术” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E查看ajax的执行结果。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F35fca25b65a44ba6b4418ab96b4867d8″ img_width=”554″ img_height=”279″ alt=”Dedecms二次开发星星评分功能 | 技术” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cp class=”ql-align-center”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F8ac0db09ef0f4eb2809182976fa46ac9″ img_width=”554″ img_height=”133″ alt=”Dedecms二次开发星星评分功能 | 技术” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003EJson 格式数据如何转化 $data = json_encode(‘数组’)u003Cu002Fpu003Eu003Cpu003E3Fu003Cstrongu003E把结果输出到前端u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E在模板中声明要接收的数据是json格式u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F705f3772b830405bb788cb350da24d1b” img_width=”554″ img_height=”272″ alt=”Dedecms二次开发星星评分功能 | 技术” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cp class=”ql-align-center”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:Dedecms二次开发星星评分功能 | 技术

主题测试文章,只做测试使用。发布者:程序员,转转请注明出处:http://www.cxybcw.com/26824.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code