CRM项目搭建前端页面封装axios请求路由结果提示并实现前端登录界面------CRM项目

javascript">import axios from "axios";

axios.defaults.baseURL = "http://localhost:8089"

export function doGet(url,params){
    return axios({
        method:"get",
        url:url,
        params:params,
        dataType:"json"
    });
}

export function doPost(url,data){
    return  axios({
        method:"post",
        url:url,
        data:data,
        dataType:"json"
    });
}

export function doPut(url,data){
    return axios({
        method:"put",
        url:url,
        data:data,
        dataType:"json"
    });
}

export function doDelete(url,params){
    return axios({
        method:"delete",
        url:url,
        params:params,
        dataType:"json"
    });
}

import axios from "axios";

axios.defaults.baseURL = "http://localhost:8089"

export function doGet(url,params){

    return axios({

        method:"get",

        url:url,

        params:params,

        dataType:"json"

    });

}

export function doPost(url,data){

    return  axios({

        method:"post",

        url:url,

        data:data,

        dataType:"json"

    });

}

export function doPut(url,data){

    return axios({

        method:"put",

        url:url,

        data:data,

        dataType:"json"

    });

}

export function doDelete(url,params){

    return axios({

        method:"delete",

        url:url,

        params:params,

        dataType:"json"

    });

}

import { createRouter,createWebHistory } from "vue-router";

const router = createRouter({
    // 路由历史
    history:createWebHistory(),
    // 配置路由,可以配置多个路由
    routes:[
        {
            //路由路径
            path:"/",
            //对应路径的页面
            ***ponent:() => import('../view/login.vue')
        },
        {
            //路由路径
            path:"/dashboard",
            //对应路径的页面
            ***ponent:() => import('../view/dashboard.vue')
        }
    ]
});
export default router;

import { createRouter,createWebHistory } from "vue-router";

const router = createRouter({

    // 路由历史

    history:createWebHistory(),

    // 配置路由,可以配置多个路由

    routes:[

        {

            //路由路径

            path:"/",

            //对应路径的页面

            ***ponent:() => import('../view/login.vue')

        },

        {

            //路由路径

            path:"/dashboard",

            //对应路径的页面

            ***ponent:() => import('../view/dashboard.vue')

        }

    ]

});

export default router;

import { ElMessage } from 'element-plus';

export function messageTip(msg,type){
    ElMessage({
        showClose:true,//消息提示是否可以关闭
        center:true,//文字居中
        message:msg,
        type:type,
    });
}

import { ElMessage } from 'element-plus';

export function messageTip(msg,type){

    ElMessage({

        showClose:true,//消息提示是否可以关闭

        center:true,//文字居中

        message:msg,

        type:type,

    });

}

// 程序入口,相当于main方法
// 这里从vue下导入了一个createApp方法\函数
import { createApp } from 'vue'
// 从Element-Plus导入该组件
import ElementPlus from 'element-plus'
// 导入了我们默认的app组件
import App from './App.vue'
import 'element-plus/dist/index.css'
import router from "./router/router.js"

// 利用上面导入的createApp函数创建一个vue应用
// 并将app挂载到这个#app这个ID下
createApp(App).use(ElementPlus).use(router).mount('#app')

// 程序入口,相当于main方法

// 这里从vue下导入了一个createApp方法\函数

import { createApp } from 'vue'

// 从Element-Plus导入该组件

import ElementPlus from 'element-plus'

// 导入了我们默认的app组件

import App from './App.vue'

import 'element-plus/dist/index.css'

import router from "./router/router.js"

// 利用上面导入的createApp函数创建一个vue应用

// 并将app挂载到这个#app这个ID下

createApp(App).use(ElementPlus).use(router).mount('#app')

