AngularJS项目接入本地数据库：Node.js方向如何起步？

Hey there! I totally get how overwhelming it can be when you're new to backend development and staring at 30+ tabs without a clear direction. Let's take this one step at a time—you already have a working AngularJS project, so we'll build out the backend piece by piece to replace those static JSON objects with a real database.

1. First: Set Up Your Node.js Environment #

Before anything else, you need Node.js and npm (Node Package Manager) installed on your machine. It's straightforward:

• Install the latest LTS version of Node.js (it comes with npm included). To check if it's set up right, open your terminal and run:
  node -v
npm -v
  You should see version numbers pop up if everything's good.

2. Build a Minimal Node.js Backend with Express #

Express is the most popular lightweight framework for Node.js, perfect for beginners. Here's how to start:

• Create a new folder for your backend (name it something like angular-backend)
• Open the folder in your terminal and run npm init -y—this creates a package.json file to track your dependencies
• Install Express with npm install express
• Install the cors package to fix cross-origin issues (since your AngularJS app runs on a different port than the Node server): npm install cors
• Create a file named server.js and add this basic code:

  const express = require('express');
  const cors = require('cors');
  const app = express();
  const port = 3000;
  
  // Enable CORS for your Angular app (update the origin if your Angular runs on a different port)
  app.use(cors({ origin: 'http://localhost:4200' }));
  // Parse JSON requests
  app.use(express.json());
  
  // Test endpoint to make sure the server works
  app.get('/api/test', (req, res) => {
    res.json({ message: 'Node server is up and running!' });
  });
  
  app.listen(port, () => {
    console.log(`Server running on http://localhost:${port}`);
  });
  

• Run the server with node server.js—you should see the log message in your terminal. Open http://localhost:3000/api/test in your browser to confirm it returns the JSON message.

3. Choose a Local Database (and Set It Up) #

For local development, SQLite is a great choice because it's file-based (no need to install a separate database server). Later, you can easily switch to MySQL or PostgreSQL for deployment.

• Install the SQLite3 package in your backend folder: npm install sqlite3
• Create a file named database.js to handle database connections and basic operations:

  const sqlite3 = require('sqlite3').verbose();
  // Create/connect to a local database file named 'app.db'
  const db = new sqlite3.Database('./app.db');
  
  // Create a sample table (match the structure of your original JSON data)
  db.run(`CREATE TABLE IF NOT EXISTS items (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT,
    description TEXT
  )`, (err) => {
    if (err) console.error(err.message);
    console.log('Items table created (or already exists)');
  });
  
  module.exports = db;
  

• Now require this database in your server.js by adding const db = require('./database.js'); at the top.

4. Add CRUD Endpoints to Your Node Server #

Now let's create basic Create, Read, Update, Delete endpoints that mirror the data operations you were doing with JSON. For example, if your Angular app was displaying a list of items:

• Add these to server.js after the test endpoint:

  // Get all items
  app.get('/api/items', (req, res) => {
    db.all('SELECT * FROM items', (err, rows) => {
      if (err) {
        res.status(500).json({ error: err.message });
        return;
      }
      res.json({ items: rows });
    });
  });
  
  // Add a new item
  app.post('/api/items', (req, res) => {
    const { name, description } = req.body;
    db.run('INSERT INTO items (name, description) VALUES (?, ?)', [name, description], function(err) {
      if (err) {
        res.status(500).json({ error: err.message });
        return;
      }
      res.json({ id: this.lastID, name, description });
    });
  });
  
  // Update an item
  app.put('/api/items/:id', (req, res) => {
    const { id } = req.params;
    const { name, description } = req.body;
    db.run('UPDATE items SET name = ?, description = ? WHERE id = ?', [name, description, id], function(err) {
      if (err) {
        res.status(500).json({ error: err.message });
        return;
      }
      res.json({ updatedRows: this.changes });
    });
  });
  
  // Delete an item
  app.delete('/api/items/:id', (req, res) => {
    const { id } = req.params;
    db.run('DELETE FROM items WHERE id = ?', id, function(err) {
      if (err) {
        res.status(500).json({ error: err.message });
        return;
      }
      res.json({ deletedRows: this.changes });
    });
  });
  

• Restart your Node server (node server.js again) to apply these changes. You can test these endpoints using tools like Postman, or even curl commands in your terminal.

5. Update Your AngularJS App to Call the Node API #

Now it's time to replace the code that was reading/writing JSON files with calls to your new Node endpoints. In your AngularJS controller or service:

• Instead of loading a local JSON file (like $http.get('data/items.json')), update it to call your Node server:

  // Example: Get all items from the API
  $http.get('http://localhost:3000/api/items')
    .then(function(response) {
      $scope.items = response.data.items;
    })
    .catch(function(error) {
      console.error('Error fetching items:', error);
    });
  
  // Example: Add a new item via the API
  $scope.addItem = function(newItem) {
    $http.post('http://localhost:3000/api/items', newItem)
      .then(function(response) {
        $scope.items.push(response.data);
      })
      .catch(function(error) {
        console.error('Error adding item:', error);
      });
  };
  

• Make sure your AngularJS app is running, and test the operations—adding, editing, deleting items should now save to your local SQLite database.

6. Prepare for Deployment (Down the Line) #

Once you're comfortable with the local setup, moving to a server database is straightforward:

• Swap SQLite for a server-based database like MySQL or PostgreSQL (install the corresponding npm packages: mysql2 or pg)
• Update your database.js file to connect to the remote database instead of the local file
• Deploy your Node.js backend to a service like Heroku, AWS, or DigitalOcean, and update your AngularJS app's API URLs to point to the deployed server

Pro Tips to Keep It Simple #

• Start small: Don't try to build all endpoints at once. Get one working (like fetching items) before moving to the next.
• Use console logs: Add console.log() statements in your Node server to see what requests are coming in, and in your Angular app to debug API responses.
• Break problems down: If something isn't working, check if the server is running, if the database table exists, if the API endpoint returns the right data, then check the Angular code.

You've got this—taking it step by step makes it way less intimidating!

内容的提问来源于stack exchange，提问作者Wahrenheit Sucher