Angular4+NodeJs+MySQL 入门-01

有一定的后台开发经验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('.',__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",accept,xiaotuni,systemdate");
    this.res.setHeader("access-control-allow-methods",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]来生成目录：