<div class="wrapper"> <div class="content"> <h2>留言展示:</h2> </div> <!-- <h2>留言板</h2> --> <label for="user"><input type="text" id="user" placeholder="用户名" ></label> <label for="content"></label><input type="text" id="content" placeholder="留言内容" > <button id="btn"> 提交</button> </div> <!-- 首先获取数据库的内容 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <script src="../../JavaScript/jquery.js"></script> <!-- <script src="../cunminjs/liuyanban.js"></script>--> <script> $("#btn").click(function(){ var username = $("#user").val(); var content = $("#content").val(); // console.log("=="); $.ajax({ url:'../liuyanban.php', data:{query:'add',cm_name:username,cm_content:content}, dataType:'json', method:'post', success(res){ console.log(res); if(res.code == 200){ alert("数据添加成功!"); $('.content').html(''); $("#user").val(""); $("#content").val(""); getInfo(); } } }) }); </script> <script> getInfo(); function getInfo(){ $.ajax({ url:'../liuyanban.php', data:{query:'select'}, dataType:'json', method:'post', success(res){ // console.log(res); if(res){ var str = ""; for(var i=0;i<res.length;i++){ str += `<span class="user">${res[i].username}</span>:<span>${res[i].content}</span>  <span>${res[i].time}</span> <br>` } $(".content").append(str); } } }) } </script>
时间: 2023-06-04 20:06:26 浏览: 91
以上代码是一个留言板的前端页面。其中含有一个用户名输入框、一个留言输入框和一个提交按钮。用户在输入用户名和留言内容后,点击“提交”按钮即可将留言提交到后端数据库中。前端使用了jQuery库,并引用了一个不确定来源的JavaScript文件。
相关问题
帮我解释一下这段代码<body> <input type="checkbox" id="check" /> <label for="check"> <svg viewBox="0 0 30 30" width="30" height="30"> <path id="one" d="M4 10h22M4" stroke="#fff" stroke-width="2" stroke-linecap="round"></path> <path id="two" d="M4 20h22M4" stroke="#fff" stroke-width="2" stroke-linecap="round"></path> </svg> Click me </label> <aside> <div class="top"> <h2>Title</h2> <ul> <li>Nav text</li> <li>Nav text</li> <li>Nav text</li> <li>Nav text</li> <li>Nav text</li> </ul> </div> <div class="bottom"> <p>© 2019 by Andrej Sharapov</p> </div> </aside> <article> <div class="wrapper"> <div class="content"> <h1>Off-Canvas menu on Pure CSS</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident rerum unde porro consequatur doloribus ex distinctio similique, voluptas repellendus voluptates nam dolorum! Repudiandae maxime, itaque vero dolorem distinctio inventore explicabo!</p> <p>Odio eaque cum blanditiis esse, earum saepe voluptate quae aliquid possimus facere non qui illo necessitatibus eveniet ab sit quaerat. Atque animi nulla veritatis molestiae qui ipsam ut assumenda facilis?</p> </div> <div class="footer"> <p>Follow me <a href="https://twitter.com/andrejsharapov" target="_blank" title="">in Twitter</a></p> </div> </div> </article> </body>
这段代码是HTML代码,描述了一个基本的网页结构。具体来说:
`<body>`标签表示网页的主体内容。
`<input>`标签表示一个复选框,属性`type="checkbox"`表示这是一个复选框,`id="check"`表示它的ID为"check"。
`<label>`标签表示一个标签,属性`for="check"`表示它对应的复选框的ID是"check",内部包含了一个SVG图形和文本"Click me"。
`<aside>`标签表示一个侧边栏,内部包含了两个`<div>`标签,分别是`class="top"`和`class="bottom"`。
`<article>`标签表示文章的主体内容,内部包含了一个`<div>`标签,属性`class="wrapper"`,内部包含了两个`<div>`标签,分别是`class="content"`和`class="footer"`,表示文章内容和页脚。
这段代码的作用是创建一个基本的网页结构,包括一个复选框、一个侧边栏和一篇文章。其中,复选框和侧边栏可以通过CSS和JavaScript进行样式和交互的定制。
<template> <div class="wrapper"> <h2>学生签到系统</h2> <div class="content"> <div class="form-item"> <input type="text" v-model="student.S_id" placeholder="请输入学号"> </div> <div class="form-item"> <input type="text" v-model="student.S_pwd" placeholder="请输入密码"> </div> <div class="form-item"> <a @click.prevent="Login">登录</a > </div> </div> <!-- ... 现有模板代码 ... --> <div v-if="show" class=""> <div class=""> <h3>班级尚未开启签到</h3> <button @click="close">取消</button> </div> </div> </div> </template> <script> import qs from "qs" import axios from "axios"; export default { name: "Login", data(){ return{ //弹窗 show:false, student:{ S_id:null, S_pwd:null, } } }, methods: { close() { this.show = false; // 隐藏弹出窗口 }, Login() { let param = qs.stringify(this.student); axios.post('/xx/students/login', param).then((response) => { //获取当前学生的班级信息并传入sessionStorage,参数为S_class sessionStorage.setItem('classInfo', response.data.data.s_class); //获取当前学生的id信息并传入sessionStorage sessionStorage.setItem('studentId', this.student.S_id); //弹窗 if (response.data.msg === "账号或密码错误"){ this.show = true; } if (response.data.code == 200) { this.$router.push({"path": "/signLog"}) } }).catch((error) => { console.log(error); }); } } } </script> <style scoped> .wrapper > h2{ text-align: center; margin: 40px 0px; } .content{ padding: 8px; } .form-item { margin-bottom: 20px; } .form-item > input{ width: 100%; height: 40px; padding: 4px; outline: none; border: 1px solid rebeccapurple; box-sizing: border-box; } .form-item > a{ display: inline-block; width: 100%; height: 40px; background-color: sandybrown; text-align: center; line-height: 40px; } .form-item > 这段代码要怎么样实现弹窗
要实现弹窗功能,你可以按照以下步骤进行操作:
1. 在 `data` 属性中添加一个名为 `show` 的布尔值,初始值设为 `false`,用于控制弹窗的显示与隐藏。
2. 在模板中,将需要弹窗的内容包裹在一个 `div` 元素中,并添加一个条件渲染指令 `v-if="show"`,用于控制该 `div` 元素的显示与隐藏。
3. 在弹窗内容的底部添加一个取消按钮,绑定点击事件 `@click="close"`,在 `methods` 中定义 `close` 方法用于关闭弹窗。
4. 在登录方法 `Login()` 中,在账号或密码错误的情况下将 `show` 设置为 `true`,显示弹窗。
下面是修改后的代码示例:
```vue
<template>
<div class="wrapper">
<h2>学生签到系统</h2>
<div class="content">
<div class="form-item">
<input type="text" v-model="student.S_id" placeholder="请输入学号">
</div>
<div class="form-item">
<input type="text" v-model="student.S_pwd" placeholder="请输入密码">
</div>
<div class="form-item">
<a @click.prevent="Login">登录</a >
</div>
</div>
<!-- ... 现有模板代码 ... -->
<div v-if="show" class="">
<div class="">
<h3>班级尚未开启签到</h3>
<button @click="close">取消</button>
</div>
</div>
</div>
</template>
<script>
import qs from "qs"
import axios from "axios";
export default {
name: "Login",
data(){
return{
//弹窗
show:false,
student:{
S_id:null,
S_pwd:null,
}
}
},
methods: {
close() {
this.show = false; // 隐藏弹出窗口
},
Login() {
let param = qs.stringify(this.student);
axios.post('/xx/students/login', param).then((response) => {
//获取当前学生的班级信息并传入sessionStorage,参数为S_class
sessionStorage.setItem('classInfo', response.data.data.s_class);
//获取当前学生的id信息并传入sessionStorage
sessionStorage.setItem('studentId', this.student.S_id);
//弹窗
if (response.data.msg === "账号或密码错误"){
this.show = true;
}
if (response.data.code == 200) {
this.$router.push({"path": "/signLog"})
}
}).catch((error) => {
console.log(error);
});
}
}
}
</script>
<style scoped>
.wrapper > h2{
text-align: center;
margin: 40px 0px;
}
.content{
padding: 8px;
}
.form-item {
margin-bottom: 20px;
}
.form-item > input{
width: 100%;
height: 40px;
padding: 4px;
outline: none;
border: 1px solid rebeccapurple;
box-sizing: border-box;
}
.form-item > a{
display: inline-block;
width: 100%;
height: 40px;
background-color: sandybrown;
text-align: center;
line-height: 40px;
}
</style>
```
这样,当登录接口返回账号或密码错误时,弹窗将会显示出来。在点击取消按钮时,弹窗会被隐藏。