這個app可以說是自己弄著玩的。

效果這樣：

?

?隨機返回800多個三國武將里面的5個，然后按照這5個的武力值排序，渲染到list頁面。挺好玩的。

使用nodejs和mogoose

app如下：

app.js

var createError = require("http-errors"); var express = require("express"); var path = require("path"); var cookieParser = require("cookie-parser"); var logger = require("morgan"); const template = require("art-template");var indexRouter = require("./routes/index"); var usersRouter = require("./routes/users"); var listRouter = require("./routes/list"); var testRouter = require("./routes/test");var app = express();// view engine setup app.set("views", path.join(__dirname, "views")); app.set("view engine", "html"); app.engine("html", require("express-art-template"));app.set("view engine", "art"); app.engine("art", require("express-art-template"));app.locals.students = [{ name: "張三", age: 20, sex: "女", like: "python" },{ name: "李四", age: 20, sex: "男", like: "node" }, ];app.use(logger("dev")); 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("/list", listRouter); app.use("/test", testRouter);// 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 developmentres.locals.message = err.message;res.locals.error = req.app.get("env") === "development" ? err : {};// render the error pageconsole.log("THERE IS AN ERROR");// res.status(err.status || 500);// res.render("error"); });app.listen(3000, function () {console.log("servie runing 3000"); });// module.exports = app;

這里定義了list的路由，listRouter如下：

var express = require("express"); var router = express.Router(); var Sanguo = require("../model/db");/* GET home page. */ router.get("/", async function (req, res) {// res.send("ok");// console.log(students);// return;var random = Math.round(Math.random() * 700);console.log(random);let results = await Sanguo.find().limit(5).skip(random).exec();// res.send({ students: results });// results.exec(function (err, results) {console.log(results);let arrayHero = [];for (var i = 0; i < results.length; i++) {// console.log("****************");// hero = results[i].toString();// console.log("hero");// console.log(x);x = JSON.parse(JSON.stringify(results[i]));// console.log(JSON.parse(JSON.stringify(results[i])));arrayHero.push(x);// console.log("****************");}// return;let heroList = arrayHero.sort(compare("wuLi", true));res.render("list.html", { students: arrayHero });// });// for (let index = 0; index < results.length; index++) {// const element = results[index];// console.log(element.name);// }// return;// let heros = JSON.parse(results);// console.log(results);// // res.send(results);// res.render("list.html", { heros: heros }); });/** 兩個參數： 參數1 是排序用的字段， 參數2 是：是否升序排序 true 為升序，false為降序*/ function compare(attr, rev) {// console.log(attr, rev)if (rev == undefined) {rev = 1;} else {rev = rev ? 1 : -1;}return (a, b) => {a = a[attr];b = b[attr];if (a < b) {return rev * -1;}if (a > b) {return rev * 1;}return 0;}; }module.exports = router;

首先把三國的表引入，在model下面的db里面定義好的，然后，查詢武將，

查詢之前，使用random，隨機生成700以內的數字，這些數字，可以作為find的參數，skip，

返回的結果，之后，把結果存入一個數組，

數組是arrayHero。這里在保存數組的過程中，要先JSON轉變字符串，在用json解析，這樣不會因為mongoose返回的object，第一個的_id字段無法解析。

渲染模板的過程中，還需要對武力值排序，這個是從網上搜集到的一個數組，按照某一個鍵排序的函數。直接抄過來的。

最后的db.js

var mongoose = require("mongoose"); mongoose.connect("mongodb://localhost/test").then(console.log("鏈接陳功"));var sanguoSchema = new mongoose.Schema({});var Sanguo = mongoose.model("Sanguo", sanguoSchema);module.exports = Sanguo;

ok，每次刷新頁面就會隨機挑出5個武將。

總結

以上是生活随笔為你收集整理的做了一个app，返回三国武将的排序网页，记录一下，省得以后找不到的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。