开发流程_小U商城后台管理系统_web实训项目

项目开发

项目开发

安装依赖

在项目开发中需要使用到很多的依赖，比如axios、vue-router、echarts、vuex等

npm i axios vue-router echarts vuex wangeidtor --save

组件概念

组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可复用的代码，在大型应用中为了分工、代码复用，不可避免地需要将应用抽象为多个相对独立的模块，组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。

配置代理

在项目中需要使用axios发起网络请求，主要是请求接口完成数据的相关操作，需要配置代理进行请求的转发。在项目目录/src/config/index.js文件中添加如下内容：

proxyTable: {
    '/api':{
        target:'http://localhost:3000',//目标域名地址
        changeOrigin:true//允许跨域
    },
    '/uploads':{
        target:'http://localhost:3000',
        changeOrigin:true
    }
}

配置好proxyTable的代理转发请求后，重新启动项目，在项目中请求3000端口的接口地址时，就可以进行代理的转发了。

axios 安装和封装公用方法

执行如下命令，安装axios，用来发起网络请求

npm i axios --save

封装项目中常用的get、post方法，并在其中添加上token

import axios from 'axios'
import store from '../../store'
/**
 * 携带令牌的get方法
 * @param {请求地址} url 
 * @param {提交的数据} data 
 */
function get(url,params = {}){
    return new Promise((resolve,reject)=>{
        axios({
            url,
            params,
            headers:{
                'Authorization':store.state.adminUser.token
            }
        }).then(response=>{
            resolve(response)
        }).catch(err=>{
            reject(err)
        })
    })
} 
/**
 * 携带令牌的post请求
 * @param {请求地址} url 
 * @param {提交的数据} data 
 */
function post(url,data = {}){
    return new Promise((resolve,reject)=>{
        axios({
            url,
            method:'post',
            data,
            headers:{
                'Authorization':store.state.adminUser.token
            }
        }).then(response=>{
            resolve(response)
        }).catch(err=>{
            reject(err)
        })
    })
} 
export default { get,post }

安装路由并配置路由规则

Vue路由vue-router是官方的路由插件，与Vue深度集成，适用于构建单页面应用。

Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。

安装路由，并在项目中引入

import Vue from 'vue'
import App from './App'
//引入路由配置
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,//将路由配置挂到vue实例上
  components: { App },
  template: '<App/>'
})

定义路由规则

