有一定的后台开发经验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. RPLiDAR 激光雷达探测地面高程

    LiDAR,又称激光探测与测量,全程Light Detection And Ranging,这种技术使用激光测量地物(如森林和建筑物)的高程.它的原理十分类似于使用声波来测绘海底地形的声呐技术,或使用 ...

  2. 企业管理系统——第三周需求&原型改进_张正浩,黄锐斌

    企业管理系统——需求&原型改进,架构设计,测试计划 组员:张正浩,黄锐斌 一.需求&原型改进 1.给目标用户展现原型,与目标用户进一步沟通理解需求 我们的目标用户是公司管理员 场景:随 ...

  3. Vue 自定义header

    第一种,全局设置: Vue.http.headers.common['token'] = 'YXBpOnBhc3N3b3Jk'; 第二种,拦截器设置 Vue.http.interceptors.pus ...

  4. 21天学通C++学习笔记(一):入门

    1. 基础概念 1.1 编程语言 旨在让人更容易得使用计算资源,充分利用电脑,不用人做一些重复劳动或持续参与. 1.2 可执行文件 是可运行的成品,应按程序员希望的那样做. 1.3 生成可执行文件的步 ...

  5. Window 7 Professional 多语言设置

    1. 正常情况下,WINDOW系统只提供企业和旗舰版的语言切换的界面设置,其他版本没有. 2. 首先下载语言包,然后解压待用. 3. 以管理员身份运行命令窗口,如下输入: 4. 上面完成后,下载 ht ...

  6. 十七、创建一个 WEB 服务器(一)

    1.Node.js 创建的第一个应用 var http=require("http") http.createServer(function (req,res) { res.wri ...

  7. 【转载】Java资源大全中文版

    Java资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-java 就是 akullpp 发起维护的 Java 资源列表,内容 ...

  8. 【bzoj4514】: [Sdoi2016]数字配对 图论-费用流

    [bzoj4514]: [Sdoi2016]数字配对 好像正常的做法是建二分图? 我的是拆点然后 S->i cap=b[i] cost=0 i'->T cap=b[i] cost=0 然后 ...

  9. spring 学习(一):使用 intellijIDEA 创建 maven 工程进行 Spring ioc 测试

    spring学习(一):使用 intellijIDEA 创建 maven 工程进行 Spring ioc 测试 ioc 概念 控制反转(Inversion of Control,缩写为IOC),是面向 ...

  10. 题解 CF520E 【Pluses everywhere】

    题目链接 ps:可能组合数一不小心打错了,请发现的大佬提出,谢谢. 我们来讨论每一位数$a_{i}$被算了多少次. 总共有$n-1$个空位可以放$'+'$所以,$a_{i}$左边有$i-1$个空位,右 ...