form.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
  9. </head>
  10. <body>
  11. <div class="container">
  12. <form action="http://localhost:4000/doForm"
  13. enctype="multipart/form-data"
  14. method="POST" role="form">
  15. <legend>添加小组成员</legend>
  16. <div class="form-group">
  17. <label for="">名字</label>
  18. <input type="text" class="form-control"
  19. name="name" placeholder="请输入组员的名字">
  20. </div>
  21. <div class="form-group">
  22. <label for="">年龄</label>
  23. <input type="text" class="form-control"
  24. name="age" placeholder="请输入组员的年龄">
  25. </div>
  26. <div class="form-group">
  27. <label for="">上传头像</label>
  28. <input type="file" class="form-control"
  29. name="logo" >
  30. </div>
  31. <button type="submit" class="btn btn-primary">添加</button>
  32. </form>
  33. </div>
  34. </body>
  35. </html>

app.js

    const koa =require("koa");
    const koaBody = require("koa-body");
    const app=new koa();
    const router =require("koa-router")();
    const fs=require("fs");
    const path=require("path");
    const static=require("koa-static")
    const main =require('./models');

    router.get("/find",async ctx=>{
        var collection=await main();
        var result=await collection.find().toArray();
        ctx.body=result;
    })
        router.get("/add",async ctx=>{
            var collection=await main();
            var obj={
                name:"dww",
                age:17
            }
            var res =await collection.find({name:obj.name}).toArray();
            if(res.length){
                ctx.body="数据库中已添加了这位同学"
            }else{
                var result=await collection.insertOne(obj);
            }
            console.log(result);
        })
        router.post("/doForm",async ctx=>{
            console.log(ctx.request.body);
            var {name,age}=ctx.request.body;
            age=Number(age);
           var filename=ctx.request.files.logo.path
           console.log(filename);
            var reader=fs.createReadStream(filename);
            var uploadFile=`./static/${path.basename(filename)}`;
            var writer=fs.createWriteStream(uploadFile);
            reader.pipe(writer)
            var logo=ctx.origin+"/"+path.basename(filename);

            const collection=await main();
            await collection.insertOne({name,age,logo});
            await ctx.redirect("/find")            
        })
        app.use(koaBody({
            multipart: true,
            formidable: {
                maxFileSize: 200 * 1024 * 1024,
                keepExtensions: true
            }
        }))

    app.use(async (ctx,next)=>{
        ctx.set("Access-Control-Allow-Origin","*");
        await next();
    })


    app.use(router.routes());
    app.listen(4000);

modules-index.js

const {MongoClient}=require('mongodb');
const url='mongodb://123.60.82.25:12021';
const client=new MongoClient(url)
const dbName='student';
// async function main(table){
async function main(){
    await client.connect();
    console.log('Connected successfully to server');
    const db =client.db(dbName);
    // const collection =db.collection(table);
    const collection =db.collection('username');

    return collection;

}
module.exports=main;

package.json

{
  "name": "11.16hand-form",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "art-template": "^4.13.2",
    "koa": "^2.13.4",
    "koa-art-template": "^1.1.1",
    "koa-body": "^4.2.0",
    "koa-router": "^10.1.1",
    "koa-static": "^5.0.0",
    "mongodb": "^4.1.4"
  }
}