项目vue2.0仿外卖APP(三)

落爺英雄遲暮 提交于 2019-11-29 16:39:55

项目的结构如下:

     

     

     

项目资源准备

准备项目的各种图片资源等等

注意:在webpack可以不用css sprite,直接用单张图片,因为它会帮忙打包。

还有SVG图片,放大之后不会影响质量,在移动端开发中,通常会把色彩单一的图片做成SVG图片。这些不是直接用,利用一些工具去把这些SVG图片去转化成一个叫图标字体的文件,就可以在CSS引用了。

图标字体制作

在项目开发前期,我们需要将设计师给的一些图片制作成字体图标

用一个叫IcoMoon的工具(https://icomoon.io/),它本身有的图标可以查看IcoMoon App,要用自定义图标的话可以在IcoMoon App里面点击Import Icons,将所有的SVG图片导入,就可以下载使用了。(里面的Get Code可以查看使用方法)。在下载之前可以点击左上角的preferences,设置一下名称:sell-icon

项目目录设计

所有代码都在src文件目录下

入口文件main.js

整个页面的vue实例文件App.vue

components:存放我们的组件文件,但我们不会像hello.vue一样直接放在里面,我们会多件一个子目录,像这样:

这样做是因为一个vue组件除了它的.vue文件以外,还可能包含一个图片相关资源等等。之前说过,组件一个很重要的设计原则就是就近维护,把一个组件相关资源都放在一个目录下。

还要创建一个common目录,包好一个公共的模块和资源,再在它其中添加三个子目录。

在这儿项目中,我们使用的css预处理器是stylus。

结构如下图:

并且将图标字体生成的style.css添加到stylus目录下,并改名为icon.styl,并改为stylus语法:把括号和分号去掉。

asset目录删掉。

 

mock数据(模拟后台数据)

作为前端经常需要模拟后台数据,我们称之为mock。

http://blog.csdn.net/sysuzjz/article/details/50317531

mock 的真正意义在于简化测试环境。假如你现在要测试一个dao,但是你有不想构建数据库环境就可以用mock模拟数据库的返回结果。

数据来源:data.json

我们模拟的数据请求就是从这里面读取数据,接下来就来编写这些接口。

打开build目录-dev-server.js(就是我们开发的webpack打包的一个入口文件),打开之后使用express这个框架去指一个nodeserver,我们也可以用express-router来编写这些接口请求。

 

先拿到这些数据:

var appData = require('../data.json');
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;

如图:

在编写路由,并编写接口:

var apiRoutes = express.Router();

apiRoutes.get('/seller', function (req, res) {
  res.json({
    errno: 0,
    data: seller
  });
});

apiRoutes.get('/goods', function (req, res) {
  res.json({
    errno: 0,
    data: goods
  });
});

apiRoutes.get('/ratings', function (req, res) {
  res.json({
    errno: 0,
    data: ratings
  });
});

要在express使用它,我们需要调用express的变量app:

 

app.use('/api', apiRoutes);

 

这样我们就可以直接通过’/goods’来获取数据了。

完整的dev-server.js:

完了之后要重新运行cnpm run dev,因为我们改的是node文件,然后http://localhost:8080/api/seller,这样就返回了数据:

当然,我们也可以利用Google的插件jsonview将数据格式化。

http://localhost:8080/api/goods

 

http://localhost:8080/api/ratings

这样数据也已经有了,接下来就可以来编写这个页面了。

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!