Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结与踩坑。4- vue django restful framework 打造清新超市 -restful api 与前者源码介绍。

by admin on 2018年10月5日

正文版权归博客园和作者吴双本人并拥有 转载和爬虫请注明原文地址
www.cnblogs.com/tdws

利用Python3.6与Django2.0.2(Django-rest-framework)以及前端vue开发之左右端分离的商城网站

一.勾以头里

列上丝发一段时间了,一个因webpack+vue+ES6的手机端多页面下。其实说凡是大半页面使用,实际上在webpack中属四只app,
 如果真是做纯粹单页面,那应该发生二三十独页面吧。所以我这里的大半页面使用,是分为四单SPA。比如微信最下面,有四独导航,微信,通讯录,发现,我。
那么这四个导航,就是自的季单SPA,配置多只入口即可。

以这里就是隐瞒太多代码了,项目组织将会放github上,地址在后边给闹,以供参考,上传的光景就是一个目加上配置情况,其实关键点也就是于webpack.config.js了,这里主要配备了entry,loader,plugins,output目录啥的。

于此地先附上package.json和webpack.config.js吧:

 

亚洲必赢手机入口 1亚洲必赢手机入口 2

 1 {
 2   "name": "my-web",
 3   "version": "1.0.0",
 4   "description": "desc",
 5   "main": "index.js",
 6   "scripts": {
 7     "test": "echo \"Error: no test specified\" && exit 1",
 8     "start": "webpack-dev-server --inline --hot",
 9     "dev1": "webpack-dev-server --open",
10     "dev": "webpack-dev-server --inline --hot",
11     "build": "set NODE_ENV=production&&webpack"
12   },
13   "author": "ws",
14   "license": "ISC",
15   "devDependencies": {
16     "babel-core": "^6.24.1",
17     "babel-loader": "^7.0.0",
18     "babel-plugin-transform-runtime": "^6.23.0",
19     "babel-preset-es2015": "^6.24.1",
20     "babel-runtime": "^6.23.0",
21     "css-loader": "^0.28.4",
22     "extract-text-webpack-plugin": "^2.1.0",
23     "glob": "^7.1.2",
24     "html-webpack-plugin": "^2.28.0",
25     "jquery": "^3.2.1",
26     "node-sass": "^4.5.3",
27     "sass-loader": "^6.0.5",
28     "slideout": "^1.0.1",
29     "style-loader": "^0.18.2",
30     "url-loader": "^0.5.8",
31     "vue": "^2.3.3",
32     "vue-croppa": "^0.1.0",
33     "vue-hot-reload-api": "^2.1.0",
34     "vue-html-loader": "^1.2.4",
35     "vue-ios-alertview": "^1.1.1",
36     "vue-loader": "^12.2.1",
37     "vue-resource": "^1.3.3",
38     "vue-router": "^2.7.0",
39     "vue-style-loader": "^3.0.1",
40     "vue-template-compiler": "^2.3.3",
41     "vue-touch": "^2.0.0-beta.4",
42     "webpack": "^2.6.1",
43     "webpack-dev-server": "^2.4.5"
44   }
45 }

View Code

 

