后台管理系统项目总结(1)

发表于 | 分类于

后台管理系统项目总结(1)

1.搭建目录结构

1
2
3
1. 新建一个views文件夹，把前端要展现的文件都放在此文件夹中,来源于(MVC的思想)
2. 将公共的部分放在public文件夹里面，如images,assets,js,less,uploads
3. 把其它的文件放在各自的文件夹里面，比如teacher、dashboard、course、user、adv

2.简化访问方式，需要用到php代码

1
2
3
4
5
6
7
8
studyit.com/index.php/views/dashboard/index
studyit.com/index.php/dashboard/index
studyit.com/index.php/index
studyit.com/index.php
studyit.com
studyit.com/views/dashboard/index
studyit.com/dashboard/index
studyit.com/index

3.去掉index.php访问

1
2
3
4
1. 把.htaccess文件拷贝到项目的根目录下
2. 到httpd.conf这里面，把 
	LoadModule rewrite_module modules/mod_rewrite.so  前面的#号去掉
3. 一定要重新启动服务器

4.改造login.html页面

1
2
3
4
1. 到login.html页面中，当是，把css引入的文件改成：
	<?php include '/views/common/css.html'?>
2. 还要把js文件改造成：
	<?php include '/views/common/script.html'?>

5.在login.html页面中，写js代码，发送ajax请求，进行登陆

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$('#formLogin').submit(function (){  // 输入内容之后，按回车即可进行提交
// formLogin是form表单的id，是给form表单注册的事件，通过登陆按钮来触发
     //获取用户名和密码，发送ajax请求
     var data = $(this).serializeArray();//将表单里面的数据序列化成对象
     // 发送ajax请求
     $.ajax({
       //url:'http://api.botue.com/login',   // 在这里遇到了跨域的问题，请求不成功
       url:'/api/login',   // 在这里遇到了跨域的问题，请求不成功
       type:'post',
       data:data,
       success:function (data){
           if(data.code ==200){
             alert('登陆成功');
           }
       },
       error:function (errorInfo){
           console.log('用户名或是密码不对...');
       }
     })
     // 阻止默认行为，阻止页面的刷新行为
     return false;
   })

6.跨域

1
2
3
4
5
6
1. 什么样的情况下是算是跨域请求
	协议不同     域名不同    端口号不同   这三个里面，只要符合一个就算是跨域 
2. 如何解决跨域 
	JSONP  来解决跨域     使用script标签的src属性，具有天然跨域的特性，只能进行get请求的跨域
			padding   补白 或是填充   小技巧
3. 此项目当中使用反向代理来解决跨域的问题

7.解决跨域的问题

1
2
3
4
5
6
7
8
9
10
11
1.先在httpd.conf 中找到这两个文件
		LoadModule proxy_module modules/mod_proxy.so      110行左右
		LoadModule proxy_http_module modules/mod_proxy_http.so   115行左右
        把这两个前面的#去掉
2.再在httpd_vhost.conf中的那些个根目录当中，增加两行代码
      ProxyRequests   off
      ProxyPass   /api   http://api.botue.com
      
3. 一定要重新启动服务器     
4.本来应该去请求其它域名的数据接口，那现在就变成了
     * http://studyit.com/api   http://api.botue.com/login   studyit.com/api/login

8.HTTP协议简介

  • HTTP是客户端浏览器或其他程序与Web服务器之间的应用层通信协议
  • HTTP协议采用了请求/响应模型
  • HTTP “三次握手”

9.HTTP协议是无状态协议

  • 无状态是指：协议对于事务处理没有记忆能力
  • 对于一个浏览器发出的多次请求，WEB服务器无法区分是不是来源于同一个浏览器
  • 服务器不会记录客户端的信息，例如：公交车司机不会记住每天上车的乘客

10.状态保持的说明 - 会话机制

  • 可以通过HTTP协议的 cookie 和 session 会话机制，解决无状态的问题
  • 对于登录才能访问的网站，需要记录用户的登录情况，从而区分不同用户
  • 简单来说：需要区分不同用户的网站，讨论状态保持才有意义

11.两种状态保存方式

  • 1 cookie => 存储在客户端（浏览器）
  • 2 session => 存储在服务端（服务器）
1
2
3
因为HTTP协议是无状态的，对于一个浏览器发出的多次请求，WEB服务器无法区分
是不是来源于同一个浏览器。所以，需要额外的数据用于维护会话。
Cookie 正是这样的一段随HTTP请求一起被传递的额外数据。
  • 不管是哪种方式，最终都是由浏览器创建的cookie
  • 1 通过 js 设置和读取
1
2
3
4
5
6
// 获取 cookie
console.log( document.cookie );
// 设置 cookie
document.cookie = 'username="xiaoming"';
// expires: 设置 过期时间
document.cookie = 'username="xiaoming";expires=' + new Date('2017-10-24');
  • 2 通过服务端操作（了解）
1
2
3
4
5
// 读取 cookie
echo $_COOKIE['name'];
// 在服务器端设置 cookie
setcookie('name', 'xiaoming');

11.4 浏览器保存cookie的两种方式

  • 1 浏览器内存中
  • 2 浏览器所在电脑的硬盘中（需要设置 过期时间）
  • 1 cookie：记录在客户端(浏览器)
  • 2 cookie有域的限制，即：每个网站都有自己的cookie
  • 3 每个浏览器的cookie也是独立的（不同浏览器之间不共享）
  • 4 需要通过HTTP协议打开页面才能访问到cookie的内容
  • 5 存储大小限制：4Kb 左右
  • 6 不要存储敏感信息，不要存储大量数据
  • 1 保存数据，在不同页面之间进行共享,同域名下面的页面
  • 2 用于状态保持，每个请求都会将cookie发送到服务端

11.7 jQuery.cookie插件

1
2
3
4
// 获取 cookie
$.cookie('name'); // => 'value'
// 设置 cookie
$.cookie('name', 'value');

11.8 状态保持方式 - session

  • session机制采用的是在服务器端保持状态的方案
  • session（会话）是指一类用来在客户端与服务器之间保持状态的解决方案
  • sessionID存储在服务器端
  • 例如：打电话时从拿起电话拨号到挂断电话的过程可以看作是一个session
1
2
3
4
5
6
7
8
// 要使用session首先调用该方法
session_start();
// 设置 session 内容
$_SESSION['uname'] = '小拳拳';
// 获取 session 内容
echo $_SESSION['uname'];

11.9 session和cookie的关系

  • session需要配合cookie来使用
  • session会在cookie中设置一个id，服务器用来唯一确定一次会话
    • 如：PHPSESSID=in884au9tr2dcfupon0v1jed64;

12- 登陆的基本实现

1
2
3
4
5
在public/js/common.js文件里面，书写如下代码:
if(!$.cookie('PHPSESSID')&&location.pathname!='/login'){
	location.href='login';//必须 先跳转到登陆页面
} 
注意：在此之前，一定要把jquery.cookie文件引入进来，在common文件夹下面的scrip.html文件里面引入jquery.cookie.js
-------------本文结束感谢您的阅读-------------