学成在线一：前端页面管理CMS

1.SpringBootApplication注解规范

@SpringBootApplication
@EntityScan("com.xuecheng.framework.domain.cms")//扫描实体类
@ComponentScan(basePackages = {"com.xuecheng.api"})//扫描接口
@ComponentScan(basePackages = {"com.xuecheng.manage_cms"})//扫描本项目下所有的类,默认，可不写
public class ManageCmsApplication {

    public static void main(String[] args) {
        SpringApplication.run(ManageCmsApplication.class,args);}
}

2.mongodb的使用

（1）MongoRepository<T>spring定义的接口类，T指定模型类和模型的主键类,模型类中指定表，即可以对对应的表进行增删改查操作

import com.xuecheng.framework.domain.cms.CmsPage;
import org.springframework.data.mongodb.repository.MongoRepository;

//MongoRepository<T>spring定义的接口类，T指定模型类和模型的主键类,模型类中指定表
public interface CmsPageRepository extends MongoRepository<CmsPage,String> {
}

（2）模型类

@Data
@ToString
@Document(collection = "cms_page")
public class CmsPage {
    /**
     * 页面名称、别名、访问地址、类型（静态/动态）、页面模版、状态
     */
    //站点ID
    private String siteId;
    //页面ID
    @Id
    private String pageId;
    //页面名称
    private String pageName;
    //别名
    private String pageAliase;
    //访问地址
    private String pageWebPath;
    //参数
    private String pageParameter;
    //物理路径
    private String pagePhysicalPath;
    //类型（静态/动态）
    private String pageType;
    //页面模版
    private String pageTemplate;
    //页面静态化内容
    private String pageHtml;
    //状态
    private String pageStatus;
    //创建时间
    private Date pageCreateTime;
    //模版id
    private String templateId;
    //参数列表
    private List<CmsPageParam> pageParams;
    //模版文件Id
//    private String templateFileId;
    //静态文件Id
    private String htmlFileId;
    //数据Url
    private String dataUrl;

}

（3）分页查

@SpringBootTest
@RunWith(SpringRunner.class)
public class CmsPageRepositoryTest {


    @Autowired
    CmsPageRepository cmsPageRepository;

    @Test
    public void testFindPage(){

        Pageable pageable = PageRequest.of(1,10);//从第一页开始，每页10条
        Page<CmsPage> all = cmsPageRepository.findAll(pageable);
        System.out.println(all);
    }
}

3.swagger

Swagger接口生成工作原理：
1、系统启动，扫描到api工程中的Swagger2Configuration类
2、在此类中指定了包路径com.xuecheng，找到在此包下及子包下标记有@RestController注解的controller类
3、根据controller类中的Swagger注解生成接口文档

（1）Swagger2Configuration.java

@Configuration
@EnableSwagger2
public class Swagger2Configuration {
    @Bean
    public Docket createRestApi() {
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.xuecheng"))
                .paths(PathSelectors.any())
                .build();
    }

    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("学成网api文档")
                .description("学成网api文档")
//                .termsOfServiceUrl("/")
                .version("1.0")
                .build();
    }

}

（2）在Java类中添加Swagger的注解即可生成Swagger接口，常用Swagger注解如下：

@Api：修饰整个类，描述Controller的作用

@ApiOperation：描述一个类的一个方法，或者说一个接口
@ApiParam：单个参数描述

@ApiModel：用对象来接收参数 @ApiModelProperty：用对象接收参数时，描述对
象的一个字段

@ApiResponse：HTTP响应其中1个描述 @ApiResponses：HTTP响应整体描述

@ApiIgnore：使用该注解忽略这个API

@ApiError ：发生错误返回的信息

@ApiImplicitParam：一个请求参数
@ApiImplicitParams：多个请求参数

@Api(value = "cms页面管理借口",description = "cms页面管理借口，提供页面的增删改查")
public interface CmsPageControllerApi {

    //页面查询
    @ApiOperation("分页查询页面列表")
    @ApiImplicitParams({@ApiImplicitParam(name="page",value = "页码",required=true,paramType="path",dataType="int"),
                        @ApiImplicitParam(name="size",value = "每页记录数",required=true,paramType="path",dataType="int")
                    })
    public QueryResponseResult findList(int page, int size, QueryPageRequest queryPageRequest);
}

