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('.', '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的更多相关文章
- Angular4+NodeJs+MySQL 入门-05 接口调用
接口调用 今天讲一下,如果在前端页面上通过调用后台接口,返回来的数据.把前面的几章结合起来. 这里所有用的代码在 https://github.com/xiaotuni/angular-map-htt ...
- Angular4+NodeJs+MySQL 入门-02 MySql操作类
NodeJs操作MySQL类 此类封装了几个常用的方法:插入,更新,删除,查询,开启事务,事务提交,事务回滚等操作.有一这个类,操作MYSQL就方便多了. 批处理,存储过程等方法还没有添加,因为觉得目 ...
- Angular4+NodeJs+MySQL 入门-06 接口配置
在上篇中说了怎么调用接口,这篇就来说说,接口配置吧. 后端是用NodeJS来写的,由于写后台(以前用的是C#语言)的时候,大部操作都在是对数据库表的增.删.改.查操作, 比如:根据查询出来的数据,然后 ...
- Angular4+NodeJs+MySQL 入门-04 接口调用类
上一篇文章说一下,后台接口的创建,这篇说一下如果调用接口. 创建一个目录helpers 此目录下有三个文件分别是 ApiClient.ts.clientMiddleware.ts.Core.ts,前面 ...
- Angular4+NodeJs+MySQL 入门-03 后台接口定义
这篇里是如何定义接口,我们一般访问接口如:post请求调用http://127.0.0.1:11000/webapi/userinfo/user 这个接口,成功返回用户信息,如果失败要返回失败原因等. ...
- nodejs+mysql入门实例
此前我已准备好mysql,使用的是PHP的组合包Appserv 手动添加数据库依赖: 在package.json的dependencies中新增, “mysql” : “latest”, { &quo ...
- nodejs+mysql入门实例(删)
//连接数据库 var mysql = require('mysql'); var connection = mysql.createConnection({ host: 'bdm253137448. ...
- nodejs+mysql入门实例(改)
//连接数据库 var mysql = require('mysql'); var connection = mysql.createConnection({ host: 'bdm253137448. ...
- nodejs+mysql入门实例(表的查询)
//连接数据库 var mysql = require('mysql'); var connection = mysql.createConnection({ host: '******', //数据 ...
随机推荐
- 编写高质量代码改善C#程序的157个建议——建议45:为泛型类型参数指定逆变
建议45:为泛型类型参数指定逆变 逆变是指方法的参数可以是委托或者泛型接口的参数类型的基类.FCL4.0中支持逆变的常用委托有: Func<int T,out TResult> Predi ...
- 设计模式02: Abstract Factory 抽象工厂(创建型模式)
Abstract Factory 抽象工厂(创建型模式) 常见的对象创建方法: //创建一个Road对象 Road road=new Road(); new的问题: -实现依赖 ...
- C# 取得内网IP、外网IP、客户端IP方法
前言 在 Windows Form Application 里对于取得 IP Address 有内网.外网两种 IP Address ,如果只需要取得内网 IP Address ,可以透过使用 IPH ...
- C# 由范式编程==运算符引发对string内存分配的思考
今天在看C#编程指南时(类型参数的约束http://msdn.microsoft.com/zh-cn/library/d5x73970.aspx)看到一段描述: 在应用 where T : class ...
- 数值限制------c++程序设计原理与实践(进阶篇)
每种c++的实现都在<limits>.<climits>.<limits.h>和<float.h>中指明了内置类型的属性,因此程序员可以利用这些属性来检 ...
- 基于stor2RRD 的 SAN、存储监控
一. 配置用法在官网都有的详见网页: http://www.stor2rrd.com/install.htm?1.2 二 . 在这里我只是想记录一下我是如何编译安装Apache的,避免踩坑: 安装包如 ...
- Delphi XE8中开发DataSnap程序常见问题和解决方法 (-)启动创建好的DBExpress工程时候报错了!
当我们成功创建了使用DBExpress的DataSnap的服务器和客户端程序后,我们关闭了当前工程,当我们再次打开时候,有可能会出现这样的问题: 问题原因:这个问题是因为当前工程组默认启动的是客户端工 ...
- Linux man语法结构说明
一.man手册的内容结构(说明书页的格式): 标题含义: Name命令的名称和用途(摘要) Synopsis命令语法(摘要) Description完整描述 Environment命令使用的环境变量 ...
- 单源最短路SPFA算法
$huaji^{233……}$模板:洛谷 P3371 #include<iostream> #include<algorithm> #include<cstdio> ...
- Link cut tree 实现不高效的 LCA
https://www.luogu.org/problemnew/show/P3379 求 a 和 b 的 LCA 考虑先 access(a),此时 a 和 root 在一条链上,再 access(b ...