将 Angular 应用程序连接到服务器

Posted 2023-03-07

【中文标题】将 Angular 应用程序连接到服务器

【英文标题】：connect an angular application to a server

【发布时间】：2019-07-30 08:50:45

【问题描述】：

我是 Angular 的初学者，我用我的数据库 mysql 创建了带有 Rest Crud API 的 Nodeserver，我想将它与我的项目 Angular（ngx nebular）相关联，但我做不到，谢谢你帮助我

这是 app.js

 var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var bodyParser = require('body-parser');
var cors = require('cors');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var user=require('./model/user');
var api = require('./routes/api'); 

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(cors());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded( extended: false ));
app.use(express.json());
app.use(express.urlencoded( extended: false ));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/user',api);

// catch 404 and forward to error handler
app.use(function(req, res, next) 
  next(createError(404));
);

// error handler
app.use(function(err, req, res, next) 
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : ;

  // render the error page
  res.status(err.status || 500);
  res.render('error');
);

module.exports = app;

`

【参考方案1】：

您需要加载mysql 库才能访问其功能。您还需要为主页设置一个 GET 处理程序，并将路由分配给它。

1) 引入 MySQL @app.js

const mysql = require('mysql');

// ... other stuff here ...

// the mysql.createConnection function takes in a configuration object 
// this contains host, user, password and the database name.
const db = mysql.createConnection (
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'latelist'
);

// connect to database
db.connect((err) => 
    if (err) 
        throw err;
    
    console.log('Connected to database');
);
global.db = db;

2) 路由 yourHomepageFunction

在您的情况下，我们已经通过indexRouter.js 进行路由，重要的是这在app.js 的第3 步之前。

app.use('/', indexRouter);

3) 为 / 分配 GET 处理程序

最后，确保您在app.js 的某处为主页设置了 GET 处理程序，阿拉：

app.get('/', yourHomepageFunction);

为了后代，这里是indexRouter.js 的样例：

module.exports = 
    yourHomepageFunction: (req, res) => 
        res.render("homepage.ejs", 
             // Stuff here such as passing title variables, etc
        );
    
;

【参考方案2】：

您应该听取所有 GET 请求并仅将您的 index.html 文件作为文件发送，该文件实际上应该包含您的 Angular SPA。像这样的：

app.get('*', (req, res) => 
  res.sendFile(path.join(__dirname, 'index.html'));    
);

您可以查看 Express 文档：http://expressjs.com/fr/api.html#res.sendFile

【讨论】：

但我不会将我的 Angular 项目连接到服务器