@Data
public class QueryPageRequest {
    //接收页面查询的查询条件
    //站点id
    @ApiModelProperty("站点id")
    private String siteId;
    //页面ID
    @ApiModelProperty("页面ID")
    private String pageId;
    //页面名称
    @ApiModelProperty("页面名称")
    private String pageName;
    //别名
    @ApiModelProperty("页面别名")
    private String pageAliase;
    //模版id
    @ApiModelProperty("模版id")
    private String templateId;
    //....
}

（3）通过http://localhost:31001/swagger-ui.html访问

 

4.vue.js的使用

（1）入门

①引入vue.min.js

②编写view层

③编写MMVM中的VM(ViewModel)部分及model部分

④刷新页面运行程序, vue.js(VM)部分实现将model中的数据在view中展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js测试程序</title>
</head>
<body>
<div id="app">
    {
  {name}}<!--MVV的view层-->
</div>
</body>
<script src="vue.min.js"></script>
<script>
    //编写MMVM中的VM(ViewModel)部分及model部分
    //整体处理数据的是VM
    var VM = new Vue({
        el: "#app", //表示vm接管了app区域
        data:{      //model,数据
            name: '黑马'
        }
    });
</script>
</html>

（2）v-model实现双向数据绑定

仅能在input,select,textarea.components中使用

①由模型数据绑定到Dom对象,模型数据的值改变, Dom对象的值自动改变

②由Dom对象绑定到模型数据, Dom对象的值改变,模型数据就改变

③vue_02.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js测试程序</title>
</head>
<body>
<div id="app">
    {
  {name}}
    <input type="text" v-model="num1"/> +
    <input type="text" v-model="num2"/>=
    {
  {Number.parseInt(num1)+Number.parseInt(num2)}}
</div>
</body>
<script src="vue.min.js"></script>
<script>
    //编写MMVM中的VM(ViewModel)部分及model部分
    //整体处理数据的是VM
    var VM = new Vue({
        el: "#app", //表示vm接管了app区域
        data:{      //model,数据
            name: '黑马',
            num1: 0,
            num2: 0,
            result: 0,
        }
    });
</script>
</html>

（3）v-text解决闪烁

v-text可以将一个变量的值渲染到指定的元素中,它可以解决插值表达式闪烁，即不会出现源码表达式

①用法

<span v-text="name"></span>

<span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>

②整体程序 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js测试程序</title>
</head>
<body>
<div id="app">
    <span v-text="name"></span>
    <input type="text" v-model="num1"/> +
    <input type="text" v-model="num2"/>=
    <!--{
  {Number.parseInt(num1)+Number.parseInt(num2)}}-->
    <span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>
</div>
</body>
<script src="vue.min.js"></script>
<script>
    //编写MMVM中的VM(ViewModel)部分及model部分
    //整体处理数据的是VM
    var VM = new Vue({
        el: "#app", //表示vm接管了app区域
        data:{      //model,数据
            name: '黑马',
            num1: 0,
            num2: 0,
            result: 0,
        }
    });
</script>
</html>

（4）v-on监听用户事件

①用法

<button v-on:click="change">计算</button>

methods:{
	change:function () {
		this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2)//调用自己VM里面的对象要用this.
	}
}

②整体程序

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue.js测试程序</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>
    //编写MMVM中的VM(ViewModel)部分及model部分
    //整体处理数据的是VM
    var VM = new Vue({
        el: "#app", //表示vm接管了app区域
        data:{      //model,数据
            name: '黑马',
            num1: 0,
            num2: 0,
            result: 0,
        },
        methods:{
            change:function () {
                this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2)//调用自己VM里面的对象要用this.
            }
        }
    });
</script>
</html>

（5）v-bind:  可简写为：

v-bind可以将数据对象绑定在dom的任意属性中。

