运行node node ./1.js let不存在变量提升 /* const fs = require('fs') const path = require('path') fs.readFile(path.join(__dirname, 读取文件路径), 'utf8', (err, data) => {}) fs.writeFile(path.join(__dirname, 读取文件路径), 写入的内容, (err, data) => {}) fs.appendFile(path.join(__dirname, 读取文件路径), 写追加的内容, (err, data) => {}) fs.copyFile(要抄的文件路径, 抄到哪里, 回调) fs.stats() */ console.log(path.basename(str)) // 获取文件名称的 console.log(path.dirname(str)) // 获取文件所在的路径的 console.log(path.extname(str)) // 获取文件的扩展名 1.9.2. 8.2 安装和卸载全局包（i5ting_toc） 什么是全局的包：安装到计算机全局环境中的包，叫做全局包；安装的全局包可以在当前电脑的任何目录下，直接通过命令行来访问； 如何安装全局包：运行 npm install 包名 -g 即可；其中 -g 参数，表示 把包安装到全局目录中的意思； 全局包的安装目录：C:Users用户目录AppDataRoaming pm 什么样的包适合安装到全局：工具性质的包，适合安装到全局； 如何卸载全局包：要卸载某个全局的包，直接运行npm uninstall 包名 -g即可；其中 uninstall 表示卸载的意思； -g -S (局部开发环境) -D(局部环境dev测试环境) 1.下载 npm install 包名 -g (全局) 一:下载: npm i i5ting_toc -g 二: 转换: npm i i5ting_toc -f 文件目录 -o (-o下载完毕打开) 三:卸载:npm uninstall 文件目录 -g 2.安装局部包 1.npm init -y (初始化包配置文件) 2.npm install jquery -S (-S 等价于--save) 3.npm install (他会去找当前目录package.json看里面有什么,会帮你下载什么) 4.npm uninstall 包名 -S 卸载 5.--sace(-S) 3.解决下载慢问题 cnmp (中国cnmp) 中国淘宝镜像 http://npm.taobao.org/ npm install -g cnpm --registry=https://registry.npm.taobao.org --------------------------------- 自动重启服务器 ----------------------------------- npm i nodemon -g 1. 使用 nodemon 工具来自动重启web服务器 - nodemon的作用：能够实时监听当前项目中，文件的变化；只要监听到了文件的变化，则 nodemon 工具，会自动重新启动 web 服务器，从而使最新的代码生效；免去了程序员手动重启服务器的困扰； - 如何安装：运行 npm i nodemon -g 全局安装即可； - 如何使用： - 之前使用 node 要执行的文件路径 来运行 Node.js 代码； - 现在使用 nodemon 要执行的文件路径 来运行 Node.js 代码； - 注意：今后在开发Web项目的时候，推荐使用 nodemon 来启动 web 服务器 ------------------------------------- express框架的安装 express 框架的安装和基本使用 1. 安装：运行 npm i express -S 即可安装 2. 创建基本的 express 服务器： - 导入 express 第三方模块； - 创建服务器的实例：调用 const app = express() 方法； - 通过 app.get() 或 app.post() 方法，来监听客户端的 get 或 post 请求，具体语法： - 监听 GET 请求：app.get('请求地址', (req, res) => { 处理函数 }) - 监听 POST 请求： app.post('请求地址', (req, res) => { 处理函数 }) - 启动 express 服务器：通过 app.listen(端口, IP地址, 启动成功后的回调函数) 启动服务器； --------------------------------------------------- express 中的快捷方法 1. res.send() 1. 支持 发送 字符串 Content-Type: text/html; 2. 支持 发送 对象 或 数组 Content-Type: application/json 3. 支持 发送 Buffer 此时会当作文件下载； 2. res.sendFile() - 用法1：res.sendFile(path.join(__dirname, './view/index.html')) - 用法2：res.sendFile('./view/movie.html', { root: __dirname }) - 注意：res.sendFile() 可以向浏览器发送 静态页面； ------------------------------------------- express.static托管资源 如果我们网站中，有很多静态资源需要被外界访问，此时，使用 res.sendFile 就有点力不从心了; 这时候，express 框架，为我们提供了 express.static('静态资源目录') 来快速托管指定目录下的所有静态资源文件； 1. 语法1： app.use(express.static('public')); - app.use()方法，是专门用来注册 中间件； - express.static 是express的内置中间件； 2. 语法2：app.use('/虚拟目录', express.static('public')) ------------------------------------------- exppress框架配置模板引擎渲染动态页面 1. 安装 ejs 模板引擎npm i ejs -S 2. 使用 app.set() 配置默认的模板引擎 app.set('view engine', 'ejs') 3. 使用 app.set() 配置默认模板页面的存放路径 app.set('views', './views') 4. 使用 res.render() 来渲染模板页面res.render('index.ejs', { 要渲染的数据对象 })，注意，模板页面的 后缀名，可以省略不写！ --------------------------------- npm i express-art-template art-template -S 下载两个局部包 需要包:js-tokens is-keyword-js detect-node 在 express 中配置 art-template 1. 安装 两个包 cnpm i art-template express-art-template -S 2. 自定义一个模板引擎 app.engine('自定义模板引擎的名称', 渲染函数) 3. 将自定义的模板引擎，配置为 express 的默认模板引擎 app.set('view engine', '具体模板引擎的名称') 4. 配置 模板页面得存放路径 app.set('views', '路径') --------------------------------------------------------------------- express框架中提供的路由来分发请求 1.什么是路由:路由就是对应关系 2.什么叫做后端路由:前端请求的URL地址,都要有一个后端对应的函数处理 .这种叫做对应关系,就叫做后端路由 3.在Express中，路由的主要职责 就是 把请求分发到对应的处理函数中； 4.在Express中，如何 定义并使用路由呢？ -------------------------- - // 1. 封装单独的 router.js 路由模块文件 const express = require('express') // 创建路由对象 const router = express.Router() router.get('/', (req, res)=>{}) router.get('/movie', (req, res)=>{}) router.get('/about', (req, res)=>{}) // 导出路由对象 module.exports = router ------------------------------------ 5.express 创建的 app 服务器，如何使用 路由模块呢？ ----------------------------------- // 导入自己的路由模块 const router = require('./router.js') // 使用 app.use() 来注册路由 app.use(router) ----------------------------- startWidth、endWidth 兼容 判断是否是以某一段字符开始 String.prototype.startWith=function(str){ var reg=new RegExp("^"+str); return reg.test(this); } //测试ok，直接使用str.endWith("abc")方式调用即可 String.prototype.endWith=function(str){ var reg=new RegExp(str+"$"); return reg.test(this); } ---------------------------------- 什么是中间件 定义：中间件就是一个处理函数；只不过这个函数比较特殊，包含了三个参数，分别是 req，res，next 注意：中间件方法中的三个参数： - req：请求对象； - res：响应对象； - next：next()可以被调用，表示调用下一个中间件方法； 4.2 Express 框架中对中间件的5种分类 1. 应用级别的中间件： 挂载到 app 上的中间件 app.get('URL地址', （req, res, next）=> {})； 2. 路由级别的中间件： 挂载到 router 对象上的中间件 router.get('url地址', (req, res, next)=>{}) 3. 错误级别的中间件： 回调函数中，有四个参数 app.use((err, req, res, next)=>{}) 4. 唯一内置的中间件： express.static() 5. 第三方中间件： 非express框架提供的，需要程序员手动安装才能使用的中间件；body-parser 解析post 表单数据 中间件的概念，了解即可，因为实际开发中，我们都直接使用第三方现成的中间件； 中间件就是: 中间处理的过程,这就是中间件 ------------------------------------------ 用户模块的加载机制 - 先查找缓存； - 如果缓存中没有则尝试加载用户模块； - 如果在加载用户模块时候省略了后缀名，则： 首先，严格按照指定的名称去查找 其次，尝试加载后缀名是 .js 的文件 如果没有.js的文件，则尝试加载 .json 结尾的文件 如果没有 .json 的文件，则尝试加载 .node 结尾的文件 查找规则：index -> index.js -> index.json -> index.node 第三方模块的加载机制【了解】 1. 先在项目根目录中查找node_modules文件夹 2. 在node_modules文件夹下，查找模块相关的文件夹 3. 在对应的文件夹下，查找package.json的文件 4. 查找package.json文件中的main属性（指定了模块的入口文件） 5. 如果找到了main属性，同时，main属性指定的文件路径存在，那么尝试加载指定的文件模块 6. 加入没有main属性，或者main属性对应的文件不存在，或者没有package.json,那么会依次尝试加载index.js，index.json,index.node; 7. 如果没有index相关的文件，或者没有指定模块对应文件夹，或者，当前项目根目录中没有node_modules文件夹，则向上一层目录中查找node_modules，查找规则同上！ 8. 最后，如果在项目所在磁盘的盘符根目录中，还找不到对应模块，则报错：cannot find module *** -------------------------------------------------------- express中获取参数的几种形式 1. 获取 http://127.0.0.1:3001/user?id=10&name=zs 中的查询参数： - 直接使用 req.query 获取参数即可； - 注意：URL 地址栏中通过 查询字符串 传递的参数，express 框架会直接解析，大家只需要使用 req.query 直接获取 URL 中 查询字符串的参数； 2. 从URL地址中获取路径参数： - 假设后台的路由是 app.get('/user/:id/:name', (req, res) => {}) - 假设客户端浏览器请求的URL地址为：http://127.0.0.1:3001/user/10/zs - 直接使用 req.params 可以获取URL地址中传递过来的参数； 3. 从post表单中获取提交的数据： - 借助于body-parser来解析表单数据 - 安装：npm i body-parser -S - 导入：const bodyParser = require('body-parser') - 注册中间件：app.use(bodyParser.urlencoded({ extended: false })) - 使用解析的数据： req.body 来访问解析出来的数据 Web 开发模式 2.1 混合模式（传统开发模式） - 以后端程序员为主，基本上不需要前端程序员，或者，前端程序员只负责画页面、美化样式、写JS特效，前端程序员不需要进行数据的交互； - 这种开发模式，在早些年比较常见； - 传统开发模式下，用的最多的是 Jquery + 模板引擎 + Bootstrap - 后端页面 .php .jsp .aspx .cshtml 2.2 前后端分离（趋势） - 后端负责操作数据库、给前端暴露接口 - 前后端分离的好处：保证了各个岗位的职责单一； - 前端负责调用接口，渲染页面、前端就可以使用一些流行的前端框架 Vue， React， Angular JSONP 和 CORS 的区别 1. JSONP的原理：动态创建script标签； - JSONP发送的不是Ajax请求 - 不支持 Post 请求； 2. CORS中文意思是跨域资源共享 ,需要服务器端进行 CORS 配置； - CORS 发送的是真正的Ajax请求 - CORS 支持Ajax的跨域 - 如果要启用 CORS 跨域资源共享，关键在于 服务器端，只要 服务器支持CORS跨域资源共享，则 浏览器肯定能够正常访问 这种 CORS 接口；而且，客户端在 发送 Ajax的时候，就像发送普通AJax一样，没有任何代码上的变化； 3. 对于Node来说，如果想要开启 CORS 跨域通信，只需要安装cors的模块即可； ------------------------------------------ 第三方插件 创建服务连接数据库 //创建核心模块 const express=require("express"); //调用模块 const app=express(); //导入mysql 模块 const mysql=require('mysql'); //连接数据库 const conn=mysql.createConnection({ host:'localhost',//127.0.0.1 user:'root', password:'root', database:'heros'//数据库名字 }); //测试接口 app.get('/',(req,res)=>{ res.send('请求后台api成功') }) app.listen(5001,()=>{ console.log('server running at http://127.0.0.1:5001'); }) --------------------------------- 1. 安装npm install -g gulp 2. npm install semantic-ui --save 3. cd semantic/ 4. gulp build 5. 在html中使用`<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css"> <script src="semantic/dist/semantic.min.js"></script>` npm 网速不好的时候容易丢包 yarn 类似包的管理工具 'npm i yarn -g' 安装全局yarn yarn -v 查看当前是否安装成功和版本 -----------------------------------解决跨域问题
app.all('*', function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*')
next()
})
jsonp的原理是利用scirpt标签中的src属性不存在同源限制
jsonp的核心就是后台返回一个函数的调用，同时并传入后台的数据
跨域使用cors；
(2)、CORS 【Cross-Origin Resource Sharing】
定义和用法：是现代浏览器支持跨域资源请求的一种最常用的方式。
npm cache clean --force 清理缓存
使用方法：一般需要后端人员在处理请求数据的时候，添加允许跨域的相关操作。如下：
res.writeHead(200, {
"Content-Type": "text/html; charset=UTF-8",
"Access-Control-Allow-Origin":'http://localhost',
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});