TTMS课程设计 管理员板块 前端页面+使用技术总结

一、部分实现效果

1.管理员->管理员管理

2.管理员->电影管理
3.管理员->订单管理

二、使用技术

• html+css编写页面
• 使用jquery和ajax实现前后端交互

三、主要代码

1. jq+ajax提交表单数据

$('#new_hall_form').on('submit', e => {

 //对表单数据序列化
  e.preventDefault()
  const formData = $('#new_hall_form').serializeArray()
  var o = {}
  $.each(formData, function () {
    if (o[this.name]) {
      if (!o[this.name].push) {
        o[this.name] = [o[this.name]];
      }
      o[this.name].push(this.value || '');
    } else {
      o[this.name] = this.value || '';
    }
  })

  //将表单内容填入规定格式的JSON对象
  let obj = {
    "cinemaId": 1,
    "hallName": `${o.hallName}`,
    "movieType": `${o.movieType}`,
    "seatColumn": Number(o.seatLine),
    "seatLine": Number(o.seatColumn)
  }
  
  //将数据转JSON字符串传输
  obj = JSON.stringify(obj)
  
  $.ajax({
    url: 'http://localhost:8080/url',
    type: 'POST',
    //传输数据
    data: obj,
    //接受数据类型
    dataType: 'json',
    //清除上次请求的缓存
    catch: false,          
    //告诉客户端实际返回的内容的内容类型,否则传输中文会乱码
    contentType: 'application/json;charset=UTF-8',
    error: function (e) {
   		//后台返回null会直接进入error中，如果不想进入可以再success对接受数据进行判断
    },
    success: data => {
      //接受数据成功进入success
    }
  })
})

2. 数据分页

使用Web UI框架Layui，进行分页。

layui.use('laypage', function () {
      var laypage = layui.laypage;
      //执行一个laypage实例
      laypage.render({
        elem: 'staff_pages' //注意，这里的 test1 是 ID，不用加 # 号
        , count: total_staff_pages  //数据总数，从服务端得到
        , limit: 5
        , theme: '#4299e1'

        // 当分页被切换时触发，函数返回两个参数：
        // obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
        , jump: function (obj, first) {

          $.ajax({
            url: `http://localhost:8080/getSells/1/${obj.curr}`,
            type: 'get',
            dataType: 'json',
            async: false,
            success: data => {
              // console.log('li返回XXX信息', data)
            
            }
          })
        }
})

3. 省市区三级联动

使用Layui库的三级联动实现。

4. 选择日期

使用Layui独立组件layDate实现。

layui.use('laydate', function () {
      var laydate = layui.laydate;

      laydate.render({
        elem: '#start_time',
        type: 'datetime'
      });
   });
});

5. 渲染数据

var str = ``
for (var i = 0; i < data.length - 1; i++) {
  str += `
    <form action="" class="hall">
      <input name="id" value="${data[i].id}" hidden></input>
      <p class="hall_name staff_num hall_p">${data[i].accounts}</p>
      <p class="hall_sort staff_psd hall_p">******</p>
      <p class="hall_sort staff_photo hall_p"><img src="../static/image/user.png" alt=""></p>
      <p class="hall_sort staff_job hall_p">${data[i].sellId}</p>
      <p class="hall_operate staff_operator">
        <button type="reset" οnclick="edit_staff(this)" class="edit_staff">编辑</button>
        <button type="reset" class="delete_staff">删除</button>
      </p>
    </form>`
}
      var parent = $('#box_office_movie')
      parent.empty()
      parent.append(`${str_movie}`)

6. Session Storage在页面存储数据

session storage在浏览器关闭后数据会删除。
存储：

var str = {
            "id":id,
            "status":status
        }
sessionStorage.setItem('movieInformation', JSON.stringify(str));

使用：

var userJsonStr = sessionStorage.getItem('movieInformation');
var userEntity = JSON.parse(userJsonStr);

console.log(userEntity.id);
console.log(userEntity.status);

7. 使用es6模板字符串

给同学改代码时发现用字符串拼接总出现问题，可读性不强还容易拼错，模板字符串真香。

str_seller += `
          <form action="" class="hall">
            <p class="hall_name box_office_seller">${seller[i].accounts}</p>
            <p class="hall_sort box_office_seller">${seller[i].sellMoney}</p>
          </form>`

四、总结

这次课设主要为 html css编写页面代码+js实现动画效果+jq ajax实现数据的获取、渲染、修改、删除。

1.未实现功能：

修改头像功能未实现；
在当前页面修改、增加、删除多个演员信息未实现；
未学习完框架，本次课设没有使用react等框架；
变量命名不规范，代码风格需要规定。

2.遇到的问题及参考博客：

• idea配置tomcat、maven：
  Tomcat服务器下载、安装、配置环境变量教程(超详细)
  Maven的安装与配置

• mysql环境配置：下载和安装MySQL(傻瓜)教程

• 对ajax局部刷新：感觉就是使用ajax，利用其回调函数对dom元素进行操作AJAX的原理-如何做到异步和局部刷新