Angular4+NodeJs+MySQL 入门-01

前端之家收集整理的这篇文章主要介绍了Angular4+NodeJs+MySQL 入门-01前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

有一定的后台开发经验ES6语法。后台没有用框架来,纯自己写。会sql语句

安装NodeJS的安装

从网上下载 https://nodejs.org/en/ 选择自己,我用的是最新版本

Angular CLI的安装

cli的安装可以参考https://cli.angular.io/

  1. npm install -g @angular/cli
  2. ng new demo -- 创建一个项目
  3. cd demo -- 进入到项目面
  4. npm i --registry=https://registry.npm.taobao.org -- 安装包的依赖
  5. ng serve -- 启动项目

一此顺利的话,完后会看到如下图所示

在浏览器上输入http://127.0.0.1:4200 如下图所示

用VSCode打开目录如图:

到这里基本项目框架就已经好了。

安装MysqL包、http2

由于调用接口用的是xhr2,所以要安装 http2包,MysqL就不用多说了,用来接连MysqL数据库用的。

  1. npm i --save-dev MysqL http2

安装好了以后,就要创建一个NodeJs文件,里面创建一个启动服务监听端口等

如 index.js文件里写

  1. const http = require('http2');
  2. const util = require('util');
  3. const url = require('url');
  4. const querystring = require('querystring');
  5. const path = require('path');
  6. const fs = require('fs');
  7. /*******
  8. * 服务类
  9. ********/
  10. class server {
  11. constructor() { }
  12.  
  13. createServer(port) {
  14. // 创建一个自己的ca文件,网上有免费的找一个弄一下就可能了。百度...
  15. const __key = '/ca/www.other.org.key';
  16. const __crt = '/ca/www.other.org.crt';
  17. const __keys = [path.join('.','server',__key),'.' + __key];
  18. const __crts = [path.join('.',__crt),'.' + __crt];
  19. 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里写。

  1. class routes {
  2. constructor(req,res) {
  3. this.ApiInfo = api;
  4. this.res = res;
  5. this.req = req;
  6. }
  7.  
  8. initHeader() {
  9. this.res.setHeader("Content-Type","application/json;charset=utf-8");
  10. this.res.setHeader("Access-Control-Allow-Origin","*");
  11. this.res.setHeader("access-control-allow-headers",accept,xiaotuni,systemdate");
  12. this.res.setHeader("access-control-allow-methods",OPTIONS");
  13. this.res.setHeader("Access-Control-Expose-Headers","date,token,systemdate");
  14. this.res.setHeader('systemdate',new Date().getTime());
  15. const { method } = this.req;
  16. if (method && method === 'OPTIONS') {
  17. this.res.end();
  18. return;
  19. }
  20.  
  21. this.processRequestMethod(method);
  22. }
  23.  
  24. processRequestMethod(method) {
  25. const PathInfo = path.parse(this.req.url);
  26. if (!this.judgeIsCallApi(PathInfo)) {
  27. return;
  28. }
  29. this.Method = method.toLocaleLowerCase();
  30. this.parseUrlParams();
  31.  
  32. // 这里开始处理接口信息了。
  33. }
  34. // 判断是接口请求,还是其它文件请求,css,icon,js等静态文件请求。
  35. judgeIsCallApi(PathInfo) {
  36. if (PathInfo.ext === '') {
  37. return true;
  38. }
  39. let charset = "binary";
  40. switch (PathInfo.ext) {
  41. case ".js":
  42. this.res.writeHead(200,{ "Content-Type": "text/javascript" });
  43. break;
  44. case ".css":
  45. this.res.writeHead(200,{ "Content-Type": "text/css" });
  46. break;
  47. case ".gif":
  48. charset = "binary";
  49. this.res.writeHead(200,{ "Content-Type": "image/gif" });
  50. break;
  51. case ".jpg":
  52. charset = "binary";
  53. this.res.writeHead(200,{ "Content-Type": "image/jpeg" });
  54. break;
  55. case ".png":
  56. charset = "binary";
  57. this.res.writeHead(200,{ "Content-Type": "image/png" });
  58. break;
  59. default:
  60. this.res.writeHead(200,{ "Content-Type": "application/octet-stream" });
  61. }
  62.  
  63. const { dir,ext,name } = PathInfo;
  64. const __abs = path.join(dir,name + ext);
  65. const _pathInfo = [path.join('./server/',__abs),path.join('.',__abs)];
  66. const __self = this;
  67. let __fileIsExist = false;
  68. for (let i = 0; i < _pathInfo.length; i++) {
  69. const dir = _pathInfo[i];
  70. __fileIsExist = fs.existsSync(dir);
  71. if (__fileIsExist) {
  72. 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]生成目录:

猜你在找的Angularjs相关文章