作者

一、简介

本次项目以Node.js + Express框架提供接口,后台使用分离模式,用ElementUI做后台模板, 前端使用微信小程序实现的一个扫码购物的项目。

二、项目搭建

后端接口项目搭建,请参考我的另外一篇文章:https://itfun.tv/news/150 接口案例,我会放到coding里面,仅供大家参考。

接下来,我们演示前端后台项目搭建。

1、任意目录执行命令,参考文档:https://www.runoob.com/vue2/vue-tutorial.html

# 全局安装 vue-cli
cnpm install --global vue-cli 
# 创建一个基于 webpack 模板的新项目
vue init webpack vue_walsmart

Desktop vue init webpack vue_walsmart

? Project name vue_walsmart
? Project description A Vue.js project
? Author holy <244500972@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No

继续回车即可

# Project initialization finished!
# ========================

To get started:

cd vue_walsmart
npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

2、引入elementUI,参考文档:https://element.eleme.cn/#/zh-CN/component/installation

npm i element-ui -S

main.js中写入以下内容:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

修改路由

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/admin/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/admin',
      name: 'Home',
      component: Home
    }
  ]
})

components文件夹中新建admin/Home.vue组件,引入element自带button样式,启动项目,刷新页面:http://localhost:8080/#/admin 你会发现样式已加载。

3、跨域处理

第一种方法:回到后端项目,进入根目录,安装跨域请求包

cnpm install cors --save

app.js中,加入如下代码:

var cors = require('cors'); 

app.use(cors());    

第二种方法:在当前前端项目的config/index.js文件中,找到dev代码块,做如下配置:

assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    pathRrewrite: {
      '^/api': ''
    }
  }
},

以上两种方法选择其一。不管你使用的是哪种方法,接下来还是在前端项目目录中执行如下命令:

cnpm install axios --save

安装完后`main.js`文件中引入`axios`

import axios from 'axios'
Vue.prototype.axios = axios;

4、页面处理,为了节省做页面的时间,我这里直接贴上自己写好的模块代码,仅供参考。

修改components/admin/Home.vue代码如下:

<template>
  <div>
    <el-alert class="home_desc" title="Walsmart后台管理系统" type="success" :closable="false"
          description="这是一个基于Node.js + ElementUI使用接口开发模式开发的一套后台管理系统。主要业务用于扫码购物的各个模块,如:商品管理、分类管理、用户管理等。
          本次系统还在不断完善中,敬请期待....
        "show-icon>
    </el-alert>

    <el-alert
      title="辅助工具和资料"
      type="warning"
      description="1、phpstrom编辑器 2、mamp集成开发环境 3、api接口测试软件postman"
      :closable="false"
      show-icon>
    </el-alert>

    <div class="hengxian"></div>
  </div>
</template>

<style>
  .el-alert__title.is-bold {
    font-weight: 900;
  }

  .el-alert__title {
    font-size: 25px;
    line-height: 30px;
  }

  .el-alert .el-alert__description {
    font-size: 14px;
    margin: 10px 0 0;
  }

  .el-alert--warning{
    margin-top: 10px;
  }
  .some_total{
    margin-top: 50px;
  }
  .hengxian {
    margin-top: 20px;
    border-top: 1px solid #eeeeee;
  }
</style>

components文件夹下创建App.vue文件,代码如下:

<template>
  <el-container>
    <el-header>
      <AdminHeader></AdminHeader>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <Aside></Aside>
      </el-aside>
      <el-main class="animate_fix">        <!--添加动画效果-->
        <transition name="fade">
          <router-view/>
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import Aside from './shared/Aside.vue'
  import AdminHeader from './shared/Header.vue'

  export default {
    name: 'App',
    components: {
      Aside,
      AdminHeader
    },
    data() {
      return {
      }
    }
  }
</script>

<style>
  .el-header {
    text-align: center;
    line-height: 60px;
    padding: 0;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    background-color: #fff;
  }

  .el-menu {
    border: none;
  }

  .el-main {
    background-color: #fff;
    color: #333;
    padding: 0;
  }

  html, body {
    height: 100%;
  }

  body > .el-container {
    height: 100%;
  }

  .el-container {
    height: 100%;
  }

  .el-aside {
    height: 100%;
    background-color: rgb(84, 92, 100)
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  .el-aside::-webkit-scrollbar {
    display: none;
  }

  .has-gutter th div.cell {
    text-align: center;
  }

  .animate_fix {
    position: relative;
    /*width: 100%;*/
  }

  .animate_fix > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px;
  }

  .el-card__body {
    padding: 5px;
  }

  .el-collapse-item:last-child {
    margin: 0;
  }

  .el-collapse-item__header {
    height: 38px;
    line-height: 38px;
  }

  .el-collapse-item__arrow {
    line-height: 38px;
    height: 38px;
  }

  .el-footer {
    margin-top: 30px;
    text-align: center;
  }

</style>

main.js中引入此文件

import App from './components/App'

components/shared文件夹下,创建Aside.vueHeader.vue两个文件, 代码分别如下:

<template>
    <el-menu
        default-active="/"
        class="el-menu-vertical-demo"
        :router="true"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">

        <el-menu-item index="/admin">
            <span slot="title">
                <i class="el-icon-s-home"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </el-menu-item>

        <el-submenu index="1">
            <template slot="title">
                <i class="el-icon-shopping-cart-full"></i>
                <span>商城中心</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="/overviews"><i class="el-icon-s-goods"></i>商品管理</el-menu-item>
                <el-menu-item index="/courses"><i class="el-icon-date"></i>商品分类</el-menu-item>
            </el-menu-item-group>
        </el-submenu>
    </el-menu>
</template>
<template>
    <el-menu index="0" class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <div class="menu_icon">
            <i class="el-icon-loading"></i> Walsmart
        </div>
        <el-submenu index="1">
            <template slot="title">huangdj 管理员</template>
            <el-menu-item index="1">退出</el-menu-item>
        </el-submenu>
    </el-menu>

</template>

<style scoped>
    .el-menu--horizontal > .el-submenu {
        float: right;
    }

    .menu_icon {
        float: left;
        width: 200px;
        color: #D3DCE6;
        text-align: center;
        font-size: 30px
    }
</style>

浏览器访问:http://localhost:8080/#/admin,你会看到如下页面:

5、接口数据渲染

以后台首页为例,去加载所有分类,在Home.vue添加如下代码:

<script>
  export default {
    data() {
      return {

      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        //所有分类
        this.axios.get(`http://localhost:3000/admin/categories`)
          .then((res) => {
            console.log(res)
          })
      },
    }
  }
</script>

查看终端:如图

至此,后台分离项目搭建已完成!

转载请注明,来自https://itfun.tv/news/154