Angular4+NodeJs+MySQL 入門-01

時間 2019-11-11

標籤 angular4+nodejs+mysql angular nodejs mysql 入門欄目 AngularJS 简体版

原文原文鏈接

有必定的後臺開發經驗ES6語法。後臺沒有用框架來，純本身寫。會sql語句javascript

安裝NodeJS的安裝

從網上下載 https://nodejs.org/en/ 選擇本身，我用的是最新版本css

Angular CLI的安裝

cli的安裝能夠參考https://cli.angular.io/html

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 以下圖所示
java

用VSCode打開目錄如圖：
node

到這裏基本項目框架就已經好了。mysql

安裝MySql包、http2

因爲調用接口用的是xhr2，因此要安裝 http2包，mysql就不用多說了，用來接連mysql數據庫用的。git

npm i --save-dev mysql http2

安裝好了之後，就要建立一個NodeJs文件，裏面建立一個啓動服務監聽端口等

如 index.js文件裏寫github

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); } }