<template>
    <el-container>
        <!-- 左侧 -->
      <el-aside>
        <img src="../assets/logo.png">
        <img src="../assets/1.png">
        <p class="imgTitle">欢迎使用CRM系统</p>
      </el-aside>
      <!-- 右侧 -->
      <el-main>
        <div class="loginTitle">欢迎登陆</div>
        <!-- 表单 -->
        <el-form ref="loginRefForm" :model="user" label-width="120px" :rules="loginRules">
            <!-- 账号 -->
            <el-form-item label="账号:" prop="loginAct">
                <el-input v-model="user.loginAct" />
            </el-form-item>

            <!-- 密码 -->
            <el-form-item label="密码:" prop="loginPwd">
                <el-input type="password" v-model="user.loginPwd" />
            </el-form-item>

            <!-- 记住密码 -->
            <el-form-item>
                <el-checkbox label="记住密码" name="rememberMe" />
            </el-form-item>
            <!-- 登录按钮 -->
            <el-form-item>
                <el-button type="primary" @click="login()" :plain="true">登录</el-button>
            </el-form-item>
            
        </el-form>
      </el-main>
    </el-container>
</template>

<script>
import { messageTip } from "../util/util.js"
import { doPost } from '../http/httpRequest';
export default {
    name : "LoginView",
    data(){
        return {
            user : {
                loginAct : "",
                loginPwd : ""
            },
            // 定义登录表单的验证规则
            loginRules : {
                // 账号验证规则
                loginAct : [
                    { required: true, message: '请输入登录账号', trigger: 'blur' },
                    { min: 3, max: 15, message: '账号长度不合法', trigger: 'blur' },
                ],
                // 密码验证规则
                loginPwd : [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 18, message: '密码长度不合法', trigger: 'blur' },
                ]
            }
        }
    },
    methods : {
        // 将页面上的函数在此定义
        login(){
            // 提交前要验证合法性
            this.$refs.loginRefForm.validate((isValid) => {
                // isValid是验证后回传的结果,true为通过
                if(isValid){
                    // 验证通过,可以提交
                    let formData = new FormData();
                    // 可以视为map,是json对象
                    // 内部以键值对形式提交数据给后台
                    formData.append("loginAct",this.user.loginAct)
                    formData.append("loginPwd",this.user.loginPwd)
                    // 不要用对象传,用formData传递数据
                    doPost("/api/login",formData).then((resp) => {
                        if(resp.data.code === 200){
                            messageTip('登陆成功,即将跳转到主页',"su***ess");
                            window.location.href="/dashboard"
                        }
                        else{
                            messageTip('登陆失败,请检查您的信息',"error");
                        }
                    });
                }
            });
        }
    }
}
</script>

<style scoped>
.el-aside {
    background: black;
    width: 40%;
    text-align: center;
}
.imgTitle {
    color: white;
    font-size: 28px;
    font-weight: bold;
}
.el-aside img {
    height: 30%;
}
.el-main {
    width: 60%;
    /* 使用JS实现铺满 */
    /* 设置为100%屏幕高度 */
    height: calc(100vh);
}
.el-form {
    width: 60%;
    margin: auto;
}
.loginTitle{
    text-align: center;
    margin-top: 10%;
    margin-bottom: 5%;
    font-size: 30px;
    font-weight: bold;
}
.el-button{
    width: 100%;
}
</style>

<template>

    <el-container>

        <!-- 左侧 -->

      <el-aside>

        <img src="../assets/logo.png">

        <img src="../assets/1.png">

        <p class="imgTitle">欢迎使用CRM系统</p>

      </el-aside>

      <!-- 右侧 -->

      <el-main>

        <div class="loginTitle">欢迎登陆</div>

        <!-- 表单 -->

        <el-form ref="loginRefForm" :model="user" label-width="120px" :rules="loginRules">

            <!-- 账号 -->

            <el-form-item label="账号:" prop="loginAct">

                <el-input v-model="user.loginAct" />

            </el-form-item>

            <!-- 密码 -->

            <el-form-item label="密码:" prop="loginPwd">

                <el-input type="password" v-model="user.loginPwd" />

            </el-form-item>

            <!-- 记住密码 -->

            <el-form-item>

                <el-checkbox label="记住密码" name="rememberMe" />

            </el-form-item>

            <!-- 登录按钮 -->

            <el-form-item>

                <el-button type="primary" @click="login()" :plain="true">登录</el-button>

            </el-form-item>

           

        </el-form>

      </el-main>

    </el-container>

