本篇實(shí)現(xiàn)主頁面功能，包括主頁面排版布局，學(xué)生管理模塊實(shí)現(xiàn)，后臺(tái)接口實(shí)現(xiàn)等功能。

目錄

1.運(yùn)行效果

1.1登錄頁面

1.2主頁面

?1.3學(xué)生管理 - 信息列表

1.4學(xué)生管理 - 信息管理

?1.5學(xué)生管理 - 作業(yè)列表

1.6學(xué)生管理 -?作業(yè)管理

2.前端代碼

2.1 代碼結(jié)構(gòu)

?2.2 代碼實(shí)現(xiàn)

3.后端代碼

3.1 代碼結(jié)構(gòu)

3.2 代碼實(shí)現(xiàn)

4.其他

4.1 vscode快速編寫正則表達(dá)式

1.運(yùn)行效果

1.1登錄頁面

1.2主頁面

?1.3學(xué)生管理 - 信息列表

?

?

1.4學(xué)生管理 - 信息管理

?1.5學(xué)生管理 - 作業(yè)列表

1.6學(xué)生管理 -?作業(yè)管理

2.前端代碼

2.1 代碼結(jié)構(gòu)

?2.2 代碼實(shí)現(xiàn)

src/api/api.js

//業(yè)務(wù)服務(wù)調(diào)用接口封裝

import service from '../service.js'
//npm i qs -D
import qs from 'qs'

//登錄接口
export function login(data) {
    return service({
        method: 'post',
        url: '/login',
        data
    })
}

//學(xué)生信息查詢接口
export function students(params) {
    return service({
        method: 'get',
        url: '/api/students',
        params
    })
}

//刪除學(xué)生信息
export function delstudentsbyid(id) {
    return service({
        method: 'get',
        //此處應(yīng)用模板字符串傳參
        url: `/api/students/del?id=${id}`
    })
}

export function delstudentsbyreqid(id) {
    return service({
        method: 'get',
        //此處應(yīng)用模板字符串傳參
        url: `/api/students/del/${id}`
    })
}

export function addStudent(data) {
    //data = qs.stringify(data)
    return service({
        method: 'post',
        url: '/api/info',
        data
    })
}

export function updateStudent(data) {
    return service({
        method: 'post',
        url: '/api/updateinfo',
        data
    })
}

export function getInfo() {
    return service({
        method: 'get',
        url: '/api/getinfo'
    })
}

export function delinfo(id) {
    return service({
        method: 'get',
        //此處應(yīng)用模板字符串傳參
        url: `/api/info/del/id=${id}`
    })
}

src/components/common/students/InfoList.vue

<!-- 信息列表頁面 -->
<template>
    <div class="infoList">
        <!-- 新增表單 -->
        <el-form :inline="true" :model="form" class="demo-form-inline" size="small">
            <el-form-item>
                <el-button type="primary" @click="add('form')">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table
        :data="tableData"
        border
        style="width: 100%">
            <el-table-column
                prop="name"
                label="姓名"
                align="center">
            </el-table-column>
            <el-table-column
                prop="age"
                label="年齡"
                align="center">
            </el-table-column>
            <el-table-column
                prop="sex"
                label="性別"
                 align="center">
            </el-table-column>
            <el-table-column
                prop="father"
                label="父親"
                align="center">
            </el-table-column>
            <el-table-column
                prop="mother"
                label="母親"
                align="center">
            </el-table-column>
            <el-table-column
                prop="time"
                label="入校時(shí)間"
                align="center">
            </el-table-column>
            <el-table-column
                prop="address"
                label="家庭住址"
                align="center">
            </el-table-column>
            <el-table-column
                prop="phone"
                label="聯(lián)系方式"
                align="center">
            </el-table-column>
            <!-- scope.row表示點(diǎn)擊的當(dāng)前行，包含當(dāng)前行的所有數(shù)據(jù) -->
            <el-table-column
                label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="danger" size="mini" icon="el-icon-edit"
                    @click="edit(scope.row)">
                    </el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete"
                    @click="del(scope.row)">
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="state ? '添加學(xué)生信息' : '修改學(xué)生信息'" :visible.sync="dialogFormVisible" width="500px">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年齡" :label-width="formLabelWidth" prop="age">
                    <el-input v-model="form.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性別" :label-width="formLabelWidth" prop="sex">
                    <el-radio v-model="form.sex" label="1">男</el-radio>
                    <el-radio v-model="form.sex" label="2">女</el-radio>
                </el-form-item>
                <el-form-item label="父親" :label-width="formLabelWidth" prop="father">
                    <el-input v-model="form.father" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="母親" :label-width="formLabelWidth" prop="mother">
                    <el-input v-model="form.mother" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="入校時(shí)間" :label-width="formLabelWidth" prop="time">
                    <el-date-picker
                        v-model="form.time"
                        format="yyyy 年 MM 月 dd 日"
                        type="date"
                        placeholder="選擇日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="家庭住址" :label-width="formLabelWidth" prop="address">
                    <el-input v-model="form.address" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="聯(lián)系方式" :label-width="formLabelWidth" prop="phone">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="closeForm('form')">取消</el-button>
            <el-button type="primary" @click="sure('form')">確認(rèn)</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { addStudent, getInfo, updateStudent, delinfo } from '@/api/api.js'

  export default {
    data() {
      return {
        tableData: [],
        dialogFormVisible: false,
        form: {
            name: '',
            age: '',
            sex: '1',
            father: '',
            mother: '',
            time: '',
            address: '',
            phone: ''
        },
        formLabelWidth: "80px",
        rules: {
            name: [{required: true, message: '請(qǐng)輸入姓名'}],
            age: [{required: true, message: '請(qǐng)輸入年齡'}],
            sex: [{required: true, message: '請(qǐng)選擇性別'}],
            time: [{required: true, message: '請(qǐng)選擇入校時(shí)間'}],
            address: [{required: true, message: '請(qǐng)輸入家庭住址'}],
            phone: [{required: true, message: '請(qǐng)輸入聯(lián)系方式'}]
        },
        total: 0,
        state: true
      }
    },
    created() {
        this.getData()
    },
    methods: {
        getData() {
            getInfo().then((res) => {
                if (res.data.status === 200) {
                    this.tableData = res.data.data
                    this.total = res.data.total
                }
            })
        },
        add(form) {
            this.state = true
            this.form = {
                name: '',
                age: '',
                sex: '1',
                father: '',
                mother: '',
                time: '',
                address: '',
                phone: ''
            }
            //this.$refs[form].resetFields()
            this.dialogFormVisible = true
        },
        edit(row) {
            this.state = false
            //此處需要擴(kuò)展賦值
            this.form = {...row}
            this.dialogFormVisible = true
        },
        del(row) {
            this.$alert("確定要?jiǎng)h除嗎？", "提示", {
                confirmButtonText: '確定',
                callback: () => {
                    delinfo(row.id).then(res => {
                        if (res.data.status === 200) {
                            this.getData()
                            this.$message({message: res.data.msg, type: "success"})
                        }
                    })
                }
            })
            delinfo
        },
        closeForm(form) {
            //清調(diào)校驗(yàn)規(guī)則
            this.$refs[form].resetFields()
            this.dialogFormVisible = false
        },
        sure(form) {
            this.$refs[form].validate(valid => {
                if (valid) {
                    console.log(form, this.form)
                    if (this.state) {
                        addStudent(this.form).then((res) => {
                            console.log(res)
                            if (res.data.status === 200) {
                                this.getData()
                                this.dialogFormVisible = false
                                this.$refs[form].resetFields()
                                this.$message({message: res.data.msg, type: "success"})
                            }
                        })
                    }
                    else {
                        updateStudent(this.form).then((res) => {
                            console.log(res)
                            if (res.data.status === 200) {
                                this.getData()
                                this.dialogFormVisible = false
                                this.$refs[form].resetFields()
                                this.$message({message: res.data.msg, type: "success"})
                            }
                        })
                    }
                    
                }
            })
        }
    }
  }
