vue---如何连接后台数据搭建前端页面

如何通过使用vue方法搭建前端页面

首先
Vue.js是一套构建用户界面的渐进式框架。
Vue 只关注视图层，采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
阅读之前需要了解的知识

• html
• css
• javascript
• node.js环境(npm包管理工具）
• webpack打包工具
  安装node.js
  从node官网下载并安装node，安装步骤很简单，只要一路“next”就可以了。
  安装完成后，打开命令行工具输入命令node -v，如下图，如果出现对应版本号，就说明安装成功了
  我们所需要的npm包管理器，是集成在node中的，所以，直接输入npm -v就会如下图所示，显示出npm的版本信息。
  安装cnpm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

输入cnpm -v，可以查看当前cnpm版本，这个和npm的版本还是不一样的。
vue安装
在用 vue.js 构建大型应用时推荐使用 npm 安装，npm 能很好地和诸如 webpack 或 browserify 模块打包器配合使用。vue.js 也提供配套工具来开发单文件组件。

$ cnpm install vue

安装vue-cli脚手架构建工具
vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

# 全局安装 vue-cli
$ cnpm install --global vue-cli

创建一个基于 webpack 模板的新项目
要创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录。可以使用：

#my-project为自定义项目名
$ vue init webpack my-project

初始化一个项目，或使用

$ vue init webpack-simple my-project

这样 我们便简单的创建了一个vue项目

打开项目后使用：

$ cnpm run dev

便可启动项目进入这个界面

然后我们进入到src文件夹

首先我们需要搭建好自己需要的文件夹及其项目文件，然后来到main.js页面，这个页面是我们用来引入各项文件及其打包所需要的重要文件

下面我便列举一下其中页面的编写方法，可以来到elment 找到自己需要的样式然后根据提示文档来制作自己所需要各项功能

<template>
    <div>
     <el-breadcrumb separator="/">
      <el-breadcrumb-item>商品首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="id_search">
      <el-input placeholder="请输入内容"  >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
    <el-button type="primary" icon="el-icon-plus"  id="search">添加商品</el-button>
    </div>
    <el-table :data="shoplist" border stripe height="840" style="width: 100%" 
    row-key="cat_id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column prop="cat_name" label="商品名称" width="180"></el-table-column>
      <el-table-column label="商品级别" width="180"   >
       <template slot-scope="scope">
          <el-button type="info" v-if="scope.row.cat_level===0">一级商品</el-button>
          <el-button type="warning" v-if="scope.row.cat_level===1">二级商品</el-button>
          <el-button type="danger" v-if="scope.row.cat_level===2">三级商品</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template >
          <el-button type="primary" icon="el-icon-edit" ></el-button>
          <el-button type="warning" icon="el-icon-star-off" ></el-button>
          <el-button type="danger" icon="el-icon-delete" ></el-button>
        </template>
      </el-table-column>
    </el-table>
        
    </div>
</template>

下面便是讲到该如何连接后台了，当然大家前提是需要有自己后端文档及其数据
我们需要引入axios插件来进行与后台页面的连接

import axios from 'axios';

当然我们也可以写在main.js文件中全局使用

<script>
import axios from 'axios';
export default {
    data(){
        return{
            shoplist:[],
            tatol:0,

        }
    },
    //页面夹杂完成后请求所有的商品分类列表
    created() {
    this.categorieslist();
  },
  methods:{
  async  categorieslist(){
       let url=`后台数据接口`
       let reuslt= await axios.get(url,{
           params:{
               type:3,
               pagenum:1,
               pagesize:50
           }
       })
       let {data,meta}=reuslt.data
       this.shoplist=data.result
       this.tatol=data.tatol
    //    console.log(data)
   }
  }
}
</script>

接下开便是编写我们的css样式了，这里有一点需要注意，就是需要引入全局css并使用

//引入全局的css
import '../src/assets/css/index.css'
import el from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(el)

这样我们便可以在.vue页面中编写自己的css样式了

<style lang="less">
    #search{
       position: absolute;
       top: 105px;
    left: 734px;
    }
    .id_search{
        width: 30%;
      margin-top: 0px;
      margin-left: 0px;
    }
</style>

下面为大家展示一下我编写的项目

因为图片大小有所限制所以，我会在后续为大家带来更全面的vue及其node编写教程