电影项目前端页面(ajax,axios)

未登录的主页

<!DOCTYPE html>
<html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><script type="text/javascript" src="../static/js/jquery.js"></script><script type="text/javascript" src="../static/js/bootstrap.js"></script><link rel="stylesheet" href="../static/css/bootstrap.css"/><link rel="stylesheet" type="text/css" href="../static/css/bootstrap-theme.css"/><link rel="stylesheet" type="text/css" href="../static/css/swiper.css"/><script type="text/javascript" src="../static/js/swiper.js"></script><link rel="stylesheet" type="text/css" href="../static/css/reset.css"/><link rel="stylesheet" type="text/css" href="../static/css/home.css"/><script type="text/javascript" src="../static/js/home.js"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script><title>主页</title>
</head><body><div class="container-fluid"><nav class="navbar navbar-inverse"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" >还没登录呢</a></div><ul class="nav navbar-nav navbar-right"><li><a href="#" id="zhuce">注册</a></li><li><a href="#" id="denglu">登陆</a></li><!--<li><a class="icon" href="#"><img width="40" height="40" class="img-circle" alt="" src="https://cs.vmovier.com/Uploads/Banner/2017/12/23/5a3d52d82724d.png" /></a></li><li><a href=""><span>Username</span></a></li>--></ul></div></nav><div class="swiper-container"><div id="lbt" class="swiper-wrapper"><div class="swiper-slide" v-for="item in lbitems"><img v-bind:src="item.image"></div></div><!-- Add Pagination --><div class="swiper-pagination swiper-pagination-white"></div><!-- Add Arrows --><div class="swiper-button-next swiper-button-white"></div><div class="swiper-button-prev swiper-button-white"></div></div><ul class="nav nav-tabs child-nav"><li role="presentation" class="active"><a href="#">最新推荐</a></li><!--<li role="presentation"><a href="#">收藏</a></li>--></ul><ul class="movie_list" id="app"><li v-for="item in items"><div class="movie_list_left"><a target="_blank" href="#" title="超酷一镜到底创意倒放MV《串烧2017》"><img v-bind:src="item.image"><div class="bottom-cover"><span class="film-time" v-html="item.duration"></span></div></a></div><div class="movie_list_right"><h2><a target="_blank" title="超酷一镜到底创意倒放MV《串烧2017》" v-bind:href="'/dyxx/?postid='+item.postid"><span v-html="item.title"></span></a></h2><div class="movie-intro"><span v-html="item.app_fu_title"></span></div><div class="movie-like" @click="tiaozhuan"><span class="glyphicon glyphicon-heart" style="color: black;"></span><span v-html="item.like_num"></span></div></div></li></ul></div></body>
<script>$('#zhuce').click(function () {window.open("http://39.107.46.92/static/register.html", target = "_self")})$('#denglu').click(function () {window.open("http://39.107.46.92/static/login.html", target = "_self")})var vm = new Vue({el: "#app",data: {items: []},methods: {tiaozhuan() {alert('您还没有登录')},}});var lb = new Vue({el: "#lbt",data: {lbitems: [],},});axios.get("/kaoshimovies/").then(function (response) {vm.$data.items = response.data.results;});axios.get("/lbtp/").then(function (response) {lb.$data.lbitems = response.data.data;});</script></html>

已经登录的主页

