权限

README.md

@@ -2,22 +2,22 @@
 
 ## Project setup
 ```
-yarn install
+npm install
 ```
 
 ### Compiles and hot-reloads for development
 ```
-yarn serve
+npm run serve
 ```
 
 ### Compiles and minifies for production
 ```
-yarn build
+npm run build
 ```
 
 ### Lints and fixes files
 ```
-yarn lint
+npm run lint
 ```
 
 ### Customize configuration

src/App.vue

@@ -1,10 +1,41 @@
 <template>
     <div id="app">
-    
         <router-view />
     </div>
 </template>
 
 <style>
-
 </style>
+
+<script>
+export default {
+    mounted() {
+        const token = localStorage.getItem("token");
+        console.log(token);
+        if (token) {
+            this.axios
+                .get("/getuserinfo", {
+                    params: {
+                        token: localStorage.getItem("token"),
+                    },
+                })
+                .then((res) => {
+                  console.log("jiekouqingqiuwan")
+                    if (res.data.data.length == 0) {
+                        localStorage.removeItem("token");
+                        this.$router.push("/login");
+                    } else {
+                        const a = {
+                            user: res.data.data[0].user,
+                            token: res.data.data.num_key,
+                        };
+                        this.$store.commit("setuserinfo", a);
+                    }
+                    // 验证这个用户
+                    // 不对 remove token 跳转到登录
+                    // 对 不做什么
+                });
+        }
+    },
+};
+</script>

src/main.js

@@ -5,7 +5,7 @@ import store from './store'
 import "./element-ui.js"
 import axios from "axios"
 Vue.config.productionTip = false
