目次
序文
3. 完全なバックグラウンド管理システムを構築する方法の説明に重点を置く
4. ページネーションコンポーネント (主に右下隅で異なるコンポーネント間を切り替えます)
要約する
序文
ソフトウェア開発の継続的な進歩に伴い、フロントエンドとバックエンドのフレームワーク技術も大幅に進歩しており、フロントエンドには主に古典的な Layui フレームワークのほか、Google Flutter や人気のある Vue フレームワークが含まれています。主に Spring フレームワーク、特に広く使用されている SpringBoot とフロントエンドが含まれます。この技術はますます重要になってきています。多くの人が Vue 技術を学び始めています。この記事では、Vue の基本的な内容と Vue のプロジェクト共有について紹介します。バックグラウンド管理システム。
1.Vueとは何ですか?
Vue は、 ユーザー インターフェイスや単一ページ アプリケーションを構築するための人気のある軽量JavaScript フレームワークです。Vue は Evan You によって作成され、2014 年に初めてリリースされました。その主要なオープン ソースは、元 Google フロントエンド開発者である You Yuxi です。Vue は、パフォーマンスと拡張性を備えながら、シンプル、柔軟、使いやすいように設計されています。
Vue は、宣言型レンダリングとコンポーネント化されたアーキテクチャを使用して、開発者がアプリケーションを複数の小さなコンポーネントに分割し、コンポーネントからモジュールを形成できるようにします。これにより、開発の複雑さが大幅に軽減され、フロントエンド開発者の作業の困難さが軽減され、複雑なユーザー インターフェイスの構築に統合されます。一緒。Vue は、開発者がアプリケーションの状態とルーティングを簡単に管理できるようにするツールとプラグインのセットも提供し、動的かつ遅延読み込みをサポートします。
Vue はまた、多数のドキュメントとチュートリアルを提供しています。Vue のエコロジー分野の開発は非常に完成していると言え、現在のバージョンは Vue3.0 に更新されています。活発なコミュニティであり、お気に入りの 1 つとなっています。開発者向けのフレームワーク。
2. Vueを使用する手順
- Vue.jsを使用してアプリケーションを構築するには、次の手順に従います (ここでは VScode を使用します)。
- Vue.js をインストールする: まず、Vue.js をインストールする必要があります。npmまたはyarnを使用してインストールできます。
- Vue インスタンスを作成する: ファイル内に Vue インスタンスを作成します。通常は、index.html または webpack.config.js に設定されます。
- コンポーネントの作成: コンポーネントを作成し、コンポーネント内でデータ、メソッド、ライフサイクルフックなどを定義します。コンポーネントはパブリックまたはプライベートにすることができます。
- コンポーネント通信: コンポーネントは通信する必要があり、Vuex や Vue Router などの状態管理ツールやルーティング管理ツールを使用できます。
- ルートの作成: ルートを作成し、ルート内にナビゲーション ガード、動的ルートなどを定義します。
- 動的ロードの作成: Vue Router の動的ロード機能を使用して、データをアプリケーションにロードします。
- 遅延読み込みを作成する: Vuex またはその他の状態管理ツールを使用して遅延読み込みを実装し、必要な場合にのみデータを読み込みます。
- テストの作成: 単体テストと統合テストを作成して、コンポーネントとアプリケーションのパフォーマンスと機能を検証します。
- ケアとメンテナンス: アプリケーションは、正しく機能し、最新の状態に保つために、定期的にメンテナンスおよび更新されます。
- 上記は、Vue.js を使用してアプリケーションを構築する基本的な手順です。もちろん、実際の開発では、特定のニーズに応じて調整および最適化する必要があります。
3. 完全なバックグラウンド管理システムを構築する方法の説明に重点を置く
このプロジェクトでは主に Vue2.0 を使用して管理システムを構築していますが、その他に ElementUi コンポーネント ライブラリ + webpack + ES6/7 + axios などのテクノロジーを使用しています。
- ログイン認証
- ルートインターセプト
- 会社経営
- 注文取引
- 商品管理
- 役割管理
- システムマネジメント
- 支払い管理
- ユーザー管理
- 支払い設定
- ビッグデータチャート
- システム環境変数
- 権限管理
- メニュー管理
- パーソナルセンター
メイン管理ページ表示
ログインページ
ビッグデータページ
4. 主要なソースコードの共有
1. エラー成分の表示
/**
* 404
*/
<template>
<div class="page-404">
<h1>404!</h1>
<h2>Sorry, page not found</h2>
</div>
</template>
<style scoped>
.page-404 {
text-align: center;
}
.page-404 h1 {
font-size: 98px;
font-weight: 700;
line-height: 150px;
text-shadow: rgba(61, 61, 61, 0.3) 1px 1px, rgba(61, 61, 61, 0.2) 2px 2px,
rgba(61, 61, 61, 0.3) 3px 3px;
}
.page-404 h2 {
line-height: 30px;
font-size: 30px;
}
</style>2. 左側のメニューコンポーネント
<template>
<el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b">
<div class="logobox">
<img class="logoimg" src="../assets/img/logo.png" alt="">
</div>
<el-submenu v-for="menu in allmenu" :key="menu.menuid" :index="menu.menuname">
<template slot="title">
<i class="iconfont" :class="menu.icon"></i>
<span>{
{menu.menuname}}</span>
</template>
<el-menu-item-group>
<el-menu-item v-for="chmenu in menu.menus" :index="'/'+chmenu.url" :key="chmenu.menuid">
<i class="iconfont" :class="chmenu.icon"></i>
<span>{
{chmenu.menuname}}</span>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</template>
<script>
import { menu } from '../api/userMG'
export default {
name: 'leftnav',
data() {
return {
collapsed: false,
allmenu: []
}
},
// 创建完毕状态(里面是操作)
created() {
// 获取图形验证码
let res = {
success: true,
data: [
{
menuid: 1,
icon: 'li-icon-xiangmuguanli',
menuname: '公司管理',
hasThird: null,
url: null,
// 多级路由嵌套
menus: [
{
menuid: 2,
icon: 'icon-cat-skuQuery',
menuname: '商品销售',
hasThird: 'N',
url: 'goods/Goods',
menus: null
}
]
},
{
menuid: 33,
icon: 'li-icon-dingdanguanli',
menuname: '订单交易',
hasThird: null,
url: null,
menus: [
{
menuid: 34,
icon: 'icon-order-manage',
menuname: '交易订单',
hasThird: 'N',
url: 'pay/Order',
menus: null
}
]
},
{
menuid: 71,
icon: 'li-icon-xitongguanli',
menuname: '系统管理',
hasThird: null,
url: null,
menus: [
{
menuid: 72,
icon: 'icon-cus-manage',
menuname: '用户管理',
hasThird: 'N',
url: 'system/user',
menus: null
},
{
menuid: 174,
icon: 'icon-cms-manage',
menuname: '菜单管理',
hasThird: 'N',
url: 'system/Module',
menus: null
},
{
menuid: 73,
icon: 'icon-news-manage',
menuname: '角色管理',
hasThird: 'N',
url: 'system/Role',
menus: null
},
{
menuid: 74,
icon: 'icon-cs-manage',
menuname: '公司管理',
hasThird: 'N',
url: 'system/Dept',
menus: null
},
{
menuid: 75,
icon: 'icon-promotion-manage',
menuname: '系统环境变量',
hasThird: 'N',
url: 'system/Variable',
menus: null
},
{
menuid: 76,
icon: 'icon-cms-manage',
menuname: '权限管理',
hasThird: 'N',
url: 'system/Permission',
menus: null
}
]
},
{
menuid: 128,
icon: 'li-icon-shangchengxitongtubiaozitihuayuanwenjian91',
menuname: '支付管理',
hasThird: null,
url: null,
menus: [
{
menuid: 129,
icon: 'icon-provider-manage',
menuname: '支付配置信息',
hasThird: 'N',
url: 'machine/MachineConfig',
menus: null
},
{
menuid: 175,
icon: 'icon-provider-manage',
menuname: '支付配置',
hasThird: 'N',
url: 'pay/Config',
menus: null
}
]
},
{
menuid: 150,
icon: 'li-icon-shangchengxitongtubiaozitihuayuanwenjian91',
menuname: '图表',
hasThird: null,
url: null,
menus: [
{
menuid: 159,
icon: 'icon-provider-manage',
menuname: '数据可视化',
hasThird: 'N',
url: 'charts/statistics',
menus: null
}
]
}
],
msg: 'success'
}
this.allmenu = res.data
menu(localStorage.getItem('logintoken'))
.then(res => {
console.log(JSON.stringify(res))
if (res.success) {
this.allmenu = res.data
} else {
this.$message.error(res.msg)
return false
}
})
.catch(err => {
this.$message.error('菜单加载失败，请稍后再试！')
})
监听
this.$root.Bus.$on('toggle', value => {
this.collapsed = !value
})
}
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 240px;
min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
border: none;
text-align: left;
}
.el-menu-item-group__title {
padding: 0px;
}
.el-menu-bg {
background-color: #1f2d3d !important;
}
.el-menu {
border: none;
}
.logobox {
height: 40px;
line-height: 40px;
color: #9d9d9d;
font-size: 20px;
text-align: center;
padding: 20px 0px;
}
.logoimg {
height: 40px;
}
</style>3. ナビゲーション領域のコンポーネント
/**
* 头部菜单 这个组件就是导航区
*/
<template>
<el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
<el-button class="buttonimg">
<img class="showimg" :src="collapsed?imgsq:imgshow" @click="toggle(collapsed)">
</el-button>
<el-submenu index="2" class="submenu">
<!-- <template slot="title">{
{user.userRealName}}</template> -->
<template slot="title">个人信息中心</template>
<el-menu-item index="2-1">set</el-menu-item>
<el-menu-item @click="content()" index="2-2">person</el-menu-item>
<el-menu-item @click="exit()" index="2-3">exit</el-menu-item>
</el-submenu>
</el-menu>
</template>
<script>
import { loginout } from '../api/userMG'
export default {
name: 'navcon',
data() {
return {
collapsed: true,
imgshow: require('../assets/img/show.png'),
imgsq: require('../assets/img/sq.png'),
user: {}
}
},
// 创建完毕状态(里面是操作)
created() {
this.user = JSON.parse(localStorage.getItem('userdata'))
},
methods: {
// 退出登录
exit() {
this.$confirm('退出登录, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
setTimeout(() => {
this.$store.commit('logout', 'false')
this.$router.push({ path: '/login' })
this.$message({
type: 'success',
message: '已退出登录!'
})
}, 1000)
loginout()
.then(res => {
if (res.success) {
//如果请求成功就让他2秒跳转路由
setTimeout(() => {
this.$store.commit('logout', 'false')
this.$router.push({ path: '/login' })
this.$message({
type: 'success',
message: '已退出登录!'
})
}, 1000)
} else {
this.$message.error(res.msg)
this.logining = false
return false
}
})
.catch(err => {
// 获取图形验证码
this.getcode()
this.logining = false
this.$message.error('退出失败，请稍后再试！')
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消'
})
})
},
// 切换显示
toggle(showtype) {
this.collapsed = !showtype
this.$root.Bus.$emit('toggle', this.collapsed)
}
}
}
</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
border: none;
}
.submenu {
float: right;
}
.buttonimg {
height: 60px;
background-color: transparent;
border: none;
}
.showimg {
width: 26px;
height: 26px;
position: absolute;
top: 17px;
left: 17px;
}
.showimg:active {
border: none;
}
</style>4. ページネーションコンポーネント (主に右下隅で異なるコンポーネント間を切り替えます)
<template>
<el-pagination class="page-box" @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="childMsg.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="childMsg.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="childMsg.total">
</el-pagination>
</template>
<script>
export default {
name: 'Pagination',
props: ['childMsg'],
data() {
return {
pageparm: {
currentPage: this.childMsg.currentPage,
pageSize: this.childMsg.pageSize
}
}
},
created() {},
methods: {
handleSizeChange(val) {
this.pageparm.pageSize = val
this.$emit('callFather', this.pageparm)
},
handleCurrentChange(val) {
this.pageparm.currentPage = val
this.$emit('callFather', this.pageparm)
}
}
}
</script>
<style>
.page-box {
margin: 10px auto;
}
</style>
5. テンプレートのコンポーネント
<template>
<div>
</div>
</template>
<script>
import headerComponent from "./head.vue";
export default {
name: "template",
data() {
return {};
},
components: {
headerComponent
},
watch: {},
methods: {
addFun() {},
submitFun() {}
},
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeDestroy() {},
destroyed() {}
};
</script>
<style scoped>
</style>
6. メインビューコンポーネント
ビッグデータ視覚化ページのコンポーネント
<template>
<!-- 组件主盒子 -->
<div class="stbox">
<!-- 面包屑导航 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>数据可视化</el-breadcrumb-item>
</el-breadcrumb>
<!-- 搜索，切换 -->
<el-row :gutter="23">
<el-col :span="18">
<div class="stbgc">
<el-row :gutter="23">
<el-col :span="7">
<el-input size="small" v-model="machineNo" placeholder="请输入所属公司"></el-input>
</el-col>
<el-col :span="7">
<el-input size="small" v-model="machineNo" placeholder="请输入资产编号"></el-input>
</el-col>
<el-col :span="7">
<el-input size="small" v-model="machineNo" placeholder="请输入"></el-input>
</el-col>
<el-col :span="3" class="stsearch">
<el-button size="small" type="primary">搜索</el-button>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="6">
<div class="stbgc">
<el-row>
<el-col :span="8" class="text-c">
<el-radio v-model="type" label="day">日</el-radio>
</el-col>
<el-col :span="8" class="text-c">
<el-radio v-model="type" label="month">月</el-radio>
</el-col>
<el-col :span="8" class="text-c">
<el-radio v-model="type" label="years">年</el-radio>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<!-- 统计图 -->
<el-row :gutter="23">
<el-col :span="8" class="text-c">
<div class="st-gbox">
<div class="cavasbox" ref="SCEchart"></div>
</div>
</el-col>
<el-col :span="8" class="text-c">
<div class="st-gbox">
<div class="cavasbox" ref="SUMEchart"></div>
</div>
</el-col>
<el-col :span="8" class="text-c">
<div class="st-gbox">
<div class="cavasbox" ref="ClickEchart"></div>
</div>
</el-col>
</el-row>
<!-- 统计图 -->
<div>
<el-row :gutter="23">
<el-col :span="12" class="text-c">
<div class="paybox">
<div class="cavasbox" ref="payEchart"></div>
</div>
</el-col>
<el-col :span="12" class="text-c">
<div class="paybox">
<div class="cavasbox" ref="payNumEchart"></div>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import Chart from 'echarts'
export default {
name: "welcome",
data() {
return {
machineNo: '',
type: 'day',
// 销售总笔数
SCEoption: {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}月 : {c}"
},
legend: {
data: [{
name: '销售总笔数',
icon: 'rect'
}],
top: 1,
left: 1,
itemGap: 10,
itemWidth: 12,
itemHeight: 12,
textStyle: {
fontSize: 12,
color: "#323232"
}
},
grid: {
left: 50,
right: 10,
top: 30,
bottom: 30,
borderWidth: 1
},
xAxis: {
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
axisLine: {
lineStyle: {
color: "#999999",
width: 1
}
},
axisLabel: {
margin: 14,
height: 70,
interval: 0,
textStyle: {
fontSize: 10,
color: "#999999"
}
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: "#999999",
width: 1
}
},
axisLabel: {
margin: 14,
textStyle: {
fontSize: 10,
color: "#999999"
}
}
},
series: [{
name: '销售总笔数',
type: 'bar',
barGap: 0,
data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
barWidth: 10,
itemStyle: {
normal: {
color: new Chart.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
]
)
},
emphasis: {
color: new Chart.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#2378f7' },
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#83bff6' }
]
)
}
}
}]
},
// 销售总金额
SUMoption: {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}月 : {c}"
},
legend: {
data: [{
name: '销售总金额',
icon: 'rect'
}],
top: 1,
left: 1,
itemGap: 10,
itemWidth: 12,
itemHeight: 12,
textStyle: {
fontSize: 12,
color: "#323232"
}
},
grid: {
left: 50,
right: 10,
top: 30,
bottom: 30,
borderWidth: 1
},
xAxis: {
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
axisLine: {
lineStyle: {
color: "#999999",
width: 1
}
},
axisLabel: {
margin: 14,
height: 70,
interval: 0,
textStyle: {
fontSize: 10,
color: "#999999"
}
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: "#999999",
width: 1
}
},
axisLabel: {
margin: 14,
textStyle: {
fontSize: 10,
color: "#999999"
}
}
},
series: [{
name: '销售总金额',
// type: 'bar',
type: 'line',
barGap: 0,
data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
barWidth: 10,
itemStyle: {
color: "#108ff9"
}
}]
},
// 总点击量
Clickoption: {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}月 : {c}"
},
legend: {
data: [{
name: '总点击量',
icon: 'rect'
}],
top: 1,
left: 1,
itemGap: 10,
itemWidth: 12,
itemHeight: 12,
textStyle: {
fontSize: 12,
color: "#323232"
}
},
grid: {
left: 50,
right: 10,
top: 30,
bottom: 30,
borderWidth: 1
},
xAxis: {
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
axisLine: {
lineStyle: {
color: "#999999",
width: 1
}
},
axisLabel: {
margin: 14,
height: 70,
interval: 0,
textStyle: {
fontSize: 10,
color: "#999999"
}
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: "#999999",
width: 1
}
},
axisLabel: {
margin: 14,
textStyle: {
fontSize: 10,
color: "#999999"
}
}
},
series: [{
name: '总点击量',
type: 'bar',
barGap: 0,
data: [50000, 10000, 80000, 30000, 50000, 60000, 40000, 80000, 50000, 20000, 60000, 40000],
barWidth: 10,
itemStyle: {
color: "#48cefd"
}
}]
},
// 支付方式统计
payoption: {
backgroundColor: '#2c343c',
title: {
text: '支付方式统计(金额)',
left: 10,
top: 5,
textStyle: {
fontSize: 12,
color: '#ccc'
}
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [
{
name: '支付方式统计(金额)',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{ value: 335, name: '支付宝' },
{ value: 310, name: '银商二维码' },
{ value: 274, name: '会员' },
{ value: 235, name: '微信支付' },
{ value: 100, name: 'Pos通' }
].sort(function (a, b) { return a.value - b.value; }),
roseType: 'radius',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
}
},
itemStyle: {
normal: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
},
payNumoption: {
backgroundColor: '#2c343c',
title: {
text: '支付方式统计(笔数)',
left: 10,
top: 5,
textStyle: {
fontSize: 12,
color: '#ccc'
}
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [
{
name: '支付方式统计(笔数)',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{ value: 335, name: '支付宝' },
{ value: 310, name: '银商二维码' },
{ value: 274, name: '会员' },
{ value: 235, name: '微信支付' },
{ value: 100, name: 'Pos通' }
].sort(function (a, b) { return a.value - b.value; }),
roseType: 'radius',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
}
},
itemStyle: {
normal: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
},
}
},
// 导入组件
components: {
// 点聚合组件
},
// 创建完毕状态(里面是操作)
created() { },
// 挂载结束状态(里面是操作)
mounted() {
this.getSCE()
this.getSUM()
this.getClick()
this.getpay()
this.getpayNum()
},
// 里面的函数只有调用才会执行
methods: {
// 交易总笔数
getSCE() {
this.chart = Chart.init(this.$refs.SCEchart)
this.chart.setOption(this.SCEoption)
},
// 交易总金额
getSUM() {
this.chart = Chart.init(this.$refs.SUMEchart)
this.chart.setOption(this.SUMoption)
},
// 总点击量
getClick() {
this.chart = Chart.init(this.$refs.ClickEchart)
this.chart.setOption(this.Clickoption)
},
// 支付方式统计
getpay() {
this.chart = Chart.init(this.$refs.payEchart)
this.chart.setOption(this.payoption)
},
// 支付方式统计
getpayNum() {
this.chart = Chart.init(this.$refs.payNumEchart)
this.chart.setOption(this.payNumoption)
}
}
};
</script>
<style>
.stbox {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.stbgc {
background-color: #fff;
height: 60px;
line-height: 60px;
border-radius: 5px;
padding: 0px 16px;
}
.stsearch {
text-align: center;
}
.text-c {
text-align: center;
}
.st-gbox {
background-color: #fff;
margin-top: 20px;
border-radius: 5px;
height: 30vh;
box-sizing: border-box;
padding: 10px;
}
.cavasbox {
box-sizing: border-box;
width: 100%;
height: 100%;
}
.paybox {
width: 100%;
background-color: #fff;
box-sizing: border-box;
border-radius: 5px;
margin-top: 20px;
height: 32vh;
}
</style>商品管理コンポーネント
<template>
<div>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
</el-breadcrumb>
<el-form :inline="true" :model="formInline" class="user-search">
<el-form-item label="搜索：">
<el-input size="small" v-model="formInline.deptName" placeholder="输入部门名称"></el-input>
</el-form-item>
<el-form-item label="">
<el-input size="small" v-model="formInline.deptNo" placeholder="输入部门代码"></el-input>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
<el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
</el-form-item>
</el-form>
<!--列表-->
<el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
<el-table-column align="center" type="selection" width="60">
</el-table-column>
<el-table-column sortable prop="deptName" label="部门名称" width="300">
</el-table-column>
<el-table-column sortable prop="deptNo" label="部门代码" width="300">
</el-table-column>
<el-table-column sortable prop="editTime" label="修改时间" width="300">
<template slot-scope="scope">
<div>{
{scope.row.editTime|timestampToTime}}</div>
</template>
</el-table-column>
<el-table-column sortable prop="editUser" label="修改人" width="300">
</el-table-column>
<el-table-column align="center" label="操作" min-width="300">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
<!-- 编辑界面 -->
<el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
<el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
<el-form-item label="部门名称" prop="deptName">
<el-input size="small" v-model="editForm.deptName" auto-complete="off" placeholder="请输入部门名称"></el-input>
</el-form-item>
<el-form-item label="部门代码" prop="deptNo">
<el-input size="small" v-model="editForm.deptNo" auto-complete="off" placeholder="请输入部门代码"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="closeDialog">取消</el-button>
<el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { deptList, deptSave, deptDelete } from '../../api/userMG'
import Pagination from '../../components/Pagination'
export default {
data() {
return {
nshow: true, //switch开启
fshow: false, //switch关闭
loading: false, //是显示加载
editFormVisible: false, //控制编辑页面显示与隐藏
title: '添加',
editForm: {
deptId: '',
deptName: '',
deptNo: '',
token: localStorage.getItem('logintoken')
},
// rules表单验证
rules: {
deptName: [
{ required: true, message: '请输入部门名称', trigger: 'blur' }
],
deptNo: [{ required: true, message: '请输入部门代码', trigger: 'blur' }]
},
formInline: {
page: 1,
limit: 10,
varLable: '',
varName: '',
token: localStorage.getItem('logintoken')
},
// 删除部门
seletedata: {
ids: '',
token: localStorage.getItem('logintoken')
},
userparm: [], //搜索权限
listData: [], //用户数据
// 分页参数
pageparm: {
currentPage: 1,
pageSize: 10,
total: 10
}
}
},
// 注册组件
components: {
Pagination
},
/**
* 数据发生改变
*/
/**
* 创建完毕
*/
created() {
this.getdata(this.formInline)
},
/**
* 里面的方法只有被调用才会执行
*/
methods: {
// 获取公司列表
getdata(parameter) {
this.loading = true
// 模拟数据开始
let res = {
code: 0,
msg: null,
count: 5,
data: [
{
addUser: null,
editUser: null,
addTime: 1521062371000,
editTime: 1526700200000,
deptId: 2,
deptName: 'XX分公司',
deptNo: '1',
parentId: 1
},
{
addUser: null,
editUser: null,
addTime: 1521063247000,
editTime: 1526652291000,
deptId: 3,
deptName: '上海测试',
deptNo: '02',
parentId: 1
},
{
addUser: null,
editUser: null,
addTime: 1526349555000,
editTime: 1526349565000,
deptId: 12,
deptName: '1',
deptNo: '11',
parentId: 1
},
{
addUser: null,
editUser: null,
addTime: 1526373178000,
editTime: 1526373178000,
deptId: 13,
deptName: '5',
deptNo: '5',
parentId: 1
},
{
addUser: null,
editUser: null,
addTime: 1526453107000,
editTime: 1526453107000,
deptId: 17,
deptName: 'v',
deptNo: 'v',
parentId: 1
}
]
}
this.loading = false
this.listData = res.data
this.pageparm.currentPage = this.formInline.page
this.pageparm.pageSize = this.formInline.limit
this.pageparm.total = res.count
deptList(parameter)
.then(res => {
this.loading = false
if (res.success == false) {
this.$message({
type: 'info',
message: res.msg
})
} else {
this.listData = res.data
// 分页赋值
this.pageparm.currentPage = this.formInline.page
this.pageparm.pageSize = this.formInline.limit
this.pageparm.total = res.count
}
})
.catch(err => {
this.loading = false
this.$message.error('菜单加载失败，请稍后再试！')
})
},
callFather(parm) {
this.formInline.page = parm.currentPage
this.formInline.limit = parm.pageSize
this.getdata(this.formInline)
},
search() {
this.getdata(this.formInline)
},
handleEdit: function(index, row) {
this.editFormVisible = true
if (row != undefined && row != 'undefined') {
this.title = '修改'
this.editForm.deptId = row.deptId
this.editForm.deptName = row.deptName
this.editForm.deptNo = row.deptNo
} else {
this.title = '添加'
this.editForm.deptId = ''
this.editForm.deptName = ''
this.editForm.deptNo = ''
}
},
submitForm(editData) {
this.$refs[editData].validate(valid => {
if (valid) {
deptSave(this.editForm)
.then(res => {
this.editFormVisible = false
this.loading = false
if (res.success) {
this.getdata(this.formInline)
this.$message({
type: 'success',
message: '公司保存成功！'
})
} else {
this.$message({
type: 'info',
message: res.msg
})
}
})
.catch(err => {
this.editFormVisible = false
this.loading = false
this.$message.error('公司保存失败，请稍后再试！')
})
} else {
return false
}
})
},
// 删除公司
deleteUser(index, row) {
this.$confirm('确定要删除吗?', '信息', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deptDelete(row.deptId)
.then(res => {
if (res.success) {
this.$message({
type: 'success',
message: '公司已删除!'
})
this.getdata(this.formInline)
} else {
this.$message({
type: 'info',
message: res.msg
})
}
})
.catch(err => {
this.loading = false
this.$message.error('公司删除失败，请稍后再试！')
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
closeDialog() {
this.editFormVisible = false
}
}
}
</script>
<style scoped>
.user-search {
margin-top: 20px;
}
.userRole {
width: 100%;
}
</style> 7. App.vueコンポーネント
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
<style>
html,
body {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
widows: 100%;
height: 100%;
}
</style>8. main.js (コアコード)
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App';
// 引入路由
import router from './router';
// 引入状态管理
import store from './vuex/store';
import './assets/icon/iconfont.css'
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
import axios from 'axios';
Vue.prototype.$axios = axios;
Vue.config.productionTip = false;
// 使用element UI
Vue.use(ElementUI);
import * as custom from './utils/util'
Object.keys(custom).forEach(key => {
Vue.filter(key, custom[key])
})
router.beforeEach((to, from, next) => {
if (to.matched.length != 0) {
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if (Boolean(localStorage.getItem("userInfo"))) { // 通过vuex state获取当前的user是否存在
next();
} else {
next({
path: '/login',
query: { redirect: to.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
})
}
} else {
if (Boolean(localStorage.getItem("userInfo"))) { // 判断是否登录
if (to.path != "/" && to.path != "/login") { //判断是否要跳到登录界面
next();
} else {
/**
* 防刷新，如果登录，修改路由跳转到登录页面，修改路由为登录后的首页
*/
next({
path: '/goods/Goods'
})
}
} else {
next();
}
}
} else {
next({
path: '/login',
query: { redirect: to.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
})
}
})
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>',
data: {
Bus: new Vue()
}
})要約する
以上が今日のお話です. この記事では主に Vue の使い方チュートリアルを紹介し, Vue で構築されたバックグラウンドの商品管理システムについて共有します. Vue テクノロジーが優れているという理由だけでなく, ソフトウェア開発者にとって Vue テクノロジーをよく学ぶことは非常に重要です.人気のあるだけでなく、Vue のエコロジカル テクノロジは比較的完成度が高く、さまざまなシナリオに適用でき、エンタープライズ開発の困難さを軽減し、作業効率を大幅に向上させます。Vue の公式技術者も常に Vue テクノロジを保守および更新しています。今日はここで紹介します。皆さんのお役に立てれば幸いです。気に入ったお友達は3回連続でサポートしてください！さらに素晴らしいプロジェクトがあなたを待っています！