import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'
Vue.use(Router)
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
let router = new Router({
    routes: [
        {
            path:'/',
            component:()=>import('@/components/pages/Layout'),
            children:[
                {
                    path:'home',
                    component:()=>import('../components/pages/Index'),
                    //设置一个自定义属性，用来告知页面加载时，左侧哪个菜单选中
                    meta:{select:'/home'}
                },
                {
                    path:'menu',
                    component:()=>import('../components/pages/Menu/Index'),
                    meta:{select:'/menu'}
                },
                {
                    path:'menu/add',
                    component:()=>import('../components/pages/Menu/Info'),
                    meta:{select:'/menu'}
                },
                {
                    path:'menu/:menuid',
                    component:()=>import('../components/pages/Menu/Info'),
                    meta:{select:'/menu'}
                },
                {
                    path:'role',
                    component:()=>import('../components/pages/Role/Index'),
                    meta:{select:'/role'}
                },
                {
                    path:'role/add',
                    component:()=>import('../components/pages/Role/Info'),
                    meta:{select:'/role'}
                },
                {
                    path:'role/:roleid',
                    component:()=>import('../components/pages/Role/Info'),
                    meta:{select:'/role'}
                },
                {
                    path:'user',
                    component:()=>import('../components/pages/User/Index'),
                    meta:{select:'/user'}
                },
                {
                    path:'user/add',
                    component:()=>import('../components/pages/User/Info'),
                    meta:{select:'/user'}
                },
                {
                    path:'user/:userid',
                    component:()=>import('../components/pages/User/Info'),
                    meta:{select:'/user'}
                },
                {
                    path:'category',
                    component:()=>import('../components/pages/Category/Index'),
                    meta:{select:'/category'}
                },
                {
                    path:'category/add',
                    component:()=>import('../components/pages/Category/Info'),
                    meta:{select:'/category'}
                },
                {
                    path:'category/:id',
                    component:()=>import('../components/pages/Category/Info'),
                    meta:{select:'/category'}
                },
                {
                    path:'specs',
                    component:()=>import('../components/pages/Specs/Index'),
                    meta:{select:'/specs'}
                },
                {
                    path:'specs/add',
                    component:()=>import('../components/pages/Specs/Info'),
                    meta:{select:'/specs'}
                },
                {
                    path:'specs/:id',
                    component:()=>import('../components/pages/Specs/Info'),
                    meta:{select:'/specs'}
                },
                {
                    path:'goods',
                    component:()=>import('../components/pages/Goods/Index'),
                    meta:{select:'/goods'}
                },
                {
                    path:'goods/add',
                    component:()=>import('../components/pages/Goods/Info'),
                    meta:{select:'/goods'}
                },
                {
                    path:'goods/:id',
                    component:()=>import('../components/pages/Goods/Info'),
                    meta:{select:'/goods'}
                },
                {
                    path:'member',
                    component:()=>import('../components/pages/Member/Index'),
                    meta:{select:'/member'}
                },
                {
                    path:'member/add',
                    component:()=>import('../components/pages/Member/Info'),
                    meta:{select:'/member'}
                },
                {
                    path:'member/:id',
                    component:()=>import('../components/pages/Member/Info'),
                    meta:{select:'/member'}
                },
                {
                    path:'banner',
                    component:()=>import('../components/pages/Banner/Index'),
                    meta:{select:'/banner'}
                },
                {
                    path:'banner/add',
                    component:()=>import('../components/pages/Banner/Info'),
                    meta:{select:'/banner'}
                },
                {
                    path:'banner/:id',
                    component:()=>import('../components/pages/Banner/Info'),
                    meta:{select:'/banner'}
                },
                {
                    path:'seckill',
                    component:()=>import('../components/pages/Seckill/Index'),
                    meta:{select:'/seckill'}
                },
                {
                    path:'seckill/add',
                    component:()=>import('../components/pages/Seckill/Info'),
                    meta:{select:'/seckill'}
                },
                {
                    path:'seckill/:id',
                    component:()=>import('../components/pages/Seckill/Info'),
                    meta:{select:'/seckill'}
                }
            ]
        },
        {
            path:'/login',
            component:()=>import('../components/pages/Login')
        }
    ]
})
export default router;

页面UI库安装和使用

我们学习VUE，知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板、样式、添加事件、数据等是非常麻烦的，所以饿了吗推出了基于VUE2.0的组件库，它的名称叫做element-ui，提供了丰富的PC端组件。

安装：

npm i element-ui --save

引入：

import Vuefrom'vue';
import ElementUIfrom'element-ui';
import'element-ui/lib/theme-chalk/index.css';
import Appfrom'./App.vue';
Vue.use(ElementUI);
newVue({
  	el:'#app',
  	render:h=>h(App)
});

基本页面布局：

<template>
    <el-container>
        <el-aside style="width:152px;">
        <el-menu 
            class="el-menu-vertical-demo"
            background-color="#20222a"
            text-color="#fff"
            active-text-color="#ffd04b"
            router
            unique-opened
            :default-active="defaultActive"
        >
            <el-menu-item index="/home">
                <i class="el-icon-menu"></i>
                <span slot="title">首页</span>
            </el-menu-item>
            <!-- 遍历一级菜单信息，生成submenu组件 -->
            <el-submenu 
                v-for="(navitem,index) of userInfo.menus" 
                :key="navitem.id"
                :index="index.toString()"
            >
                <template slot="title">
                <i :class="navitem.icon"></i>
                <span>{{ navitem.title }}</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item 
                        v-for="subitem of navitem.children" 
                        :key="subitem.id" :index="subitem.url"
                    >{{ subitem.title }}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    	</el-aside>
        <el-container>
            <el-header>
                <span>{{ userInfo.username }}</span>
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <el-link @click="logout">退出</el-link>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<style>
.el-container {
    width: 100%;
    height: 100%;
}
.el-header {
    background-color: #b3c0d1;
    line-height: 60px;
    text-align: right; 
    font-size: 12px
}
.el-header .right {
    position: absolute;
    right: 20px;
    display: flex;
}
</style>