基础前端页

最新推荐文章于 2024-07-17 14:19:40 发布

samgreat911

最新推荐文章于 2024-07-17 14:19:40 发布

阅读量71

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/samgreat911/article/details/128159282

版权

#update# 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <h1>修改学生信息页面</h1>
  <input type="text" v-model="student.id">
  <input type="text" v-model="student.name">
  <input type="text" v-model="student.age">
  <input type="text" v-model="student.nickname">
  <input type="button" value="修改信息" @click="update()">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el:"body>div",
        data:{
            student:{
                id:"",
                name:"",
                age:"",
                nickname:""
            }
        },
        methods:{
          update(){
              //发出异步修改请求
              let url="/student/update";
              axios.post(url,v.student).then(function (response) {
                  let responseBody=response.data;
                  if(responseBody.state==50200){
                      this.$message.error(responseBody.message);
                      return;
                  }
                  alert("修改完成!");
                  location.href = "/list.html";//返回列表页面
              })
          },
          loadStudentById(){
              let id=location.search.split("=")[1];
              console.log(id);
              let url="/student/"+id+"/queryInfo"
              //发请求获取修改学生的信息
              axios.get(url).then(function (response) {
                  let responseBody=response.data;
                  if(responseBody.state==50300){
                      this.$message.error("该条记录不存在请刷新页面!");
                      return;
                  }
                  //服务器响应的是一个学生对象的信息
                  v.student = responseBody.data;
              })
          }
        },
        created:function () {
            console.log("加载学生信息");
            this.loadStudentById();
        }
    })
</script>
</body>
</html>

# insert#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>添加学生信息</h1>
    <div>
        <input type="text" placeholder="学生姓名" v-model="student.name">
        <input type="text" placeholder="学生年龄" v-model="student.age">
        <input type="text" placeholder="学生昵称" v-model="student.nickname">
    <input type="button" value="添加学生信息" @click="insert()">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el:"body>div",
        data:{
            student:{
                name:"",
                age:"",
                nickname:""
            }
        },
        methods:{
            insert(){
                //发出异步请求
                axios.post("/student/add-New",v.student).then(function (response) {
                    let responseBody=response.data;
                    console.log(responseBody.state);
                    if(responseBody.state==50000){
                        v.$message.error(responseBody.message);
                        console.log(responseBody.message);
                        return ;
                    }else if(responseBody.state==40000){
                        v.$message.error(responseBody.message);
                        console.log(responseBody.message);
                        return ;
                    }
                    alert("添加完成!");
                    location.href = "/list.html"; //显示列表页
                })
            }
        }
    })
</script>
</body>
</html>

#list#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <h1>学生信息列表页面</h1>
  <table border="1">
    <tr>
      <th>id</th><th>学生姓名</th>
      <th>学生年龄</th><th>学生昵称</th><th>操作</th>
    </tr>
    <tr v-for="p in arr">
      <td>{{p.id}}</td><td>{{p.name}}</td>
      <td>{{p.age}}</td><td>{{p.nickname}}</td>
      <td>
        <a :href="'/update.html?id='+p.id" >修改</a>
        <a href="javascript:void(0)" @click="del(p.id)">删除</a>
      </td>
    </tr>
  </table>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el:"body>div",
        data:{
          arr:[]
        },
        methods:{
          del(id){
            if (confirm("您确认删除该条记录吗?")){
              //异步删除请求
              let url="/student/"+id+"/delete";
              axios.post(url).then(function (response) {
                let responseBody=response.data;
                if(responseBody.state==50100){
                  this.$message.error(responseBody.message);
                  return;
                }
                //刷新页面
                location.reload();
              })
            }
          },
          loadStudentList(){
            //发出异步请求获取数据
            axios.get("/student/queryList").then(function (response) {
              //这里得到的服务器响应的数据是一个数组里面装着多个学生对象
              v.arr = response.data.data;
            })
          }
        },
        created:function () {
          console.log('加载列表数据!')
          this.loadStudentList();
        }
    })
</script>
</body>
</html>