亚洲必赢手机入口 3亚洲必赢手机入口 4

  1 var path = require('path');
  2 var webpack = require('webpack');
  3 // 将样式提取到单独的 css 文件中,而不是打包到 js 文件或使用 style 标签插入在 head 标签中
  4 var ExtractTextPlugin = require('extract-text-webpack-plugin');
  5 // 生成自动引用 js 文件的HTML
  6 var HtmlWebpackPlugin = require('html-webpack-plugin');
  7 var glob = require('glob');
  8 
  9 var entries = getEntry('./source/**/*.js'); // 获得入口 js 文件
 10 var chunks = Object.keys(entries);
 11 console.log('输出chunks', chunks);
 12 module.exports = {
 13     entry: entries,
 14     output: {
 15         path: path.resolve(__dirname, 'public'), // html, css, js 图片等资源文件的输出路径,将所有资源文件放在 Public 目录
 16         publicPath: '/public/',                  // html, css, js 图片等资源文件的 server 上的路径
 17         filename: 'js/[name].js',         // 每个入口 js 文件的生成配置
 18         chunkFilename: 'js/[id].[hash].js'
 19     },
 20     externals: {
 21         jquery: "$",
 22         EXIF: "EXIF",
 23         wx: "wx"
 24     },
 25     resolve: {
 26         extensions: ['.js', '.vue'],
 27         alias: {
 28             'vue': __dirname + '/lib/vue/vue.js',
 29             //'vue-alert': __dirname + '/lib/vue-alert/vue-alert.js'
 30         },
 31     },
 32 
 33     module: {
 34         loaders: [
 35             {
 36                 test: /\.css$/,
 37                 // 使用提取 css 文件的插件,能帮我们提取 webpack 中引用的和 vue 组件中使用的样式
 38                 //loader: "style-loader!css-loader",
 39                 loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
 40             },
 41             {
 42                 // vue-loader,加载 vue 组件
 43                 test: /\.vue$/,
 44                 loader: 'vue-loader',
 45                 options: {
 46                     //解析.vue文件中样式表
 47                     loaders: {
 48                         // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
 49                         // the "scss" and "sass" values for the lang attribute to the right configs here.
 50                         // other preprocessors should work out of the box, no loader config like this necessary.
 51                         //'scss': 'vue-style-loader!css-loader!sass-loader',
 52                         //'css': 'vue-style-loader!css-loader!sass-loader',
 53                         //'js': 'babel-loader',
 54                         //'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
 55                         css: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader' }),
 56                         //exclude: [
 57                         //    path.resolve(__dirname, ""),
 58                         //    //path.resolve(__dirname, "app/test")
 59                         //]
 60                         //exclude:'/source/course/course-detail/course-detail.css'
 61                     }
 62                     // other vue-loader options go here
 63                 }
 64             },
 65             {
 66                 test: /\.js$/,
 67                 // 使用 es6 开发,这个加载器帮我们处理
 68                 loader: 'babel-loader',
 69                 exclude: /node_modules/
 70             },
 71             {
 72                 test: /\.(png|jpg|gif|svg)$/,
 73                 // 图片加载器,较小的图片转成 base64
 74                 loader: 'url-loader',
 75                 query: {
 76                     limit: 10000,
 77                     name: './imgs/[name].[ext]?[hash:7]'
 78                 }
 79             }
 80         ]
 81     },
 82     plugins: [
 83         // 提取公共模块
 84         new webpack.optimize.CommonsChunkPlugin({
 85             name: 'vendors', // 公共模块的名称
 86             chunks: chunks,  // chunks 是需要提取的模块
 87             minChunks: chunks.length
 88         }),
 89         // 配置提取出的样式文件
 90         new ExtractTextPlugin('css/[name].css')
 91     ]
 92 };
 93 
 94 var prod = process.env.NODE_ENV === 'production';
 95 module.exports.plugins = (module.exports.plugins || []);
 96 if (prod) {
 97     module.exports.devtool = 'source-map';
 98     module.exports.plugins = module.exports.plugins.concat([
 99         // 借鉴 vue 官方的生成环境配置
100         new webpack.DefinePlugin({
101             'process.env': {
102                 NODE_ENV: '"production"'
103             }
104         }),
105          new webpack.optimize.UglifyJsPlugin({
106              compress: {
107                  warnings: false
108              }
109          })
110     ]);
111 } else {
112     module.exports.devtool = 'eval-source-map';
113     module.exports.output.publicPath = '/view/';
114 }
115 
116 var pages = getEntry('./source/**/*.html');
117 for (var pathname in pages) {
118     // 配置生成的 html 文件,定义路径等
119     var conf = {
120         filename: prod ? '../views/' + pathname + '.html' : pathname + '.html', // html 文件输出路径
121         template: pages[pathname], // 模板路径
122         inject: true,              // js 插入位置
123         minify: {
124             removeComments: true,
125             collapseWhitespace: false
126         },
127         hash:true
128     };
129     if (pathname in module.exports.entry) {
130         conf.chunks = ['vendors', pathname];
131         //conf.hash = false;
132     }
133     // 需要生成几个 html 文件,就配置几个 HtmlWebpackPlugin 对象
134     module.exports.plugins.push(new HtmlWebpackPlugin(conf));
135 }
136 
137 // 根据项目具体需求,输出正确的 js 和 html 路径
138 function getEntry(globPath) {
139     var entries = {},
140         basename, tmp, pathname;
141 
142     glob.sync(globPath).forEach(function (entry) {
143         basename = path.basename(entry, path.extname(entry));
144         tmp = entry.split('/').splice(-3);
145         pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出 js 和 html 的路径
146         entries[pathname] = entry;
147     });
148     console.log(entries);
149     return entries;
150 }

View Code

 

