2022.8.3

resources/frontend/src/api/users.js

@@ -1,10 +0,0 @@
-import http from '@/util/http.js'
-
-// 用户管理页面
-export function users (data) {
-  return http({
-    url: '/api/users',
-    method: 'get',
-    data
-  })
-}

resources/frontend/src/main.js

@@ -6,6 +6,7 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import '@/css/style.css'
 import './router/index2'
+import axios from 'axios'
 
 
 // import Router from 'vue-router'
@@ -14,8 +15,8 @@ import './router/index2'
 // return routerPush.call(this, location).catch(error=> error)
 // }
 
-Vue.use(ElementUI)
 
+Vue.use(ElementUI)
 Vue.config.productionTip = false
 
 new Vue({

resources/frontend/src/router/index.js

@@ -1,12 +1,23 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
+import Vue from "vue";
+import VueRouter from "vue-router";
 
-Vue.use(VueRouter)
+Vue.use(VueRouter);
 
 const createRouter = () =>
   new VueRouter({
-    scrollBehavior: () => ({ y: 0 })
-  })
+    scrollBehavior: () => ({ y: 0 }),
+  });
 
-const router = createRouter()
-export default router
+const router = createRouter();
+
+router.beforeEach((to, from, next) => {
+  if (localStorage.getItem("token")) {
+    next();
+  } else if (to.fullPath === "/logo") {
+    next();
+  } else {
+    next("/logo");
+  }
+});
+
+export default router;

resources/frontend/src/router/index1.js

