本文版权归博客园和作者吴双本人并所有 转载和爬虫请注明原文地址
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 "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
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。 下面是项目布局预览：
他俩各自是图表资源，引用库资源，发布打包后的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
3.记得以前做一个手机端项目，完全没有自动化，各个页面中跳转慢的同较，一点吧无通畅，项目组织不轻管理，重复代码特别多。
近百独页面js版本得不交控制，管理js，css引用困难。微信静态资源缓存如此严重，没有版本控制，每个页面js版本的改动要活命。
4.解决缓存问题，应禁止html缓存，由于使用extract-text-webpack-plugin，可以保证你html入口中只有简单的几乎执代码，等正自动化帮你引入所需js，所以尽管禁止html缓存，也未会见潜移默化响应速度，毕竟我们的html文件
也就算1-2k左右.html禁止缓存的缘由是防范，js更新后，js
hash版本已改,但浏览器缓存的html中，依然是央旧本子js文件，这样一来js版本控制变得无意义。
- 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/
8.手机上之 日期
时转选择器，推荐一个出坑的货
https://github.com/k186
有坑哦，使用以来，请看closed的首先个issue。另外日期选择还是比推荐原生。加上时分秒的话语原生的也许就是坏用。
9.页面touch切换tag 使用的一个vue-tab
github找一搜，ios8非支持
flex-shrink，要动-webkit-flex-shrink。
- 上拉加载重多
用的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找）。
示例：
18.经babel编译es5的都无问题.。
我发生个单身的略作用，没因此es6,直接谷歌调试开发，结果及了ios9.x上
不支持吧不报错，以后避免踩上吧。下面是代码：
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 介绍
- 内外端分离优缺点
干什么而上下端分离
- pc,app,pad多端适应
后端模板渲染之法门可pc，app端不好干。
- SPA开发模式起风靡
单页面应用。最风靡的道就是是前后端分离，后端提供接口。
- 内外端支出任务不清
Django的template由哪个写？拆分，模板语言。
php java template 语言使用。
- 付出效率问题，前后端互相等待
- 前端一直配合着后端，能力受限
- 后台开发语言和模板高度耦合，导致支出语言依赖严重。
左右端分离缺点:
- 前后端学习门槛增加，后端的if else语法。这些根据数据展示页面交给前端做了
- 数据依赖导致文档重要性增加，以前交给后端，后端一个人看懂
- 前端工作量加大
- seo的难度加大，爬虫请求不到数据。有专门的优化
- 后端开发模式迁移增加成本
restful api
restful api 时凡内外端分离最佳实践(一仿照标准，建议)
- 轻量，直接通过http，不待格外协议，post/get/put/delete操作
- 面向资源，一目了然，具有自解释性。
资源是名词，post等是动词
引进阅读: 理解restful架构 阮一峰
vue基本概念介绍
- 前端工程化
- 数码双向绑定
- 组件化开发
nodejs 包管理。
mvvm: 数据让view，view又改成多少。
双向数据绑定。
表单变成一个组件。而以前bootstrap就得引入库，库中有为数不少我们无欲的物。
vue开发中之几个概念
- webpack
重要，属于js工具。
- es6及es5代码转换，vue不能被浏览器认识。
末想让浏览器认识就是得html js css
mark
得看到看起什么还并未写。
webpack将具备东西打包成一个js文件。
- vue vuex(组件通讯) vue_router(单页面的路由) axios
前者内部团结跳转，发送ajax请求。不推荐操作dom。
jQuery导入进来只用ajax。不如axios。
- ES6, babel
es6语法。babel将es6转换为es5。
vue项目的目录结构
vue的零件方案
babel配置文件
mock数据。
mark
- api就是我们今天求网络的api，所有组件的api通过者设置。
- axios设置了全局拦截401
- components是基础零部件
- router 路由
- style 全局静态文件
views中得望咱们所有组件。
- header组件。
- 轮播图
- 新品
- 分页组件
- 民用核心三组件
- 结算组件
怀念了解页面是由于什么vue的机件凑成。
mark
采取vue官方提供的插件。
app.vue 入口文件。