目前的打算是前端用Vue+element，后端用Nodejs的Express框架，实现一个展示页面和后台管理页面。打算记录学习过程。
推荐两个教程：
https://www.cnblogs.com/xifengxiaoma/tag/element/
https://juejin.im/post/59097cd7a22b9d0065fb61d2#heading-1
https://panjiachen.github.io/vue-element-admin-site/zh/guide/
https://blog.csdn.net/sps900608/article/category/7482283/1
1.Nodejs介绍
JS和Nodejs
1、ES 定义了语法规则，JS和Nodejs必须遵守
2、js js=ES+web API(DOM，BOM，事件绑定，ajax)
3、node.js node.js=ES+nodejs API(处理http，处理文件等) ，两者结合，可完成server端的任何操作
Commonjs和ES6模块使用规范
//Commonjs
//math.js
let add=(x,y)=>{
return x+y;
}
let sub=(x,y)=>{
return x-y;
}
module.exports={
add:add,
sub:sub
};
let math=require('./math');
let test=math.add(3,3);
console.log(test);
//ES6模块化
//lib.js
let bar=function(){
console.log('this is bar funciton');
};
let foo=function(){
console.log('this is foo function');
};
export {bar,foo}
//加载 lib.js文件
import {bar,foo,test,obj} from './lib'
foo();//this is foo function
server开发和前端开发的区别
环境思维工具的区别，而不是语言的区别
1.服务的稳定性：server端可能会遭受各种攻击和误操作，单个客户端可以意外挂掉，但是服务端不能
2.考虑内存和CPU(优化和扩展)：客户端独占一个浏览器，内存和CPU都不是问题，但是 server 端要承载很多请求，CPU和内存都是稀缺资源
3.日志记录：前端也会参与写日志，但是只是日志的发起方，不关心后续；server端要记录日志，存储日志，分析日志
4.安全： server端要随时准备接受各种恶意攻击（如越权操作，数据库攻击等），前端则少很多
5.集群和服务拆分：流量扩大，解决机器的负荷
2.HTTP请求（get和post）
HTTP请求解析过程 （简单概括）
1.域名解析
用户输入网址，由域名系统DNS解析输入的网址；
2.TCP的3次握手
通过域名解析出的IP地址来向web服务器发起TCP连接请求，如果3次握手通过，则与web服务端建立了可靠的连接；
3.发送http请求
web客户端向web服务端发送请求；
4.接收http响应
web客户端接收来自web服务端的响应，包含各种根据请求反馈的数据；
5.web客户端（浏览器）解释响应
最后由浏览器解析响应里的数据，即HTML代码，以及HTML代码中请求的资源，然后由浏览器呈现给用户。
get请求和post请求
get请求：
1.get请求，即客户端要向server端获取数据，如查询博客列表
2.通过querystring来传递数据，如a.html?a=100&b=200
3.浏览器直接访问，就发送get请求
const server = http.createServer((req,res) => {
console.log(req.method); //GET
const url = req.url; //获取请求的完整 url
//querystring.parse("name=whitemu&sex=man&sex=women");
/*
return:
{ name: 'whitemu', sex: [ 'man', 'women' ] }
*/
req.query = querystring.parse(url.split('?')[1]); //解析 querystring
res.end(JSON.stringfy(req.query));//将对象转换成字符串，res.end返回一个字符串
})
附注：
querystring.parse将字符串转成对象，其实就是把url上带的参数串转成数组对象。
JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串，JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。
//JSON.parse()
var json = '{"result":true, "count":42}';
obj = JSON.parse(json);
console.log(obj);
console.log(obj.result);
> { result: true, count: 42 }
> true
//JSON.stringify()
JSON.stringify({}); // '{}'
JSON.stringify(true); // 'true'
JSON.stringify("foo"); // '"foo"'
JSON.stringify([1, "false", false]); // '[1,"false",false]'
JSON.stringify({ x: 5 }); // '{"x":5}'
参考文章：
https://blog.csdn.net/qq_34645412/article/details/80087829
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
post请求：
1.post请求，即客户端要向服务端传递数据，如新建博客
2.通过post data传递数据
3.浏览器无法直接模型，需要手写j，或者通过postman
post接收数据是通过数据流的方式，数据流就是所谓的stream。
post方式发送的数据，可大可小。小的话还好，数据量大的时候，不阔能一次性接收，而是分流接收
每次接收的到数据都会触发 req.on(‘data’,chunk=>{})，当接收完之后就会触发req.end 事件
const server = http.createServer((req,res) => {
if(req.method === 'POST'){ //POST
//数据格式
console.log('content-type',req.headers['content-type']);
//接收数据
let postData = ""
req.on('data',chunk => {
postData += chunk.toString();
})
req.on('end', () => {
console.log(postData);
res.end('hello world')
})
}
})
get和post
const http = require('http')
const querystring = require('querystring')
const server = http.createServer((req, res) => {
const method = req.method
const url = req.url
const path = url.split('?')[0]
const query = querystring.parse(url.split('?')[1])
// 设置返回格式为 JSON
res.setHeader('Content-type', 'application/json')
// 返回的数据
const resData = {
method,
url,
path,
query
}
// 返回
if (method === 'GET') {
res.end(
JSON.stringify(resData)
)
}
if (method === 'POST') {
let postData = ''
req.on('data', chunk => {
postData += chunk.toString()
})
req.on('end', () => {
resData.postData = postData
console.log(postData)
// 返回
res.end(
JSON.stringify(resData)
)
})
}
})
server.listen(8000)
console.log('OK')
3.搭建开发环境
1.初始化 npm 环境： npm init -y
2. package.json 的 main 值默认 index.js 为主程序
3. bin 目录里面一般为可执行文件
4. nodemon: 检测文件变化，自动重启 node
5.cross-env: 设置环境
5. 安装 nodemon 和 cross-env: npm install nodemon cross-env --save-dev --registry=https://registry.npm.taobao.org
6. process.env.NODE_ENV: 获取当前运行环境
nodemon监测文件变化，自动重启Node
cross-env设置环境变量，之后做环境区分使用，运行跨平台设置和使用环境变量的脚本
process是node的全局变量，process.env.NODE_ENV可以获取当前运行环境
cross-env介绍
这个小插件主要解决 windows 下 无法设置 NODE_ENV=development 这个东西. 因为程序可以根据 NODE的环境变量,做出不同选择，进行不同的设置.
这个在 linux 下是可以设置的,但在 windows 下不行
package.json配置
//process是node提供的全局变量。
dev: cross-env NODE_ENV=dev nodemon ./bin/www.js //开发环境
prd: cross-env NODE_ENV=production nodemon ./bin/www.js //生产环境
参考文章：
http://elickzhao.github.io/2017/06/nodejs%20%E7%9A%84%20cross-env%20%E7%9A%84%E4%BD%BF%E7%94%A8%E5%8F%8A%E4%BB%8B%E7%BB%8D/
https://segmentfault.com/a/1190000005811347
4.接口设计
app.js
//引用和处理路由（handleBlogRouter和handleUserRouter）
const handleBlogRouter = require('./src/router/blog')
const handleUserRouter = require('./src/router/user')
const serverHandle = (req,res) => {
//设置返回格式 JSON
res.setHeader('Content-type','application/json')
//处理blog路由
const blogData = handleBlogRouter(req,res)
if(blogData){
res.end(
JSON.stringify(blogData)
)
return
}
//处理user路由
const userData = handleUserRouter(req,res)
if(userData){
res.end(
JSON.stringify(userData)
)
return
}
//未命中路由，返回404
res.writeHead(404,{"Content-type":"text/plain"})
res.write("404 Not Found\n")
res.end()
}
module.exports = serverHandle
src/router/blog.js
const handleBlogRouter = (req,res)=> {
const method = req.method //GET POST
const url = req.url //获取url
const path = url.split('?')[0]
//获取博客列表
if (method === 'GET' && path === '/api/blog/list') {
return {
msg : '这是获取博客列表的接口'
}
}
//获取博客详情
if(method === 'POST' && path === '/api/blog/detail'){
return {
msg : '这是获取博客详情的接口'
}
}
//新建一篇博客
if(method === 'POST' && path === '/api/blog/new'){
return {
msg : '这是新建博客详情的接口'
}
}
//更新一篇博客
if(method === 'POST' && path === '/api/blog/update'){
return {
msg : '这是更新博客详情的接口'
}
}
//一篇博客
if(method === 'POST' && path === '/api/blog/del'){
return {
msg : '这是删除一篇博客的接口'
}
}
}
module.exports = handleBlogRouter
src/router/user.js
const handleUserRouter = (req,res)=> {
const method = req.method //GET POST
const url = req.url //获取url
const path = url.split('?')[0]
//获取博客列表
if (method === 'POST' && path === '/api/user/login') {
return {
msg : '这是登陆的接口'
}
}
}
module.exports = handleUserRouter
虽然路由没有写具体处理代码，但是展示了路由的使用和路由引用和处理，基本的路由创建，路由内容和路由使用有个框架，下一步就是具体代码编写和逻辑进一步划分。
5.博客系统的分层
上面只是把路由分离出来，我们要如何进一步划分代码见逻辑呢？
第一层是bin/www.js，这一层完全是createServer的逻辑。这个逻辑跟外面的业务代码没有任何关系。（关于数据的处理，使用回调函数，放在了app.js里面）
第二层是app.js，这是一个系统中关于http的基本设置（比如：设置返回格式JSON、获取path、解析jquery处理相关模块的路由和设置404情况），跟业务代码关系也不大。（只是负责调用路由，关于路由的具体逻辑放在router中）
第三层router，第二层中引用的路由，所以第三层就是路由。路由就有涉及到一些业务代码，有了会返回给请求一个正确的格式数据。这个路由会去处理一些数据，返回正确的格式。具体数据的处理它不用管，它只负责路由相关的事情。
第四层controller，处理和管理数据，到了controller里面就不用关心request和response、path、query等东西，就只关心数据。然后返回数据，数据之后怎么处理，controller是不管的。
第五层model
附注
第一层和第二层中的www.js 和 app.js 的目的不一样，第一个是启动服务，第二个是加载注册各种业务组件，两者应该分离，符合设计原则。
第一层（创建服务器）、第二层（系统基本设置）、第三层（路由）都属于 MVC 的C ，即 controller ，MVC 是一个大概念上的分层，不代表每个部分不能再分层。如果项目再复杂，C 和 M 之间可能还要加一个 services 层，如 egg.js 的目录，就有 services 层。
router层负责拿参数
controller层负责数据的计算 最终拿到数据
model层负责 生成一个实例 将data message errno 返回给前端
6.Nodejs读取文件
const fs = require('fs')
const path = require('path')
//resolve可以通过拼接多个步骤的方式把文件名拼出来,__dirname是指当前目录
const fullFileName = path.resolve(__dirname,'files','a.json')
fs.readFile(fullFileName,(err,data) => {
if(err){
console.error(err)
return
}
//fs.readFile 读出来的data数据是二进制的流文件,所以要经过toString转换
console.log(data.toString())
})
我们要注意resolve和toString的使用。