0410

张三的博客项目总结

1. 请问项目用到了哪些技术？
   • Node.js
     • Modules:
       • CommonJS的模块化
       • ECMAScript Module
   • Expresss()框架
   • MongoDB数据库
   • Mongoose库
     • Schema()
     • Model()
   • MVC：APP的设计模式/思想
     • Model：模型(数据)
     • View：视图
     • Controller：控制器
   • BootStrap：构建布局
   • EJS：视图模版

NPM VS NPX

Npm : Node.js的软件包管理器（Node.js Package Manager ）

NPX: Node.js的软件包执行器 (Node.js Package Executor)

express Generator

定义

express Generator是快速生成Express APP的脚手架。

Node.js APP 的开发步骤

第1步：项目初始化

1. 创建package.json文件(模块包，管理项目用到模板)

mkdir myApp 
cd myApp
npm init --yes
npm init -y

第2步. 创建项目目录结构

myApp
- models:存放数据模型模块 module.exports = Blog
- views: 存放ejs视图文件
- controllers: 存放控制器：处理请求的回调
- routes: 存放路由表
- public: 存放静态资源（图片、css、js、字体)
- app.js: 主文件（App入口）
- package.json: 描述App（app的名字、描述、关键字、版本、第三方依赖)

第3步：安装项目所需模块
一键安装npm i

• express
• mongoose
• ejs
• express-ejs-layouts

第4步：引入模块（注意顺序引入）

用户界面

node.js

内置模板

• path：用于处理（拼接）路径段；
• fs：用于处理文件系统；
• http：用于创建服务器;

第三方模板

• express: 构建node.js APP;
• mongoose: 与mongoDB通信;
• Ejs：创建视图;嵌入式Javasript的hitml模板
  -<% %>:注入动态数据（变量、对象名、函数名、语句）
• nodemon：开发?
• express--ejs-layouts:用于构建视图的模板；
• 第一步：安装npm install ejs？？？

本地模块

• Model： 如: Blog数据模型

模块化
html没有模块的概念

• css使用@import导入css模块
  • 不要把所以的css都写在一个文件里
• 谨慎使用@import 规则（1.必须放在css文件首行 2.注意：不要引入字体）
• @import会发起请求
• ES 6使用 import 和export导入模块

第5步：创建app.js的基本结构

App.js

//引入模块
const express=require('express')

//实例化App
const app = express() 

//配置app实例
app.use('',callback) //为指定路径注册回调函数
app.set(key, value) //设置一个值，为以后调用

//连接数据库
const uri = ''
mongoose.connect(uri)
        .then()
        .catch()

//配置路由

网站的基本·原理

• 搭建一个网站，需要做的三件事：
• 买一个域名：域名是ip地址的别名。域名管理面板下设置
  • 域名解析：把ip地址绑定到域名上；
• 买一个服务器：
  • 每个服务器都是一个ip地址。
  • ip地址绑定一个域名。
• 编写一套程序：
  -静态网页语言：HTMl css
  • 动态网页语言：index.pjp 、 index.jsp、 index.asp、
• 默认页：index.html index.thm index.php

网站工作原理

• 网站分为两种：
  静态网站：没有用到数据库，我的数据写死html页面里；
  • html 不支持变量
    动态网站：数据从数据里注入到页面里；