CMS前端开发(第二章)

最新推荐文章于 2025-06-30 14:33:02 发布

weixin_42673058

最新推荐文章于 2025-06-30 14:33:02 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42673058/article/details/87648830

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

WEBPACK

webpack的功能

模块化开发----将某功能的用到的类型文件，变成一个文件
js新特新需要webpake转换成低版本可以使用的形式 .js
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服务器

安装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文件，此文件中记录了程序的依赖。

配置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: 依赖选择

配置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
src	src文件下分类很多

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	内涵
path	url访问路径
component	引入的组件（import 后的标识符）
name	页面中显示的名字
hidden	是否隐藏
children	children:[{},{}] {}里边的内容与外层的内容一样

在这里插入图片描述

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>