使用语言

Html5
JS
css

使用框架

基于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/jquery/3.4.1/jquery.js"></script>

<script src="https://unpkg/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr/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 v-for="movie in joke">
            <div >
                <th><img height="300" width="300" :src="movie.m_photo"/></th>
                <th>{{movie.m_name}}</th>
                <th >{{movie.m_introduce}}</th>
                <th>5.7</th>
                <th><button style='background-color:rgba(30, 128, 255, 0.959);color:white'>详细</button>
                    <button style='background-color:rgba(30, 128, 255, 0.959);color:white'>修改</button>
                    <button style='background-color:rgba(255, 30, 105, 0.959);color:white'>删除</button></th>
            </div>
        </tr>
    </table>
        <div class="clear"></div>

这部分主要用于定义页面的对象，如文本框.表格.按钮等等还未用css进行布局优化效果如下

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 {
          joke: null
        }
      },
    mounted () {
        var that=this;
        axios.get("http://192.168.10.63:8088/index").then(function(response){
         console.log(response.data);**url由后端提供**
         that.joke=response.data;
         for(var i=0;i<that.joke.length;i++)
             that.joke[i].m_photo;
         },function(err){ })
    }
  })
  var header=new Vue
(
{
    el:"#header",
    methods:{

    jump :function() 
    {
        alert("call 18856355072")
    }  
            }       
}
)

这部分主要是通过函数实现按钮的功能以及与后端进行数据相连，连接后效果如下

盘点制作过程中的一些问题

跨域问题

这是一个很经典的问题，也是前后端分离架构必须解决的一个问题
如果不解决，前后端没办法进行连接，前端无法从后端获取数据，但是跨域问题对于后端来说更容易解决，一般交给后端处理。

代码优化问题

在数据传输部分，我一开始设计的过于简单粗暴，我对每一行的每一个属性的标签都设置了专门的id 对其进行单个传输，优化过程中，我发现可以使用v-for对整个列表主题进行赋值，大大减少了代码量

函数自动调用问题

一开始我设置了按钮通过点击来触发传输数据事件，但是我不知道如何自动调用函数，然后我找到了mounted()方法,他可以在网页加载完成后自动执行函数。

图片传输问题

在向后端进行图片传输时，出现无法用后端向img标签的src赋值，导致图片无法传输，后来我用来:src，即将src等号右边的值设置为变量而不是字符串，再通过函数对src赋值来解决

更多推荐

vue前端入门——制作一个电影网页