张三的博客项目总结
- 请问项目用到了哪些技术?
- Node.js
- Modules:
- CommonJS的模块化
- ECMAScript Module
- Modules:
- Expresss()框架
- MongoDB数据库
- Mongoose库
- Schema()
- Model()
- MVC:APP的设计模式/思想
- Model:模型(数据)
- View:视图
- Controller:控制器
- BootStrap:构建布局
- EJS:视图模版
- Node.js
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步:项目初始化
- 创建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 不支持变量
动态网站:数据从数据里注入到页面里;
- html 不支持变量