学成在线--day02 CMS前端开发（含Vue基础知识得回顾）
学成在线 第2天 CMS前端开发
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
Title
{{name}}
V-model：的案例开测试小demo：
Title
{{name}}
+
=
{{Number.parseInt(num1)+Number.parseInt(num2)}}
V-text解决差值闪烁的问题
Title
+
=
v-on的小demo实例测试
Title
+
=
V-bind的测试小案例
Title
v-for和-if 的基础demo
Title
数组遍历测试==============
- {{item}}----{{index}}
对象遍历测试==============
- {{key}}-----{{value}}
集合遍历测试==============
-
{{item.user.username}}----{{item.user.age}}
{{item.user.username}}----{{item.user.age}}
关于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
Title
完成正常测试及其开发流程
使用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: '首页', //生成的页面标题首页
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的官网进行相应的复制，就可以了
查询
关于ElementUi得页面组件得导入及其分页插件导入得相关得demo案例
查询
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();
}完成：
