Sublime Text
Chrome浏览器调试
script代码如下图（分析重点代码）： 1.方法exitOperation用来判断点击“退出”情况： 1）如果点击“是”，则退出系统跳到登录页面，并清除存储信息； 2）如果点击“否”，则返回页面； 2.调用created时，里面有个token判断，存在则存储信息；不存在则跳到登录页面（解决直接复制首页地址进行访问，而未经过登录操作）； 3.调用mounted里面有个“监听浏览器回退事件”，为了避免首页回退到登录页面，又返回首页问题；注意调用destroyed进行销毁。
template和style代码如下图（1-3），最终显示效果如下图（4）： 1.template中“el-”开头的标签都是来自“element-ui”框架，详细可查看api（主要使用Layout 布局和Table 表格）； 2.style样式使用less编写。
script代码如下图（分析重点代码）： 调用created主要是为了获取数据对表格进行渲染： 1）获取存储的数据token、username和id； 2）判断token不存在则不执行下面代码，并跳到登录页面（解决页面太长时间不操作失效的问题）； 3）调用接口“admin/getMoviesList”，并传参data，如果res.status为1，则提示错误信息并跳到登录页面；如果不为1，则进行moviesList赋值，用于渲染表格数据（注意转换movieMainPage和movieTime数据）。
template和style代码如下图（1-3），最终显示效果如下图（4）： 1.template中“el-”开头的标签都是来自“element-ui”框架，详细可查看api（主要使用Form 表单和Upload 上传）； 2.为了统一提示错误信息样式，template中的el-upload上面增加el-input并隐藏； 3.style样式使用less编写（注意这里去掉scoped，为了修改element样式，但为了不影响其他页面的样式，外层需要新建一个独一的class（addMovieForm））。
script代码如下图（分析重点代码）： 1.由于新增和修改共用一个页面，调用created时，存在movieId（编辑），则调用接口“movies/getMovieInfo”获取相应电影数据，并渲染到编辑页面上； 2.该页面的图片上传，不是即时的，而是跟表单数据一起提交，所以使用“:on-change”，当文件状态改变时调用方法onUploadChange： 1）定义允许上传的图片类型（isIMG）和图片大小（isLt2M），判断不满足，则提示错误信息并不执行下面的代码； 2）this.imgUrl赋值是用于显示上传的图片，该图片地址存储在内存中，当页面关闭时，会被释放； 3）由于this.imgUrl地址会被释放，为了保存进数据库，需调用FileReader获取图片地址evt.target.result（base64）； 3.方法checkMovie： 1）先校验表单规则“checkMovieRules”，定义了六个规则，其中的“movieImg”注意触发是“change”，不然会产生已上传图片还是显示“请上传图片”的提示信息； 2）校验成功（valid）则调用接口“admin/addMovie”，并传参“data”，如果res.status为1，则显示错误信息；不为1则显示成功信息并返回到电影列表； 3）校验不成功则输出错误信息。
template和style代码如下图（1-2），最终显示效果如下图（3）： 1.template中“el-”开头的标签都是来自“element-ui”框架，详细可查看api（主要使用Form 表单和Table 表格）； 2.style样式使用less编写。
script代码如下图（分析重点代码）： 1.公共方法getMovies： 1）根据传入的参数data，调用接口“admin/getMoviesList”； 2）如果res.status为1，则提示错误信息并跳到登录页面；如果不为1，则进行moviesList赋值，用于渲染表格数据（注意转换movieMainPage和movieTime数据）； 2.调用created的代码、查询操作onSubmit和翻页功能handleCurrentChange调用this.getMovies(data)，只是传参data数据不同而已，原理一样。
template和style代码如下图（1-2），最终显示效果如下图（3）： 1.template中“el-”开头的标签都是来自“element-ui”框架，详细可查看api（主要使用Image 图片和Button 按钮）； 2.style样式使用less编写。
script代码如下图（分析重点代码）： 调用created主要是为了获取数据对页面进行渲染： 1）调用接口“movies/getMovieInfo”，并传参movieId，如果res.status为1，则提示错误信息；如果不为1，则进行detail赋值，用于渲染页面数据（注意转换movieTime数据）。