feat: 添加登录接口配置

.eslintrc.js

@@ -12,5 +12,12 @@ module.exports = {
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     indent: 0,
     'space-before-function-paren': 0
+  },
+  // The Follow configs works with eslint-plugin-vue v7.x.x
+  globals: {
+    defineProps: 'readonly',
+    defineEmits: 'readonly',
+    defineExpose: 'readonly',
+    withDefaults: 'readonly'
   }
 }

package.json

@@ -9,6 +9,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.0.6",
     "axios": "^0.27.2",
     "core-js": "^3.8.3",
     "element-plus": "1.3.0-beta.5",

src/api/login.js

@@ -0,0 +1,9 @@
+import request from './request'
+
+export const login = (data) => {
+  return request({
+    url: '/login',
+    method: 'POST',
+    data
+  })
+}

src/api/request.js

@@ -0,0 +1,11 @@
+// 导入 axios
+import axios from 'axios'
+// axios 基础配置
+const service = axios.create({
+  // 基础路径
+  baseURL: process.env.VUE_APP_BASE_API,
+  // 超时时间
+  timeout: 5000
+})
+// 导入以供外界使用
+export default service

src/components/SvgIcon/svgIndex.vue

@@ -4,7 +4,7 @@
   </svg>
 </template>
 <script setup>
-import { defineProps, computed } from 'vue'
+import { computed } from 'vue'
 const props = defineProps({
   icon: {
     type: String,

src/main.js

@@ -4,7 +4,12 @@ import router from './router'
 import store from './store'
 import '@/styles/index.scss'
 import SvgIcon from '@/icons/iconIndex'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
 const app = createApp(App)
 SvgIcon(app)
 app.use(store).use(router).mount('#app')
+
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}

src/views/login/zdLogin.vue

@@ -1,35 +1,86 @@
 <template>
   <div class="login-container">
-    <el-form :model="form" ref="formRef" class="login-form">
+    <el-form :model="form" ref="formRef" class="login-form" :rules="rules">
       <div class="title-container">
         <h3 class="title">用户登录</h3>
       </div>
-      <el-form-item>
-        <!-- <el-icon :size="20" class="svg-container">
-          <edit />
-        </el-icon> -->
+      <el-form-item prop="username">
         <svg-icon icon="user" class="svg-container"></svg-icon>
-        <el-input v-model="form.name" />
+        <el-input
+          v-model="form.username"
+          :placeholder="form.nametips"
+          clearable
+        />
       </el-form-item>
-      <el-form-item>
-        <!-- <el-icon :size="20" class="svg-container">
-          <edit />
-        </el-icon> -->
+      <el-form-item prop="password">
         <svg-icon icon="password" class="svg-container"></svg-icon>
-        <el-input v-model="form.password" />
+        <el-input
+          v-model="form.password"
+          type="password"
+          :placeholder="form.pwdtips"
+        />
+        <svg-icon
+          :icon="passwordType === 'password' ? 'eye' : 'eye-open'"
+          @click="changeType"
+        ></svg-icon>
       </el-form-item>
-      <el-button type="primary" class="login-button">登录</el-button>
+      <el-button type="primary" class="login-button" @click="handleLogin">
+        登录
+      </el-button>
     </el-form>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-// import { Edit } from '@element-plus/icons-vue'
+import { login } from '@/api/login'
+// 默认显示账密
 const form = ref({
-  name: '',
-  password: ''
+  username: '123456',
+  password: '1111',
+  nametips: '请输入用户名',
+  pwdtips: '请输入密码'
 })
+// 账密输入规则
+const rules = ref({
+  username: [
+    {
+      required: true,
+      message: '用户名不能为空！',
+      trigger: 'blur'
+    }
+  ],
+  password: [
+    {
+      required: true,
+      message: '请输入用户密码！',
+      trigger: 'blur'
+    }
+  ]
+})
+const formRef = ref(null)
+// 登录按钮
+const handleLogin = () => {
+  formRef.value.validate(async (valid) => {
+    if (valid) {
+      const res = await login(form.value)
+      console.log(res)
+    } else {
+      console.log('error submit!')
+      return false
+    }
+  })
+}
+// 默认密码显示类型
+const passwordType = ref('password')
+// 密码显示切换
+const changeType = () => {
+  if (passwordType.value === 'password') {
+    passwordType.value = 'text'
+  } else {
+    passwordType.value = 'password'
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -52,14 +103,14 @@ $cursor: #fff;
     margin: 0 auto;
     overflow: hidden;
 
-    ::v-deep .el-form-item {
+    ::v-deep(.el-form-item) {
       border: 1px solid rgba(255, 255, 255, 0.1);
       background: rgba(0, 0, 0, 0.1);
       border-radius: 5px;
       color: #454545;
     }
 
-    ::v-deep .el-input {
+    ::v-deep(.el-input) {
       display: inline-block;
       height: 47px;
       width: 85%;
@@ -112,7 +163,7 @@ $cursor: #fff;
       font-weight: bold;
     }
 
-    ::v-deep .lang-select {
+    ::v-deep(.lang-select) {
       position: absolute;
       top: 4px;
       right: 0;

vue.config.js

@@ -14,6 +14,7 @@ function resolve(dir) {
 const webpack = require('webpack')
 
 module.exports = {
+  // 按需引入 element-plus
   configureWebpack: (config) => {
     config.plugins.push(
       AutoImport({
@@ -26,8 +27,8 @@ module.exports = {
       })
     )
   },
+  // 设置 svg-sprite-loader
   chainWebpack(config) {
-    // 设置 svg-sprite-loader
     // config 为 webpack 配置对象
     // config.module 表示创建一个具名规则，以后用来修改规则
     config.module
@@ -71,5 +72,18 @@ module.exports = {
         symbolId: 'icon-[name]'
       })
       .end()
+  },
+  devServer: {
+    https: false,
+    hot: false
+    // proxy: {
+    //   '/api': {
+    //     target: 'http://118.31.125.74:8000/admin/',
+    //     changeOrigin: true,
+    //     pathRewrite: {
+    //       '^/api': ''
+    //     }
+    //   }
+    // }
   }
 }

yarn.lock

@@ -1112,6 +1112,11 @@
   resolved "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-0.2.7.tgz#c0b75363098bf1fba414e18706604bfe5057ae1b"
   integrity sha512-S8kDbfVaWkQvbUYQE1ui448tzaHfUvyESCep9J6uPRlViyQPXjdIfwLBhV6AmQSOfFS8rL+xehJGhvzPXLrSBg==
 
+"@element-plus/icons-vue@^2.0.6":
+  version "2.0.6"
+  resolved "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.0.6.tgz#8490e7a3193c17515d10c3be0544d800afe6a228"
+  integrity sha512-lPpG8hYkjL/Z97DH5Ei6w6o22Z4YdNglWCNYOPcB33JCF2A4wye6HFgSI7hEt9zdLyxlSpiqtgf9XcYU+m5mew==
+
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
   resolved "https://registry.npmmirror.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"