</script>

<style lang="scss">
.infoList {
        .demo-form-inline, .el-form-item {
            text-align: left;
        }
        .el-pagination {
            text-align: left;
            margin-top: 20px;
        }
    }
</style>

src/components/common/students/InfoLists.vue

<!-- 信息管理頁面 -->
<template>
    <div class="infoList">
        <!-- 新增表單 -->
        <el-form :inline="true" :model="form" class="demo-form-inline" size="small">
            <el-form-item>
                <el-button type="primary" @click="add('form')">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table
        :data="tableData"
        border
        style="width: 100%">
            <el-table-column
                prop="name"
                label="姓名"
                align="center">
            </el-table-column>
            <el-table-column
                prop="age"
                label="年齡"
                align="center">
            </el-table-column>
            <el-table-column
                prop="sex"
                label="性別"
                 align="center">
            </el-table-column>
            <el-table-column
                prop="father"
                label="父親"
                align="center">
            </el-table-column>
            <el-table-column
                prop="mother"
                label="母親"
                align="center">
            </el-table-column>
            <el-table-column
                prop="time"
                label="入校時(shí)間"
                align="center">
            </el-table-column>
            <el-table-column
                prop="address"
                label="家庭住址"
                align="center">
            </el-table-column>
            <el-table-column
                prop="phone"
                label="聯(lián)系方式"
                align="center">
            </el-table-column>
            <!-- scope.row表示點(diǎn)擊的當(dāng)前行，包含當(dāng)前行的所有數(shù)據(jù) -->
            <el-table-column
                label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="danger" size="mini" icon="el-icon-edit"
                    @click="edit(scope.row)">
                    </el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete"
                    @click="del(scope.row)">
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="state ? '添加學(xué)生信息' : '修改學(xué)生信息'" :visible.sync="dialogFormVisible" width="500px">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年齡" :label-width="formLabelWidth" prop="age">
                    <el-input v-model="form.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性別" :label-width="formLabelWidth" prop="sex">
                    <el-radio v-model="form.sex" label="1">男</el-radio>
                    <el-radio v-model="form.sex" label="2">女</el-radio>
                </el-form-item>
                <el-form-item label="父親" :label-width="formLabelWidth" prop="father">
                    <el-input v-model="form.father" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="母親" :label-width="formLabelWidth" prop="mother">
                    <el-input v-model="form.mother" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="入校時(shí)間" :label-width="formLabelWidth" prop="time">
                    <el-date-picker
                        v-model="form.time"
                        format="yyyy 年 MM 月 dd 日"
                        type="date"
                        placeholder="選擇日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="家庭住址" :label-width="formLabelWidth" prop="address">
                    <el-input v-model="form.address" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="聯(lián)系方式" :label-width="formLabelWidth" prop="phone">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="closeForm('form')">取消</el-button>
            <el-button type="primary" @click="sure('form')">確認(rèn)</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getData, changeInfo, delData } from '@/utils/table.js'

  export default {
    data() {
      return {
        tableData: [],
        dialogFormVisible: false,
        form: {
            name: '',
            age: '',
            sex: '1',
            father: '',
            mother: '',
            time: '',
            address: '',
            phone: ''
        },
        formLabelWidth: "80px",
        rules: {
            name: [{required: true, message: '請(qǐng)輸入姓名'}],
            age: [{required: true, message: '請(qǐng)輸入年齡'}],
            sex: [{required: true, message: '請(qǐng)選擇性別'}],
            time: [{required: true, message: '請(qǐng)選擇入校時(shí)間'}],
            address: [{required: true, message: '請(qǐng)輸入家庭住址'}],
            phone: [{required: true, message: '請(qǐng)輸入聯(lián)系方式'}]
        },
        total: 0,
        state: true
      }
    },
    created() {
        getData(this, '/api/getinfo')
    },
    methods: {
        add(form) {
            this.state = true
            this.form = {
                name: '',
                age: '',
                sex: '1',
                father: '',
                mother: '',
                time: '',
                address: '',
                phone: ''
            }
            //this.$refs[form].resetFields()
            this.dialogFormVisible = true
        },
        edit(row) {
            this.state = false
            //此處需要擴(kuò)展賦值
            this.form = {...row}
            this.dialogFormVisible = true
        },
        del(row) {
            console.log("row.id", row.id)
            delData(this, "/api/info/del/", row.id, getData, '/api/getinfo')
        },
        closeForm(form) {
            //清調(diào)校驗(yàn)規(guī)則
            this.$refs[form].resetFields()
            this.dialogFormVisible = false
        },
        sure(form) {
            this.$refs[form].validate(valid => {
                if (valid) {
                    console.log(form, this.form)
                    let url = ""
                    this.state ? url = '/api/info' : url = '/api/updateinfo'
                    changeInfo(this, 'post', url, this.form, getData, '/api/getinfo')
                }
            })
        }
    }
  }
</script>

<style lang="scss">
.infoList {
        .demo-form-inline, .el-form-item {
            text-align: left;
        }
        .el-pagination {
            text-align: left;
            margin-top: 20px;
        }
    }
</style>

src/components/common/students/StudentList.vue

