黑马程序员技术交流社区

标题: 笔记 [打印本页]
作者: 枫叶飘呀飘    时间: 2019-6-5 14:04
标题: 笔记
网站目录结构
baixiu
-admin(服务器端页面文件夹)
-api(后台页面数据接口文件夹)
-_userLogin.php(登录请求接口)
-_getUserInfo.php(获取用户信息接口)
-_getCategoriesInfo.php(获取分类目录页面数据接口)
-public(后台公共模块文件夹)
-login.php(后台登录界面)
-index.php(后台首页)

-static(静态资源文件文件夹)
-assets(外部资源文件夹css、js、img等)
-uploads(上传文件夹)
-public(前台公共模块文件夹)
-_header.php(抽取的头部公共模块)     ->    公共头部模块数据渲染
-_aside.php(抽取的侧边栏公共模块)
-api(前台页面数据接口文件夹)
-_getMorePost.php(请求更多数据)
-config.php(数据库配置文件)
-index.php(前台首页)        ->        首页最新文章列表数据渲染
-detail.php(详情页)
-list.php(列表页)        ->        分类页面文章列表数据渲染

day1

1. 将静态资源文件放到static文件夹
通过sublime修改所有的样式与图片路径
assets/  ->  static/assets/
uploads/  ->  static/uploads/
查找 -> 到文件中查找  ->  替换路径

2. cmd命令到指定文件夹    ren *.html *.php   ->  将文件后缀名html改为php
因为修改了文件后缀名，所以在文件中的引用也需要修改。
注意修改的文件要在当前对应的文件夹中进行替换
.html   ->   .php
更换文件中的引入文件的后缀名
1. 选择当前文件夹下所有文件的后缀替换：
2. 更换单个文件的替换：快捷键ctrl + h


3. 抽取公共头（header）和公共侧边栏（aside）到公共文件夹下（public）
    在需要用到公共模块的页面中引入相应的模块，用incude_once

4. 在网页的根目录下配置相关选项    -> config.php
定义数据库的主机、账号、密码、名字   ->   define('DB_HOST'，'127.0.0.1') ...
注意该配置选项的引入，在页面中引入(require_once)，它的路径是当前页面开始的相对路径

5. 渲染公共头部分类的数据
① 连接数据库操作   ->        获取数据库的数据
② 利用foreach循环渲染数据到页面上

6. 渲染首页文章的数据
① 导入配置文件，连接数据库，获取数据库中的数据  ->  注意此时接收数据变量的命名
②  利用foreach循环渲染数据到页面上

7. 渲染分类列表文章的数据
① 在首页的分类跳转链接设置跳转的页面路径，并传入类别的id
② 导入配置文件，连接数据库，获取数据库中的数据
③ 利用foreach循环渲染数据到页面上


day2
因为涉及到很多数据库的操作，所以可以将其单独提取出来做成一个函数
8. 点击侧边的分类列表，跳转到对应的分类文章(list.php)页面
① 在头部公共模块中，设置跳转链接，传入相应页面的参数(categoryId)
② 在分类文章列表页通过get获取相应的参数值(categoryId)，并根据内容及参数编写我们需要从数据库中获取的数据，执行sql语句，返回数据
③ 通过foreach将数据渲染到具体的文章页面中

9. 分类页面，点击文章列表最底部的加载更多按钮获取更多的数据
① 首先为加载更多按钮添加点击事件，然后发送ajax请求到对应的api后台得到相应的数据
api：
1. 在该项目中创建一个名叫api的文件夹，放入相关的接口文件
2. 后端
通过post请求获得前台传过来的页码(currentPage)，页数(pageSize)以及categoryId
编写相应的加载更多sql语句，得到数据的范围为(currentPage-1)*pageSize, pageSize
执行sql语句，得到二维数组

编写得到分类文章总数的sql语句，执行sql语句，将其加入到响应数组中

定义一个响应数组，如果没有得到二维数组，返回错误信息。
    如果得到二维数组，向响应变量中写入相关的数据
    -> 'code'、'msg'、'data'、'total'(同类文章总数量用于前台判断)
