node.js (必须要下载才能应用)
# nodejs
简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。
Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境,基于 Google 的 V8 引擎,V8 引擎执行 Javascript 的速度非常快,性能非常好。
## nodejs 安装
安装完成后,需要测试:
测试安装是否成功: `node -v`
测试npm命令是否可用: `npm -v`
## nodejs 模块系统
1. 内置模块 : nodejs 本身具有的模块系统 比如 http path fs
2. 第三方模块 : 第三方模块托管在npm官网上,需要通过 `npm i ` 下载安装引入使用
3. 自定义模块 : 自定义模块借助模块的导入和导出功能
### 内置模块
***nodejs使用的时 CommonJs 的语法规范 通过 require() 导入模块***
使用内置模块时, 通过 require() 直接引入模块
```js
// 直接写模块名
const http = require('http');
http.createServer((req, res) => {
res.end('服务器')
}).listen(3000, () => {
console.log('server is running ... ')
})
```
### 第三方模块
使用第三方模块时, 需要先下载 后引入
- 下载
```hash
npm i 模块名
# -g 全局安装
npm i 模块名 -g
# --save 添加到生产环境依赖
npm i 模块名 --save
# --save-dev 添加到开发环境以来
npm i 模块名 --save-dev
```
比如 下载 axios 模块
```bash
npm i axios --save
```
- 引入axios
在需要使用该模块的文件中引入 模块; 直接写模块名
```js
const axios = require('axios')
axios.get().then()
```
### 自定义模块
模块的导入和导出:nodejs 中都是通过 require() 导入模块, 但是导出模块有两种方式: exports 和 module.exports
> exports 导出
exports 导出的时具体的值
- a.js
```js
// exports.attr = value;
exports.say = 'hello world';
exports.print = function(){};
```
引入:引入的时一个对象, 可以使用解构
***自定义模块在导入时,需要注意路径, 一定添加 前缀 ./ ***
- b.js
```js
// 引入的是一个对象
const modules = require('./a.js')
// 按需加载
const {say} = require('./a.js')
```
> module.exports 导出
module.exports 导出的是一个对象 , 一个文件中只能有一个 module.exports , 多个会覆盖的
- a.js
```js
modulex.exports = {
key:value
}
```
```js
modulex.exports = () => {}
```
- b.js
```js
const obj = require('./a')
```
> modulex.exports 和 exports 不能同时出现在一个文件中, 如果同时存在, modulex.exports 会覆盖 exports
> 一个文件就是一个模块系统, 一个模块可以被多个文件引入, 一个文件也可以引入多个模块
## express 框架
借助 express的generator生成器搭建项目结构, 需要全局安装
`npm i express-generator -g`;
安装 成功后 可以 使用 `express` 命令, 通过该命令搭建项目
### 项目搭建流程
1. 创建项目`express --view=ejs 项目名`
2. 进入项目目录: `cd 项目名`
3. 安装依赖 `npm i`
4. 安装热更新的插件nodemon `npm i nodemon --save`
5. 配置nodemon : 在packeg.json 文件中配置启动命令
```json
"scripts":{
...
"dev":"nodemon ./bin/www"
}
```
6. 启动项目 `npm run dev`
7. 访问项目 : 在浏览器地址栏中输入 `localhost:3000` 访问项目
### 新增功能
1. 创建在 views 文件夹中创建新的页面 'news.ejs'
2. 创建页面对应的路由文件: 在 routes 文件夹下创建对应的路由文件 'news.js'
```js
var express = require('express');
var router = express.Router();
/* GET users listing. */
// router.get(path, callback) 此处的 path 是 子路由, 访问真正的页面时, 我们用的地址是 父路由 + 子路由 , 形式 如 /parentPath/childPath
// 访问 的地址: localhost:3000/news
router.get('/', function(req, res, next) {
// 访问对应的路径,渲染指定的页面 render() 渲染模板
res.render('news');
});
// // 访问 的地址: localhost:3000/news/details
router.get('/details', function(req, res, next) {
// 访问对应的路径,渲染指定的页面 render() 渲染模板
res.send('news 新闻详情');
});
module.exports = router;
```
3. 配置路由: 在 app.js 文件中 配置路由
```js
// 引入 路由文件
const newsRotuer = require('./routes/news')
// 配置路由 渲染页面 app.use(path, template)
// path 时父路由
app.use('/news', newsRotuer)
```
### 路由配置封装
对所有的路由进行统一的管理,把routes 文件夹下的index.js 作为路由的配置入口文件 ; 在这里统一管理路由
- cnode.js
```js
const axios = require('axios');
module.exports = (router) => {
router.get('/cnode', (req, res) => {
axios.get('https://cnodejs.org/api/v1/topics').then(result => {
console.log(result.data.data);
res.render('cnode', {data:result.data.data})
})
// res.render('cnode', {data:'响应的数据'})
})
}
```
在 index.js 文件中引入 路由模块
```js
var express = require('express');
var router = express.Router();
const cnode = require('./cnode');
// const details = require('./details');
// 把该文件作为路由的配置管理文件
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
cnode(router)
// details(router)
module.exports = router;
```
## ejs 模板引擎
`<%= EJS %>`高效的嵌入式 JavaScript 模板引擎。
- 流程控制语句 `<% %>`
```js
<% if() {%>
// 代码块
<% } %>
<% if() {%>
// 代码块
<% }else { %>
// 代码块
<% } %>
```
- 插值 `<%= 变量名 %>`
可以用于标签的任何地方 ; 输出的是转义的html (不能识别标签)
```js
// 作为内容的插值
<p><%= title %></p>
<a href='<%= url %>'></a>
```
- 插入 html `<%- 变量名 %>`
```js
// 作为内容的插值
<div><%- content %></div>
```
- 循环 可以使用for 循环 或者 forEach()
```js
<% for(let i = 0; i < data.length; i++){%>
// 循环体
<li><%= data[i].title %></li>
<% } %>
<% data.forEach((item, index) => {%>
<li><%= item.title %></li>
<% }) %>
```