开发工具使用的VS2017,本来使用WS,但是之所以习惯VS的本人或受不了,毕竟17还是绝强了嘛。既然是vue项目,那数请求肯定就是是vue-res,
路由就是vue-loader,编译es6豪门都是babel。 下面是种结构预览:

亚洲必赢手机入口 5亚洲必赢手机入口 6亚洲必赢手机入口 7她俩分别是图资源,引用库资源,发布打包后底js和css,src源码和包装后的html

型支持支付宝支付(暂不支持微信支付),支持手机短信验证码注册,
支持第三在登录。集成了sentry错误监控系统。

二.几碰重要的收获

1.组件化开发爽啊,
调用者只需要关怀输入和输出,代码明朗,容易保障

2.vue-res promise异步风格太好看,太好了。但是有坑,ios8.x,使用基础浏览器运行js,
不支持promise语法,所以需要在进口中,import几只npm下载的node
module:

 npm i whatwg-fetch core-js es6-promise –save-dev

 亚洲必赢手机入口 8

3.记以前开一个部手机端项目,完全无自动化,各个页面中跳转慢的平较,一点乎未流畅,项目组织不容易管理,重复代码特别多。

 近百独页面js版本得无交控制,管理js,css引用困难。微信静态资源缓存如此惨重,没有版本控制,每个页面js版本的改动要活命。

4.解决缓存问题,应明令禁止html缓存,由于使用extract-text-webpack-plugin,可以包你html入口中只有简单的几乎实践代码,等正自动化帮你引入所需js,所以就禁止html缓存,也未会见潜移默化响应速度,毕竟我们的html文件
     也就算1-2k左右.html禁止缓存的因是严防,js更新后,js
hash版本已改变,但浏览器缓存的html中,依然是请旧本子js文件,这样一来js版本控制变得无意思。

  1. js调用手机摄影,
    调用安卓手机拍照不易于呀,所以若只有想以微信上使网页的话,建议采用
    微信js SDK。

6.
苹果手机和个别安卓手机,使用原生input调用摄像后,图片及页面中见面冒出旋转问题,所以当微信上
使用js sdk, 在另外浏览器亚洲必赢手机入口上,就用EXIF.js  手动将那个旋转90度过
或者180度进行矫正。

7.推荐一致舒缓mobile用的对的弹窗组件
vue-ios-alert.  ios风格的弹窗。地址及github:  
 http://isay.me/vue-ios-alertview/example/![](https://images2017.cnblogs.com/blog/686162/201709/686162-20170904231146210-1849602734.png)

 

8.手机上之 日期
时转选择器,推荐一个闹坑的货
 https://github.com/k186 
有坑哦,使用以来,请看closed的率先只issue。另外日期选择还是较推荐原生。加上时分秒的口舌原生的或是就坏用。亚洲必赢手机入口 9

9.页面touch切换tag 使用的一个vue-tab
 github找一寻觅,ios8未支持
flex-shrink,要以-webkit-flex-shrink。

  1. 上拉加载重多
    用的vue-loadmore,侧方滑动菜单 使用了jquery的slideout

11.
要路由比较多的话,建议路由于独立分一个js配置,并且一定要是按需要加载,否则打包文件太可怜。如果是用户点击率极高的路由,可以直接require进去。

12.片段js库,就不用通过require了,直接当html引入进来算了,毕竟这些库基本未会见改,也未尝必要决定版本

13.前端AOP,
 vue-res的拦截器点单赞,我得于拦截器中,为我各一个告
都丰富authentication
header等信息,像用jq的时段,我只得手动把ajax包装一重叠

14.像小数据的加载,文字方面,最好预先给起加载中这种唤醒,不克让空白。列表的加载
要多着想加载中,加载成功和小无数据的处理。见了许多app和网页都是进及列表页,首先一个少无多少的背景图为出 
       了,结果稍等一下,数据以加载出来了….

15.虽曾经组件化了,但我还建议来一个每个页面公用需要require的js,我一般还叫application.js
 在这里 可以放大有您的常量,枚举,公共艺术,helpers,utils,ajax
等配备,并且以此间可以import footer header vue-res vue-alert
等片每个组件或者页面还得的话的机件

16.热替换是须的,比以前用gulp
livereload方便

17.手机端页面调试,推荐vConsole(去github找)。
示例:亚洲必赢手机入口 10亚洲必赢手机入口 11

18.经过babel编译es5的且并未问题.。
 我发生只独立的稍作用,没因此es6,直接谷歌调试开发,结果到了ios9.x上
 不支持啊未报错,以后避免踩进吧。下面是代码:

