1 Vue.js与Webpack研2 CMS前端工程创建2.1 导入系统管理前端工程CMS系统使用Vue-cli脚手架创建 Vue-cli是Vue官方提供的快速构建单页应用的脚手架github地址 https://github.com/vuejs/vue-cli有兴趣的同学可以参考官方指导使用vue-cli创建前端工程本项目对Vue-cli 创建的工程进行二次封装下边介绍CMS工程的情况.2.2.1 工程结构如果我要基于Vue-Cli创建的工程进行开发还需要在它基础上作一些封装导入课程资料中提供Vue-Cli封装工程。 将课程资料中的xc-ui-pc-sysmanage.7z拷贝到UI工程目录中并解压用WebStorm打开xc-ui-pc-sysmanage目 录前端测试得demo!DOCTYPE html html langen head meta charsetUTF-8 titleTitle/title script srcvue.min.js/script /head body div idapp {{name}} /div script var Vmnew Vue({ el:#app, data:{ name: 我这个是第一次进行前端得开发 } }) /script /body /htmlV-model的案例开测试小demo!DOCTYPE html html langen head meta charsetUTF-8 titleTitle/title script srcvue.min.js/script /head body div idapp {{name}} input v-modelnum1 input v-modelnum2 {{Number.parseInt(num1)Number.parseInt(num2)}} button value计算计算/button /div /body script var vmnew Vue({ el:#app, data:{ name:黑马程序员, num1:1, num2:1 } }) /script /htmlV-text解决差值闪烁的问题!DOCTYPE html html langen head meta charsetUTF-8 titleTitle/title /head body div idapp span v-textname/span input value1 typetext v-modelnum1 input value1 typetext v-modelnum2 span v-textNumber.parseInt(num1)Number.parseInt(num2)/span button计算/button /div script srcvue.min.js/script script var vuenew Vue({ el:#app, data:{ name:黑马程序员, num1:1, num2:1 } }) /script /body /htmlv-on的小demo实例测试!DOCTYPE html html langen xmlns:v-onhttp://www.w3.org/1999/xhtml head meta charsetUTF-8 titleTitle/title /head body div idapp span v-textname/span input typetext v-modelnum1 input typetext v-modelnum2 span v-textresult/span button v-on:clickchange计算/button /div /body script srcvue.min.js/script script var vmnew Vue({ el:#app, data:{ name:黑马程序员, num1:0, num2:0, result:0 }, methods:{ change(){ this.resultNumber.parseInt(this.num1)Number.parseInt(this.num2); } } }) /script /htmlV-bind的测试小案例!DOCTYPE html html langen head meta charsetUTF-8 titleTitle/title /head body div idapp a :hrefurl span v-textname/span /a input typetext v-modelnum1 input typetext v-modelnum2 span v-textresult/span button v-on:clickchange计算/button span :style{fontSize:sizepx}JavaEE工程师/span /div /body script srcvue.min.js/script script var vuenew Vue({ el:#app, data:{ name:黑马程序员, num1:0, num2:0, result:0, size:33, url:http://www.baidu.com }, methods:{ change(){ this.resultNumber.parseInt(this.num1)Number.parseInt(this.num2); } } }) /script /htmlv-for和-if 的基础demo!DOCTYPE html html langen head meta charsetUTF-8 titleTitle/title /head body div idapp ul span数组遍历测试/span li v-for(item,index) in arrayList :keyindex{{item}}----{{index}}/li span对象遍历测试/span li v-for(value,key) in user{{key}}-----{{value}}/li span集合遍历测试/span li v-for(item,key) in userlist :keyitem.user.username div v-ifitem.user.usernamewangdachui stylebackground-color: #00b3ee {{item.user.username}}----{{item.user.age}} /div div v-else {{item.user.username}}----{{item.user.age}} /div /li /ul /div /body script srcvue.min.js/script script var vuenew Vue({ el:#app, data:{ arrayList:[1,2,3,4,5,6], user:{username:wangdachui,age:22}, userlist:[ {user:{username:wangdachui,age:22}},{user:{username:wangjiejie,age:90}} ] } }) /script /html1、webpack介绍Webpack 是一个前端资源的打包工具它可以将js、image、css等资源当成一个模块进行打包。从图中我们可以看出Webpack 可以将js、css、png等多种静态资源 进行打包使用webpack有什么好处呢模块化开发2、 编译typescript、ES6等高级js语法3、CSS预编译webpack的缺点1、配置有些繁琐2、文档不丰富2、安装webpack1安装Node.jswebpack基于node.js运行首先需要安装node.js。为什么会有node.js传统意义上的 JavaScript 运行在浏览器上Chrome 使用的 JavaScript 引擎是 V8Node.js 是一个运行在服务端的框架它的底层就使用了 V8 引擎这样就可以使用javascript去编写一些服务端的程序这样也就实现了用javaScript去开发 Apache PHP 以及 Java Servlet所开发的服务端功能这样做的好处就是前端和后端都采用javascript即开发一份js程序即可以运行在前端也可以运行的服务端这样比一个应用使用多种语言在开发效率上要高不过node.js属于新兴产品一些公司也在尝试使用node.js完成一些业务领域node.js基于V8引擎基于事件驱动机制在特定领域性能出色比如用node.js实现消息推送、状态监控等的业务功能非常合适。下边我们去安装Node.js传统意义上的 JavaScript 运行在浏览器上Chrome 使用的 JavaScript 引擎是 V8Node.js 是一个运行在服务端的框架它的底层就使用了 V8 引擎这样就可以使用javascript去编写一些服务端的程序这样也就实现了用javaScript去开发 Apache PHP 以及 Java Servlet所开发的服务端功能这样做的好处就是前端和后端都采用javascript即开发一份js程序即可以运行在前端也可以运行的服务端这样比一个应用使用多种语言在开发效率上要高不过node.js属于新兴产品一些公司也在尝试使用node.js完成一些业务领域node.js基于V8引擎基于事件驱动机制在特定领域性能出色比如用node.js实现消息推送、状态监控等的业务功能非常合适。下边我们去安装Node.js2选安装目录进行安装默认即可安装完成检查PATH环境变量是否设置了node.js的路径。3测试在命令提示符下输入命令node ‐v2安装NPM1自动安装NPMnpm全称Node Package Manager他是node包管理和分发的工具使用NPM可以对应用的依赖进行管理NPM的功能和服务端项目构建工具maven差不多我们通过npm 可以很方便地下载js库打包js文件。node.js已经集成了npm工具在命令提示符输入 npm -v 可查看当前npm版本2设置包路径包路径就是npm从远程下载的js包所存放的路径。使用 npm config ls 查询NPM管理包路径NPM下载的依赖包所存放的路径NPM默认的管理包路径在C:/用户/[用户名]/AppData/Roming/npm/node_meodules为了方便对依赖包管理我们将管理包的路径设置在单独的地方本教程将安装目录设置在node.js的目录下创建npm_global_modules和npm_cache执行下边的命令npm config set prefix “D:\Softwares\node-v14.15.0\npm_global_modules”npm config set cache “D:\Softwares\node-v14.15.0\npm_cache”此时再使用 npm config ls 查询NPM管理包路径发现路径已更改node环境变量配置npm环境变量配置 https://blog.csdn.net/jianleking/article/details/79130667 除了将node的根目录配置环境变量可使用node、npm命令还需要将设置的predix即安装包的路径配置到环境变量中。否则安装的工具包无法在任意目录下执行3安装cnpmnpm默认会去国外的镜像去下载js包在开发中通常我们使用国内镜像这里我们使用淘宝镜像下边我们来安装cnpm有时我们使用npm下载资源会很慢所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度。输入命令进行全局安装淘宝镜像。npm install -g cnpm --registryhttps://registry.npm.taobao.org设置代理 npm config set proxyhttp://127.0.0.1:8087 npm config set registryhttp://registry.npmjs.org 关于https 经过上面设置使用了http开头的源因此不需要设https_proxy了否则还要增加一句: npm config set https-proxy http://server:port 代理用户名和密码 npm config set proxy http://username:passwordserver:port npm confit set https-proxy http://username:passwordserver:port 取消代理 npm config delete proxy npm config delete https-proxy 修改源 请参考https://segmentfault.com/a/1190000002589144https://segmentfault.com/q/1010000012930521 解决安装【初始化】问题。。。安装后我们可以使用以下命令来查看cnpm的版本cnpm -vnrm ls 查看镜像已经指向taobaohttps://i-blog.csdnimg.cn/blog_migrate/9258c8e718c4b86f42f7bf3ab6ba34f3.png#pic_center使nrm use XXX切换 镜像如果nrm没有安装则需要进行全局安装cnpm install -g nrm4非连网环境安装cnpm从本小节第3步开始就需要连网下载npm包如果你的环境不能连网在老师的资料文件下有已经下载好的webpack相关包下边是安装方法。第一步配置环境变量NODE_HOME D:\Program Files\nodejs (node.js安装目录)在PATH变量中添加%NODE_HOME%;%NODE_HOME%\npm_modules;第二步:找到npm包路径根据上边的安装说明npm包路径被设置到了node.js安装目录下的npm_modules目录。可以使用npm config ls查看。拷贝【准备好】的 npm_modules.zip到node.js安装目录并解压npm_modules.zip覆盖本目录下的npm_modules文件夹。第三步完成上边步骤测试3安装webpack1、连网安装webpack安装分为本地安装和全局安装**本地安装**仅将webpack安装在当前项目 的node_modules目录中仅对当前项目有效。**全局安装**将webpack安装在本机对所有项目有效全局安装会锁定一个webpack版本该版本可能不适用某个项目。全局安装需要添加 -g 参数。进入webpacktest测试目录目录运行1本地安装只在我的项目中使用webpack需要进行本地安装因为项目和项目所用的webpack的版本不一样。本地安装就会将webpack的js包下载到项目下的npm_modeuls目录下。在门户目录下创建webpack测试目录webpacktest01npm install --save-dev webpack 或 cnpm install --save-dev webpacknpm install --save-dev webpack-cli (4.0以后的版本需要安装webpack-cli)2全局安装加-g如下全局安装就将webpack的js包下载到npm的包路径下。npm install webpack -g 或 cnpm install webpack -g3安装webpack指定的版本本教程使用webpack3.6.0安装webpack3.6.0进入webpacktest测试目录运行cnpm install --save-dev webpack3.6.0全局安装npm install webpack3.6.0 -g或 cnpm install webpack3.6.0 -g2、非连网安装参考上边 “非连网环境安装cnpm”描述将课程资料中的 npm_modules.zip到node.js安装目录并解压npm_modules.zip覆盖本目录下的npm_modules文件夹。**说明**已执行 “非连网环境安装cnpm”下的操作不用重复执行。测试在cmd状态输入webpack出现如下提示说明 webpack安装成功https://i-blog.csdnimg.cn/blog_migrate/d4a4963ab60c08be154dc90ca893ed56.png#pic_center关于WebPack的第一个demo程序小测试1.modl1.jsfunction add(x,y) { return xy; } module.exports.addadd;2.main.jsvar {add}require(./module) var Vuerequire(./vue.min); var vuenew Vue({ el:#app, data:{ name:黑马程序员, num1:0, num2:0, result:0, size:33, url:http://www.baidu.com }, methods:{ change(){ this.resultadd(Number.parseInt(this.num1),Number.parseInt(this.num2)); } } })3.webpack.html!DOCTYPE html html langen head meta charsetUTF-8 titleTitle/title /head body div idapp a :hrefurl span v-textname/span /a input typetext v-modelnum1 input typetext v-modelnum2 span v-textresult/span button v-on:clickchange计算/button span :style{fontSize:sizepx}JavaEE工程师/span /div /body script srcvue.min.js/script script srcbuilds.js /script /html完成正常测试及其开发流程使用webpack的自动构建工具完成热部署这个流程对于刚接触前端学习的我来说还是比较生疏的但是理解完流程之后发现其实也不是很难 首先先 分开固定的文件结构划分完文件结构之后开始执行固定的npm命令为了方便打包来用打包之后会又一个package.json在里面添加固定的热部署的命令{ scripts: { dev: webpack-dev-server --inline --hot --open --port 5008 }, devDependencies: { html-webpack-plugin: ^2.30.1, webpack: ^3.6.0, webpack-dev-server: ^2.9.1 } }之后在创建一个webpack.config的命令就可以完成对应的开发流程这个webpack的开发的文件//引用html-webpack-plugin插件作用是根据html模板在内存生成html文件它的工作原理是根据模板文件在内存中生成一个index.html文件。 var htmlwp require(html-webpack-plugin); module.exports{ entry:./src/main.js, //指定打包的入口文件 output:{ path : __dirname/dist, // 注意__dirname表示webpack.config.js所在目录的绝对路径 filename:build.js //输出文件 }, devtool: eval-source-map, plugins:[ new htmlwp({ title: 首页, //生成的页面标题headtitle首页/title/head filename: index.html, //webpack-dev-server在内存中生成的文件名称自动将build注入到这个页面底部才能实现自动刷新功能 template: webpack2.html //根据vue_02.html这个模板来生成(这个文件请程序员自己生成) }) ] }全部文件创建完之后就可以直接邮件运行这个热部署操作的命令非常的快捷方便接下来就是对CMS的前端工程的应用的开发导入相应的前端工程执行run dev运行可能会出现这个错误解决办法:说明node sass版本在当前环境运行不了解决方法如下1.卸载当前版本node sassnpm uninstall --save node-sass2.重新安装node sasscnpm install --save node-sass完成运行2.2 单页面应用介绍什么是单页应用引用百度百科单页面应用的优缺点优点1、用户操作体验好用户不用刷新页面整个交互过程都是通过Ajax 来操作。2、适合前后端分离开发服务端 提供http接口前端请求http接口获取数据使用JS进行客户端渲染。缺点1、首页加载慢 单页面应用会将js、 css打包成一个文件在加载页面显示的时候加载打包文件如果打包文件较大或者网速慢则 用户体验不好。2、SEO不友好 SEOSearch Engine Optimization为搜索引擎优化。它是一种利用搜索引擎的搜索规则来提高网站在搜索引擎 排名的方法。目前各家搜索引擎对JS支持不好所以使用单页面应用将大大减少搜索引擎对网站的收录。总结本项目的门户、课程介绍不采用单页面应用架构去开发对于需要用户登录的管理系统采用单页面开发。3 CMS前端页面查询开发3.1 页面原型3.1.1 创建页面3.1.1.1 页面结构在model目录创建 cms模块的目录结构关于对CMS前端工程的CMS的页面导入和路由配置先建一个和home目录类似的文件结构该文件结构构建完成之后即可配置路由路由的导入则遵循在头部导入具体的页面路径之后在base基础功能中导入全局路由路由配置完成进行测试开始导入elemetnUi中的组件进行相应的布局只用去ElementUI的官网进行相应的复制就可以了template div el-button查询/el-button el-table :datatableData stripe stylewidth: 100% el-table-column propdate label日期 width180 /el-table-column el-table-column propname label姓名 width180 /el-table-column el-table-column propaddress label地址 /el-table-column /el-table /div /template script export default { data() { return { tableData: [{ date: 2016-05-02, name: 王小虎, address: 上海市普陀区金沙江路 1518 弄 }, { date: 2016-05-04, name: 王小虎, address: 上海市普陀区金沙江路 1517 弄 }, { date: 2016-05-01, name: 王小虎, address: 上海市普陀区金沙江路 1519 弄 }, { date: 2016-05-03, name: 王小虎, address: 上海市普陀区金沙江路 1516 弄 }] } } } /script style scoped /style开始导入elemetnUi中的组件进行相应的布局只用去ElementUI的官网进行相应的复制就可以了template div el-button查询/el-button el-table :datatableData stripe stylewidth: 100% el-table-column propdate label日期 width180 /el-table-column el-table-column propname label姓名 width180 /el-table-column el-table-column propaddress label地址 /el-table-column /el-table /div /template script export default { data() { return { tableData: [{ date: 2016-05-02, name: 王小虎, address: 上海市普陀区金沙江路 1518 弄 }, { date: 2016-05-04, name: 王小虎, address: 上海市普陀区金沙江路 1517 弄 }, { date: 2016-05-01, name: 王小虎, address: 上海市普陀区金沙江路 1519 弄 }, { date: 2016-05-03, name: 王小虎, address: 上海市普陀区金沙江路 1516 弄 }] } } } /script style scoped /style关于ElementUi得页面组件得导入及其分页 插件导入得相关得demo案例template div el-button clickquery查询/el-button el-table :datalist stripe stylewidth: 100% el-table-column typeindex width60 /el-table-column el-table-column proppageName label页面名称 width120 /el-table-column el-table-column proppageAliase label别名 width120 /el-table-column el-table-column proppageType label页面类型 width150 /el-table-column el-table-column proppageWebPath label访问路径 width250 /el-table-column el-table-column proppagePhysicalPath label物理路径 width250 /el-table-column el-table-column proppageCreateTime label创建时间 width180 /el-table-column /el-table el-pagination stylefloat:right background layoutprev, pager, next :totaltotal :page-sizeparam.page :current-pageparam.size current-changechange /el-pagination /div /template script export default { data() { return { list: [ { siteId: 5a751fab6abb5044e0d19ea1, pageId: 5ad92f5468db52404cad0f7c, pageName: 402885816243d2dd016243f24c030002.html, pageAliase: 课程详情页面, pageWebPath: /course/, pageParameter: null, pagePhysicalPath: F:/eduprojects/xc-edu-snapshotv1.0/xc-ui-pc-static-portal/course/detail/, pageType: 1, pageTemplate: null, pageHtml: null, pageStatus: null, pageCreateTime: 2018-05-26T08:49:33.3320000, templateId: 5aec5dd70e661808240ab7a6, pageParams: null, htmlFileId: 5b091f97c5e9b7070c94a2bb, dataUrl: null }, { siteId: 5a751fab6abb5044e0d19ea1, pageId: 5ad94b9168db5243ec846e8e, pageName: preview_4028858162e0bc0a0162e0bfdf1a0000.html, pageAliase: 课程预览页面, pageWebPath: /coursepre/, pageParameter: null, pagePhysicalPath: F:\\develop\\xc_portal_static\\course\\preview\\, pageType: 1, pageTemplate: null, pageHtml: null, pageStatus: null, pageCreateTime: 2018-04-20T02:08:17.6210000, templateId: 5a925be7b00ffc4b3c1578b5, pageParams: null, htmlFileId: 5ad94b9168db5243ec846e8f, dataUrl: http://localhost:40200/portalview/course/get/4028858162e0bc0a0162e0bfdf1a0000 }], total:50, param:{ page:1, size:3 } } }, methods:{ query(){ alert(查询) }, change(){ this.query() } } } /script style scoped /style3.2.2 Api调用前端页面导入cms.js调用js方法请求服务端页面查询接口。1导入cms.js开始编写服务端得请求出现跨域得错误开始解决处理方法改变此访问地址前缀import http from ./../../../base/api/public import querystring from querystring let sysConfig require(/../config/sysConfig) let apiUrl sysConfig.xcApiUrlPre; export const page_list(page,size,queryparam){ return http.requestQuickGet(apiUrl/cms/page/list/page/size); }methods:{ query(){ page_list(this.param.page,this.param.size).then(res{ this.listres.queryResult.list; this.totalres.queryResult.total; }); }, change(){ this.query() }进行mounted的分页初始化查询methods:{ query(){ page_list(this.param.page,this.param.size).then(res{ this.listres.queryResult.list; this.totalres.queryResult.total; }); }, change(page){ this.param.pagepage; this.query(); } }, mounted() { this.query(); }完成今日总结这次的主要内容还是Vue的回顾总的来说使用VUE开发更加的方便更加的快捷能更好的根据已又得内容进行相应得开发和数据绑定首先是先根据路由找到对应得页面然后执行页面得钩子函数初始化得钩子函数执行之后调用了对应得分页得方法分页得方法在根据ajax请求去对应得js发起请求请求到后端后端相应过来数据数据在渲染到对应得模型中页面在渲染处理这个流程就是前后端开发得流程非常得清晰