学成在线--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

    
    
    


    

        {{name}}
    

V-model：的案例开测试小demo：

    
    
    



    {{name}}
    +
    =
    {{Number.parseInt(num1)+Number.parseInt(num2)}}
    计算

V-text解决差值闪烁的问题

    
    



    
    +
    =
    
    计算

 

v-on的小demo实例测试

    
    



    
    +
    =
    
    计算

V-bind的测试小案例

 

    
    






+
=

计算
    JavaEE工程师

v-for和-if 的基础demo

    
    



    

        数组遍历测试==============
        
{{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

    
    






+
=

计算
    JavaEE工程师

完成正常测试及其开发流程

使用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-sass

2.重新安装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();
    }

完成：

 

今日总结：这次的主要内容还是Vue的回顾，总的来说使用VUE开发更加的方便，更加的快捷，能更好的根据已又得内容进行相应得开发和数据绑定，首先是先根据路由找到对应得页面，然后执行页面得钩子函数，初始化得钩子函数执行之后，调用了对应得分页得方法，分页得方法在根据ajax请求去对应得js发起请求，请求到后端，后端相应过来数据，数据在渲染到对应得模型中，页面在渲染处理，这个流程就是前后端开发得流程，非常得清晰！！！