<!DOCTYPE html>
<html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><script type="text/javascript" src="../static/js/jquery.js"></script><script type="text/javascript" src="../static/js/bootstrap.js"></script><link rel="stylesheet" href="../static/css/bootstrap.css"/><link rel="stylesheet" type="text/css" href="../static/css/bootstrap-theme.css"/><link rel="stylesheet" type="text/css" href="../static/css/swiper.css"/><script type="text/javascript" src="../static/js/swiper.js"></script><link rel="stylesheet" type="text/css" href="../static/css/reset.css"/><link rel="stylesheet" type="text/css" href="../static/css/home.css"/><script type="text/javascript" src="../static/js/home.js"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script><title>主页-已经登录</title>
</head><body><div class="container-fluid"><nav class="navbar navbar-inverse"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="#">欢迎你！！！<span class="yonghu"></span></a></div><ul class="nav navbar-nav navbar-right"><!--<li><a href="#">注册</a></li><li><a href="#">登陆</a></li>--><li><a class="icon" id="yonghuzhongxin"><img width="40" height="40" id="yonghutx" class="img-circle" alt=""/></a></li><li><a ><span class="yonghu"></span></a></li></ul></div></nav><div class="swiper-container"><div id="lbt" class="swiper-wrapper"><div v-for="item in lbitems" class="swiper-slide"><img v-bind:src="item.image"></div></div><!-- Add Pagination --><div class="swiper-pagination swiper-pagination-white"></div><!-- Add Arrows --><div class="swiper-button-next swiper-button-white"></div><div class="swiper-button-prev swiper-button-white"></div></div><ul class="nav nav-tabs child-nav"><li role="presentation" class="active" id="zxtj"><a href="#">最新推荐</a></li><li role="presentation" id="grsc"><a href="#">收藏</a></li></ul><ul class="movie_list" id="app"><li v-for="item in items" class="t_j"><div class="movie_list_left"><a target="_blank"  title="超酷一镜到底创意倒放MV《串烧2017》"><img v-bind:src="item.image"><div class="bottom-cover"><span class="film-time" v-html="item.duration"></span></div></a></div><div class="movie_list_right"><h2><a target="_blank" title="超酷一镜到底创意倒放MV《串烧2017》" v-bind:href="'/dyxx/?postid='+item.postid"><span v-html="item.title"></span></a></h2><div class="movie-intro"><span v-html="item.app_fu_title"></span></div><div class="movie-like" @click="shoucang($event)"><span class="glyphicon glyphicon-heart"v-bind:style="{color:item.checktype?xihuancolor:xincolor}"></span><span v-html="item.like_num"></span></div><div v-html="item.postid" class="post_id"></div></div></li><li v-for="item in scitems" class="s_c"><div class="movie_list_left"><a target="_blank"  title="超酷一镜到底创意倒放MV《串烧2017》"><img v-bind:src="item.image"><div class="bottom-cover"><span class="film-time" v-html="item.duration"></span></div></a></div><div class="movie_list_right"><h2><a target="_blank" title="超酷一镜到底创意倒放MV《串烧2017》" v-bind:href="'/dyxx/?postid='+item.postid"><span v-html="item.title"></span></a></h2><div class="movie-intro"><span v-html="item.app_fu_title"></span></div><div class="movie-like" @click="qxshoucang($event)"><span class="glyphicon glyphicon-heart" style="color: red;"></span><span v-html="item.like_num"></span></div><div v-html="item.postid" class="post_id"></div></div></li></ul></div></body>
<script>$('#yonghuzhongxin').click(function () {window.open("http://39.107.46.92/static/userinfo_mod.html", target = "_self")})$('.post_id').hide()$('#grsc').click(function () {/*axios.get("/kaoshimovies/", {params: {token: token,}}).then(function (response) {vm.$data.scitems = response.data.results1});*/$('.t_j').hide()$('.s_c').show()$('#zxtj').removeClass('active')$('#grsc').addClass('active')})$('#zxtj').click(function () {$('.t_j').show()$('.s_c').hide()$('#grsc').removeClass('active')$('#zxtj').addClass('active')})$('.s_c').hide()var vm = new Vue({el: "#app",data: {items: [],scitems: [],xincolor: 'black',xihuancolor: 'red',},methods: {shoucang(e) {// 获取电影的 postidvar postid = e.currentTarget.nextElementSibling.innerHTMLvar url = '/kaoshisc/'var that = thisaxios.get(url, {params: {token: localStorage.getItem('token'),postid: postid,action: 'sc',}}).then(function (response) {if (response.data.msg === '收藏成功') {alert(response.data.msg)history.go(0);} else {alert(response.data.msg)}});},qxshoucang(e) {// 获取电影的 postidvar postid = e.currentTarget.nextElementSibling.innerHTMLvar url = '/kaoshisc/'var that = thisaxios.get(url, {params: {token: localStorage.getItem('token'),postid: postid,action: 'qxsc'}}).then(function (response) {alert(response.data.msg)history.go(0);});}}});var lb = new Vue({el: "#lbt",data: {lbitems: [],},});axios.get("/lbtp/").then(function (response) {lb.$data.lbitems = response.data.data;});//提取用户的数据，用户名，收藏的电影var token = localStorage.getItem('token')axios.get('/kaoshi/', {params: {'token': token,'action': 'logined'}}).then(function (response) {if (response.data.status === 400) {alert(response.data.msg)window.open("http://39.107.46.92/static/home.html", target = "_self")} else {$('.yonghu').text(response.data.username)$('#yonghutx').attr('src', response.data.pic)}});axios.get("/kaoshimovies/", {params: {token: token,}}).then(function (response) {vm.$data.items = response.data.results2vm.$data.scitems = response.data.results1});/*axios.get("/kaoshimovies/").then(function (response) {vm.$data.items = response.data.results;});*/</script></html>

电影项目前端页面(ajax,axios)相关推荐

微信小程序--札记与贺卡项目前端页面UI设计实现
这周因为忙着开学准备以及开学之后的事情,所以没有多余的时间去学习另外的知识,只是在有限的时间内抓紧完成了这周布置的任务-札记与贺卡项目的UI设计. 主要是通过千图网和图怪兽寻找灵感进行素材的制作,或者 ...
微信小程序--证件照换底色项目前端修改+头像框项目前端页面实现修改
证件照换底色主要进行后端所需功能的增加,尺寸选择功能的增加,颜色选择功能样式修改,版权问题导致的ui修改和所需ui的设计. 跳转前按钮判断在点击开始转换图片进行跳转之前,判断用户是否已经进行授权, ...
网站开发（周五）：项目前端页面开发（实战）
第一.前端基础简介前端网页:根据此前项目需求分析可知,我们需要开发网站首页.文章分类页.搜索页.正文页.标签页,而一个最基本网页模版有三部分,网页顶部导航条.网页中部主体.网页底部,其中顶部和底部布 ...
项目前端页面框架介绍
项目的创建和基本配置创建项目将vue-admin-template-master重命名为guli-admin 修改项目信息 package.json {"name": &quo ...
搭建项目前端页面环境
vue-element-admin 简介而vue-element-admin是基于element-ui 的一套后台管理系统集成方案. 功能:https://panjiachen.github.io ...
VUE项目前端页面添加水印
前段时间看到别人的页面有当前登录人的姓名水印,后面在网上学习了一下,故在这记录一下 1,创建一个放水印的元素 2,通过canvas创建图片,以背景图的方式实现水印 getWater() {const ...
WebStorm开发应用——前端页面
由于课程设计的需要,第一次上手WebStorm开发一个手机端应用.在这之前,我利用html,css,js写前端页面用得比较多的还是eclipse和MyEclipse,不过总感觉做出的页面不尽如人意 ...
前端页面请求PHP接口返回超大数据(几万条以上)解决办法总结
起因: 当我web前端向php请求数据时,几千条记录都能正常获取,但是要请求几万条记录的时候php就不响应了. 多种方法总结: 一.修改php.ini配置文件: memory_limit = 128 ...
喵喵电影-前端页面开发
喵喵电影-前端页面开发一.项目预览二.开发前准备 1.配置node环境:npm cnpm 2.安装Vue脚手架:vue-cli 3.创建项目 miaomiao 三.实战开发 1.改造项目文件创建框 ...

电影项目前端页面(ajax,axios)

电影项目前端页面(ajax,axios)相关推荐

最新文章

热门文章