-axios.defaults.baseURL = 'http://127.0.0.1:3002';
+axios.defaults.baseURL = 'http://127.0.0.1:3003';
 Vue.prototype.axios = axios
 new Vue({
   router,

src/router/index.js

@@ -1,13 +1,13 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
+import store from "../store/index.js"
 
 Vue.use(VueRouter)
 
 const routes = [
   {
     path: '/',
-    name: 'Home',
     component: Home
   },
   {
@@ -21,9 +21,30 @@ const routes = [
   {
     path:"/login",
     component: ()=> import("@/views/Login.vue")
+  },
+  {
+    path:"/nav",
+    component: ()=>import("@/views/DaoHang.vue"),
+    children:[
+      {
+        path:"list",
+        component: ()=> import("@/views/List.vue")
+      },
+      {
+        path:"addstu",
+        component:()=>import("@/views/AddSTu.vue")
+      },
+      {
+        path:"stulist",
+        component:()=>import("@/views/StuList.vue")
+      },
+    ]
   }
 ]
 
+
+
+
 const router = new VueRouter({
   mode: 'history',
   base: process.env.BASE_URL,
@@ -31,5 +52,17 @@ const router = new VueRouter({
 })
 
 
+router.beforeEach((to,from,next)=>{
+  console.log(store.state.userinfo,"vuex");
+  if(store.state.userinfo.token !="" || localStorage.getItem("token")){
+    next()
+  }else if(to.path == "/login"){
+    next()
+  }else{
+    next("/login")
+  }
+})
+
+
 export default router
 

src/store/index.js

@@ -1,18 +1,51 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-
+import { Message } from 'element-ui';
 Vue.use(Vuex)
+import axios from "axios"
+import router from "../router/index.js"
 
 export default new Vuex.Store({
   state: {
-    count: 1
+    count: 1,
+    userinfo:{
+      token: "",
+      username: ""
+    }
   },
   mutations: {
     add(state){
       state.count++
+    },
+    setuserinfo(state,a){
+      state.userinfo = a
     }
   },
   actions: {
+    getuserinfo(context,info){
+      console.log(info)
+      axios
+      .get("/login", {
+          params: {
+              pwd: info.pwd,
+              user: info.user,
+          },
+      })
+      .then((res) => {
+          console.log(res.data);
+          if (res.data.code == 500) {
+            Message.error(res.data.msg);
+          }else{
+            Message({
+                  message: "登录成功",
+                  type: "success",
+              });
+              localStorage.setItem("token",res.data.data.num_key)
+              context.commit("setuserinfo",res.data.data)
+              router.push("/nav")
+          }
+      });
+    }
   },
   modules: {
   }

src/views/AddSTu.vue

@@ -0,0 +1,89 @@
+<template>
+    <div class="back">
+        <!-- {{ $store.state.userinfo }} -->
+        <div class="box">
+            <div>
+                <p>学生名：</p>
+                <el-input v-model="user" placeholder="请输入用户名"></el-input>
+            </div>
+            <div>
+                <p>密码：</p>
+                <el-input
+                    v-model="pwd"
+                    show-password
+                    placeholder="请输入密码"
+                ></el-input>
+            </div>
+            <div class="button">
+                <el-button @click="register" type="primary">添加</el-button>
+            </div>
+        </div>
+    </div>
+</template>
+<style scoped>
+.back {
+    background-image: url("../assets/1.jpg");
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-size: cover;
+}
+.box {
+    width: 400px;
+    height: 200px;
+    background-color: #fff;
+    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+}
+.box > div {
+    width: 80%;
+    display: flex;
+    align-items: center;
+}
+.box > div > p {
+    flex-shrink: 0;
+    width: 80px;
+}
+.button {
+    display: flex;
+    justify-content: flex-end;
+}
+</style>
+<script>
+export default {
+    data() {
+        return {
+            user: "",
+            pwd: "",
+        };
+    },
+    methods: {
+        register() {
+            this.axios
+                .get("/addstu", {
+                    params: {
+                        pwd: this.pwd,
+                        user: this.user,
+                    },
+                })
+                .then((res) => {
+                    console.log(res.data);
+                    if (res.data.code == 1) {
+                        this.$message.error("添加失败");
+                    } else {
+                        this.$message({
+                            message: "添加成功",
+                            type: "success",
+                        });
+                    }
+                });
+        },
+    },
+};
+</script>

src/views/DaoHang.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="box">
+        <div>
+            <el-menu
+                default-active="2"
+                class="el-menu-vertical-demo"
+                @select="nav"
+            >
+                <el-menu-item index="list">
+                    <i class="el-icon-menu"></i>
+                    <span slot="title">用户列表</span>
+                </el-menu-item>
+                <el-submenu index="1">
+                    <template slot="title">
+                        <i class="el-icon-location"></i>
+                        <span>学生管理</span>
+                    </template>
+                  
+                    <el-menu-item index="stulist">学生列表</el-menu-item>
+                    <el-menu-item index="addstu">添加学生</el-menu-item>
+                    
+                </el-submenu>
+                
+            </el-menu>
+        </div>
+        <div>
+            <router-view></router-view>
+        </div>
+    </div>
+</template>
+<style scoped>
+.box {
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+}
+.box > div:first-child {
+    width: 200px;
+    height: 100%;
+    flex-shrink: 0;
+}
+.box > div:last-child{
+    width: 100%;
+}
+</style>
+<script>
+export default {
+    methods:{
+        nav(index){
+            console.log(index)
+            this.$router.push("/nav/" + index)
+        }
+    }
+};
+</script>

src/views/List.vue

@@ -0,0 +1,107 @@
+<template>
+    <div class="box">
+        <el-table :data="tableData" style="width: 100%">
+            <el-table-column prop="num_key" label="ID" width="180">
+            </el-table-column>
+            <el-table-column prop="user" label="用户名" width="180">
+            </el-table-column>
+            <el-table-column width="180" prop="pwd" label="密码">
+            </el-table-column>
+            <el-table-column label="操作">
+                <template slot-scope="scope">
+                    <el-button size="mini" @click="del(scope.row.num_key)"
+                        >删除</el-button
+                    >
+                    <el-button size="mini" @click="up(scope.row.num_key,scope.$index)"
+                        >修改</el-button
+                    >
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-dialog
+            title="提示"
+            :visible.sync="dialogVisible"
+            width="30%"
+        >
+        
+            <div>
+                <p>用户名：</p>
+                <el-input v-model="user" placeholder="请输入用户名"></el-input>
+            </div>
+            <div>
+                <p>密码：</p>
+                <el-input
+                    v-model="pwd"
+                    show-password
+                    placeholder="请输入密码"
+                ></el-input>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="set"
+                    >确 定</el-button
+                >
+            </span>
+        </el-dialog>
+    </div>
+</template>
+<style scoped>
+.box{
+    width: 100%;
+}
+</style>
+<script>
+export default {
+    data() {
+        return {
+            tableData: [],
+            dialogVisible: false,
+            user:"",
+            pwd:"",
+            id:""
+        };
+    },
+    mounted() {
+        this.getlist();
+    },
+    methods: {
+        del(id) {
+            this.axios
+                .get("/deluser", {
+                    params: {
+                        id,
+                    },
+                })
+                .then((res) => {
+                    console.log(res.data);
+                    this.getlist();
+                });
+        },
+        getlist() {
+            this.axios.get("/getlist").then((res) => {
+                console.log(res.data);
+                this.tableData = res.data.data;
+            });
+        },
+        up(id,index){
+            this.dialogVisible = true
+            this.id = id
+            this.pwd = this.tableData[index].pwd
+            this.user = this.tableData[index].user
+
+        },
+        set(){
+            this.axios.post("/update",{
+                user: this.user,
+                pwd: this.pwd,
+                id: this.id
+            }).then((res)=>{
+                console.log(res.data)
+                this.getlist()
+            this.dialogVisible = false
+                
+            })
+        }
+    },
+};
+</script>

src/views/Login.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="back">
+        <!-- {{ $store.state.userinfo }} -->
         <div class="box">
             <div>
                 <p>用户名：</p>
@@ -65,25 +66,9 @@ export default {
     methods: {
         login() {
             console.log(this.user, this.pwd);
-            this.axios
+            const a = { user: this.user, pwd: this.pwd };
-                .get("/login", {
+            this.$store.dispatch("getuserinfo", a);
-                    params: {
+            console.log(123)
-                        pwd: this.pwd,
-                        user: this.user,
-                    },
-                })
-                .then((res) => {
-                    console.log(res.data);
-                    if (res.data.code == 500) {
-                        this.$message.error(res.data.msg);
-                    }else{
-                        this.$message({
-                            message: "登录成功",
-                            type: "success",
-                        });
-                        localStorage.setItem("token",res.data.token)
-                    }
-                });
         },
         register() {
             this.axios

src/views/StuList.vue

@@ -0,0 +1,104 @@
+<template>
+    <div>
+        <el-table :data="tableData" style="width: 100%">
+            <el-table-column prop="num_key" label="ID" width="180">
+            </el-table-column>
+            <el-table-column prop="user" label="用户名" width="180">
+            </el-table-column>
+            <el-table-column width="180" prop="pwd" label="密码">
+            </el-table-column>
+            <el-table-column label="操作">
+                <template slot-scope="scope">
+                    <el-button size="mini" @click="del(scope.row.num_key)"
+                        >删除</el-button
+                    >
+                    <el-button size="mini" @click="up(scope.row.num_key,scope.$index)"
+                        >修改</el-button
+                    >
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-dialog
+            title="提示"
+            :visible.sync="dialogVisible"
+            width="30%"
+        >
+        
+            <div>
+                <p>用户名：</p>
+                <el-input v-model="user" placeholder="请输入用户名"></el-input>
+            </div>
+            <div>
+                <p>密码：</p>
+                <el-input
+                    v-model="pwd"
+                    show-password
+                    placeholder="请输入密码"
+                ></el-input>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="set"
+                    >确 定</el-button
+                >
+            </span>
+        </el-dialog>
+    </div>
+</template>
+<style scoped>
+</style>
+<script>
+export default {
+    data() {
+        return {
+            tableData: [],
+            dialogVisible: false,
+            user:"",
+            pwd:"",
+            id:""
+        };
+    },
+    mounted() {
+        this.getlist();
+    },
+    methods: {
+        del(id) {
+            this.axios
+                .get("/delstu", {
+                    params: {
+                        id,
+                    },
+                })
+                .then((res) => {
+                    console.log(res.data);
+                    this.getlist();
+                });
+        },
+        getlist() {
+            this.axios.get("/getstulist").then((res) => {
+                console.log(res.data);
+                this.tableData = res.data.data;
+            });
+        },
+        up(id,index){
+            this.dialogVisible = true
+            this.id = id
+            this.pwd = this.tableData[index].pwd
+            this.user = this.tableData[index].user
+
+        },
+        set(){
+            this.axios.post("/upstu",{
+                user: this.user,
+                pwd: this.pwd,
+                id: this.id
+            }).then((res)=>{
+                console.log(res.data)
+                this.getlist()
+            this.dialogVisible = false
+                
+            })
+        }
+    },
+};
+</script>