axios

src/router/index.js

@@ -21,6 +21,10 @@ const routes = [
   {
     path:"/login",
     component: ()=> import("@/views/Login.vue")
+  },
+  {
+    path:"/list",
+    component: ()=> import("@/views/List.vue")
   }
 ]
 

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.token)
+              context.commit("setuserinfo",res.data.data)
+              router.push("/list")
+          }
+      });
+    }
   },
   modules: {
   }

src/views/List.vue

@@ -0,0 +1,105 @@
+<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%"
+            :before-close="handleClose"
+        >
+        
+            <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("/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
-                .get("/login", {
-                    params: {
-                        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)
-                    }
-                });
+            const a = { user: this.user, pwd: this.pwd };
+            this.$store.dispatch("getuserinfo", a);
+            console.log(123)
         },
         register() {
             this.axios