主页 > 电脑硬件  > 

ExpressMVC

ExpressMVC
1. 安装依赖 npm init -y npm install express npm install --save-dev typescript ts-node ejs @types/node @types/express tsc --init 2. 项目目录结构如下，没有的手动创建 /my-app /src /models user.ts /views index.ejs userList.ejs /controllers userController.ts /routes userRoutes.ts /public /css /js app.ts tsconfig.json 3. TypeScript 配置 (tsconfig.json) { "compilerOptions": { "target": "ES6", "module": "commonjs", "outDir": "./dist", "rootDir": "./src", "esModuleInterop": true, // 兼容 esm 和 commonjs "forceConsistentCasingInFileNames": true, // 导入时大小写必须一致 "strict": true // 启用 ts 的严格类型检查 }, "include": [ "src/**/*.ts" ], "exclude": [ "node_modules" ] } 4. 代码实现

app.ts (主应用文件)

import express from 'express'; import path from 'path'; import userRoutes from './routes/userRoutes'; const app = express(); // 设置视图引擎为 EJS，参数名称固定写法，不可以随意更改 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.use(express.json()); // 使用路由 app.use('/users', userRoutes); // 根路由 app.get('/', (req, res) => { res.render('index', { title: 'Express + TypeScript MVC' }); }); // 启动服务器 const port = 3000; app.listen(port, () => { console.log(`Server running at http://localhost:${port}`); });

models/user.ts (模型)

export interface User { id: number; name: string; email: string; } export const getUsers = (): User[] => { return [ { id: 1, name: 'John Doe', email: 'john@example ' }, { id: 2, name: 'Jane Doe', email: 'jane@example ' }, ]; };

controllers/userController.ts (控制器)

import { Request, Response } from 'express'; import { getUsers } from '../models/user'; export const getUserList = (req: Request, res: Response) => { const users = getUsers(); res.render('userList', { users }); };

routes/userRoutes.ts (路由)

import express from 'express'; import { getUserList } from '../controllers/userController'; const router = express.Router(); // 用户列表路由 router.get('/', getUserList); export default router;

views/index.ejs (视图)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> <%= title %> </title> </head> <body> <h1>Welcome to Express + TypeScript MVC!</h1> <a href="/users">Go to Users</a> </body> </html>

views/userList.ejs (显示用户列表的视图)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>User List</title> </head> <body> <h1>User List</h1> <ul> <% users.forEach(user=> { %> <li> <%= user.name %> - <%= user.email %> </li> <% }) %> </ul> <a href="/">Back to Home</a> </body> </html> 5. 运行项目

在 package.json 中设置启动脚本：

"scripts": { "start": "ts-node src/app.ts" },

启动应用

npm run start 6. 访问应用

标签：

ExpressMVC由讯客互联电脑硬件栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“ExpressMVC”

上一篇
神经网络参数量计算

下一篇
leetcode459重复的子字符串周期性字符串问题KMP算

推荐文章