node(一)
require.js AMD模块化规范
{ // AMD规范,require.js是语法形式 // ["a"] -> a.js 后缀名会自动添加,多个模块就在中括号添加内容 // 会自动执行a.js文件 require(["a"], function (res) { // function里面是接收导入内容 console.log(res); }); }
node的require模块化的注意点
index.js )
let res = require("./a.js");
// 这个./是必须要加的,不然会报错
// 在node中执行 -> 终端 -> node index.js
// 什么时候不需要./呢?
// node_modules
// 接收导入
console.log(res.name);// 注意:上面需要let定义一下
res.hobby();
a.js )
console.log("a....");
// 导出
{
// 第一种方式
// module.exports = {
// name: "张三"
// }
}
{
// 第二种方式
exports.name = "李四";
exports.age = 20;
exports.hobby = function(){
console.log("fn...")
}
// 注意点: 这样是错误;
// exports = {
// name:"王五"
// }
// 因为exports是module.exports的引用,所以真正的导出是使用module.exports的;
}
关于package.json这是一个描述性和功能性文件,并不是可有可无文件的,它是和项目相关的文件;
如何创建呢?
npm init -y -> 注:-y是表示下面东西默认值,就不需要一直确认了;
node_modules:
1.我们在引入这里面的js的时候就不需要加 ./
require("b");
2.关于modules的向上查找功能
若假如本项目中没有modules中的文件,也执行查找引入的时候,会自动向上级查找,依次找到为止;
ES6和commonjs的导入导出区别
ES6 : export、export default 导出 import 导入
common : modules.exports 导出 require 导入
他们两个都是成双出现的
内置模块不需要安装,外置模块需要安装
npm包管理器使用
npm i -> npm install的简写 --save-dev (-D) 开发依赖 --save (S) 运行依赖
-g 全局安装
npm root查看全局路径
npm root -g
其他工具
npm i jquery这样一个过程是在哪里下载的呢?
npm config list -> 可以查看npm下载的源
https://www.npmjs.com/ 在源里面下载的东西,全部可以在这里查找
但是呢这是一个国外的网站,所以当网络慢的时候,就可能下载比较久
所以可以改到淘宝里面 -> cnpm
npm config set registry https://registry.npm.taobao.org 这样子就可以改为淘宝源,下载速度就比默认的国外快
那这里面这么多npm是如何来的呢?
是可以用户上传的~
1.需要有package.json
npm init -y
2.源需要是官方源
npm config set registry https://registry.npmjs.org/
3.注册账号
然后登录
npm login
4.上传
npm publish
5.删除
npm unpublish
yarn
和npm很相似,也就是比他快~
nvm
可以切换node的版本
前提需要安装
正式内容
一个小小的服务端与后端路由
index.js )
const http = require("http");
// req -> require的简写 -> 所有浏览器到服务端的东西 -> 也就是前端到后端的
// res -> 服务端输出到客户端的东西
let server = http.createServer((req,res)=>{
// res.setHeader("Content-Type","text/html;charset=utf-8");//设置协议头
//设置协议头的第二种方式 -> 原生
res.writeHead(200,{//参数 : 请求成功(状态码)
"Content-Type":"text/html;charset=utf-8"
});
// res.end("hello,世界");//end 输出内容
console.log(req.url);//可以获取网页一些资源,在node中显示
// 那我们拿到这些东西了之后,就可以做后端的路由区分了
// 后端路由区分:后端路由区分和前端的路由区分是不一样的
// vue 那些都是使用了spa 单页应用(无刷)
// 后端路由: 需要重新请求一下(刷新);
if(req.url === "/index"){
res.end("主页面");
}else if(req.url === "/product"){
res.end("商品页面");
}
});
server.listen(8989);//给端口
fs模块:设置路由,区分头部,加载页面(文件读取/流),处理第三方资源
const http = require("http");
const fs = require("fs");
const mime = require("./mime.json");
const path = require("path");//内置模块,可以拿到后缀
// console.log(mime);//这里的json自动转换为了对象
// req -> require的简写 -> 所有浏览器到服务端的东西 -> 也就是前端到后端的
// res -> 服务端输出到客户端的东西
let server = http.createServer((req,res)=>{
// res.setHeader("Content-Type","text/html;charset=utf-8");//设置协议头
//设置协议头的第二种方式 -> 原生
// res.writeHead(200,{//参数 : 请求成功(状态码)
// "Content-Type":"text/html;charset=utf-8"
// });
// res.end("hello,世界");//end 输出内容
console.log(req.url);//可以获取网页一些资源,在node中显示
// 那我们拿到这些东西了之后,就可以做后端的路由区分了
// 后端路由区分:后端路由区分和前端的路由区分是不一样的
// vue 那些都是使用了spa 单页应用(无刷)
// 后端路由: 需要重新请求一下(刷新);
if(req.url === "/index"){
res.writeHead(200,{//参数 : 请求成功(状态码)
"Content-Type":"text/html;charset=utf-8"
});
// res.end("主页面");
let indexData = fs.readFileSync("./index.html");//读取文件
res.end(indexData);//输出
}else if(req.url === "/product"){
res.writeHead(200,{//参数 : 请求成功(状态码)
"Content-Type":"text/html;charset=utf-8"
});
// res.end("商品页面");
{
// 文件方式读取
// let productData = fs.readFileSync("./product.html");
// res.end(productData);
}
{
// 流读取
let rs = fs.createReadStream("./product.html");
rs.pipe(res);
}
}else{
// 统一处理其他资源
if(req.url!=="/favicon.ico"){
// 问题1:协议头如何处理呢?
// 引入Mime标准
let extName = path.extname(req.url);//获取后缀名
res.setHeader("Content-type",mime[extName]);//配置协议头
let resData = fs.readFileSync("."+req.url);
res.end(resData);
}
}
});
server.listen(8989);//给端口
新闻信息展示
const http = require("http");
const fs = require("fs");
const mime = require("./data/mime.json");
const path = require("path");
const cheoor = require("cheerio");//外置模块新模块 -> 处理HTML -> 需要init,然后安装cheerio -S
const url = require("url");//内置模块 -> 可以提取路由地址;
let newsData = require("./data/data.json");
let server = http.createServer((req,res)=>{
let objPath = url.parse(req.url,true);//可以拿到真正的路由地址
let pathName = objPath.pathname;
// console.log(pathName);
if(pathName==="/news" || req.url==="/"){
res.setHeader("Content-type","text/html;charset=utf-8");
// res.end("新闻页面");
// 分页相关;
// 已知: 当前是那页 页码 : 1,2,3
// 已知: 每页有多少条?
// 得到数据
// 接收当前页码
// console.log(objPath.query.p);
let p = objPath.query.p || 1;//页码
let perPage = 5;//条
// 1,5 0-5 -> (p-1)*perPage,perPage
// 2,5 5,10 -> (p-1)*perPage,perPage
// ... splice
let nData = JSON.parse( JSON.stringify(newsData)).splice((p-1)*perPage,perPage);
// 生成页码
let totalCount = newsData.length;
let page = Math.ceil(totalCount/perPage);//页码总数
// 按照数据组装HTML
let newHTML = "";
nData.forEach(itme=>{
newHTML += `
<li class="news">
<a href="javascript:;">
<img src="${itme.imgUrl}" alt="">
</a>
<div>
<h3>
<a href="${"http://localhost:8787/detail?d=" + itme.id}">${itme.title}</a>
</h3>
<div class="info">
<span class="tips"><span>${itme.from}</span></span>
<!-- <span class="line"></span> -->
<span class="time">| ${itme.newTime}</span>
</div>
</div>
</li>
`;
});
// 组装分页
let paginationHtml = `<a href="javascript:;" class="prev">⌜</a>`;
for(let i = 1;i<=page;i++){
paginationHtml += `<a href="/news?p=${i}">${i}</a>`;
}
paginationHtml += `<a href="javascript:;" class="next">⌝</a>`;
let indexData = fs.readFileSync("./views/index.html");
let $ = cheoor.load(indexData);//加载处理模板
$(".news-list").html(newHTML);//替换内容
$(".pagination").html(paginationHtml);
// res.end(indexData);
res.end($.html())
}else if(pathName==="/detail"){
res.setHeader("Content-type","text/html;charset=utf-8");
// 获取后缀内容(?d=)
let objPath = url.parse(req.url,true);//可以拿到真正的路由地址
let pathName = objPath.pathname;
let num = objPath.query.d;
// 获取数据内容(标题);
let title = newsData[num-1].title;
// res.end("详细页面")
let detailData = fs.readFileSync("./views/detail.html");
let $ = cheoor.load(detailData);//加载处理模板
$(".title").html(title);//替换内容
res.end($.html());
}else{
if(pathName!=="/favicon.ico"){
let extName = path.extname(req.url);//获取后缀名
res.setHeader("Content-type",mime[extName]);//配置协议头
let resData = fs.readFileSync("."+req.url);
res.end(resData);
}
}
});
server.listen(8787);
成功一定有方法,失败一定有原因
浙公网安备 33010602011771号