三大图和web项目流程
需求分析文档------>三大图----->界面和ajax----->php(后台语言)---->数据库服务
（1）需求分析文档：用户提出的“语言要求”。
（2）三大图：
A:功能结构图，界面要实现的功能，以小米官网为例子，每一个能点击进去看具体内容的都是功能，最明显的就是菜单导航条内容，手机电话卡功能模块，笔记本电脑功能模块等等
B:业务流程图：就是高中所学的，输入、判断、输出那样的流程图，在软甲这一块，它将被设计的更加严格，具体样式可以搜索百度的图片看一下。
C:用例图，你设计的东西，将其分成两块内容，角色和功能，用例图主要用来说明角色和功能的关系，具体理解看图片
============================================================================
（3）界面+ajax: ajax代码展示如下
//创建对象
var xmlhttp;
//兼容性判断
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft","XMLHTTP");
}
//设置好请求方式，get传输数据的方式，phpdemo.php是php文件名，true代表异步刷新
xmlhttp.open("GET","phpdemo.php",true);
//真正发送请求
xmlhttp.send();
//响应请求，这种响应是"实时的"
xmlhttp.onreadystatechange = function(){
//响应状态：4代表服务器响应已经就绪，200代表可以接收数据了
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
//将从数据库请求回来的数据文本转化为“对象”
var res =JSON.parse(xmlhttp.responseText);
var str="";
//动态拼接：html结构不动，每一行都用单引号包裹，在尾部加一个+号
for(let i=0; i<res.length; i++)
{
str +=
'<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 class" id="1">'+
'<div class="thumbnail box_hover">'+
'<div class="img_box">'+
'<img src="images/ClassSetting/'+res[i].images+'" data-original="images/ClassSetting/img-01.jpg"/>'+
'</div>'+
'<div class="caption classSetting-color">'+
'<h3 class="text-center">'+res[i].title+'</h3>'+
'<p class="text-center">'+res[i].smallTitle+'</p>'+
'</div>'+
'</div>'+
'</div>'
}
//获取被操作的对象
var content = document.getElementsByClassName("content")[0];
//进行添加
content.innerHTML = str;
（4）php代码展示如下
<?php//连接数据库(ip,用户名、密码)
mysql_connect('127.0.0.1','root','root');
//编码规则
mysql_query('set names utf8');
//连接数据库的名称
mysql_select_db('children');
//sql语句
$sql="SELECT * from childsetting";
//执行sql
$res=mysql_query($sql);
//定义数组
$rows = array();
//遍历每一条数据赋值给变量
while($row = mysql_fetch_assoc($res))
{
//每一个遍历的值放入数组
$rows[]=$row;
}
//数据转换成对象
$data=json_encode($rows);
//输出这段数据
echo $data;
?>
（5）数据库做好的准备如下。