Vue項(xiàng)目之學(xué)生管理系統(tǒng)實(shí)例詳解
查詢學(xué)生
步驟1:設(shè)置導(dǎo)航
步驟2:添加路由
步驟3:創(chuàng)建頁面
步驟:
- 步驟1:準(zhǔn)備2個(gè)變量(pageInfo、studentVo)
- 步驟2:編寫查詢condition函數(shù),接收參數(shù)num
- 步驟3:頁面加載成功時(shí),查詢第一頁
- 步驟4:遍歷結(jié)果
<template> <div> 班級(jí): <select v-model = "studentVo.cid"> <option value="" disabled>--請(qǐng)選擇--</option> <option :value="classes.cid" v-for = "(classes,index) in classesList" :key = "index">{{classes.cname}}</option> </select> 姓名:<input type="text" v-model = "studentVo.studentName"> 年齡:<input type="text" v-model = "studentVo.startAge">——<input type="text" v-model = "studentVo.endAge"> <input type="button" value = "查詢" @click = "conditionStudent()"> <table border="1"> <tr> <td>ID</td> <td>班級(jí)</td> <td>姓名</td> <td>年齡</td> <td>生日</td> <td>性別</td> <td>操作</td> </tr> <tr v-for = "(student,index) in pageInfo.list" :key="index"> <td>{{student.sid}}</td> <td>{{student.classes == null ? student.cname : student.classes.cname}}</td> <td>{{student.sname}}</td> <td>{{student.age}}</td> <td>{{student.birthday}}</td> <td>{{student.gender == 1 ? '男' : '女'}}</td> <td> <router-link :to="{path:'/studentEdit',query:{sid : student.sid}}">修改</router-link> <router-link to="" @click.native.prevent = "deleteStudent(student.sid)">刪除</router-link> </td> </tr> </table> <!-- 分頁 start --> 當(dāng)前第 {{pageInfo.pageNum}}頁,共{{pageInfo.pages}}頁, 總計(jì)數(shù){{pageInfo.total}}條, 每頁 <select v-model = "pageInfo.pageSize" @change = "conditionStudent(1)"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="5">5</option> <option value="10">10</option> </select>條 <a href="" v-if = "!pageInfo.isFirstPage" @click.prevent = "conditionStudent(1)">首頁</a> <a href="" v-if = "pageInfo.hasPreviousPage" @click.prevent = "conditionStudent(pageInfo.pageNum - 1)">上一頁</a> <a href="" v-for = "(num,index) in pageInfo.pages" @click.prevent = "conditionStudent(num)" :key="index">{{num}}</a> <a href="" v-if = "pageInfo.hasNextPage" @click.prevent = "conditionStudent(pageInfo.pageNum - 1)">下一頁</a> <a href="" v-if = "!pageInfo.isLastPage" @click.prevent = "conditionStudent(pageInfo.pages)">尾頁</a> 跳轉(zhuǎn)到 <input v-model = "pageInfo.pageNum" placeholder="enter跳轉(zhuǎn)" @keyup.enter = "conditionStudent()"> 頁 <!-- 分頁 end --> </div> </template> <script> import axios from 'axios' export default { data() { return { classesList:[], studentVo: { cid:'' }, pageInfo:{ pageNum:1, pageSize:2 } } }, methods:{ async selectClasses(){ let { data: baseResult } = await axios.get("http://localhost:8888/classes"); this.classesList = baseResult.data }, async conditionStudent(num){ if(num){ this.pageInfo.pageNum = num } var url = `http://localhost:8888/student/condition/${this.pageInfo.pageSize}/${this.pageInfo.pageNum}`; let {data: baseResult} = await axios.post(url,this.studentVo); this.pageInfo = baseResult.data }, }, mounted(){ //查詢所有班級(jí) this.selectClasses(); //查詢所有學(xué)生 this.conditionStudent(); } } </script> <style> </style>
添加學(xué)生
步驟1:設(shè)置導(dǎo)航
步驟2:添加路由
步驟3:創(chuàng)建頁面
步驟:
- 創(chuàng)建數(shù)據(jù) 班級(jí)數(shù)組 和 學(xué)生對(duì)象
- 班級(jí)數(shù)據(jù)跟select綁定 table綁定學(xué)生對(duì)象
- 發(fā)送post請(qǐng)求添加學(xué)生
<template> <div> <table border="1"> <tr> <td>ID</td> <td> <input type="text" v-model = "student.sid"> </td> </tr> <tr> <td>班級(jí)</td> <td> <select v-model = "student.cid"> <option value="">--請(qǐng)選擇--</option> <option :value="classes.cid" v-for = "(classes,index) in classesList" :key="index">{{classes.cname}}</option> </select> </td> </tr> <tr> <td>姓名</td> <td> <input type="text" v-model = "student.sname"> </td> </tr> <tr> <td>年齡</td> <td> <input type="text" v-model = "student.age"> </td> </tr> <tr> <td>生日</td> <td> <input type="date" v-model = "student.birthday"> </td> </tr> <tr> <td>性別</td> <td> <input type="radio" v-model = "student.gender" value = "1"> 男 <input type="radio" v-model = "student.gender" value = "0"> 女 </td> </tr> <tr> <td colspan="2"> <input type="button" value = "添加學(xué)生" @click = "addStudent()"> </td> </tr> </table> </div> </template> <script> import axios from 'axios' export default { data() { return { classesList:[], student:{} } }, methods:{ async selectClasses(){ let {data:baseResult} = await axios.get(`http://localhost:8888/classes`); this.classesList = baseResult.data }, async addStudent(){ var url = "http://localhost:8888/student"; let { data: baseResult } = await axios.post(url,this.student); if(baseResult.code == 20000){ this.$router.push('/studentList') }else{ alert(baseResult.message) } } }, mounted(){ //查詢所有班級(jí) this.classesList = this.selectClasses(); } } </script> <style> </style>
修改學(xué)生
步驟1:設(shè)置導(dǎo)航
步驟2:添加路由
步驟3:創(chuàng)建頁面
步驟:
- 先獲得路由傳參傳過來的參數(shù) 存儲(chǔ)到data數(shù)據(jù)區(qū)域 cid
- 根據(jù)cid查詢到學(xué)生 存儲(chǔ)到student table對(duì)student進(jìn)行數(shù)據(jù)雙向關(guān)聯(lián)
- 修改學(xué)生信息 發(fā)送ajax請(qǐng)求
<template> <div> <table border = "1"> <tr> <td>編號(hào)</td> <td> {{ classes.cid }} </td> </tr> <tr> <td>班級(jí)名稱</td> <td> <input type="text" v-model = "classes.cname"> </td> </tr> <tr> <td>班級(jí)描述</td> <td> <textarea name="" id="" cols="30" rows="10" v-model = "classes.desc"></textarea> </td> </tr> <tr> <td colspan="2"> <input type="text" value = "修改" @click = "editClasses()"> </td> </tr> </table> </div> </template> <script> import axios from 'axios'; export default { data() { return { classes:{}, cid:'', }; }, methods:{ async selectClassesById(){ let url = `http://localhost:8888/classes/${this.cid}`; let { data: baseResult } = await axios.get(url); this.classes = baseResult.data }, async editClasses(){ var url = `http://localhost:8888/classes`; let { data: baseResult } = await axios.put(url,this.classes); if(baseResult.code == 20000){ this.$router.push("/classesList"); }else{ alert(baseResult.message); } } }, mounted(){ //獲得cid this.cid = this.$route.params.cid; //根據(jù)id查詢班級(jí)信息 this.selectClassesById(); } } </script> <style> </style>
刪除學(xué)生
步驟1:設(shè)置導(dǎo)航
步驟2:添加方法
步驟:
- 根據(jù)cid發(fā)送ajax刪除學(xué)生
<template> <div> 班級(jí): <select v-model = "studentVo.cid"> <option value="" disabled>--請(qǐng)選擇--</option> <option :value="classes.cid" v-for = "(classes,index) in classesList" :key = "index">{{classes.cname}}</option> </select> 姓名:<input type="text" v-model = "studentVo.studentName"> 年齡:<input type="text" v-model = "studentVo.startAge">——<input type="text" v-model = "studentVo.endAge"> <input type="button" value = "查詢" @click = "conditionStudent()"> <table border="1"> <tr> <td>ID</td> <td>班級(jí)</td> <td>姓名</td> <td>年齡</td> <td>生日</td> <td>性別</td> <td>操作</td> </tr> <tr v-for = "(student,index) in pageInfo.list" :key="index"> <td>{{student.sid}}</td> <td>{{student.classes == null ? student.cname : student.classes.cname}}</td> <td>{{student.sname}}</td> <td>{{student.age}}</td> <td>{{student.birthday}}</td> <td>{{student.gender == 1 ? '男' : '女'}}</td> <td> <router-link :to="{path:'/studentEdit',query:{sid : student.sid}}">修改</router-link> <router-link to="" @click.native.prevent = "deleteStudent(student.sid)">刪除</router-link> </td> </tr> </table> <!-- 分頁 start --> 當(dāng)前第 {{pageInfo.pageNum}}頁,共{{pageInfo.pages}}頁, 總計(jì)數(shù){{pageInfo.total}}條, 每頁 <select v-model = "pageInfo.pageSize" @change = "conditionStudent(1)"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="5">5</option> <option value="10">10</option> </select>條 <a href="" v-if = "!pageInfo.isFirstPage" @click.prevent = "conditionStudent(1)">首頁</a> <a href="" v-if = "pageInfo.hasPreviousPage" @click.prevent = "conditionStudent(pageInfo.pageNum - 1)">上一頁</a> <a href="" v-for = "(num,index) in pageInfo.pages" @click.prevent = "conditionStudent(num)" :key="index">{{num}}</a> <a href="" v-if = "pageInfo.hasNextPage" @click.prevent = "conditionStudent(pageInfo.pageNum - 1)">下一頁</a> <a href="" v-if = "!pageInfo.isLastPage" @click.prevent = "conditionStudent(pageInfo.pages)">尾頁</a> 跳轉(zhuǎn)到 <input v-model = "pageInfo.pageNum" placeholder="enter跳轉(zhuǎn)" @keyup.enter = "conditionStudent()"> 頁 <!-- 分頁 end --> </div> </template> <script> import axios from 'axios' export default { data() { return { classesList:[], studentVo: { cid:'' }, pageInfo:{ pageNum:1, pageSize:2 } } }, methods:{ async selectClasses(){ let { data: baseResult } = await axios.get("http://localhost:8888/classes"); this.classesList = baseResult.data }, async conditionStudent(num){ if(num){ this.pageInfo.pageNum = num } var url = `http://localhost:8888/student/condition/${this.pageInfo.pageSize}/${this.pageInfo.pageNum}`; let {data: baseResult} = await axios.post(url,this.studentVo); this.pageInfo = baseResult.data }, async deleteStudent(sid){ if(!confirm("您確定要?jiǎng)h除么?")){ return } let {data : baseResult} = await axios.delete(`http://localhost:8888/student/${sid}`) if(baseResult.code == 20000){ this.conditionStudent(1); }else { alert(baseResult.message) } } }, mounted(){ //查詢所有班級(jí) this.selectClasses(); //查詢所有學(xué)生 this.conditionStudent(); } } </script> <style> </style>
后端
鏈接:https://pan.baidu.com/s/1GlS7hxzuwttHAp8bh1fbKQ
密碼:hvac
后端部分代碼:
package com.czxy.controller; import com.czxy.domain.Student; import com.czxy.service.StudentService; import com.czxy.vo.BaseResult; import com.czxy.vo.StudentVo; import com.github.pagehelper.PageInfo; import org.springframework.web.bind.annotation.*; import javax.annotation.Resource; /** * @Author 劉嘉俊 * @Date 2022/2/21 */ @RestController @RequestMapping("/student") @CrossOrigin public class StudentController { @Resource private StudentService studentService; @PostMapping("/condition/{pageSize}/{pageNum}") public BaseResult condition( @PathVariable("pageSize") Integer pageSize, @PathVariable("pageNum") Integer pageNum, @RequestBody StudentVo studentVo) { // 查詢 PageInfo<Student> pageInfo = studentService.condition(pageSize,pageNum,studentVo); // 返回結(jié)果 return BaseResult.ok("查詢成功", pageInfo); } @GetMapping("/{sid}") public BaseResult selectById(@PathVariable("sid") String sid){ Student student = studentService.selectById(sid); return BaseResult.ok("查詢成功",student); } @PutMapping public BaseResult update(@RequestBody Student student){ System.out.println(student); try { boolean result = studentService.update(student); if(result){ return BaseResult.ok("更新成功"); }else{ return BaseResult.error("更新失敗"); } } catch (Exception e) { e.printStackTrace(); return BaseResult.error(e.getMessage()); } } @DeleteMapping("/{sid}") public BaseResult delete(@PathVariable("sid")String sid){ System.out.println("sid" + sid); try { boolean result = studentService.delete(sid); if(result){ return BaseResult.ok("刪除成功"); } return BaseResult.error("刪除失敗"); } catch (Exception e) { e.printStackTrace(); return BaseResult.error(e.getMessage()); } } @PostMapping public BaseResult addStudent(@RequestBody Student student){ try { boolean result = studentService.addStudent(student); if(result){ return BaseResult.ok("添加成功"); } return BaseResult.error("添加失敗"); } catch (Exception e) { e.printStackTrace(); return BaseResult.error(e.getMessage()); } } }
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Vue2.0仿餓了么webapp單頁面應(yīng)用詳細(xì)步驟
本篇文章給大家分享了Vue2.0仿餓了么webapp單頁面應(yīng)用詳細(xì)步驟,有興趣的朋友可以跟著操作下。2018-07-07Vue指令v-for遍歷輸出JavaScript數(shù)組及json對(duì)象的常見方式小結(jié)
這篇文章主要介紹了Vue指令v-for遍歷輸出JavaScript數(shù)組及json對(duì)象的常見方式,結(jié)合實(shí)例形式總結(jié)分析了vue.js使用v-for指令遍歷輸出js數(shù)組與json對(duì)象的常見操作技巧,需要的朋友可以參考下2019-02-02使用vue+element?ui實(shí)現(xiàn)走馬燈切換預(yù)覽表格數(shù)據(jù)
這次做項(xiàng)目的時(shí)候遇到需要切換預(yù)覽表格數(shù)據(jù)的需求,所以下面這篇文章主要給大家介紹了關(guān)于使用vue+element?ui實(shí)現(xiàn)走馬燈切換預(yù)覽表格數(shù)據(jù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08Vue-router的使用和出現(xiàn)空白頁,路由對(duì)象屬性詳解
今天小編就為大家分享一篇Vue-router的使用和出現(xiàn)空白頁,路由對(duì)象屬性詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue常用的數(shù)字孿生可視化的自適應(yīng)方案
這篇文章主要為大家介紹了vue常用的數(shù)字孿生可視化的自適應(yīng)方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07vue2.x中h函數(shù)(createElement)與vue3中的h函數(shù)詳解
h函數(shù)本質(zhì)就是createElement(),h函數(shù)其實(shí)是createVNode的語法糖,返回的就是一個(gè)Js普通對(duì)象,下面這篇文章主要給大家介紹了關(guān)于vue2.x中h函數(shù)(createElement)與vue3中h函數(shù)的相關(guān)資料,需要的朋友可以參考下2022-12-12vue?長列表數(shù)據(jù)刷新的實(shí)現(xiàn)及思考
這篇文章主要為大家介紹了vue?長列表數(shù)據(jù)刷新的實(shí)現(xiàn)及思考,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04vue3中reactive數(shù)據(jù)被重新賦值后無法雙向綁定的解決
這篇文章主要介紹了vue3中reactive數(shù)據(jù)被重新賦值后無法雙向綁定的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05