下载地址:https://nodejs.org/dist/v18.20.4/node-v18.20.4-x64.msi(Windows64位),其他版本去官网首页的「Download」区域按系统选LTS长期维护版。
安装时全程默认选项,安装完成后打开cmd(Windows)或终端(Mac/Linux),输入node -v和npm -v,出现v18.x.x和9.x.x版本号即为成功。
下载地址:https://dev.mysql.com/get/Downloads/MySQLInstaller/mysql-installer-community-8.0.39.0.msi(Windows64位),Mac/Linux选官网对应LTS版本。
安装选「Developer Default」,中间必须记住设置的root密码(建议设为简单但不常用的,比如elder12345),其余选项默认,安装完成后启动MySQL服务:Windows任务栏搜索「Services.msc」,找到「MySQL80」右键启动;Mac用brew services start mysql;Linux用systemctl start mysqld。
下载地址:https://code.visualstudio.com/Download,按系统安装即可。
在桌面新建文件夹命名为elder-care-archive,右键打开VS Code,选择「文件」-「打开文件夹」选中该文件夹。
打开VS Code内置终端(快捷键Ctrl+`),依次输入以下3条命令:
打开cmd(Windows),输入mysql -u root -p,输入之前设置的root密码(输入时不显示字符,直接回车),进入MySQL命令行,依次执行以下SQL语句(每条以;结尾):
```sql CREATE DATABASE elder_care_archive DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; USE elder_care_archive; CREATE TABLE elder ( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(20) NOT NULL, gender ENUM('男','女') NOT NULL, birth DATE NOT NULL, id_card VARCHAR(18) NOT NULL UNIQUE, phone VARCHAR(11) NOT NULL, room VARCHAR(10) NOT NULL, guardian_name VARCHAR(20) NOT NULL, guardian_phone VARCHAR(11) NOT NULL, entry_date DATE NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ); ```
执行成功后输入exit退出MySQL命令行。
在elder-care-archive文件夹下手动创建以下子文件夹和文件:
完整内容直接复制:
```javascript const mysql = require('mysql2/promise'); const pool = mysql.createPool({ host: 'localhost', user: 'root', password: 'elder12345', // 替换为你自己的MySQL root密码 database: 'elder_care_archive', waitForConnections: true, connectionLimit: 10, queueLimit: 0 }); module.exports = pool; ```完整内容直接复制:
```javascript const express = require('express'); const pool = require('./db'); const path = require('path'); const app = express(); // 配置中间件 app.set('view engine', 'ejs'); app.set('views', path.join(__dirname, 'views')); app.use(express.static(path.join(__dirname, 'public'))); app.use(express.urlencoded({ extended: true })); // 档案列表页路由 app.get('/', async (req, res) => { const [elders] = await pool.query('SELECT FROM elder ORDER BY entry_date DESC'); res.render('index', { elders }); }); // 新增档案页路由 app.get('/add', (req, res) => { res.render('add'); }); // 新增档案提交路由 app.post('/add', async (req, res) => { const { name, gender, birth, id_card, phone, room, guardian_name, guardian_phone, entry_date } = req.body; await pool.query('INSERT INTO elder (name, gender, birth, id_card, phone, room, guardian_name, guardian_phone, entry_date) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)', [name, gender, birth, id_card, phone, room, guardian_name, guardian_phone, entry_date]); res.redirect('/'); }); // 编辑档案页路由 app.get('/edit/:id', async (req, res) => { const [elders] = await pool.query('SELECT FROM elder WHERE id = ?', [req.params.id]); res.render('edit', { elder: elders[0] }); }); // 编辑档案提交路由 app.post('/edit/:id', async (req, res) => { const { name, gender, birth, id_card, phone, room, guardian_name, guardian_phone, entry_date } = req.body; await pool.query('UPDATE elder SET name=?, gender=?, birth=?, id_card=?, phone=?, room=?, guardian_name=?, guardian_phone=?, entry_date=? WHERE id=?', [name, gender, birth, id_card, phone, room, guardian_name, guardian_phone, entry_date, req.params.id]); res.redirect('/'); }); // 删除档案路由 app.get('/delete/:id', async (req, res) => { await pool.query('DELETE FROM elder WHERE id = ?', [req.params.id]); res.redirect('/'); }); // 启动服务 app.listen(3000, () => { console.log('系统已启动,访问地址:http://localhost:3000'); }); ```layout.ejs完整内容:
```htmlindex.ejs完整内容:
```html <%- include('layout', {title: '档案列表'}) %>| 姓名 | 性别 | 出生年月 | 身份证号 | 联系电话 | 房间号 | 入住日期 | 操作 |
|---|---|---|---|---|---|---|---|
| <%= elder.name %> | <%= elder.gender %> | <%= elder.birth.toISOString().split('T')[0] %> | <%= elder.id_card %> | <%= elder.phone %> | <%= elder.room %> | <%= elder.entry_date.toISOString().split('T')[0] %> | 编辑 删除 |
add.ejs完整内容:
```html <%- include('layout', {title: '新增档案'}) %>edit.ejs完整内容:
```html <%- include('layout', {title: '编辑档案'}) %>在VS Code内置终端输入nodemon app.js,看到「系统已启动,访问地址:http://localhost:3000」即为成功。
打开浏览器访问该地址,即可进行档案的新增、编辑、删除、查看操作。