vue高仿饿了么APP（三）

一·需求分析

二，制作css字体图标的制作和使用

前面已经有人做过总结，我就直接引用了

css字体图标的制作和使用。

三，项目目录结构设计

1,每一个组件都单独建立一个文件夹，例如商品页建立goods文件夹，goods文件夹放商品页组件，goods.vue以及商品页需要用到的图片等资源。就近维护。

在src目录下再新建一个common文件夹，存放公共的js,css以及字体图标文件·。

三，mock数据（模拟后台数据）

1，首先我们有一个data.json,这个文件存储的就是我们需要的数据，它的位置与（index.html）同级。模拟的数据请求是从data.json中读取数据。

2，在此次开发过程中要去本地数据地址进行请求，而原版配置在dev-server.js中，新版vue-webpack-template已经删除dev-server.js,改用webpack.dev.conf.js代替，所以配置本地访问在webpack.dev.conf.js里配置即可。

在webpack.dev.conf.js中添加以下代码：

/**加载模拟数据*/
const express = require('express')
const app = express() //请求server
var appData  =require('../data.json'); //加载本地数据文件
var seller = appData.seller  //获取对应的本地数据
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router()
app.use('/api',apiRoutes); //通过路由请求数据

2）编写路由及相应接口

调用get方法，传入seller接口。发送请求，服务端接收请求，返回给客户端一个json类型的数据。（包括 errno 及数据），其中 errno 是开发规范所有，当其值为0时，表示返回的数据正常，当遇到一些比如权限限制时，errno 可能不为0，具体值是由也业务方规定的。因为本次项目使用的是模拟数据，所以 errno 一定为0。

 before(app){app.get('/api/seller',(req,res)=>{res.json({errno:0,data:seller}) //接口返回json数据，上面配置的数据seller就复制给data请求后调用
      }),app.get('/api/goods',(req,res)=>{res.json({errno:0,data:goods}) //接口返回json数据，上面配置的数据seller就复制给data请求后调用
        }),app.get('/api/ratings',(req,res)=>{res.json({errno:0,data:ratings}) //接口返回json数据，上面配置的数据seller就复制给data请求后调用
        })}

3）运行

npm run dev,启动后输入http://localhost:8080/api/seller，如果数据正常显示，则数据能正常返回。

转载于:https://www.cnblogs.com/qianxunpu/p/9979366.html

vue高仿饿了么APP（三）相关推荐

vue高仿饿了么APP（二）
这里我直接跳过vue-cli的安装. 一,vue.js代码是如何运行的? 1,进入页面,首先加载index.html和main.js文件. ① index.html文件 <!DOCTYPE ht ...
VUE高仿饿了么app开发思维导图
来自互联网文章来源:刘俊涛的博客地址:http://www.cnblogs.com/lovebing
vue +vue-router + es6 +webpack 高仿饿了么app
vue +vue-router + es6 +webpack 高仿饿了么app 刚通过某课网的教程学习了vue高仿饿了么app,由于教程是用Vue1.0编写的,现在Vue已经更新到了2.0,所以项目遇 ...
Vue高仿饿了吗学习笔记
VUE高仿饿了么app 本项目github地址:https://github.com/motysla/eleme.git VUE 搭建简介刚学习了VUE高仿饿了么app课,记录课的要点,巩固知识. ...
vue结合饿了么_vue高仿饿了么APP（一）
在网上找了一个vue的视频教程---高仿饿了么,讲得不错,自己也跟着讲师做了一遍,现在来帮自己整理,总结一下,加深对vue的理解. 一,功能技术分析 1,利用vue-resource实现前后端数据交互 ...
vue高仿饿了么项目学习笔记之二:头部header组件的实现
1. Vue-resource应用在父组件APP.vue的钩子函数created使用vue-resource来ajax请求/api/seller,将数据赋值给vue实例的seller对象,并传值给子 ...
vue高仿饿了么学习笔记（五）—— header 组件
先贴一张 header 的 UI 图一.header 组件 1)传入 seller 数据 // App.vue <template><div id="app"& ...
vue2高仿饿了么app
Github地址: https://github.com/ccyinghua/appEleme-project 一.构建项目所用: vue init webpack appEleme-projectn ...
学习高仿饿了么APP商家模块遇到的一些错误（使用vue2.0）
error1:semi 可以参照官网ESLint中的文档,在这个项目中使用了eslint,对js的语法有严格限制.在初始化的项目文件中,js文件中的语句是没有以分号结尾,如果我们加上;分号则会不通过e ...

vue高仿饿了么APP（三）

vue高仿饿了么APP（三）相关推荐

最新文章

热门文章