有一定的后台开发经验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]来生成目录:

Angular4+NodeJs+MySQL 入门-01的更多相关文章

  1. Angular4+NodeJs+MySQL 入门-05 接口调用

    接口调用 今天讲一下,如果在前端页面上通过调用后台接口,返回来的数据.把前面的几章结合起来. 这里所有用的代码在 https://github.com/xiaotuni/angular-map-htt ...

  2. Angular4+NodeJs+MySQL 入门-02 MySql操作类

    NodeJs操作MySQL类 此类封装了几个常用的方法:插入,更新,删除,查询,开启事务,事务提交,事务回滚等操作.有一这个类,操作MYSQL就方便多了. 批处理,存储过程等方法还没有添加,因为觉得目 ...

  3. Angular4+NodeJs+MySQL 入门-06 接口配置

    在上篇中说了怎么调用接口,这篇就来说说,接口配置吧. 后端是用NodeJS来写的,由于写后台(以前用的是C#语言)的时候,大部操作都在是对数据库表的增.删.改.查操作, 比如:根据查询出来的数据,然后 ...

  4. Angular4+NodeJs+MySQL 入门-04 接口调用类

    上一篇文章说一下,后台接口的创建,这篇说一下如果调用接口. 创建一个目录helpers 此目录下有三个文件分别是 ApiClient.ts.clientMiddleware.ts.Core.ts,前面 ...

  5. Angular4+NodeJs+MySQL 入门-03 后台接口定义

    这篇里是如何定义接口,我们一般访问接口如:post请求调用http://127.0.0.1:11000/webapi/userinfo/user 这个接口,成功返回用户信息,如果失败要返回失败原因等. ...

  6. nodejs+mysql入门实例

    此前我已准备好mysql,使用的是PHP的组合包Appserv 手动添加数据库依赖: 在package.json的dependencies中新增, “mysql” : “latest”, { &quo ...

  7. nodejs+mysql入门实例(删)

    //连接数据库 var mysql = require('mysql'); var connection = mysql.createConnection({ host: 'bdm253137448. ...

  8. nodejs+mysql入门实例(改)

    //连接数据库 var mysql = require('mysql'); var connection = mysql.createConnection({ host: 'bdm253137448. ...

  9. nodejs+mysql入门实例(表的查询)

    //连接数据库 var mysql = require('mysql'); var connection = mysql.createConnection({ host: '******', //数据 ...

随机推荐

  1. cmake笔记

    注:cmake .   当前文件夹(一个点)   cmake .. 父目录(两个点) 例子一 一个经典的C程序,如何用cmake来进行构建程序呢? //main.c #include <stdi ...

  2. 软工作业WordCount

    github项目传送门:https://github.com/zzh010/My-wc 一.WC 项目要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要求写一个命 ...

  3. Android AIDL--进程间通信

    一 AIDL 是什么 AIDL(Android 接口定义语言) 是 Android 提供的一种进程间通信 (IPC) 机制. 我们可以利用它定义客户端与服务使用进程间通信 (IPC) 进行相互通信时都 ...

  4. AES加密 AESCrypt 类

    /// <summary> /// AES加密 /// </summary> public sealed class AESCrypt { /// <summary> ...

  5. 数独·唯一性技巧(Uniqueness)-1

    唯一性技巧基于这样一个事实——各类出版物上发布的数独题目都只有唯一解.事实上,绝大多数数独玩家有这样的共识:即合格的数独题目解应该是唯一的.因此,为了保证题目合格.有效,出题者在制作题目时,会将一些虽 ...

  6. 《C#多线程编程实战》1.11 Monitor.TryEnter()避免死锁

    这章的内容是真的有意思 特别是代码. 先贴上代码: class Program { static void Main(string[] args) { object lock1 = new objec ...

  7. 【leetcode 145. 二叉树的后序遍历】解题报告

    前往二叉树的:前序,中序,后序 遍历算法 方法一:递归 vector<int> res; vector<int> postorderTraversal(TreeNode* ro ...

  8. Delphi XE8中开发DataSnap程序常见问题和解决方法 (二)想对DBExpress的TSQLDataSet写对数据库操作的SQL语句出错了!

    当我们搞定DataSnap后,我们进入客户端程序开发阶段了,我们建立了客户端模块后,打算按照刚才开发服务器的步骤开发客户端程序,随后加入了DBExpress的TSQLDataSet,设定数据库连接后, ...

  9. C语言条件编译(#if,#ifdef,#ifndef,#endif,#else,#elif)

    1.条件编译介绍 条件编译(conditional compiling)命令指定预处理器依据特定的条件来判断保留或删除某段源代码.例如,可以使用条件编译让源代码适用于不同的目标系统,而不需要管理该源代 ...

  10. BeanShell Processor_使用Java处理脚本

    版权声明:本文为博主原创文章,未经博主允许不得转载. [try-catch] 建议使用Try----Catch块,这样Java语句出现问题时,日志更清晰: try { //java代码 } catch ...