信息录入系统_资料管理系统

信息录入系统_资料管理系统123231newVue({2el:'#app',3mounted(){4this.getStudentList();5},6data:{7s

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

 1 <script src="lib/vue.js"></script>
 2 <script src="lib/vue-resource.js"></script>
 3  <script>
 4         new Vue({
 5             el: '#app',
 6             mounted() {
 7                 this.getStudentList();
 8             },
 9             data: {
10                 students: [
11                     { name: '张三', sex: '女', age: 19, phone: '18921212121' },
12                     { name: '李四', sex: '男', age: 29, phone: '18921221121' },
13                     { name: '王五', sex: '女', age: 39, phone: '18921788721' },
14                     { name: '赵六', sex: '男', age: 49, phone: '18921556121' }
15                 ],
16                 newStudent: { name: '', sex: '男', age: 0, phone: '' }
17             },
18             methods: {
19                 createNewStu() {
20                     // 4. 插入新纪录
21                     this.students.unshift(this.newStudent);
22                     // 5. 清空数据
23                     this.newStudent = { name: '', sex: '男', age: 0, phone: '' }
24                 },
25                 // 删除记录
26                 delStudent(index) {
27                     this.students.splice(index, 1);
28                 }
29             }
30         });
 1 <div id="app">
 2         <fieldset>
 3             <legend>学生录入系统</legend>
 4             <div>
 5                 <span>姓名:</span>
 6                 <input type="text" placeholder="请输入姓名" v-model="newStudent.name">
 7             </div>
 8             <div>
 9                 <span>年龄:</span>
10                 <input type="text" placeholder="请输入年龄" v-model="newStudent.age">
11             </div>
12             <div>
13                 <span>性别:</span>
14                 <select v-model="newStudent.sex">
15                     <option value="男">男</option>
16                     <option value="女">女</option>
17                 </select>
18             </div>
19             <div>
20                 <span>手机:</span>
21                 <input type="text" placeholder="请输入手机号码" v-model="newStudent.phone">
22             </div>
23             <button @click="createNewStu()">创建新用户</button>
24         </fieldset>
25         <table>
26             <thead>
27                 <tr>
28                     <td>姓名</td>
29                     <td>性别</td>
30                     <td>年龄</td>
31                     <td>手机</td>
32                     <td>删除</td>
33                 </tr>
34             </thead>
35             <tbody>
36                 <tr v-for="(stu, index) in students" :key="index">
37                     <td>{{stu.name}}</td>
38                     <td>{{stu.sex}}</td>
39                     <td>{{stu.age}}</td>
40                     <td>{{stu.phone}}</td>
41                     <td>
42                         <button @click="delStudent(index)">删除</button>
43                     </td>
44                 </tr>
45             </tbody>
46         </table>
47     </div>

 

 1 <script src="lib/vue.js"></script>
 2 <script src="lib/vue-resource.js"></script>
 3 <script>
 4     new Vue({
 5         el: '#app',
 6         mounted(){
 7            this.getStudentList();
 8         },
 9         data: {
10             students: [],
11             newStudent: {name: '', sex: '男', age: 0, phone: ''}
12         },
13         methods: {
14             getStudentList(){
15                 this.$http.get('http://127.0.0.1:3000/api/getStuList').then(response => {
16                     this.students = response.body.message;
17                 }, response => {
18                     alert('网络发生错误!');
19                 });
20             },
21             createNewStu(){
22                 this.$http.post('http://127.0.0.1:3000/api/insertStuList', this.newStudent, {emulateJSON:true}).then(response => {
23                     // 4.1 判断
24                     if(response.body.success_code === 200){ // 插入成功
25                          this.getStudentList();
26                     }
27                 }, response => {
28                    alert('插入数据失败')
29                 });
30                 // 5. 清空数据
31                 this.newStudent = {name: '', sex: '男', age: 0, phone: ''}
32             },
33             // 删除记录
34             delStudent(index){
35                 // this.students.splice(index, 1);
36                 this.$http.post('http://127.0.0.1:3000/api/delStuList', {id:index}, {emulateJSON:true}).then(response => {
37                     // 4.1 判断
38                     if(response.body.success_code === 200){ // 插入成功
39                         this.getStudentList();
40                     }
41                 }, response => {
42                     alert('插入数据失败')
43                 });
44             }
45         }
46     });
47 </script>

 

 1  new Vue({
 2         el: '#app',
 3         mounted(){
 4            this.getStudentList();
 5         },
 6         data: {
 7             students: [],
 8             newStudent: {name: '', sex: '男', age: 0, phone: ''}
 9         },
10         methods: {
11             // 获取学生列表
12             getStudentList(){
13                 //字符串转为json
14                 this.students = JSON.parse(window.localStorage.getItem('students') || '[]');
15             },
16             // 插入记录
17             createNewStu(){
18                 // 4. 插入新纪录
19                 this.students.unshift(this.newStudent);
20                 //对象转为字符串
21                 localStorage.setItem('students', JSON.stringify(this.students));
22                 // 5. 清空数据
23                 this.newStudent = {name: '', sex: '男', age: 0, phone: ''}
24             },
25             // 删除记录
26             delStudent(index){
27                 this.students.splice(index, 1);
28                 localStorage.setItem('students', JSON.stringify(this.students));
29             }
30         }
31     });

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/167484.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Redis分布式架构以及实战

    Redis分布式架构以及实战Redis一、redis6.0.6安装redis-6.0.6.tar.gztar-zxvfredis-6.0.6.tar.gz#安装gcc依赖yum-yinstallcentos-release-sclyum-yinstalldevtoolset-9-gccdevtoolset-9-gcc-c++devtoolset-9-binutilssclenabledevtoolset-9bashecho”source/opt/rh/devtoolset-9/enabl

  • translate3d绕轴旋转

    translate3d绕轴旋转<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><metahttp-equiv=”X-UA-Compatible”content=”IE=edge”><metaname=”viewport”content=”width=device-width,initial-scale=1.0″><title…

  • BMP文件解析_图片分析

    BMP文件解析_图片分析BMP文件简介BMP(全称Bitmap)是Window操作系统中的标准图像文件格式,可以分成两类:设备相关位图(DDB)和设备无关位图(DIB),使用非常广。它采用位映射存储格式,除了图像深度可选以外,不采用其他任何压缩,因此,BMP文件所占用的空间很大。BMP文件的图像深度可选lbit、4bit、8bit及24bit。BMP文件存储数据时,图像的扫描方式是按从左到右、从下到上的顺序。由于BMP文

    2022年10月31日
  • linux配置邮件服务器_shell发送邮件

    linux配置邮件服务器_shell发送邮件Linux发送邮件步骤一:安装sendmail软件查询是否有sendmail安装包yumsearchsendmail安装sendmail:yuminstall-ysendmail.x86_64步骤二:配置发件人信息1.开启smtp服务,并生成授权码2.在linux配置文件中填写发件人信息vi/etc/mail.rcsetfrom=86521760@qq.comsetsmtp=smtp://smtp.qq.com:587setsmtp-auth-user=8652

    2022年10月20日
  • JS后退一页, JS返回上一页, JS返回下一页代码[通俗易懂]

    JS后退一页, JS返回上一页, JS返回下一页代码[通俗易懂]Javascript返回上一页:1.history.go(-1),返回两个页面:history.go(-2);2.history.back().3.window.history.forward()返回下一页4.window.history.go(返回第几页,也可以使用访问过的URL)例:&lt;ahref="javascript:history.go(-1);"…

  • try catch finally 用法[通俗易懂]

    try catch finally 用法[通俗易懂]在讲之前我们先看一段程序:publicclassTest{publicstaticvoidmain(String[]args){System.out.println("returnvalueofgetValue():"+getValue());} publicstaticintgetValue(){…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号