<!-- 學(xué)生列表頁面 -->
<template>
    <div class="studentList">
        <!-- 查詢重置表單 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
            <el-form-item label="姓名">
                <el-input v-model="formInline.name" placeholder="姓名查詢"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onFind">查詢</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onReset">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 學(xué)生列表 -->
        <el-table
        :data="compData"
        border
        style="width: 100%">
            <el-table-column
                prop="name"
                label="姓名"
                align="center">
            </el-table-column>
            <el-table-column
                prop="age"
                label="年齡"
                align="center">
            </el-table-column>
            <el-table-column
                prop="sex_text"
                label="性別"
                 align="center">
            </el-table-column>
            <el-table-column
                prop="number"
                label="學(xué)號(hào)"
                align="center">
            </el-table-column>
            <el-table-column
                prop="class"
                label="班級(jí)"
                align="center">
            </el-table-column>
            <el-table-column
                prop="state_text"
                label="狀態(tài)"
                align="center">
            </el-table-column>
            <el-table-column
                prop="address"
                label="住址"
                align="center">
            </el-table-column>
            <el-table-column
                prop="phone"
                label="電話"
                align="center">
            </el-table-column>
            <!-- scope.row表示點(diǎn)擊的當(dāng)前行，包含當(dāng)前行的所有數(shù)據(jù) -->
            <el-table-column
                label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="danger" size="mini" icon="el-icon-delete"
                    @click="del(scope.row)">
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
import { students, delstudentsbyreqid } from '@/api/api.js'

  export default {
    data() {
      return {
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        formInline: {
            name: ''
        }
      }
    },
    computed: {
        compData() {
            return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
        }
    },
    created() {
        this.getData()
    },
    methods: {
        onFind() {
            console.log(this.formInline)
            this.getData(this.formInline)
        },
        onReset() {
            console.log(this.formInline)
            this.formInline = {}
            this.getData(this.formInline)
        },
         handleSizeChange(val) {
            this.pageSize = val
            this.currentPage = 1
        },
        handleCurrentChange(val) {
            this.currentPage = val
        },
        getData(param) {
            students(param).then((res) => {
                console.log(res)
                if (res.data.status === 200) {
                    this.total = res.data.total
                    this.tableData = res.data.data
                    this.tableData.forEach(item => {
                        //盡量不要修改原始數(shù)據(jù)，因?yàn)樵紨?shù)據(jù)后面可能會(huì)用
                        item.sex === 1 ? item.sex_text = "男" : item.sex_text = "女"
                        item.state === 1 ? item.state_text = "已入學(xué)" : item.state === 2
                        ? item.state_text = "未入學(xué)" : item.state_text = "休學(xué)中"
                    })
                }
            })
        },
        del(row) {
            console.log(row, row.id, row.address)
            delstudentsbyreqid(row.id).then((res) => {
                console.log(res)
                if (res.data.status === 200) {
                    this.$message({message: "刪除數(shù)據(jù)成功", type: "success"})
                    //刪除成功后再重新請(qǐng)求一次
                    this.getData()
                }
            })
        },
        onSubmit() {
            console.log('submit!')
        }
    }
  }
</script>

<style>
    .studentList {
        .demo-form-inline, .el-form-item {
            text-align: left;
        }
        .el-pagination {
            text-align: left;
            margin-top: 20px;
        }
    }
</style>

src/components/common/students/WorkList.vue

<!-- 作業(yè)列表頁面 -->
<template>
    <div class="workList">
       <el-table :data="tableData" v-loading="loading" border style="width: 100%">
            <el-table-column
                prop="id"
                label="用戶ID"
                align="center">
            </el-table-column>
            <el-table-column
                prop="userId"
                label="所屬班級(jí)"
                align="center">
            </el-table-column>
            <el-table-column
                prop="title"
                label="作業(yè)名稱"
                 align="center">
            </el-table-column>
            <el-table-column
                prop="completed_text"
                label="完成情況"
                align="center">
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
import { getTableData } from '@/utils/table.js'

  export default {
    data() {
      return {
        tableData: [],
        total: 0,
        page: 1,
        size: 10,
        loading: true
      }
    },
    created() {
        //采用后端分頁方法
        getTableData(this, '/api/works', {page: this.page, size: this.size}, ['completed'])
    },
    methods: {
         handleSizeChange(val) {
            this.size = val
            this.page = 1
            getTableData(this, '/api/works', {page: this.page, size: val}, ['completed'])
        },
        handleCurrentChange(val) {
            this.page = val
            getTableData(this, '/api/works', {page: val, size: this.size}, ['completed'])
        },
    }
  }
</script>

<style lang="scss">
    .workList {
        .el-pagination {
            text-align: left;
            margin-top: 20px;
        }
    }
</style>

src/components/common/students/WorkMent.vue

<!-- 作業(yè)管理頁面 -->
<template>
    <div class="workMent">
       <el-table :data="tableData" v-loading="loading" border style="width: 100%">
            <el-table-column
                prop="id"
                label="用戶ID"
                align="center">
            </el-table-column>
            <el-table-column
                prop="userId"
                label="所屬班級(jí)"
                align="center">
            </el-table-column>
            <el-table-column
                prop="title"
                label="作業(yè)名稱"
                 align="center">
            </el-table-column>
            <el-table-column
                prop="completed_text"
                label="完成情況"
                align="center">
            </el-table-column>
        </el-table>
        <!-- 通過傳參調(diào)用分頁子組件 模塊化和組件化思想 total url由當(dāng)前頁面?zhèn)鬟f給子組件Page -->
        <Page :total="total" :url="url" />
    </div>
</template>

<script>
import Page from '../Pageing.vue'

  export default {
    //注冊(cè)分頁組件Page
    components: {
        Page
    },
    data() {
      return {
        tableData: [],
        total: 0,
        loading: true,
        url: '/api/works'
      }
    }
  }
</script>

<style lang="scss">
    .workMent {
        .el-pagination {
            text-align: left;
            margin-top: 20px;
        }
    }
</style>

src/components/common/Breadcrumb.vue

