实例介绍
【实例简介】Vue与ElementUI开发多页签前后端分离的ERP前端系统
技术：Vue, ElementUI, Axios
功能：用户登录，主页，多级菜单，多页签， 数据的增删改查， 适合以此为基础开发ERP系统
使用：1）下载解压 2）开发工具VSCode 3）应用Vue脚手架 4）依赖安装 npm install 5）执行 npm run serve
【实例截图】
【核心代码】
1)登录
1.1 界面
<template>
<div class="login-layout">
<div class="loginTop">
<span>欢迎使用DM测试电子资源管理平台</span>
<ul>
<li><a href="#">返回首页</a></li>
<li><a href="#">帮助</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
<div class="loginbody">
<div class="login-container">
<div class="logo">
<div class="logoImg">
<img src="@/assets/img/logo_sf.png" alt="">
</div>
<div class="logoText">DM测试电子资源管理系统</div>
</div>
<div class="inner">
<el-form label-width="120px" :model="myForm" :rules="myRules" status-icon ref="myForm">
<el-form-item label="用户名：" prop="username">
<el-input v-model="myForm.username" placeholder="请输入用户名" clearable></el-input>
</el-form-item>
<el-form-item label="密码：" prop="password">
<el-input v-model="myForm.password" type="password" placeholder="请输入密码" clearable></el-input>
</el-form-item>
<el-form-item>
<el-row :gutter="5">
<el-col :span="12"><el-button class="btnLogin" @click="onSubmit" type="primary" :loading="logining">登录</el-button></el-col>
<el-col :span="6"><el-button class="btnReset" @click="onReset">重置</el-button></el-col>
</el-row>
</el-form-item>
</el-form>
</div>
</div>
</div>
<div class="loginbm">版权所有 2021 <a href="">DM测试电子有限公司</a> </div>
</div>
</template>
1.2 数据
export default {
data () {
return {
logining: false, //定义loading默认为false
myForm: {
username: '',
password: ''
},
myRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 1, max: 15, message: '用户名需要1-15位', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 1, max: 15, message: '密码需要1-15位', trigger: 'blur' }
]
}
1.3 网络请求
axios({
url:"https://xxx/dataApi/login.php",
params:this.myForm
}).then(res=>{
console.log(res)
if (res.data.code == '401') {
this.$message.error(res.data.txt)
} else if (res.data.code == 200) {
window.sessionStorage.setItem('token', res.data.token)
this.$message.success('登录成功')
this.$router.push('/home')
}
})
2) axios封装
import axios from 'axios'
export function request (obj) {
const instance = axios.create({
baseURL: 'https://xxx/dataApi/login',
timeout: 5000,
headers: { 'X-Token': window.sessionStorage.getItem('token') }
})
return instance(obj)
}
export function request2 (config) {
const instance = axios.create({
baseURL: 'https://xxx/dataApi/erp',
timeout: 5000
})
return instance(config)
}
.└── ErpVueElementUIAspDotNet
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── App.vue
│ ├── assets
│ │ ├── css
│ │ │ ├── color-dark.css
│ │ │ ├── icon.css
│ │ │ ├── main.css
│ │ │ └── theme-green
│ │ │ ├── color-green.css
│ │ │ ├── fonts
│ │ │ │ ├── element-icons.ttf
│ │ │ │ └── element-icons.woff
│ │ │ └── index.css
│ │ ├── img
│ │ │ ├── img.jpg
│ │ │ ├── light.png
│ │ │ ├── loginbg1.png
│ │ │ ├── loginbg2.png
│ │ │ ├── loginbg3.png
│ │ │ └── logo_sf.png
│ │ ├── js
│ │ │ ├── axiosFun.js
│ │ │ ├── common.js
│ │ │ ├── index.js
│ │ │ ├── networks.js
│ │ │ ├── request.js
│ │ │ ├── store.js
│ │ │ ├── userMG.js
│ │ │ └── validator.js
│ │ ├── logo copy.png
│ │ └── logo.png
│ ├── components
│ │ └── Pagination.vue
│ ├── main.js
│ ├── router
│ │ └── index.js
│ └── views
│ ├── bl
│ │ ├── BlAdd.vue
│ │ ├── BlFooter.vue
│ │ ├── BlHeader.vue
│ │ ├── BlItem.vue
│ │ ├── BlShow.vue
│ │ └── Blog.vue
│ ├── po
│ │ ├── PoDetail.vue
│ │ ├── PoList.vue
│ │ └── PoMain.vue
│ ├── pub
│ │ ├── FindCust.vue
│ │ ├── FindProd.vue
│ │ └── FindVend.vue
│ ├── sy
│ │ ├── SyDept.vue
│ │ └── SyUser.vue
│ ├── tst
│ │ ├── Alluser.vue
│ │ ├── BaseForm.vue
│ │ ├── BaseTable.vue
│ │ ├── Goods.vue
│ │ ├── MyBaseForm.vue
│ │ ├── Tabs.vue
│ │ └── updateDialog.vue
│ └── web
│ ├── Header.vue
│ ├── Home.vue
│ ├── Login.vue
│ ├── Sidebar.vue
│ ├── Tags.vue
│ ├── Welcome.vue
│ ├── bus.js
│ └── directives.js
└── yarn.lock
18 directories, 63 files
好例子网口号：伸出你的我的手 — 分享！
相关软件
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论