- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我是 Angular 的新手,刚刚开始了解它的工作原理。互联网,请温柔一点……
我已经通过英雄之旅完成了 Angular2 5 分钟快速入门,并且没有出现任何问题。现在我正在尝试连接到我的本地 MS SQL 服务器,因为我有一个基于 SQL 的项目,其中 Angular2 是所需的平台。为了让 Sequelize 正常工作,我已经用头撞墙好几天了,我真的需要一些帮助。
到目前为止,我根据阅读的不同内容做了什么:
此时出现了简单页面,但我不知道如何让 Sequelize 工作。
我看到的脚本错误(基于使用 Visual Studio Code 作为我的编辑器):
我已经尝试了多种不同的方法(猜测)来了解如何让 sequelize 连接到我的数据库,但就是无法正常工作。我知道我需要(两者?)在 db.component.ts 文件中导入和/或要求,但最终只会在 IDE 中出现语法错误或在浏览器 (Chrome) 中出现错误。
我明白,从长远来看,我在这里测试的路由/配置/等不会是“正确”的方式,但我只需要通过基本证明 -在重新设计数据库之前,我可以对数据库做一些事情(例如,我可以连接到数据库并查询表)
app.component.ts
import { Component } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import { DashboardComponent } from './dashboard.component';
import { HeroService } from './hero.service';
import { HeroesComponent } from './heroes.component';
import { HeroDetailComponent } from './hero-detail.component';
import { dbComponent } from './db.component';
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<nav>
<a [routerLink]="['Dashboard']">Dashboard</a>
<a [routerLink]="['Heroes']">Heroes</a>
</nav>
<router-outlet></router-outlet>
`,
styleUrls: ['app/app.component.css']
directives: [ROUTER_DIRECTIVES],
providers: [
ROUTER_PROVIDERS,
HeroService
]
})
@RouteConfig([
{
path: '/dashboard',
name: 'Dashboard',
component: DashboardComponent,
useAsDefault: true
},
{
path: '/heroes',
name: 'Heroes',
component: HeroesComponent
},
{
path: '/detail/:id',
name: 'HeroDetail',
component: HeroDetailComponent
},
{
path: '/sql',
name: 'SqlTest',
component: dbComponent
}
])
export class AppComponent {
title = 'Sample App';
}
db.component.ts
/// <reference path="../typings/sequelize.d.ts" />
import { Component, OnInit } from 'angular2/core';
import Sequelize = require('sequelize'); <-- I dont know if this is doing anything
//- This just errors out with require not being found (tds@latest installed)
//var Sequelize = require("sequelize");
//- I know this goes somewhere, but I have no idea where
//var sql = new Sequelize('dbName', 'uName', 'pw', {
// host: "127.0.0.1",
// dialect: 'mssql',
// port: 1433 <-- SqlExpress
//});
@Component({
selector: 'my-sql',
template:`
<h1>SQL Test</h1>
`
})
export class dbComponent implements OnInit {
constructor(
) { }
auth() {
console.log('auth');
//sql.authenticate().then(function(errors) { console.log(errors) });
}
ngOnInit() {
console.log('onInit');
this.auth();
}
}
我的 console.log 消息出现了,所以我相信我的核心功能基本上可以正常工作,但是我不知道我需要做什么才能使 Sequelize 正常运行。
我遗漏了一 block 拼图,对此我束手无策。提前感谢任何方向...
最佳答案
好吧,首先,Sequelize 是 Javascript,但我想不出一个很好的理由说明为什么你会想在前端使用它,而 angular2 就是。
从我的“英雄之旅”Angular2 应用程序到能够调用数据库之间有很多步骤。
1:您确实需要创建一个服务器,NodeJS 太棒了!你可以做这样的事情来开始:
var express = require('express');
var http = require('http');
var path = require('path');
var bodyParser = require('body-parser');
var mysql = require('ms-sql');//Note not entirely sure if this is the correct library for MS-SQL Server I would google how to use this.
var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'public')));
因此,在我们进一步讨论之前,我想指出您需要将 Angular 应用程序放在公共(public)目录中。您还需要获取 MS-SQL 库,并下载其他包,包括 express 和 body-parser。我将从使用 npm install express-generator -g
开始,然后转到目录并在命令行中输入 express myapp
。
虽然我们还没有完成我们的服务器!!接下来我们将让它工作。
var server = http.createServer(app);
server.listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
然后将其放入文件中,然后在命令控制台中键入 node myapp.js
,您应该可以启动并运行服务器!
现在我们需要将我们的 Angular2 应用程序发送给它。
app.get('/', function(req, res){
res.render('index.html');
});
这表示查看公用文件夹并找到 index.html 并显示它。这就是我们从 Node 启动 Angular2 的方式!
现在我们已经启动并运行了服务器,让我们创建一个路由,以便我们可以从 ms-sql 中获取应用程序的详细信息。我要作弊,因为我不知道 ms-sql 但在 MySQL 中它相当容易。只需将其添加到与其他所有内容相同的节点文件中:
app.use(
connection(mysql,{
host: 'localhost',//or the IP address
user: 'root',
password : 'myPassword',
port : 3306, //port mysql
database:'myDatabaseName'
},'request')
);
现在我们终于可以从服务器获取数据了。
app.get('/api/heroes', function(req, res){
req.getConnection(function(err,connection){
connection.query("SELECT ID, ROLE_NAME, DESCRIPTION, ACTIVE_FLAG FROM ROLES",function(err,rows) {
if(err)
console.log("Error Selecting : %s ",err );
res.json({data:rows});
});
});
});
您会注意到我在函数调用中发送我的行,然后用新名称 -> 数据将其发回。
现在要在我想要获取数据的组件中的 Angular2 中调用它,我会从 ngOnInit 调用它。最好把它变成一个服务,然后调用服务的功能,但我不会说得那么深。但是你可以这样调用它
import { Component, OnInit } from 'angular2/core';
import {Http} from 'angular2/http':
@Component({
selector: 'my-sql',
template:`
<h1>SQL Test</h1>
{{myData}}
`
})
export class dbComponent implements OnInit {
myData: any;
constructor(public http: Http) { }
ngOnInit() {
this.http.get('api/heroes/').map((response => this.myData = response.json().data));
}
}
请注意,这里发生了很多事情。我正在将类 Http 实现到我的构造函数中,以便我可以使用 this.http 调用它!另请注意我是如何导入 Http 类的。
然后在 ngOnInit 中,我使用我的 http 类并从我的服务器调用我的 api,并将我的 this.myData 分配给我的 response.json().data 因为记得数据是我们从服务器传回的名称吗?您实际上不需要添加它,它只会让您在收到 JSON 时更容易处理它。
至于 Sequelize,我不完全确定它是如何工作的,因为我没有使用过它,但是您可以使用它来代替我们处理 MySQL 的方式。
希望这能引导您朝着正确的方向前进。
关于angular - 在 Angular2 下使用 Typescript 进行 Sequelize ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35780156/
我喜欢 smartcase,也喜欢 * 和 # 搜索命令。但我更希望 * 和 # 搜索命令区分大小写,而/和 ?搜索命令遵循 smartcase 启发式。 是否有隐藏在某个地方我还没有找到的设置?我宁
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题? Update the question所以它是on-topic对于堆栈溢出。 10年前关闭。 Improve this qu
从以下网站,我找到了执行java AD身份验证的代码。 http://java2db.com/jndi-ldap-programming/solution-to-sslhandshakeexcepti
似乎 melt 会使用 id 列和堆叠的测量变量 reshape 您的数据框,然后通过转换让您执行聚合。 ddply,从 plyr 包看起来非常相似..你给它一个数据框,几个用于分组的列变量和一个聚合
我的问题是关于 memcached。 Facebook 使用 memcached 作为其结构化数据的缓存,以减少用户的延迟。他们在 Linux 上使用 UDP 优化了 memcached 的性能。 h
在 Camel route ,我正在使用 exec 组件通过 grep 进行 curl ,但使用 ${HOSTNAME} 的 grep 无法正常工作,下面是我的 Camel 路线。请在这方面寻求帮助。
我正在尝试执行相当复杂的查询,在其中我可以排除与特定条件集匹配的项目。这是一个 super 简化的模型来解释我的困境: class Thing(models.Model) user = mod
我正在尝试执行相当复杂的查询,我可以在其中排除符合特定条件集的项目。这里有一个 super 简化的模型来解释我的困境: class Thing(models.Model) user = mod
我发现了很多嵌入/内容项目的旧方法,并且我遵循了在这里找到的最新方法(我假设):https://blog.angular-university.io/angular-ng-content/ 我正在尝试
我正在寻找如何使用 fastify-nextjs 启动 fastify-cli 的建议 我曾尝试将代码简单地添加到建议的位置,但它不起作用。 'use strict' const path = req
我正在尝试将振幅 js 与 React 和 Gatsby 集成。做 gatsby developer 时一切看起来都不错,因为它发生在浏览器中,但是当我尝试 gatsby build 时,我收到以下错
我试图避免过度执行空值检查,但同时我想在需要使代码健壮的时候进行空值检查。但有时我觉得它开始变得如此防御,因为我没有实现 API。然后我避免了一些空检查,但是当我开始单元测试时,它开始总是等待运行时异
尝试进行包含一些 NOT 的 Kibana 搜索,但获得包含 NOT 的结果,因此猜测我的语法不正确: "chocolate" AND "milk" AND NOT "cow" AND NOT "tr
我正在使用开源代码共享包在 iOS 中进行 facebook 集成,但收到错误“FT_Load_Glyph failed: glyph 65535: error 6”。我在另一台 mac 机器上尝试了
我正在尝试估计一个标准的 tobit 模型,该模型被审查为零。 变量是 因变量 : 幸福 自变量 : 城市(芝加哥,纽约), 性别(男,女), 就业(0=失业,1=就业), 工作类型(失业,蓝色,白色
我有一个像这样的项目布局 样本/ 一种/ 源/ 主要的/ java / java 资源/ .jpg 乙/ 源/ 主要的/ java / B.java 资源/ B.jpg 构建.gradle 设置.gr
如何循环遍历数组中的多个属性以及如何使用map函数将数组中的多个属性显示到网页 import React, { Component } from 'react'; import './App.css'
我有一个 JavaScript 函数,它进行 AJAX 调用以返回一些数据,该调用是在选择列表更改事件上触发的。 我尝试了多种方法来在等待时显示加载程序,因为它当前暂停了选择列表,从客户的 Angul
可能以前问过,但找不到。 我正在用以下形式写很多语句: if (bar.getFoo() != null) { this.foo = bar.getFoo(); } 我想到了三元运算符,但我认
我有一个表单,在将其发送到 PHP 之前我正在执行一些验证 JavaScript,验证后的 JavaScript 函数会发布用户在 中输入的文本。页面底部的标签;然而,此消息显示短暂,然后消失...
我是一名优秀的程序员,十分优秀!