<template>
    <div class="footer">
        <!-- el-card包裹是為了好看而已  組件中屬性名前面:表明該屬性的值是動(dòng)態(tài)獲取的-->
        <el-card>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
                <el-breadcrumb-item v-for="(item, index) in $route.matched" :key="index">
                {{item.name}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </el-card>
    </div>
</template>

src/components/common/Footer.vue

<template>
    <div class="footer">
        <el-card> 
            welcome to 2023
        </el-card>
    </div>
</template>
  
<script>
    export default {
        data() {
            return {}
        }
    }
</script>
  
<style lang='scss'>


</style>

src/components/common/Header.vue

<template>
    <div class="header">
        <el-header>
            <div class="title">業(yè)務(wù)后臺(tái)管理系統(tǒng)</div>
            <div>{{name}}</div>
        </el-header>
    </div>
</template>
  
<script>
import { getToken } from '@/utils/dealtoken.js'
export default {
    data() {
        return {
            name: ""
        }
    },
    created() {
        this.name = getToken('username')
    }
}
</script>
  
<style lang='scss'>
.header {
    .el-header {
        background-color: #409eff;
        color: #333;
        text-align: center;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
        .title {
            width: 200px;
            font-size: 24px;
        }
    }
}
</style>

src/components/common/Menu.vue

<template>
    <div class="menu">
        <el-aside width="200px"> 
            <el-menu
                router
                default-active="2"
                class="el-menu-vertical-demo"
                background-color="#409eff"
                text-color="#fff"
                active-text-color="#ffd04b">
                <template v-for="(item, index) in menus">
                    <el-submenu :index="index + ''" :key="index" v-if="!item.hidden">
                        <template slot="title">
                        <i :class="item.iconClass"></i>
                        <span>{{item.name}}</span>
                        </template>
                        <el-menu-item-group v-for="(child, index) in item.children" :key="index">
                            <el-menu-item :index="child.path">
                            <i :class="item.iconClass"></i>
                            {{child.name}}
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </template>
            </el-menu>
        </el-aside>  
    </div>
</template>
  
<script>
    export default {
        data() {
            return {
                menus: []
            }
        },
        created() {
            console.log(this.$router.options.routes)
            this.menus = [...this.$router.options.routes]
        }
    }
</script>
  
<style lang='scss'>
.menu {
    .el-aside {
        height: 100%;
        .el-menu {
            height: 100%;
            .fa {
                margin-right: 10px;
            }
        }
        //解決左右
        .el-submenu .el-menu-item {
            min-width: 0;
        }
    }
}
</style>

src/components/common/Pageing.vue （封裝的分頁組件）

<!-- 分頁管理組件封裝 -->
<!-- 為了多個(gè)頁面復(fù)用，將路由引入 :url="url" -->
<template>
  <div class="pageMent">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :url="url">
    </el-pagination>
  </div>
</template>

<script>
import { getTableData } from '@/utils/table.js'

  export default {
    //校驗(yàn)外部傳入?yún)?shù)，props用來接收父組件傳遞進(jìn)來的參數(shù)
    props: {
        "total": Number,
        "url": String
    },
    data() {
      return {
        page: 1,    //當(dāng)前頁
        size: 10   //每頁顯示條數(shù)
      }
    },
    created() {
        //console.log("this", this)
        //采用后端分頁方法，this.$parent代表父頁面
        getTableData(this.$parent, this.url, {page: this.page, size: this.size}, ['completed'])
    },
    methods: {
         handleSizeChange(val) {
            this.size = val
            this.page = 1
            getTableData(this.$parent, this.url, {page: this.page, size: val}, ['completed'])
        },
        handleCurrentChange(val) {
            this.page = val
            getTableData(this.$parent, this.url, {page: val, size: this.size}, ['completed'])
        },
    }
  }
</script>

<style lang="scss">
    .pageMent {
        .el-pagination {
            text-align: left;
            margin-top: 20px;
        }
    }
</style>

src/components/Home.vue

<template>
  <div class="home">
    <Header />
    <el-container class="content">
      <Menu />
      <el-container>
        <Bread />
        <el-main>
          <div class="cont">
            <!-- 添加菜單路由出口 -->
            <router-view>
            </router-view>
          </div>
        </el-main>
        <el-footer><Footer /></el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Menu from "@/components/common/Menu"
import Footer from "./common/Footer.vue"
import Header from "./common/Header.vue"
import Bread from "./common/Breadcrumb.vue"

export default {
  components: {
    Header,
    Footer,
    Menu,
    Bread
  },
  data() {
      return {}
  }
}
</script>

<style lang="scss">
    .home {
      width: 100%;
      height: 100%;
      .content {
        position: absolute;
        width: 100%;
        top: 60px;
        bottom: 0;
        .cont {
          margin: 20px 0;
        }
      }
    }
//@import url('../assets/css/reset.css')
</style>

src/components/Login.vue

<template>
  <div class="login">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>業(yè)務(wù)后臺(tái)管理系統(tǒng)</span>
        </div>

        <el-form label-width="100px" :model="form" ref="form" :rules='rules'>
            <el-form-item label="用戶名" prop='username'>
                <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密碼" prop='password'>
                <el-input type='password' v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type='primary' @click="login('form')">登錄</el-button>
            </el-form-item>
        </el-form>
    </el-card>
  </div>
</template>

/*
原生AJAX和Axios在使用上存在一定的區(qū)別。Axios可以支持多種方式，包括瀏覽器環(huán)境、node環(huán)境，而AJAX則只能在瀏覽器環(huán)境中使用。
Axios還支持多種請(qǐng)求方式,包括GET、POST、PUT、DELETE等；而AJAX只能支持GET和POST方式發(fā)送請(qǐng)求。此外，Axios還可以攔截請(qǐng)求和響應(yīng)。
*/

<script>

//登錄驗(yàn)證的封裝
import {login} from '@/api/api.js'
import {nameRule, passRule} from '../utils/validate.js'
import {setToken} from '@/utils/dealtoken.js'

export default {
  data () {
    return {
        form: {
            username: "",
            password: ""
        },
        rules: {
            username: [{validator: nameRule, required: true, trigger: "blur"}],
            password: [{validator: passRule, required: true, trigger: "blur"}]
        }
    }
  },
  methods: {
    login(form) {
        this.$refs[form].validate((valid) => {
            if (valid) {
                console.log(this.form)

                login(this.form).then(res => {
                    if (res.data.status === 200) {
                        setToken('token', res.data.token)
                        setToken('username', res.data.Name)
                        this.$message({message: res.data.msg, type: 'success'})
                        this.$router.push('/home')
                    }
                })
            } else {
                console.error(this.form)
            }
        })
    }
  }
}
</script>

<style lang='scss'>
    .login {
        width: 100%;
        height: 100%;
        position: absolute;
        //background: #409EFF;
        background: url('../assets/logo.png') center no-repeat;
        .el-card {
            background: #65768557;
        }
        .box-card {
            width: 450px;
            margin: 200px auto;
            color: #fff;
            .el-form .el-form-item_label {
                color: #fff;
            }
            .el-card_header {
                font-size: 34px;
            }
            .el-button {
                width: 100%;
            }
        }
    }
</style>

src/components/NotFound.vue

<template>
    <div class="notfound">
        <div class="big">頁面不見了！</div>
        <div>首頁瞧瞧，點(diǎn)擊<router-link to="/">這里</router-link>進(jìn)入首頁.</div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {};
    },
  };
  </script>
  
  <style lang='scss'>
  .notfound {

     width: 100%;
        height: 100%;
        position: absolute;
        background: #409EFF;
        background: url('../assets/404page.jpg') center no-repeat;
  }
  
  </style>

