2020 December 13 Web开发

Ajax(二)-综合项目演练

简介:本项目是围绕github上webStudy文件夹中demo-05-alibaixiu项目来讲述的

运行项目

安装node.js软件并测试其是否安装成功
安装mongodb、mongodb-compass软件
cd到demo-05-alibaixiu/alibaixiu目录下安装依赖：npm install
运行服务器：node app.js
访问web页面：http://localhost:3000/
访问管理端：http://localhost:3000/admin/login.html，账号：itheima@itcast.cn 密码：123456
先在管理端添加数据，然后再开始看项目
1. 设置网站
2. 添加分类
3. 添加文章
4. 设置轮播图（链接设置文章的id）
5. 添加用户

web代码实现

在项目的public中编写web代码

登录拦截的实现

场景：当用户未登录时，用户直接访问其他页面地址，要跳转到登录页面
实现步骤：
1. 在html最前面使用script标签加载服务器端提供的接口地址(本质是get请求)，拿到登录状态的返回值isLogin
2. 判断isLogin变量的值，如果值为false，跳转到登录页面

代码举例：

 //article.html 页面
 <!--1. 登录拦截-->
 <!-- 根据当前登录状态来判断当前页面是否加载，已登录继续加载，未登录直接跳转到登录页面 -->
 <!-- 加载服务端提供的接口地址：获取用户登录状态 ,返回结果isLogin变量-->
 <script src="/login/status"></script>
 <script>
   if (!isLogin) location.href = 'login.html';
 </script>
    
 <!--2. html页面内容-->
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
 ...

学习方式

仔细阅读项目代码

Table of Contents