当前位置: 首页 > Web前端 > HTML5

Vue项目实战(第一轮)

时间:2023-04-05 18:57:29 HTML5

完整项目地址https://github.com/darenone/v...系列一https://github.com/darenone/v...系列二https://segmentfault.com/a/11。..前言本项目是将自己在学习vue框架和开发公司项目的过程中,将所有的vue技术点、常用功能模块、开发中遇到的坑,整合或记录到这个小项目中,方便自己在开发中进行开发以后在项目中用到,分享给大家学习。它还鼓励您继续学习和更新。如有不足,欢迎大家批评指正。接下来就要虚心学习,使用vue-resource请求本地数据安装。npminstallvue-resource--save在main.js中引入importVueResourcefrom'vue-resource'Vue.use(VueResource)用expressjs编写RESTfulAPI打开项目build/webpack-dev.conf.js文件添加如下代码constexpress=require('express')constapp=express()varappData=require('../data.json')//加载本地数据文件varseller=appData.seller//获取对应的本地数据vargoods=appData.goodsvarratings=appData.ratingsvarnewsList=appData.newsListvarlogin=appData.loginvarapiRoutes=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({错误号:0,数据:newsList})})}}在项目根目录新建data.json,内容如下:{"newsList":[{"name":"News1News1News1News1News1News1新闻1新闻1新闻1新闻1新闻1新闻1","url":"http://starcraft.com"},{"name":"新闻2新闻2新闻2新闻2新闻2新闻22新闻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","url":"http://starcraft.com"},{"name":"新闻4新闻4新闻4新闻4新闻4新闻4新闻4新闻4新闻4新闻4新闻4新闻4新闻4","url":"http://starcraft.com"}],"login":{"username":"zongqiang","userId":2333}}重启应用后,让我们模拟请求一个数据homepage/index.vuecreated:function(){this.$http.get('api/newsList').then((res)=>{this.newsList=res.data.dataconsole.log(this.newsList)},(err)=>{console.log(err)})}可以正常获取数据,那么在没有后端提供的情况下我们可以这样操作我们用API做markdown在线编辑http://mahua.jser.me/https://www.zybuluo.com/mdeditor

猜你喜欢