有一定的后台开发经验ES6语法。后台没有用框架来，纯自己写。会sql语句
安装NodeJS的安装
从网上下载 https://nodejs.org/en/ 选择自己，我用的是最新版本
Angular CLI的安装
cli的安装可以参考https://cli.angular.io/
npm install -g @angular/cli
ng new demo -- 创建一个项目
cd demo -- 进入到项目面
npm i --registry=https://registry.npm.taobao.org -- 安装包的依赖
ng serve -- 启动项目一此顺利的话，完后会看到如下图所示
在浏览器上输入http://127.0.0.1:4200 如下图所示
用VSCode打开目录如图：
到这里基本项目框架就已经好了。
安装MySql包、http2
由于调用接口用的是xhr2，所以要安装 http2包，mysql就不用多说了，用来接连mysql数据库用的。
npm i --save-dev mysql http2安装好了以后，就要创建一个NodeJs文件，里面创建一个启动服务监听端口等
如 index.js文件里写
const http = require('http2');
const util = require('util');
const url = require('url');
const querystring = require('querystring');
const path = require('path');
const fs = require('fs');
/*******
* 服务类
********/
class server {
constructor() { }
createServer(port) {
// 创建一个自己的ca文件，网上有免费的找一个弄一下就可能了。百度...
const __key = '/ca/www.other.org.key';
const __crt = '/ca/www.other.org.crt';
const __keys = [path.join('.', 'server', __key), '.' + __key];
const __crts = [path.join('.', 'server', __crt), '.' + __crt];
const extKey = __keys.filter((p) => {
if (fs.existsSync(p)) {
return p;
}
});
const extCrt = __crts.filter((p) => {
if (fs.existsSync(p)) {
return p;
}
});
const options = {
key: fs.readFileSync(extKey[0]), //读取key
cert: fs.readFileSync(extCrt[0]) //读取crt
};
http.createServer(options, (req, res) => {
// 设置响应头信息,解决跨域等问题；当然这里也可不在这里设置。可以到别一个文件里设置也可以。
res.setHeader("Content-Type", "text/html;charset=utf-8");
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("access-control-allow-headers", "x-pingother, origin, x-requested-with, content-type, accept");
res.setHeader("access-control-allow-methods", "GET, POST, PUT, DELETE, OPTIONS");
const r = new routes(req, res);
r.initHeader();
}).listen(port || 10000);
console.log('https://127.0.0.1:%d', port || 10000)
}
}添加一个 router类还在index.js里写。
class routes {
constructor(req, res) {
this.ApiInfo = api;
this.res = res;
this.req = req;
}
initHeader() {
this.res.setHeader("Content-Type", "application/json;charset=utf-8");
this.res.setHeader("Access-Control-Allow-Origin", "*");
this.res.setHeader("access-control-allow-headers", "x-pingother, origin, x-requested-with, content-type, accept, xiaotuni,systemdate");
this.res.setHeader("access-control-allow-methods", "GET, POST, PUT, DELETE, OPTIONS");
this.res.setHeader("Access-Control-Expose-Headers", "date, token,systemdate");
this.res.setHeader('systemdate', new Date().getTime());
const { method } = this.req;
if (method && method === 'OPTIONS') {
this.res.end();
return;
}
this.processRequestMethod(method);
}
processRequestMethod(method) {
const PathInfo = path.parse(this.req.url);
if (!this.judgeIsCallApi(PathInfo)) {
return;
}
this.Method = method.toLocaleLowerCase();
this.parseUrlParams();
// 这里开始处理接口信息了。
}
// 判断是接口请求，还是其它文件请求，css,icon,js等静态文件请求。
judgeIsCallApi(PathInfo) {
if (PathInfo.ext === '') {
return true;
}
let charset = "binary";
switch (PathInfo.ext) {
case ".js":
this.res.writeHead(200, { "Content-Type": "text/javascript" });
break;
case ".css":
this.res.writeHead(200, { "Content-Type": "text/css" });
break;
case ".gif":
charset = "binary";
this.res.writeHead(200, { "Content-Type": "image/gif" });
break;
case ".jpg":
charset = "binary";
this.res.writeHead(200, { "Content-Type": "image/jpeg" });
break;
case ".png":
charset = "binary";
this.res.writeHead(200, { "Content-Type": "image/png" });
break;
default:
this.res.writeHead(200, { "Content-Type": "application/octet-stream" });
}
const { dir, ext, name } = PathInfo;
const __abs = path.join(dir, name + ext);
const _pathInfo = [path.join('./server/', __abs), path.join('.', __abs)];
const __self = this;
let __fileIsExist = false;
for (let i = 0; i < _pathInfo.length; i++) {
const dir = _pathInfo[i];
__fileIsExist = fs.existsSync(dir);
if (__fileIsExist) {
fs.readFile(dir, (err, data) => {
if (err) {
__self.res.Send({ code: -1, msg: err.toString() });
} else {
__self.res.write(data, charset);
}
__self.res.end();
});
return false;
}
}
if (!__fileIsExist) {
__self.res.end();
}
return false;
}
// 解析URL参数
parseUrlParams() {
const _url = url.parse(this.req.url);
this.UrlInfo = _url;
const { query } = _url;
this.QueryParams = querystring.parse(query);
}
}
这部分就先写到这了。
具体的可以到github上找。https://github.com/xiaotuni/angular-map-http2
目录
用 [TOC]来生成目录：