资讯专栏INFORMATION COLUMN

vue项目实战(第一回)

laznrbfe / 2974人阅读

摘要:完整的项目地址系列文章一系列文章二前言此项目是我在学习框架和开发公司项目的时候把需要用的技术点常用的功能模块开发中遇到的坑全部集成或记录到这个小项目里,以便自己开发以后的项目中用到,同时分享出来供大家学习借鉴,也鞭策自己持续学习和更新,如果

完整的项目地址https://github.com/darenone/v...

系列文章一https://github.com/darenone/v...

系列文章二https://segmentfault.com/a/11...

前言

此项目是我在学习vue框架和开发公司项目的时候把需要用的vue技术点、常用的功能模块、开发中遇到的坑全部集成或记录到这个小项目里,以便自己开发以后的项目中用到,同时分享出来供大家学习借鉴,也鞭策自己持续学习和更新,如果不足之处欢迎各位同学批评指正,在下一定虚心学习

用vue-resource请求本地数据

安装

npm install vue-resource --save

在main.js引入

import VueResource from "vue-resource"
Vue.use(VueResource)

用expressjs写RESTful API

打开项目build/webpack-dev.conf.js文件 添加如下代码

const express = require("express")
const app = express()
var appData = require("../data.json") //加载本地数据文件
var seller = appData.seller //获取对应的本地数据
var goods = appData.goods
var ratings = appData.ratings
var newsList = appData.newsList
var login = appData.login
var apiRoutes = express.Router()
app.use("/api", apiRoutes)
  
devServer: {
before(app) {
  app.get("/api/login", (req, res) => {
    res.json({
      errno: 0,
      data: login
    })
  }),
  app.get("/api/newsList", (req, res) => {
    res.json({
      errno: 0,
      data: newsList
    })
  })
}
  }

在项目根目录新建一个data.json的内容如下:

{
  "newsList": [
    {
      "name": "新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1",
      "url": "http://starcraft.com"
    },
    {
      "name": "新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2",
      "url": "http://starcraft.com"
    },
    {
      "name": "新闻3新闻3新闻3新闻3新闻3新闻3新闻3新闻3新闻3新闻3新闻3新闻3新闻3新闻3",
      "url": "http://starcraft.com"
    },
    {
      "name": "新闻4新闻4新闻4新闻4新闻4新闻4新闻4新闻4新闻4新闻4新闻4新闻4新闻4新闻4",
      "url": "http://starcraft.com"
    }
  ],
  "login": {
    "username": "zongqiang",
    "userId": 2333
  }
}

重启应用之后我们来模拟请求一个数据 homepage/index.vue

  created: function () {
    this.$http.get("api/newsList").then((res) => {
      this.newsList = res.data.data
      console.log(this.newsList)
    }, (err) => {
      console.log(err)
    })
  }

能正常拿到数据,那我们以后的在没有后端给我们提供api的时候就就可以这样来做
markdown在线编辑
http://mahua.jser.me/
https://www.zybuluo.com/mdeditor

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/90379.html

相关文章

  • Vue核心50讲 | 一回Vue 与 MVVM 之间那些事儿

    摘要:在说真正的内容之前,咱们还要先来说说与之间的那些事儿。的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。高效核心库文件压缩之后只有,远比的压缩版文件小得多。这么说还是会比较抽象,接下来咱们用代码来进一步解释和之间的关系。 书接上文,上一回咱们说到了如今的前端江湖早已是框架三分天下的格局。接下来,咱们就要说到主角 Vue 了。在说真正的 Vue 内容之前,咱们还要先来说...

    chanthuang 评论0 收藏0
  • 2016年总结 - 收藏集 - 掘金

    摘要:然而这次的文章,就像贺师俊所说的这篇文章是从程序员这个老年度总结前端掘金年对我来说,是重要的一年。博客导读总结个人感悟掘金此文着笔之时,已经在眼前了。今天,我就来整理一篇,我个人认为的年对开发有年终总结掘金又到 2016 Top 10 Android Library - 掘金 过去的 2016 年,开源社区异常活跃,很多个人与公司争相开源自己的项目,让人眼花缭乱,然而有些项目只是昙花一...

    DataPipeline 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<