ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

nodejs + jquery Mobile构建一个简单的移动web:服务端index.js与TaoToken配置骨架

nodejs + jquery Mobile构建一个简单的移动web:服务端index.js与TaoToken配置骨架 1. 从零跑通一个移动 Web 服务端入口如果你正在找一个能直接复制、马上跑起来的 nodejs jquery Mobile 移动 Web 服务端骨架这篇就是为你准备的。核心目标很明确用 expressjs 搭一个 index.js 入口前端交给 jquery Mobile 渲染移动端页面数据层用 mongoose 操作 MongoDB同时把模型调用统一收敛到 TaoToken 的 Key/API 通道上避免每个接口各写一套鉴权。适合刚接触 Node 服务端、想快速看到 CRUD 跑通效果的同学也适合手里有移动端页面、缺一个稳定后端入口的开发者。我试过把路由、模板、静态资源、数据库连接全塞进一个 index.js好处是启动快、排查直观坏处是文件会变长所以下面会按「配置区 / 数据层 / 路由层 / 启动区」分段写你照着拆也行。整篇围绕三个关键词展开index.js 骨架、TaoToken 配置片段、启动验证动作。读完你能得到一个能响应 GET/POST/PUT/DELETE 的服务端并且知道每一步为什么这么写。2. TaoToken 前置统一 Key 与 API 通道在写业务路由之前先把模型调用的出口定下来。TaoToken 在这里扮演的是统一 Key/API 通道的角色你不需要在 index.js 里散落多个厂商的密钥而是把 base URL 和 Key 集中到 config 里业务代码只认一个入口。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 根地址是 https://taotoken.net/api 注意 API 地址不带 UTM 参数配置里直接写这个就行。你需要先拿到一个可用的 Key。进入控制台创建https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 然后在 API Keys 页面生成https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。生成后复制保存后面写进 config.js 的TAOTOKEN_API_KEY字段。如果你只是想先验证模型能不能通可以直接用模型对话页面试一条https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 确认返回正常再回到代码里接。注意Key 只放在服务端环境变量或 config 文件里不要写进前端 jquery Mobile 的 js 中否则等于公开泄露。3. 可复制配置index.js 骨架与 config 片段先建目录结构保持和传统 express 项目一致方便你后续加视图project/ ├── views/ # jade 模板 ├── public/ # jquery Mobile 的 css/js/图片 ├── config.js # TaoToken 与数据库配置 ├── index.js # 服务端入口 └── package.json安装依赖express 用 4.x注意 4.x 已经移除了 bodyParser 内置绑定需要单独装npm init -y npm install express mongoose body-parser method-override jadeconfig.js 把 TaoToken 通道和 MongoDB 连接集中管理// config.js module.exports { port: process.env.PORT || 8888, mongo: { uri: process.env.MONGO_URI || mongodb://localhost:27017/fruitdb }, taotoken: { baseURL: https://taotoken.net/api, apiKey: process.env.TAOTOKEN_API_KEY || sk-你的Key, model: gpt-4o-mini, timeout: 30000 } };index.js 骨架分四段写。第一段是引入与中间件注意 express 4.x 用express.json()和express.urlencoded()替代旧的 bodyParser// index.js const express require(express); const mongoose require(mongoose); const path require(path); const config require(./config); const app express(); app.set(views, path.join(__dirname, views)); app.set(view engine, jade); app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.use(express.static(path.join(__dirname, public))); // 请求日志排查时非常有用 app.use((req, res, next) { console.log(method: %s , url: %s, req.method, req.url); next(); });第二段是数据层mongoose 连接加模型定义。Schema 只描述结构Model 才是操作数据库的入口mongoose.connect(config.mongo.uri) .then(() console.log(mongodb connected)) .catch(err console.error(mongo error:, err)); const FruitSchema new mongoose.Schema({ title: { type: String, required: true }, content: { type: String, required: true } }, { timestamps: true }); const FruitModel mongoose.model(fruit, FruitSchema);第三段是路由层覆盖 CRUD。这里用 express 4.x 的app.route或直接方法挂载删除用app.delete而不是旧版的app.delapp.get(/, (req, res, next) { FruitModel.find({}, (err, data) { if (err) return next(err); res.render(index, { fruits: data }); }); }); app.post(/fruits, (req, res, next) { const obj new FruitModel({ title: req.body.title, content: req.body.content }); obj.save(err { if (err) return next(err); res.json({ code: 1, message: success save }); }); }); app.get(/fruits/list, (req, res, next) { FruitModel.find({}, (err, data) { if (err) return next(err); res.json(data); }); }); app.get(/fruits/:id, (req, res, next) { FruitModel.findById(req.params.id, (err, data) { if (err) return next(err); res.json(data); }); }); app.put(/fruits/:id, (req, res, next) { FruitModel.findByIdAndUpdate( req.params.id, { title: req.body.title, content: req.body.content }, { new: true }, (err, data) { if (err) return next(err); res.json({ code: 1, message: success update, data }); } ); }); app.delete(/fruits/:id, (req, res, next) { FruitModel.findByIdAndRemove(req.params.id, err { if (err) return next(err); res.json({ code: 1, message: success remove }); }); });第四段是启动区同时加一个错误处理中间件避免异常直接崩掉进程app.use((err, req, res, next) { console.error(err.stack); res.status(500).json({ code: 0, message: err.message }); }); app.listen(config.port, () { console.log(server has been started on port config.port); });如果你后面要接模型能力比如让服务端根据标题自动生成 content可以在路由里调用 TaoToken 通道把 baseURL 和 apiKey 从 config 读出来业务代码只发一次请求不用关心底层是哪家模型。4. 验证请求启动与成功结果启动前确认 MongoDB 已经在跑本地默认端口 27017。然后执行export TAOTOKEN_API_KEYsk-你的Key node index.js看到mongodb connected和server has been started on port 8888就说明入口通了。接着用 curl 验证一轮 CRUD先新增一条curl -X POST http://localhost:8888/fruits \ -H Content-Type: application/json \ -d {title:apple,content:red fruit}返回{code:1,message:success save}表示写入成功。再查列表curl http://localhost:8888/fruits/list应该返回包含_id、title、content的数组。更新和删除把_id替换进去即可curl -X PUT http://localhost:8888/fruits/你的ID \ -H Content-Type: application/json \ -d {title:green apple,content:sour} curl -X DELETE http://localhost:8888/fruits/你的ID前端 jquery Mobile 页面放在 views/index.jade 里用data-rolepage组织列表用data-rolelistview表单提交指向/fruits。静态资源从 public 目录加载express 的 static 中间件已经处理好了。打开浏览器访问http://localhost:8888能看到移动端样式的列表页就说明服务端入口和前端渲染都跑通了。5. 本篇常见错排查第一个高频错误是bodyParser is not a function。这是 express 4.x 移除了内置 bodyParser 导致的解决方式是单独安装body-parser或者直接用express.json()和express.urlencoded()上面骨架已经用了后者不需要额外装。第二个是app.del is not a function。旧版 express 3.x 用app.del4.x 改成了app.delete把方法名换掉即可。同理app.configure在 4.x 里也移除了环境判断直接用process.env.NODE_ENV。第三个是 mongoose 连接超时或MongooseServerSelectionError。先确认 MongoDB 服务已启动再检查连接串里的库名和端口。如果用了远程库注意网络可达性本地开发建议先用127.0.0.1而不是localhost避免 IPv6 解析问题。第四个是findById传入的 id 格式不对导致 CastError。确保传的是合法的 ObjectId 字符串前端传参时不要带多余空格。如果 id 来自 URL 参数先做一次校验再查库。第五个是 TaoToken 请求返回 401。检查 config 里的 apiKey 是否和 API Keys 页面生成的一致环境变量有没有正确导出。如果是在容器里跑注意环境变量是否传进去了。验证模型连通性可以直接去模型对话页面发一条测试https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 。6. 把入口固定下来再往上叠功能服务端 index.js 跑通之后建议先把 config 和路由分层固定住再往上加功能。模型调用统一走 TaoToken 通道Key 只在服务端出现前端 jquery Mobile 只负责渲染和提交表单。如果你后面要做长期编码或 Agent 类任务可以看 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 需要生成新 Key 就去 API Keys 页面。把启动验证动作固化成一条命令每次改完 index.js 先跑一遍 curl比在浏览器里点半天快得多。
返回列表