src/router/index.js

import Vue from 'vue'
import Home from '@/components/Home'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/login', hidden: true, component: () => import('@/components/Login') },
  { path: '/login', name: 'Login', hidden: true, component: () => import('@/components/Login') },
  { path: '/home', 
    name: '學(xué)生管理',
    iconClass: 'fa fa-users',
    redirect: '/home/student',
    component: Home,
    children: [
      {
        path: '/home/student',
        name: '學(xué)生列表',
        iconClass: 'fa fa-list',
        component: () => import('@/components/common/students/StudentList')
      },
      {
        path: '/home/info',
        name: '信息列表',
        iconClass: 'fa fa-list-alt',
        component: () => import('@/components/common/students/InfoList')
      },
      {
        path: '/home/infoman',
        name: '信息管理',
        iconClass: 'fa fa-list-alt',
        component: () => import('@/components/common/students/InfoLists')
      },
      {
        path: '/home/work',
        name: '作業(yè)列表',
        iconClass: 'fa fa-list-ul',
        component: () => import('@/components/common/students/WorkList')
      },
      {
        path: '/home/works',
        name: '作業(yè)管理',
        iconClass: 'fa fa-th-list',
        component: () => import('@/components/common/students/WorkMent')
      }
    ]
  },
  { path: '/data', 
    name: '數(shù)據(jù)分析',
    iconClass: 'fa fa-bar-chart',
    component: Home,
    children: [
      {
        path: '/data/dataview',
        name: '數(shù)據(jù)概覽',
        iconClass: 'fa fa-line-chart',
        component: () => import('@/components/common/dataanalyse/DataView')
      },
      {
        path: '/data/mapview',
        name: '視圖概覽',
        iconClass: 'fa fa-line-chart',
        component: () => import('@/components/common/dataanalyse/MapView')
      },
      {
        path: '/data/score',
        name: '分?jǐn)?shù)視圖',
        iconClass: 'fa fa-line-chart',
        component: () => import('@/components/common/dataanalyse/ScoreMap')
      },
      {
        path: '/data/travel',
        name: '旅游視圖',
        iconClass: 'fa fa-line-chart',
        component: () => import('@/components/common/dataanalyse/TravelMap')
      }
    ]
  },
  { path: '/users', 
    name: '用戶中心',
    iconClass: 'fa fa-user',
    component: Home,
    children: [
      {
        path: '/users/user',
        name: '數(shù)據(jù)概覽',
        iconClass: 'fa fa-user',
        component: () => import('@/components/common/users/User')
      }]
  },
  { path: '*', name: 'NotFound',  hidden: true, component: () => import('@/components/NotFound') }
]


export default new VueRouter({
  mode: 'history',
  routes: routes
})

src/utils/dealtoken.js

// Token的封裝 Token存放在localStorage
export function setToken(tokenkey, token) {
    console.log(tokenkey, token)
    return localStorage.setItem(tokenkey, token)
}

export function getToken(tokenkey) {
    console.log(tokenkey)
    return localStorage.getItem(tokenkey)
}

export function removeToken(tokenkey) {
    return localStorage.removeItem(tokenkey)
}

src/utils/table.js

//表格操作封裝

import { call } from "file-loader"

//獲取表格數(shù)據(jù)
export function getData (root, url, params) {
    root.service.get(url, {params: params || {}})
    .then(res => {
        if (res.data.status === 200) {
            root.tableData = res.data.data
            root.total = res.data.total
        }
    })
    .catch(err => {
        throw err
    })
}

//新增或修改表格數(shù)據(jù)
export function changeInfo (root, method, url, form, callback, callurl) {
    root.service[method](url, form)
    .then(res => {
        if (res.data.status === 200) {
            callback(root, callurl)
            root.dialogFormVisible = false
            root.$refs['form'].resetFields()
            root.$message({message: res.data.msg, type: "success"})
        }
    })
    .catch(err => {
        throw err
    })
}

//刪除方法封裝
export function delData (root, url, id, callback, callurl) {
    root.$alert("確定要?jiǎng)h除嗎？", "提示", {
        confirmButtonText: '確定',
        callback: () => {
            root.service.get(url + id).then(res => {
                if (res.data.status === 200) {
                    callback(root, callurl)
                    root.$message({message: res.data.msg, type: "success"})
                }
            })
        }
    })
    .catch(err => {
        throw err
    })
}

//作業(yè)列表獲取數(shù)據(jù)封裝
export function getTableData (root, url, params, arr) {
    root.service.get(url, {params: params || {}})
    .then(res => {
        if (res.data.status === 200) {
            root.tableData = res.data.data
            root.total = res.data.total
            root.tableData.map(item => {
                arr.map(aItem => [
                    item[aItem] ? item[aItem + '_text'] = '是' :  item[aItem + '_text'] = '否'
                ])
            })
            root.loading = false
        }
    })
    .catch(err => {
        throw err
    })
}

src/utils/validate.js

//用戶名匹配
export function nameRule (rule, value, callback) {
    let reg = /(^[a-zA-Z0-9]{4,10}$)/;
    if (value === "") {
        callback(new Error("請(qǐng)輸入用戶名"));
    } else if (!reg.test(value)) {
        callback(new Error("請(qǐng)輸入4-10用戶名"));
    } else {
        callback();
    }
}

//密碼匹配
export function passRule (rule, value, callback) {
    let pass = /^\S*(?=\S{6,12})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/;
    if (value === "") {
        callback(new Error("請(qǐng)輸入密碼"));
    } else if (!pass.test(value)) {
        callback(new Error("請(qǐng)輸入6-12位密碼需要包含大小寫和數(shù)字及特殊字符"));
    } else {
        callback();
    }
}

src/App.vue

<template>
<div>
<router-view></router-view>
</div>
</template>

src/main.js

import Vue from 'vue'
import App from './App'
import 'font-awesome/css/font-awesome.min.css'
//import axios from 'axios'
import router from './router'
import service from './service'

// 掛載到原型就可以全局使用
//Vue.prototype.axios = axios
Vue.prototype.service = service
//Vue.config.productionTip = false

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)


new Vue({
  router,
  render: h => h(App)
}).$mount('#myapp')

