添加前端代码

web/monit_web/src/api/user.js

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

web/monit_web/src/main.js

@@ -1,9 +1,10 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 import router from './router'
 import './assets/css/icon.css'
 const app = createApp(App)
-
+app.use(ElementPlus)
 app.use(router)
 app.mount('#app')

web/monit_web/src/plugins/element.js

@@ -1,17 +0,0 @@
-import ElementPlus from 'element-plus'
-import { createI18n } from 'vue-i18n'
-import 'element-plus/lib/theme-chalk/index.css'
-import localeZH from 'element-plus/lib/locale/lang/zh-cn'
-import localeEN from 'element-plus/lib/locale/lang/en'
-import messages from '../utils/i18n'
-
-const i18n = createI18n({
- locale: localeZH.name,
- fallbackLocale: localeEN.name,
- messages,
-})
-
-export default (app) => {
- app.use(ElementPlus, { locale:localeZH })
- app.use(i18n)
-}

web/monit_web/src/router/index.js

@@ -5,6 +5,11 @@ const routes = [
  path: '/',
  name: "Home",
  component: () => import ( /* webpackChunkName: "login" */ "../view/home/Home.vue")
+ },
+ {
+ path: '/login',
+ name: "Login",
+ component: () => import('../view/login/Login.vue')
  }
 
 

web/monit_web/src/utils/request.js

@@ -0,0 +1,27 @@
+import axios from 'axios';
+import {useRouter} from "vue-router";
+const router = useRouter()
+
+const service = axios.create({
+ // process.env.NODE_ENV === 'development' 来判断是否开发环境
+ // baseURL: 'https://www.easy-mock.com/mock/592501a391470c0ac1fab128',
+ baseURL: 'http://192.168.75.32:8000',
+ timeout: 5000
+});
+
+service.interceptors.request.use(function (config) {
+ console.log(config)
+ const token = window.sessionStorage.getItem("token")
+ if (token !== "" || token != null || token != '') {
+ config.headers["Authorization"] = "Bearer " +token
+ }else{
+ message.error("没有token,请登录")
+ router.replace({
+ path: "/login"
+ })
+ }
+ return config
+})
+
+
+export default service;

web/monit_web/src/view/home/Home.vue

@@ -6,7 +6,7 @@
 
 <script>
 export default {
- name: "Home.vue"
+ name: "Home"
 }
 </script>
 

web/monit_web/src/view/login/Login.vue

@@ -1,13 +1,94 @@
 <template>
+<div class="container">
+ <div class="loginBox">
+ <div class="ms-login">管理系统平台</div>
+ <el-form
+ :label-position="labelPosition"
+ label-width="100px"
+ :model="formLabelAlign"
+ style="max-width: 460px"
+ class="loginForm">
+ <el-form-item label="用户名">
+ <el-input v-model="formLabelAlign.name" placeholder="请输入用户名"/>
+ </el-form-item>
+ <el-form-item label="密码">
+ <el-input v-model="formLabelAlign.region" placeholder="请输入密码" />
+ </el-form-item>
+ <el-form-item class="loginBtn">
+ <el-button type="primary" style="margin: 10px">登录</el-button>
+ <el-button type="info" style="margin: 10px">取消</el-button>
+ </el-form-item>
 
+
+ </el-form>
+
+
+ </div>
+</div>
 </template>
 
 <script>
+import { reactive, ref } from 'vue'
 export default {
- name: "Login.vue"
+ name: "Login",
+ setup(){
+ const labelPosition = ref('right')
+ const formLabelAlign = reactive({
+ name: '',
+ region: '',
+ type: '',
+ })
+ return {
+ labelPosition,
+ formLabelAlign
+
+ }
+
+ }
 }
 </script>
 
 <style scoped>
 
+.container{
+ height: 100%;
+ background-color: #282C34;
+ background-image: url(../../assets/img/login=JPG.webp);
+ background-size: 100%;
+
+}
+.ms-login {
+ left: 50%;
+ top: 50%;
+ width: 350px;
+ margin-top: 20px;
+ text-align: center;
+ font-size: 25px;
+ margin-left: 35px;
+ overflow: hidden;
+}
+.loginBox{
+
+ width: 450px;
+ height: 300px;
+ background-color: #fff;
+ position: absolute;
+ top: 50%;
+ left: 70%;
+ transform: translate(-50%,-50%);
+ border-radius: 9px;
+
+}
+.loginForm{
+ width: 100%;
+ position: absolute;
+ bottom: 10%;
+ padding: 0 20px;
+ box-sizing: border-box;
+}
+.loginBtn{
+ display: flex;
+ justify-content: flex-end;
+}
+
 </style>