v-bind可以给dom对象绑定一个或多个特性,例如动态绑定style和class。

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue.js测试程序</title>
</head>
<body>
<div id="app">
    <a v-bind:href="url">
        <span v-text="name"></span>
    </a>
    <input type="text" v-model="num1"/> +
    <input type="text" v-model="num2"/>=
    <!--{
  {Number.parseInt(num1)+Number.parseInt(num2)}}-->
    <span v-text="result"></span>
    <button v-on:click="change">计算</button>
    <div v-bind:style="{ fontSize: size + 'px' }">javaEE培训</div>
    javaEE培训+
    javaEE培训
    <div v-bind:style="{ fontSize: size + 'px' }">javaEE培训</div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
    //编写MMVM中的VM(ViewModel)部分及model部分
    //整体处理数据的是VM
    var VM = new Vue({
        el: "#app", //表示vm接管了app区域
        data:{      //model,数据
            name: '黑马',
            num1: 0,
            num2: 0,
            result: 0,
            url: 'www.baidu.com',
            size: 11

        },
        methods:{
            change:function () {
                this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2)//调用自己VM里面的对象要用this.
            }
        }
    });
</script>
</html>

（6）v-for , v-if ，v-else

v-for可以循环遍历数组、v-if进行判断

①vue_03.html

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue.js测试程序</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in list" :key="index" v-if="index % 2 == 0">{
  {index}}-->{
  {item}}</li>
        <li v-for="(value,key) in user">{
  {key}}-->{
  {value}}</li>
        <li v-for="(item,index) in userlist" :key="item.user.uname">
            <div v-if="item.user.uname == 'itheima'" style="background: #00f50c">
                {
  {index}}-->{
  {item.user.uname}}-->{
  {item.user.age}}
            </div>
            <div v-else="">
                {
  {index}}-->{
  {item.user.uname}}-->{
  {item.user.age}}
            </div>
        </li>
    </ul>
</div>
</body>
<script src="vue.min.js"></script>
<script>
    //编写MMVM中的VM(ViewModel)部分及model部分
    //整体处理数据的是VM
    var VM = new Vue({
        el: "#app", //表示vm接管了app区域
        data:{//model数据
            list:[1,2,3,4,5],
            user:{uname:'itcast',age:10},
            userlist:[
                {user:{uname:'itcast',age:10}},
                {user:{uname:'itheima',age:11}}
            ]
        }
    });
</script>
</html>

②效果

 

5.webpack使用

（1）model01.js，定义方法

若要被使用需要先导出

function add(x, y) {
    return x + y + 1
};

function add2(x, y) {
    return x + y + 2
};

//若要被使用需要先导出
// module.exports = {add,add2}
module.exports.add = add;
module.exports.add2 = add2;

（2）定义入口main.js

//导入需要使用的model01.js和vue.min.js
var {add} = require("./model01.js");
var Vue = require("./vue.min.js")

//编写MMVM中的VM(ViewModel)部分及model部分
//整体处理数据的是VM
var VM = new Vue({
    el: "#app", //表示vm接管了app区域
    data:{      //model,数据
        name: '黑马',
        num1: 0,
        num2: 0,
        result: 0,
        url: 'www.baidu.com',
        size: 11

    },
    methods:{
        change:function () {
            this.result = add(Number.parseInt(this.num1),Number.parseInt(this.num2))//调用自己VM里面的对象要用this.
        }
    }
});

（3）进入程序目录，执行webpack main.js build.js ，这段指令表示将main.js打包输出为 build.js文件
（4）在html中引用build.js

build.js里面包含了model01.js和vue.min.js

vue_02.html

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue.js测试程序</title>
</head>
<body>
<div id="app">
    <a v-bind: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>
</div>
</body>
<script src="build.js"></script>
<script>
    //编写MMVM中的VM(ViewModel)部分及model部分
</script>
</html>

6.webpack-dev-server，实现热加载，自动刷新浏览器

（1）安装webpack-dev-server

使用 webpack-dev-server需要安装webpack、 webpack-dev-server和 html-webpack-plugin三个包。
执行命令：

cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev

安装完成，会发现程序目录出现一个package.json文件，此文件中记录了程序的依赖。
没有联网的同学拷贝老师提供的node_modules.zip到webpacktest02目录下，解压到node_modules目录下。

（2）配置webpack-dev-server

在package.json中配置script
 

{
  "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"
  }
}

