使用语言

css
Js
htm

使用框架

vue前后端分离技术

代码部分

主页部分

movie.html

 <!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" href="./movie.css" /></head><body><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 网页上部分 --><div id="header"><button id="header_button"   @click="jump" >客服</button><h1 id="header_h">电影列表</h1></div><!-- 网页中间部分 --></div><div id="get"><table id="sort"><div id="content-nav"><tr><th>电影海报</th><th width="100">电影名称</th><th>简介</th><th width="50">评分</th><th width="150">操作</th></tr></div><tr ><div ><th :contenteditable="change1"><img  v-show="del1" height="300" width="300" :src="joke1.m_photo"/></th><th :contenteditable="change1" v-show="del1">{{joke1.m_name}}</th><th id="tst1" :contenteditable="change1" v-show="del1">{{joke1.m_introduce}}</th><th :contenteditable="change1" v-show="del1">{{joke1.m_score}}</th><th><button style='background-color:rgba(30, 128, 255, 0.959);color:white' @click="jump1()">详细</button><button style='background-color:rgba(30, 128, 255, 0.959);color:white' @click="changeit1(joke1.m_id-1)">修改</button><button style='background-color:rgba(255, 30, 105, 0.959);color:white' @click="delete1()">删除</button></th></div></tr><tr ><div ><th :contenteditable="change2"><img  v-show="del1" height="300" width="300" :src="joke2.m_photo"/></th><th :contenteditable="change2" v-show="del1">{{joke2.m_name}}</th><th id="tst2" :contenteditable="change2" v-show="del1">{{joke2.m_introduce}}</th><th :contenteditable="change2" v-show="del1">{{joke2.m_score}}</th><th><button style='background-color:rgba(30, 128, 255, 0.959);color:white' @click="jump2()">详细</button><button style='background-color:rgba(30, 128, 255, 0.959);color:white' @click="changeit2(joke2.m_id-1)">修改</button><button style='background-color:rgba(255, 30, 105, 0.959);color:white' @click="delete2()">删除</button></th></div></tr><tr ><div ><th :contenteditable="change3"><img  v-show="del1" height="300" width="300" :src="joke3.m_photo"/></th><th :contenteditable="change3" v-show="del1">{{joke3.m_name}}</th><th id="tst3" :contenteditable="change3" v-show="del1">{{joke3.m_introduce}}</th><th :contenteditable="change3" v-show="del1">{{joke3.m_score}}</th><th><button style='background-color:rgba(30, 128, 255, 0.959);color:white' @click="jump3()">详细</button><button style='background-color:rgba(30, 128, 255, 0.959);color:white' @click="changeit3(joke3.m_id-1)">修改</button><button style='background-color:rgba(255, 30, 105, 0.959);color:white' @click="delete3()">删除</button></th></div></tr></table></div>    <script language="JavaScript" src="./movie.js"></script>
</body>
</html>

movie.css

th,tr
{text-align:justify;height:50px;vertical-align:justify;background-color:rgb(233, 240, 233);color:rgb(12, 11, 11);
}
#header{height: 100px;width: 100%;background-color: rgba(30, 128, 255, 0.959);text-align:right;vertical-align:justify;
}
#header_h{text-align:left;vertical-align:justify;
}

movie.js

