vue入门项目：快递收件管理---登陆+主页面

最新推荐文章于 2024-01-09 17:27:35 发布

橘子爱作

最新推荐文章于 2024-01-09 17:27:35 发布

阅读量620

点赞数

分类专栏： VUE 文章标签： vue.js

本文链接：https://blog.csdn.net/rongfairy0825/article/details/128669416

版权

VUE 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

软件安装，js配置，网上一大堆，我就不写啦，很简单的。

Vue开发实例目录总索引_编程界小明哥的博客-CSDN博客_vue 索引列表

这个是我之前参考得大佬的项目，虽然这个是vue2的，我用的vue3，但是，大佬步骤写的非常详细，包括常见错误都有，对新手很是友好，大家可以学习。而且，大佬还在不定时更新更正的，膜拜。

跟随大佬的脚步，我用的element-plus

一步步太麻烦，因为该系统已经应用上，所以我直接贴全部代码了，注释当时标注的也比较明确。

画面使用的控件样式，都参考官方就好了~链接在这里

Layout 布局 | Element Plus (gitee.io)

一， main.js注册内容

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'
import 'normalize.css/normalize.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

//全局引入css
import '../style/headtap.css'
const app = createApp(App)
app.use(ElementPlus,{locale:zhCn})
app.use(router)
app.mount('#app')

其中：

router：路由器

zhCn：中文包

二，页面

我们肯定是不用Vue 的Hello World页面啦，所以APP.VUE页面内容就该删删啦

app.vue

<template>
  <router-view />
</template>
<script>
export default{}
</script>
<style>
</style>

第一个画面，肯定是登陆界面啦，login.vue

<template>
  <div class="loginBody">
    <el-form class="loginRoot">
      <div class="loginTitle"></div>
      <el-form-item >
        用户：<el-input type="text" v-model="account" auto-complete="off" placeholder="请输入用户名" style="width:260px;"/>
      </el-form-item>
      <el-form-item >
        密码：<el-input type="password" v-model="password" auto-complete="off" placeholder="请输入密码" style="width:260px;"/>
      </el-form-item>
      <el-button type="primary" style="width: 100%" @click="loginIn">登陆</el-button>
    </el-form>
  </div>
</template>

<script>
import { reactive,toRefs } from 'vue'
import {useRouter} from 'vue-router'
import { $msg_e, $msg_s } from '@/utils/msg.js'
export default{
  name:"Login",
  setup(){
    //获取当前项目中的路由器对象
    let $router = useRouter()
    const user = reactive({
      account:'admin',
      password:''
    })
    //login
    const loginIn = async ()=>{
      //因为系统只有快递室使用，所以这里设定了固定登陆账户密码， 没有链接数据库
      if(user.account==="admin"&&user.password==="123456"){
        $msg_s('登陆成功')
        $router.push('/layout')  //登陆成功，转到主页面
      }else{
        $msg_e('账号密码有误，请联系管理员')
        $router.push('/')  //登陆不成功，继续在登陆界面
      }      
    }
    return {...toRefs(user),loginIn}
  }
}
</script>

<style>
</style>

这里引用了router中的页面设定，还有message提醒设定

router/index.js

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

const routes= [
  {//登陆界面
    path: '/',
    name:'Login', 
    component: ()=>import(/*webpackChunkName:'login'*/'@/views/login.vue') 
  },
  {//首页
    path: '/layout',
    name:'Layout', 
    component: ()=>import(/*webpackChunkName:'Layout'*/'@/views/Layout.vue') ,
    children:[
      //收件
      {
        path:'acp',
        name:'Acp',
        component:()=>import('../views/Acp.vue')
      },
      //取件
      {
        path:'rev',
        name:'Rev',
        component:()=>import('../views/Rev.vue')
      },
      //参数维护
      {
        path:'pamc',
        name:'Pamc',
        component:()=>import('../views/Pamc.vue')
      },{
        path:'pamt',
        name:'Pamt',
        component:()=>import('../views/Pamt.vue')
      },{
        path:'pamp',
        name:'Pamp',
        component:()=>import('../views/Pamp.vue')
      }
    ]
  }
]
//创建一个路由器对象
const router = createRouter({
  history:createWebHashHistory(),
  routes
})
//页面转换变动条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
//定义路由导航前置守卫
router.beforeEach((to, from, next) => {
  NProgress.start();
  next()  
})
//定义路由导航后置守卫
router.afterEach( route => {
  NProgress.done();
})
export default router

自定义消息提示，utils/msg.js

//封装消息框

import {ElMessage,ElMessageBox} from 'element-plus'
//成功的消息框
export let $msg_s = (message,duration=2000)=>{
  ElMessage({
    showClose:true,
    message,
    duration,
    type:'success',
  })
}
//警告的消息框
export let $msg_w = (message,duration=2000)=>{
  ElMessage({
    showClose:true,
    message,
    duration,
    type:'warning',
  })
}
//错误的消息框
export let $msg_e = (message,duration=2000)=>{
  ElMessage({
    showClose:true,
    message,
    duration,
    type:'error',
  })
}
//确定取消框
export let $confirm = (message,title='提示',type='warning')=>{
  return new Promise((resolve,reject)=>{
    ElMessageBox.confirm(
      message,
      title,
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type,
      }
    )
      .then(() => {        
        resolve()
      })
      .catch(() => {
      })
  })
}
//封装返回值
export let $msg_return=(status,statusText)=>{
  if(status===200||status===201){
    $msg_s(statusText)
  }else{
    $msg_e(statusText)
  }
}
//封装返回布尔值
export let $bool_return=(status)=>{
  if(status===200||status===201){
    return true
  }else{
    return false
  }
}