src/service.js

import axios from "axios";
import { getToken } from "@/utils/dealtoken.js"
import { Promise } from 'core-js'
import { Message } from "element-ui";

// axios二次封裝

const service = axios.create({
    // baseURL還可以使用代理
    baseURL: 'http://127.0.0.1:8181', 
    timeout: 3000
})

// 請(qǐng)求攔截器
service.interceptors.request.use((config) => {
    //對(duì)請(qǐng)求做一些額外處理
    config.headers['token'] = getToken('token')
    config.headers['username'] = getToken('username')
    return config
}, (error) => {
    return Promise.reject(error)
})


// 響應(yīng)攔截器
service.interceptors.response.use((response) => {
    //對(duì)響應(yīng)做一些處理
    let {status, msg} = response.data
    if (status != 200) {
        Message({message: msg || 'error', type: 'warning'})
    }
    console.log(response, status, msg)
    return response
}, (error) => {
    return Promise.reject(error)
})

export default service

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>demo</title>
  </head>
  <body>
    <div id="myapp"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3.后端代碼

3.1 代碼結(jié)構(gòu)

3.2 代碼實(shí)現(xiàn)

controller/login.go

package controller

import (
	"encoding/json"
	"fmt"
	"io/ioutil"
	"net/http"
	"path/filepath"

	"github.com/gin-gonic/gin"
)

// post  http://127.0.0.1:8181/login
// axios.post 和 post json處理
func LoginPost(ctx *gin.Context) {
	fmt.Println("ctx", ctx)
	fmt.Println("ctx.Request", ctx.Request)
	version := ctx.DefaultQuery("version", "V1.0.0.1")
	//前端使用axios直接傳遞form時(shí),axios會(huì)默認(rèn)使用json,必須使用下面方式獲取json數(shù)據(jù),解析后再使用
	data, _ := ioutil.ReadAll(ctx.Request.Body)
	fmt.Println("data", data)
	type UserInfo struct {
		Username string
		Password string
	}
	var u UserInfo
	err := json.Unmarshal(data, &u)
	if err != nil {
		fmt.Println(err)
	}
	username := u.Username
	password := u.Password

	fmt.Println("login info:: ", version, username, password)

	if username == "123456" && password == "1234abcdE@" {
		ctx.JSON(http.StatusOK, gin.H{
			"status":   200,
			"Name":     username,
			"Password": password,
			"msg":      "登錄成功",
			"token":    "abcd1234ABCD",
		})
	} else {
		ctx.JSON(http.StatusOK, gin.H{
			"status":   -1,
			"Name":     username,
			"Password": password,
			"msg":      "用戶名或密碼錯(cuò)誤",
		})
	}
}

// http://127.0.0.1:8181/formlogin
// form表單提交處理 application/x-www-form-urlencoded 或者 application/form-data
func FormLoginPost(ctx *gin.Context) {
	fmt.Println("ctx", ctx)
	fmt.Println("ctx.Request", ctx.Request)
	username := ctx.PostForm("username")
	password := ctx.PostForm("password")

	fmt.Println("FormLoginPost :: ", username, password)

	if username == "123456" && password == "1234abcdE@" {
		ctx.JSON(http.StatusOK, gin.H{
			"status":   200,
			"Name":     username,
			"Password": password,
			"msg":      "登錄成功",
			"token":    "abcd1234ABCD",
		})
	} else {
		ctx.JSON(http.StatusOK, gin.H{
			"status":   -1,
			"Name":     username,
			"Password": password,
			"msg":      "用戶名或密碼錯(cuò)誤",
		})
	}
}

// form表單提交文件上傳處理 multipart/form-data
func UploadFile(ctx *gin.Context) {
	file, _ := ctx.FormFile("uploadfile")
	fmt.Println(file.Filename)
	file_path := "upload/" + filepath.Base(file.Filename)
	fmt.Println(file_path)
	ctx.SaveUploadedFile(file, file_path)
	ctx.String(http.StatusOK, "上傳成功")
}

controller/student.go

package controller

import (
	"encoding/json"
	"fmt"
	"io/ioutil"
	"net/http"

	"github.com/gin-gonic/gin"
)

/*
type User struct {
	Name string `json:"name"`
	Age int `json:"age"`
}

user := User{"Tom", 18}
jsonData, err := json.Marshal(user)
if err != nil {
c.AbortWithError(500, err)
}
c.Data(200, "application/json", jsonData)
*/

/*
在 Go 語言中，可以使用內(nèi)置的 copy 函數(shù)來將數(shù)組轉(zhuǎn)換為切片。
// 將 arr 轉(zhuǎn)換為切片
arr := [3]int{1, 2, 3}
sl := make([]int, len(arr))
copy(sl, arr[:])

// 將切片轉(zhuǎn)換為數(shù)組
var arr2 [3]int
copy(arr2[:], sl)
*/

