微服务[学成在线] day02：CMS前端开发

最新推荐文章于 2020-07-26 03:09:07 发布

cory_lin

最新推荐文章于 2020-07-26 03:09:07 发布

阅读量398

点赞数

分类专栏：微服务项目学习文章标签： spring boot vue java web

本文链接：https://blog.csdn.net/codeyee/article/details/107558291

版权

本文是基于学成在线微服务项目的一份笔记，详细介绍了CMS前端开发，涵盖vue基础、webpack入门、webpack-dev-server的使用以及CMS前端页面的查询开发。文章深入浅出地讲解了webpack的优点、配置、以及解决跨域问题的方法，同时还涉及vue的模块化开发和前端请求响应流程。

摘要由CSDN通过智能技术生成

🚩 写在前面

我为什么要花时间去写这个笔记？

由于在学习该项目的过程中发现了原讲义存在的一些问题，所以该笔记基于「学成在线」微服务项目 PDF 讲义进行编写，并且投入了时间去优化了笔记的格式、代码的高亮、重点的标记等。

以及一些原讲义中所描述的一些知识点使我无法理解的内容，我会对这些内容的表达方式进行修改或者提出一些问题，并且用我自己所理解的一些想法去重新的解释这个问题。

总结一下原 PDF 讲义中已知的一些问题：

从 PDF 中复制出来的代码，部分特殊符号的编码有问题，并且不易被发现，例如横杠 -，从PDF直接复制出来的话是无法运行的。
有时候一些重复且简单的代码，我们需要直接从讲义中直接复制，而部分PDF编辑器复制出来的代码格式可能会变乱，且PDF中没有代码高亮，代码可阅读性差，并且复制出来时会有代码缩进错乱等问题。
部分内容是重点但在讲义中只是简单的描述，这并不方便我们后期回顾该课程的知识点，所以我在一些重点的内容上加上了更多的解释。

如有不足的地方，欢迎小伙伴们补充、填坑。

😎 知识点概览

为了方便后续回顾该项目时能够清晰的知道本章节讲了哪些内容，并且能够从该章节的笔记中得到一些帮助，所以在完成本章节的学习后在此对本章节所涉及到的知识点进行总结概述。

本章节为【学成在线】项目的 day02 的内容

vue 基础语法
对 webpack与 webpack-dev-server 的基本使用，理解 webpack 的打包过程。
CMS 前端工程的基础构建
解决前端跨域请求的问题，并理解前端请求数据的流程。
配合使用 Element-UI 的 table 组件进行分页查询

一、vue基础

vue基础部分内容的笔记略过，如过你仍需要该阶段的学习，阅读官方的讲义或者移步：https://cn.vuejs.org/v2/guide/ 进行阅读和练习。

二、webpack入门

0x01 概述

使用vue.js开发大型应用需要使用 webpack 打包工具，本节研究webpack的使用方法。

Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。

0x02 使用webpack有什么好处呢？

从图中我们可以看出，Webpack 可以将js、css、png等多种静态资源进行打包

模块化开发
程序员在开发时可以分模块创建不同的js、 css等小文件方便开发，最后使用webpack将这些小文件打包成一个文
件，减少了http的请求次数。
webpack可以实现按需打包，为了避免出现打包文件过大可以打包成多个文件。
编译typescript、ES6等高级js语法
随着前端技术的强大，开发中可以使用javascript的很多高级版本，比如：typescript、ES6等，方便开发，
webpack可以将打包文件转换成浏览器可识别的js语法。
CSS预编译
webpack允许在开发中使用Sass 和 Less等原生CSS的扩展技术，通过sass-loader、less-loader将Sass 和 Less的
语法编译成浏览器可识别的css语法。

0x03 webpack的缺点

1、配置有些繁琐
2、文档不丰富

0x04 安装 npm

node.js 已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本，node可以直接去官网下载安装

设置包路径

npm config set prefix "C:\Program Files\nodejs\npm_modules"
npm config set cache "c:\Program Files\nodejs\npm_cache"

0x05 安装 cnpm

执行以下命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后执行命令 cnpm -v

0x03 安装 webpack

node.js 安装包分为两种模式

本地安装：仅将webpack安装在当前项目的node_modules目录中，仅对当前项目有效。
全局安装：将webpack安装在本机，对所有项目有效，全局安装会锁定一个webpack版本，该版本可能不适用某个项目。全局安装需要添加 -g 参数

本地安装

npm install --save-dev webpack 或 cnpm install --save-dev webpack
npm install --save-dev webpack-cli (4.0以后的版本需要安装webpack-cli)

全局安装

全局安装加-g，如下：全局安装就将webpack的js包下载到npm的包路径下。

npm install webpack -g 或 cnpm install webpack -g

安装 webpack 指定的版本：
进入webpacktest测试目录，运行：cnpm install --save-dev webpack@3.6.0
全局安装：npm install webpack@3.6.0 -g 或 cnpm install webpack@3.6.0 -g

0x07 入门程序

通过本入门程序体会webpack打包的过程及模块化开发的思想。

需求分析

通过入门程序实现对js文件的打包，体会webpack是如何对应用进行模块化管理。
对上边1+1=2的例子使用webpack进行模块化管理

定义 model01.js

在webpacktest01目录下创建model01.js

将本程序使用的加法运算的js方法抽取到一个js文件，此文件就是一个模块，代码如下

//定义add函数
function add(x, y) {
   
    return x+y;
}

//导出add函数
module.exports.add = add;

定义main.js

在webpacktest01目录下创建main.js，main.js是本程序的js主文件，包括如下内容：

1、在此文件中会引用model01.js模块
2、引用vue.min.js（它也一个模块）
3、将html页面中构建vue实例的代码放在main.js中。

var {
   add} = require("./model01.js")
var Vue = require("./vue.min")

// 实例化Vue对象
//vm :叫做MVVM中的 View Model
var VM = new Vue({
   
    el:"#app",//表示当前vue对象接管app的div区域
    data:{
   
        name:'黑马程序员',// 相当于是MVVM中的Model这个角色
        num1:0,
        num2:0,
        result:0,
        url:'http://www.itcast.cn'
    },
    methods:{
   
        change:function(){
   
            this.result = add(Number.parseInt(this.num1),Number.parseInt(this.num2));
        }
    }
});

打包测试

上边将 mode01.js 模块及 main.js 主文件编写完成，下边使用 webpack 对这些js文件进行打包

1、进入程序目录，执行 webpack main.js -o build.js ，这段指令表示将 main.js 打包输出为 build.js 文件执行完成，观察程序目录是否出现 build.js。

2、在创建一个html ，这里我命名为 vue_02.html 并中引用 build.js

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>vue.js入门程序</title>