开卷资料5--vue

login.vue

<style scoped>
    .login {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 300px;
        background-color: #282c34;
    }

    .btn {
        width: 300px;
        height: 40px;
        margin: 20px auto;
        background-color: #61dafb;
        color: #fff;
    }

    .title {
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        line-height: 200px;
        color: #61dafb;
    }

    input {
        height: 30px;
        width: 200px;
        margin: 30px auto;
    }
    .username{
        padding-left: 20px;
        color: #fff;
    }
    .password{
        padding-left: 20px;
        color: #fff;
    }
</style>
<template>
    <div class="login">
        <div class="title">登录</div>
        <div class="username">账户：<input type="text" v-model="user.username"></div>
        <div class="password">密码：<input type="password" v-model="user.password"></div>
        <button class="btn" @click="login">登录</button>
    </div>
</template>
<script setup>
    import axios from 'axios'
    import { reactive, ref } from 'vue'
    let user = reactive({
        username: '',
        password: ''
    })
    const emit = defineEmits(['change'])
    function login() {
        axios({
            method: 'POST',
            url: 'http://114.67.241.121:8088/user/login',
            params: {
                username:user.username,
                password:user.password
            }
        }).then(value => {
            if(value.data.code==200){
                emit('change',value.data.data.token)
            }else{
                alert(value.data.msg)
            }
        }, reason => {
            alert(reason);
        })
    }
</script>

mainmenu.vue

<template>
    <Login v-if='isShow' @change="changeOne"></Login>
    <Student v-if="isShow == false" :token="token"></Student>
</template>
<script setup>
    import {ref} from 'vue'
    import Login from './Login.vue'
    import Student from './Student.vue'
    let isShow = ref(true)
    let token = ref('')
    function changeOne(tokens){
        isShow.value = false
        // console.log(typeof token);
        token.value = tokens
    }
</script>

student.vue

<template>
    <el-button @click="flag = false; dialogVisible = true;">
        新增
    </el-button>
    <el-dialog v-model="dialogVisible" title="新增/编辑" width="30%">
        <el-input v-model="input.new.stuaddess" placeholder="学校" clearable />
        <el-input v-model="input.new.stugender" placeholder="性别" clearable />
        <el-input v-model="input.new.stumajor" placeholder="专业" clearable />
        <el-input v-model="input.new.stugrade" placeholder="年级" clearable />
        <el-input v-model="input.new.stuname" placeholder="姓名" clearable />
        <el-input v-model="input.new.stunative" placeholder="地址" clearable />
        <el-input v-model="input.new.stuno" placeholder="学号" clearable />
        <el-input v-model="input.new.stuphone" placeholder="电话" clearable />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="close">返回</el-button>
                <el-button type="primary" @click="add();close()">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
    <el-table :data="tableData.data" border style="width: 100%">
        <el-table-column prop="stuid" label="ID" width="80px" />
        <el-table-column prop="stuname" label="姓名" width="80px" />
        <el-table-column prop="stugender" label="性别" width="80px" />
        <el-table-column prop="stugrade" label="年级" width="80px" />
        <el-table-column prop="stumajor" label="专业" width="80px" />
        <el-table-column prop="stuno" label="学号" width="80px" />
        <el-table-column prop="stuphone" label="电话" width="80px" />
        <el-table-column prop="stuaddess" label="地址" width="80px" />
        <el-table-column prop="stunative" label="籍贯" width="80px" />
        <el-table-column width="100px">
            <template #default="scope">
                <el-button @click="changeStudent(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
        <el-table-column width="90px">
            <template #default="scope">
            <el-button type="warning" @click="deleteStudent(scope.row.stuid)">删除</el-button>
        </template>
        </el-table-column>
    </el-table>
</template>
<script setup>
    import { onMounted, reactive, ref } from 'vue'
    import { defineProps, watch ,toRaw} from 'vue'
    import axios from 'axios'
    // let Authorization = ref('')
    let props = defineProps({
        token: {
            type: String,
            default: ''
        }
    })
    const tableData = reactive({
        data: []
    })
    onMounted(() => {
        getStudenList()
    })
    function getStudenList() {
        axios({
            method: 'GET',
            url: 'http://114.67.241.121:8088/stu/list',
            headers: {
                Authorization: props.token
            }
        }).then((value) => {
            // console.log(value);
            if (value.data.code == 200) {
                // console.log(value.data.data);
                tableData.data = value.data.data
            } else {
                console.log(value.data.msg)
            }
        }, (reason) => {
            console.log(reason);
        })
    }
    let dialogVisible = ref(false)
    function close() {
        dialogVisible.value = false
        input.new = input.old
    }
    let input = reactive({
        new: {
            stuaddess: '',
            stugender: '',
            stugrade: '',
            stuid: 0,
            stumajor: '',
            stuname: '',
            stunative: '',
            stuno: '',
            stuphone: '',
        },
        old: {
            stuaddess: '',
            stugender: '',
            stugrade: '',
            stuid: 0,
            stumajor: '',
            stuname: '',
            stunative: '',
            stuno: '',
            stuphone: '',
        }
    })
    function add() {
        let url
        if(flag.value==false){
            url = 'http://114.67.241.121:8088/stu/add'
        }else{
            url = 'http://114.67.241.121:8088/stu/edit'
        }
        axios({
            method: 'POST',
            url:url,
            headers: {
                Authorization: props.token
            },
            data: {
                ...input.new
            }
        }).then((value) => {
            // console.log(value);
            if (value.data.code == 200) {
                console.log(value.data.msg);
                getStudenList()
                input.new = input.old
                // tableData.data = value.data.data
            } else {
                console.log(value.data.msg)
            }
        }, (reason) => {
            console.log(reason);
        })
    }
    let flag = ref(false)
    function changeStudent(value) {
        console.log(toRaw(value));
        input.new = toRaw(value)
        flag.value = true
        dialogVisible.value = true
    }
    function deleteStudent(value){
        axios({
            method: 'POST',
            url: 'http://114.67.241.121:8088/stu/del',
            headers: {
                Authorization: props.token
            },
            params:{
                stuid:value
            }
        }).then((value) => {
            // console.log(value);
            if (value.data.code == 200) {
                console.log(value.data.msg);
                getStudenList()
            } else {
                console.log(value.data.msg)
            }
        }, (reason) => {
            console.log(reason);
        })
    }
</script>