haproxy(七层代理)、python代码的读写分离
2026/6/23 23:58:26
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 lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> </head> <body> <div id="app"> {{name}} </div> <script> var Vm=new Vue({ el:"#app", data:{ name: "我这个是第一次进行前端得开发" } }) </script> </body> </html>V-model：的案例开测试小demo：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> </head> <body> <div id="app"> {{name}} <input v-model="num1">+ <input v-model="num2">= {{Number.parseInt(num1)+Number.parseInt(num2)}} <button value="计算">计算</button> </div> </body> <script> var vm=new Vue({ el:'#app', data:{ name:"黑马程序员", num1:1, num2:1 } }) </script> </html>V-text解决差值闪烁的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <span v-text="name"></span> <input value="1" type="text" v-model="num1">+ <input value="1" type="text" v-model="num2">= <span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span> <button>计算</button> </div> <script src="vue.min.js"></script> <script> var vue=new Vue({ el:'#app', data:{ name:"黑马程序员", num1:1, num2:1 } }) </script> </body> </html>v-on的小demo实例测试
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <span v-text="name"></span> <input type="text" v-model="num1">+ <input type="text" v-model="num2">= <span v-text="result"></span> <button v-on:click="change">计算</button> </div> </body> <script src="vue.min.js"></script> <script> var vm=new Vue({ el:'#app', data:{ name:"黑马程序员", num1:0, num2:0, result:0 }, methods:{ change(){ this.result=Number.parseInt(this.num1)+Number.parseInt(this.num2); } } }) </script> </html>V-bind的测试小案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <a :href="url"> <span v-text="name"></span> </a> <input type="text" v-model="num1">+ <input type="text" v-model="num2">= <span v-text="result"></span> <button v-on:click="change">计算</button> <span :style="{fontSize:size+'px'}">JavaEE工程师</span> </div> </body> <script src="vue.min.js"></script> <script> var vue=new Vue({ el:'#app', data:{ name:"黑马程序员", num1:0, num2:0, result:0, size:33, url:"http://www.baidu.com" }, methods:{ change(){ this.result=Number.parseInt(this.num1)+Number.parseInt(this.num2); } } }) </script> </html>v-for和-if 的基础demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <ul> <span>数组遍历测试==============</span> <li v-for="(item,index) in arrayList" :key="index">{{item}}----{{index}}</li> <span>对象遍历测试==============</span> <li v-for="(value,key) in user">{{key}}-----{{value}}</li> <span>集合遍历测试==============</span> <li v-for="(item,key) in userlist" :key="item.user.username"> <div v-if="item.user.username=='wangdachui'" style="background-color: #00b3ee"> {{item.user.username}}----{{item.user.age}} </div> <div v-else=""> {{item.user.username}}----{{item.user.age}} </div> </li> </ul> </div> </body> <script src="vue.min.js"></script> <script> var vue=new 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> </html>1、webpack介绍
Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。
从图中我们可以看出，Webpack 可以将js、css、png等多种静态资源 进行打包，使用webpack有什么好处呢？
模块化开发
2、 编译typescript、ES6等高级js语法
3、CSS预编译
webpack的缺点：
1、配置有些繁琐
2、文档不丰富
2、安装webpack
（1）安装Node.js
webpack基于node.js运行，首先需要安装node.js。
为什么会有node.js？
传统意义上的 JavaScript 运行在浏览器上，Chrome 使用的 JavaScript 引擎是 V8，Node.js 是一个运行在服务端的框架，它的底层就使用了 V8 引擎，这样就可以使用javascript去编写一些服务端的程序，这样也就实现了用javaScript去开发 Apache + PHP 以及 Java Servlet所开发的服务端功能，这样做的好处就是前端和后端都采用javascript，即开发一份js程序即可以运行在前端也可以运行的服务端，这样比一个应用使用多种语言在开发效率上要高，不过node.js属于新兴产品，一些公司也在尝试使用node.js完成一些业务领域，node.js基于V8引擎，基于事件驱动机制，在特定领域性能出色，比如用node.js实现消息推送、状态监控等的业务功能非常合适。
下边我们去安装Node.js：
传统意义上的 JavaScript 运行在浏览器上，Chrome 使用的 JavaScript 引擎是 V8，Node.js 是一个运行在服务端的框架，它的底层就使用了 V8 引擎，这样就可以使用javascript去编写一些服务端的程序，这样也就实现了用javaScript去开发 Apache + PHP 以及 Java Servlet所开发的服务端功能，这样做的好处就是前端和后端都采用javascript，即开发一份js程序即可以运行在前端也可以运行的服务端，这样比一个应用使用多种语言在开发效率上要高，不过node.js属于新兴产品，一些公司也在尝试使用node.js完成一些业务领域，node.js基于V8引擎，基于事件驱动机制，在特定领域性能出色，比如用node.js实现消息推送、状态监控等的业务功能非常合适。
下边我们去安装Node.js：
2）选安装目录进行安装
默认即可
安装完成检查PATH环境变量是否设置了node.js的路径。
3）测试
在命令提示符下输入命令
node ‐v（2）安装NPM
1）自动安装NPM
npm全称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）安装cnpm
npm默认会去国外的镜像去下载js包，在开发中通常我们使用国内镜像，这里我们使用淘宝镜像
下边我们来安装cnpm：
有时我们使用npm下载资源会很慢，所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度。
输入命令，进行全局安装淘宝镜像。
npm install -g cnpm --registry=https://registry.npm.taobao.org设置代理 npm config set proxy=http://127.0.0.1:8087 npm config set registry=http://registry.npmjs.org 关于https 经过上面设置使用了http开头的源，因此不需要设https_proxy了，否则还要增加一句: npm config set https-proxy http://server:port 代理用户名和密码 npm config set proxy http://username:password@server:port npm confit set https-proxy http://username:password@server:port 取消代理 npm config delete proxy npm config delete https-proxy 修改源 请参考https://segmentfault.com/a/1190000002589144https://segmentfault.com/q/1010000012930521 解决安装【初始化】问题。。。
安装后，我们可以使用以下命令来查看cnpm的版本
cnpm -v
nrm ls 查看镜像已经指向taobao
https://i-blog.csdnimg.cn/blog_migrate/9258c8e718c4b86f42f7bf3ab6ba34f3.png#pic_center
使nrm use XXX切换 镜像
如果nrm没有安装则需要进行全局安装：cnpm install -g nrm
4）非连网环境安装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）安装webpack
1、连网安装
webpack安装分为本地安装和全局安装：
**本地安装：**仅将webpack安装在当前项目 的node_modules目录中，仅对当前项目有效。
**全局安装：**将webpack安装在本机，对所有项目有效，全局安装会锁定一个webpack版本，该版本可能不适用某个项目。全局安装需要添加 -g 参数。
进入webpacktest测试目录目录，运行：
1）本地安装：
只在我的项目中使用webpack，需要进行本地安装，因为项目和项目所用的webpack的版本不一样。本地安装就会将webpack的js包下载到项目下的npm_modeuls目录下。
在门户目录下创建webpack测试目录webpacktest01：
npm install --save-dev webpack 或 cnpm install --save-dev webpack
npm install --save-dev webpack-cli (4.0以后的版本需要安装webpack-cli)
2）全局安装加-g，如下：
全局安装就将webpack的js包下载到npm的包路径下。
npm install webpack -g 或 cnpm install webpack -g
3）安装webpack指定的版本：
本教程使用webpack3.6.0，安装webpack3.6.0：
进入webpacktest测试目录，运行：cnpm install --save-dev webpack@3.6.0
全局安装：npm install webpack@3.6.0 -g或 cnpm install webpack@3.6.0 -g
2、非连网安装
参考上边 “非连网环境安装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.js
function add(x,y) { return x+y; } module.exports.add=add;2.main.js
var {add}=require("./module") var Vue=require("./vue.min"); var vue=new Vue({ el:'#app', data:{ name:"黑马程序员", num1:0, num2:0, result:0, size:33, url:"http://www.baidu.com" }, methods:{ change(){ this.result=add(Number.parseInt(this.num1),Number.parseInt(this.num2)); } } })3.webpack.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <a :href="url"> <span v-text="name"></span> </a> <input type="text" v-model="num1">+ <input type="text" v-model="num2">= <span v-text="result"></span> <button v-on:click="change">计算</button> <span :style="{fontSize:size+'px'}">JavaEE工程师</span> </div> </body> <script src="vue.min.js"></script> <script src="builds.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: '首页', //生成的页面标题<head><title>首页</title></head> filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能 template: 'webpack2.html' //根据vue_02.html这个模板来生成(这个文件请程序员自己生成) }) ] }全部文件创建完之后就可以直接邮件运行这个热部署操作的命令，非常的快捷方便
接下来就是对CMS的前端工程的应用的开发导入相应的前端工程执行run dev
运行可能会出现这个错误
解决办法:
说明node sass版本在当前环境运行不了，解决方法如下：
1.卸载当前版本node sass
npm uninstall --save node-sass2.重新安装node sass
cnpm install --save node-sass完成运行
2.2 单页面应用介绍
什么是单页应用？
引用百度百科：
单页面应用的优缺点：
优点：
1、用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax 来操作。
2、适合前后端分离开发，服务端 提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染。
缺点：
1、首页加载慢 单页面应用会将js、 css打包成一个文件，在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则 用户体验不好。
2、SEO不友好 SEO（Search 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 :data="tableData" stripe style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" 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 :data="tableData" stripe style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" 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 @click="query">查询</el-button> <el-table :data="list" stripe style="width: 100%"> <el-table-column type="index" width="60"> </el-table-column> <el-table-column prop="pageName" label="页面名称" width="120"> </el-table-column> <el-table-column prop="pageAliase" label="别名" width="120"> </el-table-column> <el-table-column prop="pageType" label="页面类型" width="150"> </el-table-column> <el-table-column prop="pageWebPath" label="访问路径" width="250"> </el-table-column> <el-table-column prop="pagePhysicalPath" label="物理路径" width="250"> </el-table-column> <el-table-column prop="pageCreateTime" label="创建时间" width="180" > </el-table-column> </el-table> <el-pagination style="float:right" background layout="prev, pager, next" :total="total" :page-size="param.page" :current-page="param.size" @current-change="change" > </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.332+0000", "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.621+0000", "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> </style>3.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.list=res.queryResult.list; this.total=res.queryResult.total; }); }, change(){ this.query() }进行mounted的分页初始化查询
methods:{ query(){ page_list(this.param.page,this.param.size).then(res=>{ this.list=res.queryResult.list; this.total=res.queryResult.total; }); }, change(page){ this.param.page=page; this.query(); } }, mounted() { this.query(); }完成：
今日总结：这次的主要内容还是Vue的回顾，总的来说使用VUE开发更加的方便，更加的快捷，能更好的根据已又得内容进行相应得开发和数据绑定，首先是先根据路由找到对应得页面，然后执行页面得钩子函数，初始化得钩子函数执行之后，调用了对应得分页得方法，分页得方法在根据ajax请求去对应得js发起请求，请求到后端，后端相应过来数据，数据在渲染到对应得模型中，页面在渲染处理，这个流程就是前后端开发得流程，非常得清晰！！！