Vue+ElementUI开发多页签前后端分离的ERP系统

一般编程问题

下载此实例

开发语言：Others
实例大小：3.80M
下载次数：64
浏览次数：557
发布时间：2022-01-11
实例类别：一般编程问题
发布人：546671600
文件格式：.zip
所需积分：10

相关标签： vue element 前后端分离 ERP 多页签框架

网友评论举报投诉收藏该页

下载此实例

实例介绍

[下载地址]

【实例简介】Vue与ElementUI开发多页签前后端分离的ERP前端系统

技术：Vue, ElementUI, Axios
功能：用户登录，主页，多级菜单，多页签，数据的增删改查，适合以此为基础开发ERP系统
使用：1）下载解压 2）开发工具VSCode 3）应用Vue脚手架 4）依赖安装 npm install 5）执行 npm run serve

【实例截图】

from clipboard

【核心代码】

1)登录

1.1 界面

<span>欢迎使用DM测试电子资源管理平台</span>

<ul>

</ul>

</div>

</div>

<div class="logoText">DM测试电子资源管理系统</div>

</div>

<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>

</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

标签： vue element 前后端分离 ERP 多页签框架

实例下载地址