var students = []map[string]interface{}{
	{"id": 1, "name": "張三", "age": 10, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "北京市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 2, "name": "李四", "age": 11, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 2, "address": "天津市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 3, "name": "王五", "age": 12, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 3, "address": "上海市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 4, "name": "趙六", "age": 9, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "重慶市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 5, "name": "張三", "age": 10, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "北京市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 6, "name": "李四", "age": 11, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 2, "address": "天津市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 7, "name": "王五", "age": 12, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 3, "address": "上海市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 8, "name": "趙六", "age": 9, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "重慶市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 9, "name": "張三", "age": 10, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "北京市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 10, "name": "李四", "age": 11, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 2, "address": "天津市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 11, "name": "王五", "age": 12, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 3, "address": "上海市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 12, "name": "趙六", "age": 9, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "重慶市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 13, "name": "張三", "age": 10, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "北京市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 14, "name": "李四", "age": 11, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 2, "address": "天津市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 15, "name": "王五", "age": 12, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 3, "address": "上海市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 16, "name": "趙六", "age": 9, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "重慶市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 17, "name": "張三", "age": 10, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "北京市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 18, "name": "李四", "age": 11, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 2, "address": "天津市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 19, "name": "王五", "age": 12, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 3, "address": "上海市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 20, "name": "趙六", "age": 9, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "重慶市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 21, "name": "張三", "age": 10, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "北京市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 22, "name": "李四", "age": 11, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 2, "address": "天津市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 23, "name": "王五", "age": 12, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 3, "address": "上海市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 24, "name": "趙六", "age": 9, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "重慶市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 25, "name": "張三", "age": 10, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "北京市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 26, "name": "李四", "age": 11, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 2, "address": "天津市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 27, "name": "王五", "age": 12, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 3, "address": "上海市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 28, "name": "趙六", "age": 9, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "重慶市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 29, "name": "張三", "age": 10, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "北京市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 30, "name": "李四", "age": 11, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 2, "address": "天津市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 31, "name": "王五", "age": 12, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 3, "address": "上海市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 32, "name": "趙六", "age": 9, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "重慶市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 33, "name": "張三", "age": 10, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "北京市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 34, "name": "李四", "age": 11, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 2, "address": "天津市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 35, "name": "王五", "age": 12, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 3, "address": "上海市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 36, "name": "趙六", "age": 9, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "重慶市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 37, "name": "張三", "age": 10, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "北京市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 38, "name": "李四", "age": 11, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 2, "address": "天津市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 39, "name": "王五", "age": 12, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 3, "address": "上海市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 40, "name": "趙六", "age": 9, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "重慶市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 41, "name": "張三", "age": 10, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "北京市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 42, "name": "李四", "age": 11, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 2, "address": "天津市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 43, "name": "王五", "age": 12, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 3, "address": "上海市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 44, "name": "趙六", "age": 9, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "重慶市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 45, "name": "張三", "age": 10, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "北京市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 46, "name": "李四", "age": 11, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 2, "address": "天津市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 47, "name": "王五", "age": 12, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 3, "address": "上海市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 48, "name": "趙六", "age": 9, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "重慶市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 47, "name": "張三", "age": 10, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "北京市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 50, "name": "李四", "age": 11, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 2, "address": "天津市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 51, "name": "王五", "age": 12, "sex": 2, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 3, "address": "上海市 朝陽區(qū)", "phone": "18818812345"},
	{"id": 52, "name": "趙六", "age": 9, "sex": 1, "time": "2023-08-05", "father": "爸爸", "mother": "媽媽", "number": 2, "class": 2, "state": 1, "address": "重慶市 朝陽區(qū)", "phone": "18818812345"},
}

// get  http://127.0.0.1:8181/api/students
func GetStudentList(ctx *gin.Context) {
	name := ctx.Query("name")
	fmt.Println("name :: ", name)
	//sex: 1 -> 男 2 -> 女
	//state: 1:已入學(xué) 2:未入學(xué) 3:休學(xué)中
	selstudents := []map[string]interface{}{}
	if len(name) != 0 {
		for index, value := range students {
			if value["name"] == name {
				selstudents = append(selstudents, students[index])
			}
		}
	} else {
		for index, _ := range students {
			selstudents = append(selstudents, students[index])
		}
	}
	/*
		selstudents := list.New()
		if len(name) != 0 {
			for _, value := range students {
				if value["name"] == name {
					selstudents.PushBack(value)
				}
			}
		} else {
			for _, value := range students {
				selstudents.PushBack(value)
			}
		}
		selstudents.Len()
	*/

	ctx.JSON(http.StatusOK, gin.H{
		"status": 200,
		"msg":    "獲取學(xué)生信息成功",
		"data":   selstudents,
		"total":  len(selstudents),
	})
}

// GET請(qǐng)求 http://127.0.0.1:8181/api/students/del?id=1
func DelStudent(ctx *gin.Context) {
	id := ctx.Query("id")
	fmt.Println("del student id :: ", id)
	ctx.JSON(http.StatusOK, gin.H{
		"status": 200,
		"msg":    "刪除學(xué)生信息成功",
		"id":     id,
	})
}

// GET請(qǐng)求 http://127.0.0.1:8181/api/students/del/1
func DelStudentByReq(ctx *gin.Context) {
	// 使用Param獲取URL參數(shù)
	id := ctx.Param("id")
	// 返回請(qǐng)求參數(shù)
	ctx.JSON(200, gin.H{
		"status": 200,
		"msg":    "刪除學(xué)生信息成功",
		"id":     id,
	})
}

type UserInfo struct {
	Name    string //`json:"name"`
	Age     string //`json:"age"`
	Sex     string //`json:"sex"`
	Father  string //`json:"father"`
	Mother  string //`json:"mother"`
	Time    string //`json:"time"`
	Address string //`json:"address"`
	Phone   string //`json:"phone"`
}

func AddStudent(ctx *gin.Context) {
	data, _ := ioutil.ReadAll(ctx.Request.Body)

	var u UserInfo
	err := json.Unmarshal(data, &u)
	if err != nil {
		fmt.Println(err)
	}

	fmt.Println("AddStudent :: ", u.Name, u.Age, u.Sex, u.Father, u.Mother, u.Time, u.Address, u.Phone)

	ctx.JSON(http.StatusOK, gin.H{
		"status": 200,
		"name":   u.Name,
		"msg":    "增加成功",
	})

}

// get  http://127.0.0.1:8181/api/getinfo
func GetInfo(ctx *gin.Context) {
	name := ctx.Query("name")
	fmt.Println("name :: ", name)
	//sex: 1 -> 男 2 -> 女
	//state: 1:已入學(xué) 2:未入學(xué) 3:休學(xué)中
	selstudents := []map[string]interface{}{}
	if len(name) != 0 {
		for index, value := range students {
			if value["name"] == name {
				selstudents = append(selstudents, students[index])
			}
		}
	} else {
		for index, _ := range students {
			selstudents = append(selstudents, students[index])
		}
	}

	ctx.JSON(http.StatusOK, gin.H{
		"status": 200,
		"msg":    "獲取學(xué)生信息成功",
		"data":   selstudents,
		"total":  len(selstudents),
	})
}

func UpdateStudent(ctx *gin.Context) {
	data, _ := ioutil.ReadAll(ctx.Request.Body)

	var u UserInfo
	err := json.Unmarshal(data, &u)
	if err != nil {
		fmt.Println(err)
	}

	fmt.Println("UpdateStudent :: ", u.Name, u.Age, u.Sex, u.Father, u.Mother, u.Time, u.Address, u.Phone)

	ctx.JSON(http.StatusOK, gin.H{
		"status": 200,
		"name":   u.Name,
		"msg":    "修改成功",
	})

}

// GET請(qǐng)求 http://127.0.0.1:8181/api/info/del/1
func DelIfo(ctx *gin.Context) {
	// 使用Param獲取URL參數(shù)
	id := ctx.Param("id")
	// 返回請(qǐng)求參數(shù)
	ctx.JSON(200, gin.H{
		"status": 200,
		"msg":    "刪除信息成功",
		"id":     id,
	})
}

