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编写教程

  • 5
    点赞
  • 45
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值