html页面联调
- 登录功能依赖cookie，必须用浏览器来联调
- cookie跨域不共享的，前端和server端必须同域
- 需要用到nignx做代理，让前后端同域
跑起前端页面
- http-server是一个轻量级的基于nodejs的http服务器，好处：可以使任意一个目录成为服务器的目录，完全抛开后台的沉重工程，直接运行想要的js代码。
- 前端项目中，全局安装http-server:
npm i -g http-server跑起静态页面 - 设置前端端口为8001：
http-server -p 8001(前后端端口不能一样)：
- 访问前端首页：
- 此时我们需要nginx来使前后端使用同一个端口。
nginx
- 高性能的web服务器，开源免费
- 一般用于做静态服务、负载均衡（本课用不到）
- 还有反向代理（本课用到），即客户端不可见的代理：
nginx下载与配置
- 官网下载
- 配置：（管理员权限打开记事本）Nginx所有配置文件都在Nginx根目录conf子目录中（可先不配置）
- 运行：
nginx命令
| 含义 | nginx命令 |
|---|---|
| 测试配置文件格式是否正确 | nginx -t |
| 启动nginx | start nginx（注意顺序！） |
| 重启nginx | nginx -s reload |
| 停止nginx | nginx -s stop |
| 查看版本 | nginx -v |
| 查看帮助信息 | nginx -h |
| 重启日志文件 | nginx -s reopen |
nginx反向代理的配置
（管理员权限打开记事本）修改Nginx核心配置文件：conf\nginx.conf
- **修改
worker_processes**：
我的电脑是4核的，所以设置为4 - 修改
server:
#就是注释，注释location：
- 进行反向代理：
- 如果location是静态页面就转发到8001端口，location是api开始的就转发到8000端口
- 测试：
- 启动nginx：
start nginx（注意顺序！没有报错则启动成功） - 之前后端8000端口，前端8001端口无法获取8000端口的数据，现在测试8080端口：
前端联调
个人中心只显示自己的数据
前端
http-test中admin.html中发送ajax请求的地址中再加上一个isadmin=1 参数，使用登录者的用户名：
后端
- blog-1中的router-blog.js中，修改获取博客列表的路由：
- 之前没有isadmin时，博客列表的author是由req.query.author获取到的，现在有了isadmin后，则强制从req.session.username获取author，那么访问的就是本人的博客列表了。
联调
- 启动nginx，打开8080端口，进入首页：
- 点击进入详情页：
- 尝试在尚未登录情况下进入admin管理中心：
- 可以看到并未显示管理中心，此时前端可以做个提示框或者跳转信息之类的。此时创建博客也会显示数据错误。
- 进行登录：
- 登录后自动跳转管理中心：
- 点击创建博客，创建完成后自动跳转管理中心：
- 可点击进入查看博客内容：
- 可编辑博客：
- 可搜索博客：
总结
cookie是什么？session 是什么？如何实现登录？
- cookie是跨域不共享的存储在浏览器的一段字符串（最大5kb），每次发送http请求时都会将请求域的cookie一起发送给server端。
- session即server端存储用户信息，也就是cookie中存储userid，server端对应username/个人信息。
- 实现登录：
- 用戶第一次发送登录的http请求时，请求头中并不存在cookie（即userid），此时server端生成一个cookie（即userid）返回给用户，这个userid对应用户的用户名和密码。下次访问时用户的请求头中就会携带这个userid，那么后端就会去解析cookie读取userid放到sessionId上，看sessionId对应的属性值（对象）中是否有username这个属性，有则判断为已登录。也就不需要重复登录了。
- session是一个对象，它的属性名即cookie的userid，属性值是对象，这个对象中包括username、realname
- session是存储在redis中的，这样就不会刷新页面就要求重新登录。
redis在这里扮演什么角色？有什么核心的价值？
- redis在这用于存储session。
- 这样一来session就不会保存在js变量中，不用担心访问量过大，内存暴增，也不会再正式线上运行时遇到多进程之间内存无法共享的问题。
nginx的反向代理配置，联调过程中的作用
- 使用nginx实现反向代理就可以根据url派发不同的接口，让前端页面可发生ajax请求去获取后端的数据。
- 假设前端页面是3000端口，后端页面是8000端口。那么用户打开页面时打开的就是3000端口的页面，前端页面中使用ajax请求获取数据时就会去获取3000端口下的对应路径的数据。而后端页面是8000端口，所以数据其实保存在8000端口下的对应路径中。这就无法获取数据。此时使用nginx进行反向代理，遇到
/api/开头的url时就分配到8000端口，遇到/开头的url时就分配到3000端口，这样就没问题了。 - 补充：使用react书写前端页面时，将前端页面经过build编译后生成的html页面放入了后端项目，那么访问的就是后端项目的接口下的页面，那么前端页面发送ajax请求时也就不需要nginx进行反向代理了，因为此时前后端是用同一个接口运行起来的。