编辑:我玩了一圈,发现删除ENCTYPE属性可以让数据发送。我想我的 新的 问题将是:"我如何克服enctype阻止我的数据发送的问题?"我如何克服enctype阻止数据发送的问题?"
我目前正在做一个应用程序,我正在研究一个创建路由。
我遇到的问题是,我正在做的一个表单的信息没有从 "name "标签中向创建路由发送信息。
下面是练习的模式。
const mongoose = require('mongoose'),
User = require('./user');
const exerciseSchema = new mongoose.Schema({
name: {
type: String,
required: "This field cannot be left blank"
},
image: String,
imageId: String,
description: String,
author: {
id: {
type: mongoose.Schema.Types.ObjectId,
ref: "User"
},
username: String
},
comments: [
{
type: mongoose.Schema.Types.ObjectId,
ref: "Comment"
}
],
slug: {
type: String,
unique: true,
trim: true
},
recommends: [
{
type: mongoose.Schema.Types.ObjectId,
ref: "User"
}
],
reference:[{
authors:String,
year: String,
title: String,
journal: String,
edition: String,
pageStart: Number,
pageEnd: Number
}],
muscle: String
});
exerciseSchema.pre('save', async function(next){
try{
if(this.isNew || this.wasNew){
this.slug = await generateUniqueSlug(this._id, this.name);
}
next();
} catch(err){
console.log(err.message);
}
});
var Exercise = mongoose.model("Exercise", exerciseSchema);
module.exports = Exercise;
async function generateUniqueSlug(id, exerciseName, slug){
try{
if(!slug){
return slug = slugify(exerciseName); //added return
}
var exercise = await Exercise.findOne({slug:slug});
if(!exercise || exercise._id.equals(id)){
return slug;
}
var newSlug = slugify(exerciseName);
return await generateUniqueSlug(id, exerciseName, newSlug);
} catch(err){
console.log(err.message);
}
}
function slugify(text){
var slug = text
.toString()
.toLowerCase()
.replace(/\s+/g, '-') // Replace spaces with -
.replace(/[^\w\-]+/g, '') // Remove all non-word chars
.replace(/\-\-+/g, '-') // Replace multiple - with single -
.replace(/^-+/, '') // Trim - from start of text
.replace(/-+$/, '') // Trim - from end of text
.substring(0, 75); // Trim at 75 characters
return slug + "-" + Math.floor(1000 + Math.random() * 9000) //Add 4 random digits to improve uniqueness
}
module.exports = mongoose.model('Exercise', exerciseSchema);
下面是一个创建路径
router.post('/', (req, res)=>{
Exercise.create(req.body.exercise, (err, newlyCreate)=>{
if(err){
console.log(req.body.exercise); //undefined
return res.redirect("back");
}
console.log(newlyCreate);
res.redirect("/exercises");
});
});
最后,下面是用户创建练习的表单。
<div class="row">
<form class="w-75 m-auto" action="/exercises" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label>Name</label>
<input class="form-control" type="text" name="exercise[name]">
</div>
<div class="form-group">
<label for="image">Images</label>
<input type="file" name="image" id="image" accept="image/*">
</div>
<div class="form-group">
<label>Description</label>
<textarea class="form-control" name="exercise[description]" rows=5 placeholder="Provide detail about the type of population, what you're targeting, cues, and the usefullness of this exercise..."></textarea>
</div>
<div class="form-group">
<label for="muscle">Primary muscle targeted</label>
<select class="form-control" name="exercise[muscle]" id="muscle">
<option>Soleus</option>
<option>Gastrocnemius</option>
<option>Tibialis Anterior</option>
<option>Sartorius</option>
</select>
</div>
<div id="references">
<!-- References will go here -->
</div>
<a class="newRef" href="#">Add Reference</a>
<div class="form-group">
<input class="btn btn-primary w-100" id="submitExercise" type="submit" value="Submit">
</div>
</form>
</div>
<a href="/exercises">Go back</a>
<script>
var newRefButton = document.querySelector('.newRef');
var references = document.querySelector('#references');
var ref = document.querySelector('.reference-group');
var list = 0
newRefButton.addEventListener('click', ()=>{
var div = document.createElement('div');
div.innerHTML = `
<div class="form-group">
<input type="text" name="exercise[reference][${list}][authors]" placeholder="Surname, Initials., Surname, Initials., Surname, Inials." class="form-control authorName">
</div>
<div class="form-group">
<input type="text" name="exercise[reference][${list}][title]" placeholder="Title of Article" class="form-control">
</div>
<div class="form-group">
<input type="text" name="exercise[reference][${list}][journal]" placeholder="Journal" class="form-control">
</div>
<div class="form-row">
<div class="form-group col-md-3">
<input type="text" name="exercise[reference][${list}][year]" placeholder="Year" class="form-control">
</div>
<div class="form-group col-md-3">
<input type="number" name="exercise[reference][${list}][edition]" placeholder="Edition" class="form-control">
</div>
<div class="form-group col-md-3">
<input type="number" name="exercise[reference][${list}][pageStart]" placeholder="Start Page" class="form-control">
</div>
<div class="form-group col-md-3">
<input type="number" name="exercise[reference][${list}][pageEnd]" placeholder="End Page" class="form-control">
</div>
</div>
`;
references.appendChild(div);
list++
});
</script>