Vue項目之學(xué)生管理系統(tǒng)實(shí)例詳解
更新時間：2022年03月03日 16:29:34 作者：陶然同學(xué)。
這篇文章主要為大家詳細(xì)介紹了Vue項目之學(xué)生管理系統(tǒng)實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
查詢學(xué)生
步驟1：設(shè)置導(dǎo)航
步驟2：添加路由
步驟3：創(chuàng)建頁面
步驟：
- 步驟1：準(zhǔn)備2個變量（pageInfo、studentVo）
- 步驟2：編寫查詢condition函數(shù)，接收參數(shù)num
- 步驟3：頁面加載成功時，查詢第一頁
- 步驟4：遍歷結(jié)果
<template>
<div>
班級： <select v-model = "studentVo.cid">
<option value="" disabled>--請選擇--</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>班級</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}}頁, 總計數(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(){
//查詢所有班級
this.selectClasses();
//查詢所有學(xué)生
this.conditionStudent();
}
}
</script>
<style>
</style>添加學(xué)生
步驟1：設(shè)置導(dǎo)航
步驟2：添加路由
步驟3：創(chuàng)建頁面
步驟：
- 創(chuàng)建數(shù)據(jù) 班級數(shù)組 和 學(xué)生對象
- 班級數(shù)據(jù)跟select綁定 table綁定學(xué)生對象
- 發(fā)送post請求添加學(xué)生
<template>
<div>
<table border="1">
<tr>
<td>ID</td>
<td>
<input type="text" v-model = "student.sid">
</td>
</tr>
<tr>
<td>班級</td>
<td>
<select v-model = "student.cid">
<option value="">--請選擇--</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(){
//查詢所有班級
this.classesList = this.selectClasses();
}
}
</script>
<style>
</style>修改學(xué)生
步驟1：設(shè)置導(dǎo)航
步驟2：添加路由
步驟3：創(chuàng)建頁面
步驟：
- 先獲得路由傳參傳過來的參數(shù) 存儲到data數(shù)據(jù)區(qū)域 cid
- 根據(jù)cid查詢到學(xué)生 存儲到student table對student進(jìn)行數(shù)據(jù)雙向關(guān)聯(lián)
- 修改學(xué)生信息 發(fā)送ajax請求
<template>
<div>
<table border = "1">
<tr>
<td>編號</td>
<td>
{{ classes.cid }}
</td>
</tr>
<tr>
<td>班級名稱</td>
<td>
<input type="text" v-model = "classes.cname">
</td>
</tr>
<tr>
<td>班級描述</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查詢班級信息
this.selectClassesById();
}
}
</script>
<style>
</style>刪除學(xué)生
步驟1：設(shè)置導(dǎo)航
步驟2：添加方法
步驟：
- 根據(jù)cid發(fā)送ajax刪除學(xué)生
<template>
<div>
班級： <select v-model = "studentVo.cid">
<option value="" disabled>--請選擇--</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>班級</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}}頁, 總計數(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("您確定要刪除么？")){
return
}
let {data : baseResult} = await axios.delete(`http://localhost:8888/student/${sid}`)
if(baseResult.code == 20000){
this.conditionStudent(1);
}else {
alert(baseResult.message)
}
}
},
mounted(){
//查詢所有班級
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-07
Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式小結(jié)
這篇文章主要介紹了Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式,結(jié)合實(shí)例形式總結(jié)分析了vue.js使用v-for指令遍歷輸出js數(shù)組與json對象的常見操作技巧,需要的朋友可以參考下2019-02-02
使用vue+element?ui實(shí)現(xiàn)走馬燈切換預(yù)覽表格數(shù)據(jù)
這次做項目的時候遇到需要切換預(yù)覽表格數(shù)據(jù)的需求,所以下面這篇文章主要給大家介紹了關(guān)于使用vue+element?ui實(shí)現(xiàn)走馬燈切換預(yù)覽表格數(shù)據(jù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
這篇文章主要介紹了nuxt中刷新頁面后防止store值丟失問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue-router的使用和出現(xiàn)空白頁,路由對象屬性詳解
今天小編就為大家分享一篇Vue-router的使用和出現(xiàn)空白頁,路由對象屬性詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue常用的數(shù)字孿生可視化的自適應(yīng)方案
這篇文章主要為大家介紹了vue常用的數(shù)字孿生可視化的自適應(yīng)方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue2.x中h函數(shù)(createElement)與vue3中的h函數(shù)詳解
h函數(shù)本質(zhì)就是createElement(),h函數(shù)其實(shí)是createVNode的語法糖,返回的就是一個Js普通對象,下面這篇文章主要給大家介紹了關(guān)于vue2.x中h函數(shù)(createElement)與vue3中h函數(shù)的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue?長列表數(shù)據(jù)刷新的實(shí)現(xiàn)及思考
這篇文章主要為大家介紹了vue?長列表數(shù)據(jù)刷新的實(shí)現(xiàn)及思考，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
Vue中的Object.defineProperty是一個比較重要的方法,它是可以定義對象中屬性的一個方法,相比于在對象中直接定義的對象,它更具有靈活性,本文將通過代碼示例給大家簡單介紹一下Vue中的Object.defineProperty,需要的朋友可以參考下2023-08-08
vue3中reactive數(shù)據(jù)被重新賦值后無法雙向綁定的解決
這篇文章主要介紹了vue3中reactive數(shù)據(jù)被重新賦值后無法雙向綁定的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05