new Vue({el: '#get',data () {return {joke1:[{}],joke2:[{}],joke3:[{}],del1:true,change1:false,change2:false,change3:false,n:0}},mounted () {var that=this;axios.get("http://192.168.10.63:8088/index").then(function(response){console.log(response.data);that.joke1=response.data[0];that.joke2=response.data[1];that.joke3=response.data[2];},function(err){ })},//按钮删除功能实现methods:{delete1:function(n){var that=this;axios.get("http://192.168.10.63:8088/deleteMovie?m_id=1").then(function(){alter("删除成功")},function(err){ })},delete2:function(){var that=this;axios.get("http://192.168.10.63:8088/deleteMovie?m_id=2").then(function(){alter("删除成功")},function(err){ })},delete3:function(){var that=this;axios.get("http://192.168.10.63:8088/deleteMovie?m_id=3").then(function(){alter("删除成功")},function(err){ })},//按钮修改功能实现changeit1:function(n){var that=this;that.change1=!that.change1;var element = document.getElementById("tst1");console.log(element.innerHTML)console.log(that.joke1.m_introduce)var m_id = that.joke1.m_id;var m_introduce=element.innerHTML;$.get("http://192.168.10.63:8088/editMovie",{"m_id":m_id,"m_introduce":m_introduce},function (data){$("#Newscore").val(data);// 前端更新数据，不用刷新})},changeit2:function(n){var that=this;that.change2=!that.change2;var element = document.getElementById("tst2");console.log(element.innerHTML)console.log(that.joke2.m_introduce)var m_id = that.joke2.m_id;var m_introduce=element.innerHTML;$.get("http://192.168.10.63:8088/editMovie",{"m_id":m_id,"m_introduce":m_introduce},function (data){$("#Newscore").val(data);// 前端更新数据，不用刷新})},changeit3:function(n){var that=this;that.change3=!that.change3;var element = document.getElementById("tst3");console.log(element.innerHTML)console.log(that.joke3.m_introduce)var m_id = that.joke3.m_id;var m_introduce=element.innerHTML;$.get("http://192.168.10.63:8088/editMovie",{"m_id":m_id,"m_introduce":m_introduce},function (data){$("#Newscore").val(data);// 前端更新数据，不用刷新})},//跳转至详情功能实现jump1:function(){window.location.href="detail.html?movie_id="+this.joke1.m_id;},jump2:function(){window.location.href="detail.html?movie_id="+this.joke2.m_id;},jump3:function(){window.location.href="detail.html?movie_id="+this.joke3.m_id;}}})var header=new Vue
(
{el:"#header",methods:{jump :function() {alert("call 18856355072")}  } }
)

详情页部分

detail.html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>影片详情</title><link rel="stylesheet" href="./detail.css" /></head>
<body><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!--页面上部分-->
<div  id="header">
<h1 class="title">{{movie_name}}</h1>
</div>
<!--页面中间部分--><div id="content"><table><tr><th><img height="600" width="500" :src="movie_picture" /></th><th><h2>导演</h2><p>{{movie_director}}</p><h2>编剧</h2><p>{{movie_wirter}}</p><h2>主演</h2><p>{{movie_actor}}</p><h2>简介</h2><p>{{movie_introduce}}</p><h2>上映日期</h2><p>{{movie_data}}</p></th></tr></table></div><!--页面下部分--><div id="comment">
<div id="comment1"><h1>评论区(在评分输完按回车提交)</h1>  <div class="输入框1"><input v-model="commentvalue"  autofocus="autofocus" autocomplete="off" placeholder="请输入你的评论"></div><div class="列表区1"><ul class="todo-list1"><li class="todo1" v-for="(item,index) in list"><div class="view1"><!-- <span class="index1">{{index+1}}</span> --><label>{{item}}</label></div></li></ul></div>
</div>
<div id="comment2"><h1>评分区(范围为0-10)</h1>  <div class="输入框2"><input v-model="commentvalue2" @keyup.enter="inputcomment" autofocus="autofocus" autocomplete="off" placeholder="请输入你的评论"></div><div class="列表区2"><ul class="todo-list2"><li class="todo2" v-for="(item,index) in list2"><div class="view2"><!-- <span class="index2">{{index+1}}</span> --><label>{{item}}</label></div></li></ul></div></div><!--平均分显示--><div id="average"><h1>平均分为{{average1}}</h1></div><script language="JavaScript" src="C:\Users\Administrator\Desktop\work\detail.js"></script>
</div><video autoplay loop muted><source src="C:\Users\Administrator\Desktop\work\back3.mp4" /></video></body>
</html>

detail.css

video{  position: fixed;  right: 0px;  bottom: 0px;  min-width: 100%;  min-height: 100%;  height: auto;  width: auto;  z-index:-999;
}
body
{color: rgb(250, 250, 250);background-color:transparent;
}
button
{color: rgb(253, 251, 251);
}
#header
{height: 100px;width: 100%;background-color:transparent;text-decoration-color: black;}
#average
{height: 300px;width: 33%;float: left;background-color:transparent;text-decoration-color: black;
}
.title
{vertical-align: bottom;text-align: center;
}
#content
{height: 600px;width: 100%;background-color:transparent;vertical-align:center;
}
#comment
{height: 300px;width: 100%;background-color:transparent;vertical-align:center;align-items: center;display: flex;justify-content:space-between;
}
#comment1
{float: left;width:33%;height:300px;}
#comment2
{height: 300px;float: left;width:33%;}
ul
{list-style-type:circle;
}

detail.js

new Vue
({el:"#comment",data(){return{list:[],list2:[],commentvalue:" ",commentvalue2:" ",movie_id:0,average1:0}},methods:{inputcomment:function(){var that=this;var url = location.search; //获取url中"?"符后的字串if (url.indexOf("?") != -1) {    //判断是否有参数var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串strs = str.split("=");   //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）//直接弹出第一个参数 （如果有多个参数 还要进行循环的）this.movie_id=strs[1]this.list.push(this.commentvalue)this.list2.push(this.commentvalue2)var score = this.commentvalue2;var mid = this.movie_id;var uid = 1;var judge = 1;$.get("http://192.168.10.63:8088/submitScore",{"m_id":mid,"u_id":uid,"score":score,"judge":judge},function (data){$("#Newscore").val(data);})  // 前端更新数据，不用刷新console.log(this.list2)console.log(this.movie_id)var len=this.list2.lengthvar sum=0for(var i = 0; i < len ; i++){sum +=parseFloat(this.list2[i]);}        this.average1=sum/len}   }}}
)
new Vue
({el:'#header',data(){return{movieid:"",movie_name:"",}},mounted () {var that=this;var url = location.search; //获取url中"?"符后的字串if (url.indexOf("?") != -1) {    //判断是否有参数var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串strs = str.split("=");   //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）//直接弹出第一个参数 （如果有多个参数 还要进行循环的）this.movieid=strs[1]axios.get("http://192.168.10.63:8088//movie_detail?m_id="+this.movieid).then(function(moviedetail){console.log(moviedetail.data);that.movie_name=moviedetail.data.m_name;},function(err){ })}}  }
)
new Vue
({el:'#content',data(){return{movie_picture:"C:/Users/Administrator/Desktop/work/photo1.webp",movie_director:"彼特·道格特 / 凯普·鲍尔斯",movie_wirter:"彼特·道格特 / 麦克·琼斯 / 凯普·鲍尔斯",movie_actor:"杰米·福克斯 / 蒂娜·菲 / 菲利西亚·拉斯海德 / 阿米尔-卡利布·汤普森 / 戴维德·迪格斯",movie_introduce:"究竟是什么塑造了真正的你？电影将聚焦乔伊·高纳（杰米·福克斯配音）。这位中学音乐老师获得了梦寐以求的机会——在纽约最好的爵士俱乐部演奏。但一个小失误把他从纽约的街道带到了一个奇幻的地方“生之来处”（the Great Before）。在那里，灵魂们获得培训，在前往地球之前将获得他们的个性特点和兴趣。决心要回到地球生活的乔伊认识了一个早熟的灵魂“二十二”（蒂娜·菲 配音），二十二一直找不到自己对于人类生活的兴趣。随着乔伊不断试图向二十二展示生命的精彩之处，他也将领悟一些人生终极问题的答案。",movie_data:"2020-12-25(中国大陆/美国网络) / 2020-10-11(伦敦电影节)"}},mounted(){var that=this;var url = location.search; //获取url中"?"符后的字串if (url.indexOf("?") != -1) {    //判断是否有参数var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串strs = str.split("=");   //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）//直接弹出第一个参数 （如果有多个参数 还要进行循环的）this.movieid=strs[1]axios.get("http://192.168.10.63:8088//movie_detail?m_id="+this.movieid).then(function(moviedetail){that.movie_introduce=moviedetail.data.m_introduce;that.movie_picture=moviedetail.data.m_photo},function(err){ })}}})

过程中遇到的问题

删除部分

对前端没什么难点，主要就是跟后端连接将要删除的对应的m——id然后后端将数据库中对应的数据删除

        axios.get("http://192.168.10.63:8088/deleteMovie?m_id=2").then(function(){alter("删除成功")

修改部分

在标签设置contenteditable属性用来控制页面是否可编辑
var element = document.getElementById(“id”); 来获取对应id所在的标签的编辑后的值element.innerHTML
然后通过

             var m_id = that.joke1.m_id;var m_introduce=element.innerHTML;$.get("http://192.168.10.63:8088/editMovie",{"m_id":m_id,"m_introduce":m_introduce},function (data){$("#Newscore").val(data);// 前端更新数据，不用刷新

将修改的数据传给数据库，页面刷新发现编辑成功

页面详情的制作

css部分学会了如何将一块div横向分割 代码如下
#content
{
height: 600px;
width: 100%;
background-color:transparent;
vertical-align:center;
}
#comment
{
height: 300px;
width: 100%;
background-color:transparent;

    vertical-align:center;align-items: center;display: flex;justify-content:space-between;
}
#comment1
{float: left;width:33%;height:300px;}
#comment2
{height: 300px;float: left;width:33%;}
#average
{height: 300px;width: 33%;float: left;background-color:transparent;text-decoration-color: black;
}

这里我们将conmment这块div成功分为，comment1，comme2，average，且各占33%的区块

添加背景视频
html部分设置标签

<video autoplay loop muted><source src="C:\Users\Administrator\Desktop\work\back3.mp4" /></video>

css部分这是video属性

video{  position: fixed;  right: 0px;  bottom: 0px;  min-width: 100%;  min-height: 100%;  height: auto;  width: auto;  z-index:-999;
}

详细页面功能实现

获取url中单个参数的值

        var that=this;var url = location.search; //获取url中"?"符后的字串if (url.indexOf("?") != -1) {    //判断是否有参数var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串strs = str.split("=");   //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）//直接弹出第一个参数 （如果有多个参数 还要进行循环的）

获取输入的评分值并加入数组，加权平均后传输给后端，然后首页评分改变

从数据库获取信息并存入详情页中的对应值跟之前主页的实现差不多，这里不做细讲

制作一个可以修改/删除/查看详情并评分的电影网页相关推荐

  1. 制作一个简单的照片查看器(支持缩放手势)

    本文主要实现的功能是制作一个照片查看器,点击照片能进入大图模式,支持左右滑动,支持手势缩放, 本文只演示1张图和3张图的效果,其他的效果分为为: 2张图的时候按照1行2列展示, 3张图的时候按照1行3 ...

  2. 【QT学习】制作一个简单的图片查看器（完整源码）

  3. C4D制作一个物体变换成另一个物体动画

    整体流程 1.用ps或者Ai绘制两条这样的轮廓线,可以通过旋转制作2个物体 2.将这两个物体放置在原点,并将物体轴心也放置在原点. 3.制作一个旋转,分别查看物体是否正确 4.去掉旋转生成器,添加矩阵 ...

  4. ​Unity 游戏开发技巧集锦之制作一个望远镜与查看器摄像机

    ​Unity 游戏开发技巧集锦之制作一个望远镜与查看器摄像机 Unity中制作一个望远镜 本节制作的望远镜,在鼠标左键按下时,看到的视图会变大:当不再按下的时候,会慢慢缩小成原来的视图.游戏中时常出现 ...

  5. SQL Server触发器创建、删除、修改、查看

    http://blog.csdn.net/tianwailaibin/article/details/8111766 本教程为大家介绍SQL Server触发器创建.删除.修改.查看方法. 一.触发器 ...

  6. 第十二讲 dom对象（DOM对象、document对象的常用方法、节点、查找结点、 查看/修改/删除属性节点、创建和增加节点）

    一.查看节点 getElementById( ) 元素的ID名称来访问,返回对拥有指定id的第一个对象的引用 getElementsByName( )  按元素的name名称来访问,返回带有指定名称的 ...

  7. javaWEB——主页面新闻展示删除查看修改主题绑定

    目录 主页面新闻展示 删除 查看 修改 主题绑定 主页面新闻展示 主页面的新闻显示会与数据库中的新闻表一致 <!-- 需求:完成后台主页面的新闻显示绑定 start --><ul c ...

  8. Unity制作一个望远镜与查看器摄像机

    Unity 游戏开发技巧集锦之制作一个望远镜与查看器摄像机 Unity中制作一个望远镜 本节制作的望远镜,在鼠标左键按下时,看到的视图会变大:当不再按下的时候,会慢慢缩小成原来的视图.游戏中时常出现的 ...

  9. 视图——概述 || 创建或者修改视图 || 查看视图 || 删除视图

    视图概述 视图(View)是一种虚拟存在的表. 视图并不在数据库中实际存在,行和列数据来自定义视图的查询中使用的表,并且是在使用视图时动态生成的. 通俗的讲,视图就是一条SELECT语句执行后返回的结 ...

最新文章

  1. 什么是B/S模式？什么是C/S模式？
  2. 【转】ASP.NET AJAX入门系列
  3. Boghe连接FreeSwitch的配置
  4. javascript调用Flash里对象的方法(函数)搞了五个小时。
  5. 狼抓兔子（HYSBZ-1001）
  6. 新骗子举报收录系统源码
  7. 如何玩转sortablejs-vuedraggable实现表单嵌套拖拽功能
  8. nodejs 本地php服务器,node.js创建本地服务器详解
  9. inster into java_SELECT INTO 和 INSERT INTO SELECT 两种表复制语句
  10. iOS之中国银联移动支付控件升级的问题
  11. 【数据可视化】飞线图（航线图）在地图中的生成的三种方案
  12. 网络共享计算机权限访问,访问共享计算机的时候提示没有权限使用网络资源的解决方法...
  13. 福昕阅读器 - PDF 文档基本操作
  14. Doris ODBC外表使用
  15. 【程序员思维】用两个鸡蛋判断鸡蛋在多少楼层扔下不会碎
  16. node.js - 收藏集
  17. 现代电商会员管理新玩法——付费会员
  18. CUDA之nvidia-smi命令详解
  19. 关于java中创建对象时属性的初始化过程
  20. 少儿机器人编程会学什么

热门文章

  1. Installing APK 'app-debug.apk' on 'OPPO R9m - 5.1' for app:debug
  2. hdu 2298 Radar 重复覆盖
  3. 快速合并多个文件内容到一个文件中
  4. 毕业论文使用的卡方检验该如何分析？
  5. JetPack知识点实战系列十一：MotionLayout让动画如此简单
  6. 《迷途深渊》隐私声明
  7. 什么叫高内聚、低耦合？
  8. iPhone开发基础教程笔记（二）--第三章 处理基本交互
  9. eUSB是什么/可以干什么？
  10. 信号完整性之眼图(eye)理解(二)