跳转到主页面，Layout.vue

<template>
  <div class="container" >
    <el-container>
      <div class="left" :width="isCollapse ? '30px':'160px'"  :style="'height:'+rightHeight+'px'">
        <div class="logo">
          <h3 v-show="!isCollapse">快递管理系统</h3>
          <h3 v-show="isCollapse">Exp</h3>
        </div>        
        <div class="aside"> 
          <el-menu class="el-menu-certical-demo"
              default-active="/layout/acp"
              background-color="#545c64"
              text-color="#FFFFFF"
              active-text-color="#409EFF"
              :collapse="isCollapse"
              router
          >
            <el-menu-item index="/layout/acp">
              <el-icon><edit /></el-icon>
              <span>快递入库</span>
            </el-menu-item>
            <el-menu-item index="/layout/rev">
              <el-icon><briefcase /></el-icon>
              <span>取件出库</span>
            </el-menu-item>
            <el-menu-item index="/layout/pamc"><el-icon><aim /></el-icon><span>快递公司</span></el-menu-item>
            <el-menu-item index="/layout/pamt"><el-icon><aim /></el-icon><span>快递类别</span></el-menu-item>
            <el-menu-item index="/layout/pamp"><el-icon><aim /></el-icon><span>特殊收件人</span></el-menu-item>
          </el-menu>
        </div>
      </div>
      <div class="right" >
        <div class="top" ref="rightHeight1">
          <div class="toggle-button" @click="isCollapse = !isCollapse">
            <el-icon size="20" v-show="!isCollapse"><fold /></el-icon>
            <el-icon size="20" v-show="isCollapse"><expand /></el-icon>
          </div>
          <div class="menu">
            <el-menu class="el-menu-demo"
                model="horizontal"
                default-active="1"
                background-color="#545c64"
                text-color="#FFFFFF"
                active-text-color="#409EFF"
              >
              <el-menu-item index="1-1" @click="exit"><el-icon><location /></el-icon>退出登录</el-menu-item>
            </el-menu>
          </div>
        </div>
        <div class="bottom" ref="rightHeight2" >
          <el-container> 
            <el-main> <router-view /> </el-main>
          </el-container>
        </div>
      </div>
    </el-container>
  </div>
</template>

<script>
import { reactive,toRefs,ref } from '@vue/reactivity'
import {Aim,Edit,Briefcase,Fold,Expand,Location} from '@element-plus/icons'
import {onMounted} from 'vue'
import {useRouter} from 'vue-router'
export default {
  name: 'Layout',
  components:{
    Aim,Edit,Briefcase,Fold,Expand,Location
  },
  setup(){    
    let $router  = useRouter()
    let data = reactive({
      isCollapse:false,
      rightHeight:0
    })
    const rightHeight1 = ref()
    const rightHeight2 = ref()
    onMounted(()=>{ 
      let h1 = rightHeight1.value.clientHeight
      let h2 = rightHeight2.value.clientHeight     
      data.rightHeight = h1+h2
    })
    let isMobile = ()=> {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      if(flag){
        data.isCollapse=true
      }else{
        data.isCollapse=false
      }
    }
    isMobile()
    //退出系统
    let exit = ()=>{
      //清楚所有的浏览器缓存
      sessionStorage.clear()
      localStorage.clear()
      //跳转到登陆页面
      $router.push('/')
    }
    return {
      ...toRefs(data),exit,isMobile,rightHeight1,rightHeight2
    }
  }
}
</script>
<style>
  .container{
    width: 100vw;
    height:100vh;
    display: flex;  
  }
  .left{    
    background-color: #545c64;
  }
  .logo{
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .logo h3{
    color: white;
    font-size: 16px;
    border: 1px solid #eee;
    padding: 4px 1px;
    border-radius: 4px;
  }
  
  .right{
    flex: 1;
    display: flex;
    flex-direction: column;    
  }
  .top{
    height: 60px;
    background-color: #545c64; 
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .toggle-button{
    color:white;
    padding-left: 10px;
  }
  .bottom{
    flex: 1;
    padding: 1px;
  }

 
</style>

这个页面中：

1.CSS写出了页面样式

主要结构分左右两部分，左边就是菜单栏，右边分上下两部分结构，上部分是导航的位置，下部分就是主体部分

2.对手机平板等做了适配

因为快递室将来都会配置专用手机来做管理，所以提前做了手机适配（只用来查看），可以搜索flexible参考。

3.使用了图标，这个比较简单，包括菜单折叠，直接参考官方文档就好。

Menu 菜单 | Element Plus (gitee.io)

这次就这样吧，下一篇，我们开始说主体部分的各个画面。