</template>

<script>

import { messageTip } from "../util/util.js"

import { doPost } from '../http/httpRequest';

export default {

    name : "LoginView",

    data(){

        return {

            user : {

                loginAct : "",

                loginPwd : ""

            },

            // 定义登录表单的验证规则

            loginRules : {

                // 账号验证规则

                loginAct : [

                    { required: true, message: '请输入登录账号', trigger: 'blur' },

                    { min: 3, max: 15, message: '账号长度不合法', trigger: 'blur' },

                ],

                // 密码验证规则

                loginPwd : [

                    { required: true, message: '请输入密码', trigger: 'blur' },

                    { min: 6, max: 18, message: '密码长度不合法', trigger: 'blur' },

                ]

            }

        }

    },

    methods : {

        // 将页面上的函数在此定义

        login(){

            // 提交前要验证合法性

            this.$refs.loginRefForm.validate((isValid) => {

                // isValid是验证后回传的结果,true为通过

                if(isValid){

                    // 验证通过,可以提交

                    let formData = new FormData();

                    // 可以视为map,是json对象

                    // 内部以键值对形式提交数据给后台

                    formData.append("loginAct",this.user.loginAct)

                    formData.append("loginPwd",this.user.loginPwd)

                    // 不要用对象传,用formData传递数据

                    doPost("/api/login",formData).then((resp) => {

                        if(resp.data.code === 200){

                            messageTip('登陆成功,即将跳转到主页',"su***ess");

                            window.location.href="/dashboard"

                        }

                        else{

                            messageTip('登陆失败,请检查您的信息',"error");

                        }

                    });

                }

            });

        }

    }

}

</script>

<style scoped>

.el-aside {

    background: black;

    width: 40%;

    text-align: center;

}

.imgTitle {

    color: white;

    font-size: 28px;

    font-weight: bold;

}

.el-aside img {

    height: 30%;

}

.el-main {

    width: 60%;

    /* 使用JS实现铺满 */

    /* 设置为100%屏幕高度 */

    height: calc(100vh);

}

.el-form {

    width: 60%;

    margin: auto;

}

.loginTitle{

    text-align: center;

    margin-top: 10%;

    margin-bottom: 5%;

    font-size: 30px;

    font-weight: bold;

}

.el-button{

    width: 100%;

}

</style>

<template>
    <el-container>
        <!-- 左侧 -->
      <el-aside width="200px">左边</el-aside>
      <el-container class="rightContent">
        <!-- 右侧上 -->
        <el-header>头</el-header>
        <!-- 右侧中 -->
        <el-main>Main</el-main>
        <!-- 右侧下 -->
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
</template>

<script>
export default {
    name : "dashboard"
}
</script>

<style scoped>
.el-aside{
    background-color: black;
}
.el-header{
    background-color: azure;
}
.el-footer{
    background-color: aliceblue;
}
.rightContent{
    /* 高度设置为计算高度,屏幕高度的100% */
    height: calc(100vh);
}
</style>

<template>

    <el-container>

        <!-- 左侧 -->

      <el-aside width="200px">左边</el-aside>

      <el-container class="rightContent">

        <!-- 右侧上 -->

        <el-header>头</el-header>

        <!-- 右侧中 -->

        <el-main>Main</el-main>

        <!-- 右侧下 -->

        <el-footer>Footer</el-footer>

      </el-container>

    </el-container>

</template>

<script>

export default {

    name : "dashboard"

}

</script>

<style scoped>

.el-aside{

    background-color: black;

}

.el-header{

    background-color: azure;

}

.el-footer{

    background-color: aliceblue;

}

.rightContent{

    /* 高度设置为计算高度,屏幕高度的100% */

    height: calc(100vh);

}

</style>

<template>
    <!-- 渲染前端地址的页面组件 -->
    <router-view></router-view>
</template>

<script>
export default {
    name : "App",
}  
</script>

<style>

</style>

<template>

    <!-- 渲染前端地址的页面组件 -->

    <router-view></router-view>

</template>

<script>

export default {

    name : "App",

}  

</script>

<style>

</style>