CMS前端开发(第二章)

本文介绍了前端开发中的模块化工具Webpack,包括手动和自动打包,以及Node.js作为JavaScript服务端运行环境和npm包管理。讨论了单页面应用(SPA)的概念,Vue工程的脚手架创建,Element-UI的使用,以及跨域问题的解决方案和Vue的生命周期钩子函数。

WEBPACK

webpack的功能

  1. 模块化开发----将某功能的用到的类型文件,变成一个文件
  2. js新特新需要webpake转换成低版本可以使用的形式 .js
  3. css新特性需要转换成浏览器能识别的文件 .css

nodejs ---- javascript的运行环境(服务端)

npm --远程下载安装我们工程所依赖的js包

npm install -g cnpm --registy=https://registy.npm.taobao.org (安装中国镜像下载更快)

打包文件分类(分模块开发)

文件名称(模块)文件功能
show.html直接展示在浏览器的文件,V视图部分
mian.html打包主文件,也叫入口文件,用require(“module.js”)引入
module.js功能代码区,各种function,必须导出module.exports={json格式}
build.js最终包裹,打包完成后被引入show.html中
视图部分V show.html
<div id="app">
    <!--相当于MVVM的view视图-->
    <!--{{name}}-->
    <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="Number.parseInt(num1)+Number.parseInt(num2)"></span>-->
    <span v-text="result"></span>
    <!--{{Number.parseInt(num1)+Number.parseInt(num2)}}-->
    <button v-on:click="change">计算</button>
    <div v-bind:style="{ fontSize: size + 'px' }">javaEE培训</div>
</div>
</body>

<!--<script src="vue.min.js"></script>-->
<script src="src/build.js">
    //编写MVVM中的model部分及VM(ViewModel)部分

</script>
main.js 入口方法 VM模块

== vm模块是视图与模型连接的区域 有控制层的方法==

//入口方法  线导入modul
var {add} =require("./modul01")
var Vue=require("./vue.min")
var VM = new Vue({
    el:'#app',//vm接管了app区域的管理
    data:{//model数据
        name:'黑马程序员',
        num1:0,
        num2:0,
        result:0,
        url:'http://www.itcast.cn',
        size:11
    },
    methods:{
        change:function () {
            this.result=add(Number.parseInt(this.num1),Number.parseInt(this.num2))
            // this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2)
            //alert("计算结果:"+this.result)
        }
    }
});
module.js M模块 主要是服务层方法
var add =function (x,y) {
    debugger
    return x+y;
}
var add2=function (x,y) {
    return x+y+2;
}
module.exports.add=add;
// module.exports.add2=add2;
//module.exports={add,add2}
手动打包
  • webpack main.js build.js
自动打包
  • webpack-dev-server服务器
  1. 安装webpack-dev-server(发动机 变速器 半轴)
    使用 webpack-dev-server需要安装
    webpack(基础)
    webpack-dev-server(热部署)
    html-webpack-plugin (build.js ->html) 三个包。

命令: cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev
安装完成,
会发现程序目录出现一个package.json文件,此文件中记录了程序的依赖。

  1. 配置webpack-dev-server (点火器)
{
  "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地址

  • scripts : 勾选功能
  • devDependencies: 依赖选择
  1. 配置webpack.config.js (传动带)
//引用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: 'vue_02.html' //根据vue_02.html这个模板来生成(这个文件请程序员自己生成)
        })
    ]
}

单页面SPA(single page web application)

  • 优点 :

    1. 不用刷新页面,所有都是AJAX请求。
    2. 服务端提供HTTP接口,前端请求HTTP接口获得数据,使用JS进行客户端渲染。
  • 缺点 :

    1. 首页加载慢
    2. SEO

脚手架创建的基于VUE工程

文件结构
文件名称文件功能
build
config里边有一个index.js文件,记录跨域信息
dist
node_module
srcsrc文件下分类很多
scr 文件包含文件功能
文件名文件功能
assets ad 去+ set 足够 资产
base 基础内部结构与module一样,但是没有page
common 公共的
components 组成(加强 放置)
mock 模仿
module 模型功能块部分,每个功能块包含四个文件
statics 静态
vuex 应用程序的状态管理模式+库它充当应用程序中所有组件的集中存储,其规则确保状态只能以可预测的方式进行变更。
module下的文件

以cms为例

文件名称文件功能
api服务器接口
components组件被cms下的文件所公用
page 页面三标签 template> script> style>
router 路由器名字必须是index.js

page

<template>
//第一部分(表现)
</template>
<script>
//第二部分(JavaScript部分)
</script>
<style scoped>
//第三部分(样式部分)
</style>

router index.js

import Home from '@/module/home/page/home.vue';
import page_list from '@/module/cms/page/page_list.vue';
import page_add from '@/module/cms/page/page_add.vue';
export default [{
    path: '/',
    component: Home,
    name: 'CMS王泽旭',//菜单名称
    hidden: false,
    children:[  //子路由结构跟父路由结构一样
      {path:'/cms/page/list',name:'页面列表cms',component: page_list,hidden:false},
      {path:'/cms/page/add',name:'添加数据',component: page_add,hidden:true}
    ]
  }
]

路由器json格式

name内涵
pathurl访问路径
component引入的组件(import 后的标识符)
name页面中显示的名字
hidden是否隐藏
childrenchildren:[{},{}] {}里边的内容与外层的内容一样

在这里插入图片描述

element-UI (与page的.vue文件配套使用)

<template>
    <div>
      <!--查询表单-->
       <el-button 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>
import * as cmsAPI from '../api/cms'
     export default {
    data() {
      return {
        list: [],
        total:50,
        params:{
          size:4,
          page :2
        }
      }
    },
    methods: {
      query:function(){
        //调用服务端接口
        alert('query');
        confirm('确定输入吗?');
        prompt("请输入你所要的")
        cmsAPI.page_list(this.params.page,this.params.size).then((res)=>{
          //将res的数据结构搞清楚
            this.list=res.queryResult.list;
            this.totle=res.queryResult.totle;
        })
      },
      changePage:function(){
          alert('change page');
      }
    },
  }
 </script>

elementUI 表格参数
在这里插入图片描述
分页
在这里插入图片描述
导出
在这里插入图片描述

跨域

浏览器的同源策咯(协议 ip 端口)

解决方案(代理)

在这里插入图片描述
运行在nodejs服务器上,服务器与服务器之间不存在跨域问题。

在config文件下有一个index.js文件记录着跨域信息
在这里插入图片描述

钩子函数(在vue对象创建的各个时机执行一个方法)
  1. created :this 实例已经创建 但是dom元素还没有被渲染
  2. mounted :dom已经被渲染

在export default{
data(){
json格式参数
},
methods:{},
created(){ //钩子函数与参数 方法同级
}
}

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值