亚洲必赢手机入口 12

19. IOS高达计算时间 需要new Date(‘2017/09/09’)的格式,
 而不可知采取横杠的格式

丝达演示地址:
http://vueshop.mtianyan.cn/
github源代码地址:
https://github.com/mtianyan/VueDjangoFrameWorkShop

三.有的毛病

 1.脑子抽啊,分为四只SPA,
整套项目下,感觉还是该做一个SPA。毕竟SPA之间切换,一个SPA切换到外一个SPA
还是加载东西顶多,不够流畅。虽然微信浏览器缓存“严重”

2.类别组织划分还是不够合理,但觉得啊尚能够应付用。

3.组件化没有发挥到最致,自己vue组件间通信没办好,md找子组件,我居然还有通过遍历的法。

4.有来组件用的jquery的,搭配的不是死通,导致个别操作强行以dom操作。

5.己发生四单条件,开发,测试,demo, 线上。
每次宣布到一个环境
 都要改了配置后,重新包装,很痛苦啊,关于这同样触及发出啊好之法门吧? 

本小节情: restful api 与前者源码介绍

四.状于最后

 这个项目产品以持续支付,不过下一阶段还闹个类型,我以应用一个SPA完成,关于vue有啊好之各种mobile组件,希望dalao不吝推荐。

 

 

设,您当读书这篇博客让你有些收获,不妨点击一下右手下加【推荐】按钮。
倘,您要再度便于地意识自之初博客,不妨点击下方红色【关注】的。
盖,我之享受热情吗去不起来公的必定支持。

感谢您的读书,我用随地输出分享,我是蜗牛,
保持上,谨记谦虚。不端不装,有趣有梦。

4- restful api 与前者源码介绍

restful api 介绍

  • 上下端分离优缺点

胡要内外端分离

  1. pc,app,pad多端适应

后端模板渲染的法子符合pc,app端不好打。

  1. SPA开发模式开始流行

单页面应用。最盛的法门就是内外端分离,后端提供接口。

  1. 上下端支出任务不彻底

Django的template由哪位写?拆分,模板语言。
php java template 语言使用。

  1. 支出效率问题,前后端互相等待
  2. 前端一直相当着后端,能力受限
  3. 后台开发语言与模板高度耦合,导致支出语言依赖严重。

左右端分离缺点:

- 前后端学习门槛增加,后端的if else语法。这些根据数据展示页面交给前端做了
- 数据依赖导致文档重要性增加,以前交给后端,后端一个人看懂
- 前端工作量加大
- seo的难度加大,爬虫请求不到数据。有专门的优化
- 后端开发模式迁移增加成本

restful api

restful api 时是内外端分离最佳实践(一仿照标准,建议)

  1. 轻量,直接通过http,不待额外协议,post/get/put/delete操作
  2. 面向资源,一目了然,具有自解释性。

资源是名词,post等是动词

推介阅读: 理解restful架构 阮一峰

vue基本概念介绍

  1. 前端工程化
  2. 数量双向绑定
  3. 组件化开发

nodejs 包管理。

mvvm: 数据令view,view又改变多少。

双向数据绑定。

表单变成一个零部件。而原先bootstrap就得引入库,库中来过多咱不欲的东西。

vue开发中的几乎单概念

  1. webpack

重要,属于js工具。

  • es6交es5代码转换,vue不能被浏览器认识。

末想为浏览器认识就是得html js css

亚洲必赢手机入口 13

mark

好望看起什么都无写。

webpack将具备东西打包成一个js文件。

  1. vue vuex(组件通讯) vue_router(单页面的路由) axios

前者内部协调跳转,发送ajax请求。不推荐操作dom。
jQuery导入进来只用ajax。不如axios。

  1. ES6, babel

es6语法。babel将es6转换为es5。

vue项目的目结构

vue的零件方案

babel配置文件

mock数据。

亚洲必赢手机入口 14

mark

  • api就是我们今天求网络的api,所有组件的api通过者设置。
  • axios设置了全局拦截401
  • components是基础零部件
  • router 路由
  • style 全局静态文件

views中好看看咱们具备组件。

  • header组件。
  • 轮播图
  • 新品
  • 分页组件
  • 民用核心三组件
  • 结算组件

怀念知道页面是由于什么vue的机件凑成。

亚洲必赢手机入口 15

mark

以vue官方提供的插件。

app.vue 入口文件。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图