@@ -1,12 +1,3 @@
-/*
- * @Description:
- * @Author: czw (725551805@qq.com)
- * @Date: 2022-02-25 10:40:17
- * @LastEditors: czw (725551805@qq.com)
- * @LastEditTime: 2022-03-01 20:29:32
- * @FilePath: /glxt/src/router/index1.js
- */
-
 const list = [
   {
     path: '/logo',

resources/frontend/src/store/index.js

@@ -1,15 +1,13 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
+import Vue from "vue";
+import Vuex from "vuex";
 
-Vue.use(Vuex)
+Vue.use(Vuex);
 
-export default new Vuex.Store({
-  state: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
-  modules: {
-  }
-})
+const store = new Vuex.Store({
+  state: {},
+  mutations: {},
+  actions: {},
+  modules: {},
+});
+
+export default store;

resources/frontend/src/util/auth.js

@@ -1,7 +1,7 @@
 const TokenKey = 'admin_token'
 // 获取token
 export function getToken () {
-  return localStorage.getItem(TokenKey)
+  return 'w1rr6IsxZIud46dIrGIivNAroFpqN52sSpXhk3azpPq2ZTbUXhgKTOLheoRm'
 }
 // 设置token
 export function setToken (token) {

resources/frontend/src/views/logo.vue

@@ -8,33 +8,113 @@
         >
       </p>
       <p class="title-1">登录</p>
-      <input type="text" placeholder="请输入用户名" />
+      <input type="text" placeholder="请输入用户名" v-model="form.name" />
       <br />
-      <input type="text" placeholder="请输入密码" />
+      <input type="password" placeholder="请输入密码" v-model="form.password" />
       <br />
       <el-checkbox v-model="checked">记住密码</el-checkbox>
       <br />
-      <el-button type="primary">登录</el-button>
+      <el-button type="primary" @click="Login()">登录</el-button>
     </div>
   </div>
 </template>
 
 <script>
+import axios from "axios";
 export default {
   data() {
     return {
-      checked: true, //记住密码变量
+      checked: false, //记住密码变量
       form: {
-        add: "",
-        app: "",
+        //用户名和密码
+        name: "",
+        password: "",
       },
     };
   },
-  computed: {}, // 计算机属性 类似与data概念
-  watch: {}, // 监控data中数据变化
-  created() {}, // 生命周期-创建完成(可以访问当前this实例)
-  mounted() {}, // 生命周期-挂载完成(可以访问DOM元素)
-  methods: {},
+  mounted() {
+    this.getCookie();
+  },
+  methods: {
+    Login() {
+      // 判断复选框是否被勾选 勾选则调用配置cookie方法
+      if (this.checked === true) {
+        this.setCookie(this.form.name, this.form.password, true, 7);
+      } else {
+        this.clearCookie();
+      }
+      //判断用户名和密码是否为空
+      if (this.form.name === "" || this.form.password === "") {
+        this.$message({
+          message: "账号或密码不能为空",
+          type: "error",
+        });
+      } else {
+        axios
+          .post("/api/auth/login", this.form, {
+            headers: {
+              Authorization:
+                "Bearer w1rr6IsxZIud46dIrGIivNAroFpqN52sSpXhk3azpPq2ZTbUXhgKTOLheoRm",
+            },
+          })
+          .then((res) => {
+            let data = res.data;
+            console.log(data);
+            if (data.error) {
+              this.$message({
+                message: "账号或密码错误，请重新输入",
+                type: "error",
+              });
+              this.form.name = "";
+              this.form.password = "";
+              this.checked = false;
+            }
+
+            if (data.token) {
+              this.form = {};
+              localStorage.setItem("token", data.token);
+              this.$message({
+                message: "成功登录，欢迎来到后台管理系统",
+                type: "success",
+              });
+              this.$router.push("/USER_MANAGE");
+            }
+          });
+      }
+    },
+    // 设置cookie
+    setCookie(c_name, c_pwd, c_state, exdays) {
+      const exdate = new Date();
+      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); // 保存的天数
+      window.document.cookie =
+        "name" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
+      window.document.cookie =
+        "password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
+      window.document.cookie =
+        "state" + "=" + c_state + ";path=/;expires=" + exdate.toGMTString();
+    },
+    // 读取cookie
+    getCookie() {
+      if (document.cookie.length > 0) {
+        const arr = document.cookie.split("; ");
+        for (let i = 0; i < arr.length; i++) {
+          const arr2 = arr[i].split("=");
+          // console.log(arr[2]);
+          if (arr2[0] === "name") {
+            this.form.name = arr2[1];
+          } else if (arr2[0] === "password") {
+            this.form.password = arr2[1];
+          } else if (arr2[0] === "state") {
+            this.checked = Boolean(arr2[1]);
+          }
+        }
+      }
+    },
+    // 清除cookie
+    clearCookie: function () {
+      this.setCookie("", "", false, -1);
+    },
+  },
 };
 </script>
 

resources/frontend/src/views/users/users.vue

@@ -8,18 +8,23 @@
       <el-dialog title="新增用户" :visible.sync="dialogVisible" width="30%">
         <div>
           <el-form label-width="80px">
-            <el-form-item label="ID">
-              <el-input></el-input>
-            </el-form-item>
             <el-form-item label="姓名">
-              <el-input></el-input>
+              <el-input v-model="from.name"></el-input>
+            </el-form-item>
+            <el-form-item label="密码">
+              <el-input v-model="from.password"></el-input>
+            </el-form-item>
+            <el-form-item label="确认密码">
+              <el-input v-model="from.password_confirmation"></el-input>
             </el-form-item>
             <el-form-item label="角色">
-              <el-input></el-input>
+              <el-input v-model="from.role_name"></el-input>
             </el-form-item>
             <div class="from-btn">
-              <el-button type="danger">取消</el-button>
-              <el-button>确认</el-button>
+              <el-button type="danger" @click="dialogVisible = false"
+                >取消</el-button
+              >
+              <el-button @click="onSubmit">确认</el-button>
             </div>
           </el-form>
         </div>
@@ -29,7 +34,7 @@
     <div class="table">
       <template>
         <el-table :data="tableList" style="width: 100%">
-          <el-table-column prop="id" label="ID" width="400"> </el-table-column>
+          <el-table-column prop="id" label="ID" width="400"></el-table-column>
           <el-table-column prop="name" label="姓名" width="400">
           </el-table-column>
           <el-table-column prop="email" label="角色" width="400">
@@ -53,19 +58,44 @@ export default {
     return {
       dialogVisible: false, //新增按钮变量
       tableList: [], //列表数据
+      from: {
+        name: "",
+        password: "",
+        password_confirmation: "",
+        role_name: "超级管理员",
+      },
     };
   },
 
   mounted() {
     //用户表单数据请求
-    axios({
-      method: "get",
-      params: {},
-      url: "http://doc.ii090.com/mock/267/api/users",
-    }).then((res) => {
+      axios
+        .get("api/users", {
+          headers: {
+            Authorization:
+              "Bearer w1rr6IsxZIud46dIrGIivNAroFpqN52sSpXhk3azpPq2ZTbUXhgKTOLheoRm",
+          },
+        })
+        .then((res) => {
+          console.log(res);
           this.tableList = res.data.data;
         });
   },
+  methods: {
+    onSubmit() {
+      axios
+        .post("/api/users", this.from, {
+          headers: {
+            Authorization:
+              "Bearer w1rr6IsxZIud46dIrGIivNAroFpqN52sSpXhk3azpPq2ZTbUXhgKTOLheoRm",
+          },
+        })
+        .then((res) => {
+          console.log(res);
+        });
+      this.dialogVisible = false;
+    },
+  },
 };
 </script>