--inline：自动刷新
--hot：热加载
--port：指定端口
--open：自动在默认浏览器打开
--host：可以指定服务器的 ip，不指定则为127.0.0.1，如果对外发布则填写公网ip地址

（3）配置webpack.config.js
 

//引用html-webpack-plugin插件，作用是根据html模板template: 'vue_02.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' //输出文件
    },
    plugins:[
        new htmlwp({
            title: '首页', //生成的页面标题<head><title>首页</title></head>
            filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
            template: 'vue_02.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)
        })
    ]
}

（4）启动

启动文件：
方法1、进入 webpacktest02目录，执行npm run dev
方法2、使用webstorm，右键package.json文件，选择“Show npm Scripts”
打开窗口：

双击 dev。
注意：dev就是在package.json中配置的webpack dev
发现启动成功自动打开浏览器。
修改src中的任意文件内容，自动加载并刷新浏览器。

（5）debug调试

使用了webpack之后就不能采用传统js的调试方法在chrome中打断点,
配置如下：

①在webpack.config.js中配置：

devtool: 'eval-source-map',

②webpack.config.js部分内容如下：

//引用html-webpack-plugin插件，作用是根据html模板template: 'vue_02.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: 'vue_02.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)
        })
    ]
}

③添加debugger

function add(x, y) {
    debugger
    return x + y
}

点击“计算” 即进入debugger代码位置，此时可以使用chrome,F12进行调试了。

7.vue.js,创建页面/table/分页查询/api调用/跨域问题解决

（1）页面结构

（2）前后的请求响应流程图

1、在浏览器输入前端url
2、前端框架vue.js根据url解析路由，根据路由找到page_list.vue页面
3、首先执行page_list.vue中的钩子方法
4、在钩子方法中调用query方法。
5、在query方法中调用cms.js中的page_list方法
6、cms.js中的page_list方法通过axios请求服务端接口
7、采用proxyTable解决跨域问题，node.js将请求转发到服务端(http://localhost:31001/cms/page/list)
8、服务端处理，将查询结果响应给前端
9、成功响应调用then方法，在then方法中处理响应结果，将查询结果赋值给数据模型中的total和list变量。
10、vue.js通过双向数据绑定将list数据渲染输出。 

（3）程序编写

①页面结构（含表格，分页），/src/module/cms/page/page_list.vue

<template>
  <!--注意：template内容必须有一个根元素，否则vue会报错，这里我们在template标签内定义一个div-->
  <div>
    <!--编写静态页面部分，即view部分-->
    <el-button type="primary" size="small" @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
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="params.size"
      :current-page="params.page"
      @current-change="changePage"
      style="float: right">
    </el-pagination>
  </div>
</template>
<script>
  /*编写静态页面，model及vm部分*/
  //导入cms.js的所有方法
  import * as cmsApi from '../api/cms'
  export default {
    data() {
      return {
        list: [  //识别的id为"list"
        ],
        total: 0,
        params:{
          page:1,
          size:10
        }
      }
    },
    methods:{
      query:function(){
        //调用后端的api,res为结果
        cmsApi.page_list(this.params.page,this.params.size).then((res)=>{
          //将res结果数据赋值给model
          this.list =  res.queryResult.list;
          this.total = res.queryResult.total;
        })
      },
      changePage:function(page){//形参就是当前页码
        //调用query方法
        this.params.page = page;
        this.query();
      }
    },
    mounted(){
      this.query()
    }
  }
</script>
<style>
  /*编写页面样式，不是必须*/
</style>

②页面路由,/src/module/cms/router/index.js，负责转发

import Home from '@/module/home/page/home.vue';
import CMS from '@/module/cms/page/page_list.vue';
export default [{
    path: '/cms',
    component: Home,
    name: 'CMS内容管理',
    hidden: false,
    children:[
      {path: '/cms/page/list',name: '页面列表',component: CMS,hidden: false}
    ]
  }
]

③导入cms模块的路由,/src/base/router/index.js

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
// 定义路由配置
let routes = []
let concat = (router) => {
  routes = routes.concat(router)
}
// // 导入路由规则
import HomeRouter from '@/module/home/router'
import CMSRouter from '@/module/cms/router'
// 合并路由规则
concat(HomeRouter)
concat(CMSRouter)
export default route