寒假答辩之基于ssm框架的家教网站之前端篇

前言：这是我第一次参与做一个完整的网站，真的和自己做的静态页面的感觉太不一样啦。自己做不用管数据的交互时想做成什么样就做成什么样，但是连接后台就需要考虑数据的传递，数据的格式，怎么截取到自己要的数据，怎么把数据渲染到页面。什么时候显示什么模块等等之类的要考虑好多东西。我这里只讲最简单的应用，具体那些复杂的应用等你们用到了就知道多麻烦了。

注意：这篇博客只讲了我在写这个项目时遇到的难做的部分，没有具体的网站介绍，最基本一个网站该有的东西并没有介绍

1.数据交互之ajax

看代码，有注释，一看就懂，会不会用看自己。

function submitmessage(btn,turl) {
    var datasubmit=$(this).parent().next().children().html();//获取传给后台的数据
    var result=""//准备接受后台传来的数据
    $.ajax({
        type: "POST",
        url: turl,
        data: datasubmit,//给后台传数据
        success: function (data) {//后台传过来数据都在data里面
            var arrLen = data.length;
	    if (arrLen > 0) {
		for (var i = 0; i < arrLen; i++) {//开始拆分数据，做要渲染的数据，其中data[i].iid的意思是data中第几条数据的名为lid的数据项
		        result += '<tr class="' + type + '">' +
		        '<td class="order-num-con">' + data[i].iid + '</td>' +
			'<td class="subject-con">' + data[i].course + '</td>' +
			'<td class="grade-con">' + data[i].eduId + '</td>' +
			'<td class="finish-time-con">' + data[i].signTime + '</td>' +
			'<td class="handle-con">' + '<a href="#">投诉</a>' + '</td>' +
			'</tr>';
		}
            }else{alert('无数据！');}
           },
           error: function (xhr, type) {//ajax过程出错，显示提示信息
			alert('Ajax error!');
					
		}
    });
    $('.lists').append(result);//将做好渲染的数据添加到自己的页面
}

ajax交互的原理很简单，但想要很好的运用就要考虑到js逻辑，怎么能很好的获取到页面的每个元素，怎么去拆分数据都是一个繁琐的过程，这是你的前端代码一定要写的规范简洁并且有规律，有规律很重要，否则js渲染和获取元素就会很麻烦。这次的项目我就写的不好，元素很多都是一个个获取，代码也很长，处理起来很麻烦。

---

2.bootstrap的应用

之前周任务只学了一点点网格运用和一些按钮，导航栏，表单之类的。当时并没有感觉到它的强大，感觉自己都可以写，就没有多重视。这次项目徐雅琪真的让我认识到bootstrap的强大这里只举两个例子感受一下。

（1）模态框的使用

你想想就这个模态框你自己写要写多少代码，而且你写的好用不好用都不知道，而用bootstrap就很简单

<a href="#" data-toggle="modal" data-target="#exampleModal1">修改信息</a>
<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" >
	<div class="modal-dialog" role="document">
	     <div class="modal-content">//里面写你任何想写的内容
		<div class="modal-body"></div>
                <div class="modal-footer">
	             <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        </div>
	</div>
             
</div>

 

这行<a href="#" data-toggle="modal" data-target="#exampleModal1">修改信息</a>里面的
data-toggle="modal"//设置打开是一个模态窗

data-target="#exampleModal1"//设置打开的目标模态窗

<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" >//id一定要照应，class要写对
    <div class="modal-dialog" role="document">//class要写对，role自己看文档都有什么
    </div>
 </div>

data-dismiss="modal"关闭模态窗

（2）面板的使用

  点击订单详情与支付详情分别切换面板

           

想想自己要写多少代码，看看bootstrap怎么用

<tr class="double">
	<td class="order-con">
		<a role="button" data-toggle="collapse" href="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1">
			订单详情
		</a>
	</td>
</tr>
<tr>
        <td class="col">
		<div class="collapse text-left" id="collapseExample1">
		</div>
	</td>
</tr>

 <a role="button" data-toggle="collapse" href="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1">
     data-toggle="collapse"//目标是collapse

     href="#collapseExample1"//打开的是id为collapseExample1的面板

     aria-controls="collapseExample1"//自行百度，大概是控制面板间的联系

 <div class="collapse text-left" id="collapseExample1"></div>//与上边对应名字，然后里面写自己的东西

bootstrap真的特别强大，强烈建议没事儿就去bootstrap的中文官网转转，你会发现好多东西，网站就不会那么难写了

---

3.定位

我们采用的是自己选择然后筛选，没有真正的获取地理位置，关于城市的信息我们用的多维数组处理起来也是很麻烦

因为城市真的太多了，一不小心就出错了

---

4.分页

原来根本没有考虑过分页问题，是寒假现学的，理解的也不是很深刻

    

分页也是要运用ajax交互数据

url = 'https://cnodejs.org/api/v1/topics?limit=10&page=';其中limit是限制limit是限制每页条数，page是限制第几页

myPagination是分页的具体操作，里面逻辑特别长这里就不讲了，大概就是每次点击换页数据的变动，实现起来有点复杂

---

5.上传照片

首先说几个东西

$('xx')是jQuery对象，$('xx')[0]是将jQuery对象：$('xx')转换为JavaScript对象，这样才可以使用JavaScript对象的属性和方法；
<input type="file">可能会添加multiple属性并赋值：multiple="multiple"，即<input type="file" multiple="multiple">，这样一次性可同时上传多张图片，所以获得一张图片的方法就是：$('xx')[0].files[0]
$('xx')[0].files[0].size可获得文件的大小，单位是字节（B），使用$('xx')[0].files[0].size可用于判断文件的大小。

var localimg = $("#fileimg").get(0).files[0];

var fileName = localimg.name;
var fileSize = localimg.size;

var fileType = fileName.substring(fileName.lastIndexOf('.'), fileName.length).toLowerCase();

关于FormData（）与Blob（）不懂得看下面链接

https://blog.csdn.net/qq_42842709/article/details/82500029

https://blog.csdn.net/zqian1994/article/details/79635413

大概思路得到图片转为DataUrl地址再转为Blob对象再存在FormData里面传给后台

图片的裁剪是用的Canvas，Canvas应用这里就不说了，自行学习

上传图片一般是Canvas+FormData作为标配方案，想学的可以深入了解

---

6.总结

第一次真的有许多地方不会一边借鉴一边学习，自己真的很多地方都不会，很多功能自己都写不出来，js的一些深入用法自己都不会，所以只会写一些简单的功能，大家一定要多去看看别人的网站，去那里学习自己不会的才能成长。而且我只学了一点点后台，jsp也只学了一点点，现在也忘光了，做前端最好会改jsp这样和后台连起来就会变容易，直到要改那些东西，那些东西写一遍就行，那些数据不用获取等等。这次都是陈想在改，这里对陈想表示我的深深的敬意。

 

原文地址：https://blog.csdn.net/qq_41767383/article/details/89500482