将这个响应数组返回到请求的页面
3.前端
在绑定点击事件前，分别定义当前页(currentPage=1)以及每页数据(pageSize=10)
点击按钮先让当前页加一，然后发送ajax请求
因为后台是用post接收数据的，所以前台的请求方式type应该设置为post
url对应api接口文件
发送给后端的数据data: 页码，请求数据项，分类文章Id
请求成功后，对接收的数据进行判断，成功的数据再渲染到模板中添加到页面中

需要注意的是，后台数据库中的数据是有限的，所以有必要判断数据加载完的条件
当前页码数 >= 数据库中的最大页码数，让加载更多按钮消失


10. 点击分类页面文章的题目，进入文章的详情页面
① 给文章题目的链接设置需要跳转的页面，并传入当前文章的id
② 文章的详情页面可以通过get请求拿到，并通过id获取文章相关的详情信息
③ 将获得的信息渲染到页面上


day3
11. 后台admin登录页面  (会话技术)
完成的是登录的功能
1. 用户输入邮箱和密码，点击登录
2. 收集用户的数据，发送到服务端
3. 把用户数据和数据库数据对比
4. 把登录j结果通知前台

前端跳转：location.href = 'page.html'
后端跳转：header('location:page.html')
前端：
对后台页面完成登录的验证 - 除了登录页面，都需要做登录验证
一定要记住，如果要使用session就必须先开启
没有isLogin这个key, 有isLogin, 但是值跟我们在登录的时候存储的不一样
如果没有登录过，就应该强制登录

登录按钮注册点击事件
手机用户的数据，ajax发送给服务端
收集到用户数据的时候需要先对数据格式进行验证
格式正确在发送
判断返回的数据是否登录成功
成功就跳转后台页面，否则提示错误
后端：
得到用户的邮箱和密码
根据邮箱和密码到数据库中查找有没有对应的数据
最终通知前台是否登录成功

12. 后台侧边栏aside，导航栏nav-bar提取到公共文件夹中
分别将后台页面相同的侧边栏，导航栏抽取到公共文件夹下，页面用到的位置引入即可

13. 抽离了公共模板，需要对侧边栏菜单的折叠与展开重新设置相应的属性值
抽取了公共模板后，对菜单的展开以及菜单项的激活状态产生了影响，需要手动添加相关的属性

在页面引入侧边栏地方的上面定义一个变量，记录当前页面的名字
在侧边栏公共模块中，用一个数组记录需要展开菜单项的页面名字，利用in_array判断当前是哪个页面在引用当前公共模块，如果是属于菜单项的页面正在引用，则设置相关的属性值，让菜单项展开，否则关闭菜单项。
可以通过对每个li标签判断当前引用页面是否与当前li所对应的页面信息相同，如果相同则添加激活类，否则不添加

14. 对侧边栏的头像以及昵称的动态渲染
① 在侧边栏的公共模块中发送ajax请求，得到服务器返回的用户头像以及昵称的信息，并将其动态渲染到页面对应的地方
② 对应接口
连接数据库，获取数据，其中sql查询语句中用户的id是通过session获取的，其值在登录成功的时候就被设置好了。
将相关的数据写入到相应的数组中去，并以json格式返回该数组变量

15. 对分类目录页面的表格进行数据的动态渲染
前端：
分类页面发送ajax请求，获得分类表格的相关信息，将其渲染到表格中
后端：
接口查询数据库分类表的数据，得到数据，处理后给客户端响应数据

day4
16. 分类目录页面的表格添加信息
前端：
添加按钮绑定点击事件，收集用户信息，并对其进行验证
验证通过后，对相关后台页面发送ajax请求
后端：
获得前台传过来的信息，先编写sql语句判断数据库中是否有重复的类名
如果重复，返回错误的信息
不重复，编写新增信息的sql语句，
implode(',', 数组)  ->  数组中的元素以,分割转为字符串
array_keys(关联数组)   ->  获取所有的键
array_values(关联数组)  ->  获取所有的值








欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2