var works = []map[string]interface{}{
	{"id": 1, "userId": 110, "title": "JS", "completed": true},
	{"id": 2, "userId": 111, "title": "C++", "completed": false},
	{"id": 3, "userId": 112, "title": "Java", "completed": true},
	{"id": 4, "userId": 113, "title": "Golang", "completed": false},
	{"id": 1, "userId": 110, "title": "JS", "completed": true},
	{"id": 2, "userId": 111, "title": "C++", "completed": false},
	{"id": 3, "userId": 112, "title": "Java", "completed": true},
	{"id": 4, "userId": 113, "title": "Golang", "completed": false},
	{"id": 1, "userId": 110, "title": "JS", "completed": true},
	{"id": 2, "userId": 111, "title": "C++", "completed": false},
	{"id": 3, "userId": 112, "title": "Java", "completed": true},
	{"id": 4, "userId": 113, "title": "Golang", "completed": false},
	{"id": 1, "userId": 110, "title": "JS", "completed": true},
	{"id": 2, "userId": 111, "title": "C++", "completed": false},
	{"id": 3, "userId": 112, "title": "Java", "completed": true},
	{"id": 4, "userId": 113, "title": "Golang", "completed": false},
	{"id": 1, "userId": 110, "title": "JS", "completed": true},
	{"id": 2, "userId": 111, "title": "C++", "completed": false},
	{"id": 3, "userId": 112, "title": "Java", "completed": true},
	{"id": 4, "userId": 113, "title": "Golang", "completed": false},
	{"id": 1, "userId": 110, "title": "JS", "completed": true},
	{"id": 2, "userId": 111, "title": "C++", "completed": false},
	{"id": 3, "userId": 112, "title": "Java", "completed": true},
	{"id": 4, "userId": 113, "title": "Golang", "completed": false},
	{"id": 1, "userId": 110, "title": "JS", "completed": true},
	{"id": 2, "userId": 111, "title": "C++", "completed": false},
	{"id": 3, "userId": 112, "title": "Java", "completed": true},
	{"id": 4, "userId": 113, "title": "Golang", "completed": false},
}

// get請(qǐng)求，支持分頁查詢
func Works(ctx *gin.Context) {
	page := ctx.Query("page")
	size := ctx.Query("size")

	fmt.Println("Works :: ", page, size)
	//數(shù)據(jù)分頁處理

	ctx.JSON(200, gin.H{
		"status": 200,
		"msg":    "獲取作業(yè)成功",
		"data":   works,
		"total":  len(works),
	})
}

server.go

package main

import (
	"main/controller"
	"net/http"

	"github.com/gin-contrib/cors"
	"github.com/gin-gonic/gin"
)

/*
// 錯(cuò)誤： server.go:4:2: package main/controller is not in GOROOT (/home/tiger/go/go/src/main/controller)
go mod init main

//錯(cuò)誤： server.go:7:2: no required module provides package github.com/gin-gonic/gin; to add it:
go get github.com/gin-gonic/gin

//處理跨域框架
go get github.com/gin-contrib/cors
*/

/*
當(dāng)客戶端（尤其是基于 Web 的客戶端）想要訪問 API 時(shí)，服務(wù)器會(huì)決定允許哪些客戶端發(fā)送請(qǐng)求。這是通過使用稱為 CORS 來完成的，它代表跨源資源共享。
跨域資源共享 （CORS） 是一種機(jī)制，允許從提供第一個(gè)資源的域之外的另一個(gè)域請(qǐng)求網(wǎng)頁上的受限資源。
*/

func CrosHandler() gin.HandlerFunc {
	return func(context *gin.Context) {
		context.Writer.Header().Set("Access-Control-Allow-Origin", "*")
		context.Header("Access-Control-Allow-Origin", "*") // 設(shè)置允許訪問所有域
		context.Header("Access-Control-Allow-Methods", "POST,GET,OPTIONS,PUT,DELETE,UPDATE")
		context.Header("Access-Control-Allow-Headers", "Authorization, Content-Length, X-CSRF-Token, Token,session,X_Requested_With,Accept, Origin, Host, Connection, Accept-Encoding, Accept-Language,DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Pragma,token,openid,opentoken")
		context.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers,Cache-Control,Content-Language,Content-Type,Expires,Last-Modified,Pragma,FooBar")
		context.Header("Access-Control-Max-Age", "172800")
		context.Header("Access-Control-Allow-Credentials", "true")
		context.Set("content-type", "application/json") //設(shè)置返回格式是json
		//處理請(qǐng)求
		context.Next()
	}
}

// http://127.0.0.1:8181/ping
// http://127.0.0.1:8181/index
func main() {
	r := gin.Default()

	// 設(shè)置全局跨域訪問
	//r.Use(CrosHandler())

	//cors處理跨域
	corsConfig := cors.DefaultConfig()
	corsConfig.AllowCredentials = true
	corsConfig.AllowHeaders = []string{"content-type", "Origin", "token", "username"}
	corsConfig.AllowOrigins = []string{"http://localhost:8080", "http://localhost:8081"}
	corsConfig.AllowMethods = []string{"POST", "GET", "OPTIONS", "PUT", "DELETE", "UPDATE"}

	r.Use(cors.New(corsConfig))
	//r.Use(cors.Default())

	// 返回一個(gè)json數(shù)據(jù)
	r.GET("/ping", func(c *gin.Context) {
		c.JSON(200, gin.H{
			"message": "pong",
			"num":     888,
		})
	})

	// 返回一個(gè)html頁面
	r.LoadHTMLGlob("templates/*")
	r.GET("/index", func(c *gin.Context) {
		c.HTML(http.StatusOK, "index.html", nil)
	})

	r.POST("/login", controller.LoginPost)
	r.POST("/formlogin", controller.FormLoginPost)
	r.POST("/upload", controller.UploadFile)

	r.GET("/api/students", controller.GetStudentList)
	r.GET("/api/students/del", controller.DelStudent)
	r.GET("/api/students/del/:id", controller.DelStudentByReq)
	r.POST("/api/info", controller.AddStudent)
	r.GET("/api/getinfo", controller.GetInfo)
	r.POST("api/updateinfo", controller.UpdateStudent)
	r.GET("/api/info/del/:id", controller.DelIfo)
	r.GET("api/works", controller.Works)

	//r.Run()  // <===> r.Run(":8080")  監(jiān)聽并在 0.0.0.0:8080 上啟動(dòng)服務(wù)
	r.Run(":8181")
}

4.其他

4.1 vscode快速編寫正則表達(dá)式

安裝any-rule插件

ctrl shift p 調(diào)出正則表達(dá)式選擇文章來源地址http://www.zghlxwxcb.cn/news/detail-713705.html

到了這里，關(guān)于Vue系列第七篇：Element UI之el-main，el-table，el-dialog，el-pagination，el-breadcrumb等控件使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！