尚医通04：Axios Node Npm bable webpack+前端工程改造

朴灿烈づ我的快乐病毒、 2023-10-13 16:14 10阅读 0赞

**目录**

本日学习

内容介绍

Axios

Node

NPM包管理器

Babel

模块化

Webpack

搭建前端工程

前端框架介绍

前端开发过程介绍

登录改造成本地接口

--------------------

###### 本日学习 ######

--------------------

1. 了解Axios :他是异步请求用的，前后端。 用于在浏览器和 Node.js 中发送 HTTP 请求。它支持从服务器获取数据、上传数据以及执行其他与 HTTP 相关的操作。

2.Node:它允许你在服务器端运行 JavaScript.

3.Npm:是node.js 的软件管理包

4.Bable:转换器。Ems6到5 的转换器

5.weback:模块打包器

**熟知**

--------------------

1.前端工程的流程

![31ef1c459bb94a53be939d4c1205f837.png][]

1.首先添加路由：为了可以跳转地址。 2.添加新页面，修改路由配置。

3.以下为第三步中登录和删除的功能。 4.实现前端页面

![b989ae75c0fa47c8966406c280f45b89.png][]

2. 知道request.js 作用 （src/utils/request.js）:他的作用就是 地址。访问的地址

![7f54eec69eb0431c98ceabb87e557658.png][]

![1bfb2dd9d66c4edd854967716ef1a99c.png][]

base api:

![ffdaed7ee77d457ba6f8858545076050.png][]

3.跨域的概念：当一个网页的 JavaScript 代码尝试访问不同源（不同协议、域名或端口）的资源时，就会引发跨域问题。（说白了，就是浏览器，访问后台的东西）

###### 内容介绍 ######

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:426.1pt;"> 1、Axios（重点） 2、Node 3、NPM（重点） 4、babel 5、模块化（重点） 6、webpack 7、前端工程搭建 8、前端工程介绍 9、前端开发过程介绍 10、登录改造成本地接口 </td> 
 </tr> 
 </tbody> 
</table>

###### Axios ######

&nbsp;&nbsp;&nbsp; "success": true,

&nbsp;&nbsp;&nbsp; "code": 20000,

&nbsp;&nbsp;&nbsp; "message": "成功",

&nbsp;&nbsp;&nbsp; "data": {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "items": [

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "id": "1",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "name": "刘德华",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "intro": "毕业于师范大学数学系，热爱教育事业，执教数学思维6年有余"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "id": "2",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "name": "zhang3",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "intro": "毕业于师范大学数学系，热爱教育事业，执教数学思维6年有余"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "id": "3",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "name": "li4",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "intro": "毕业于师范大学数学系，热爱教育事业，执教数学思维6年有余"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ]

&nbsp;&nbsp;&nbsp; }

&nbsp;&nbsp;&nbsp; &lt;div id="app"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp; &lt;/div&gt;

&nbsp;&nbsp;&nbsp; &lt;script src="vue.min.js"&gt;&lt;/script&gt;

&nbsp;&nbsp;&nbsp; &lt;script src="axios.min.js"&gt;&lt;/script&gt;

&nbsp;&nbsp;&nbsp; &lt;script&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; let app = new Vue({

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; el:'#app',

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data:{

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; userList:[]&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; created () {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.getData()&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; methods: {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; getData(){

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; axios.get('data.json').then(response=&gt;{

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(response)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; })

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; })

&nbsp;&nbsp;&nbsp; &lt;/script&gt;

&lt;/body&gt;</code></pre> <img alt="" height="406" src="https://img-blog.csdnimg.cn/5241e4825c284e53b3700a4021fd5e17.png" width="740"> （2）完成实例 <pre><code>&lt;body&gt;

&nbsp;&nbsp;&nbsp; &lt;div id="app"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;table&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr v-for="user in userList"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;{
       {user.id}}&lt;/td&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;{
       {user.name}}&lt;/td&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;{
       {user.intro}}&lt;/td&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/tr&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/table&gt;

&nbsp;&nbsp;&nbsp; &lt;/div&gt;

&nbsp;&nbsp;&nbsp; &lt;script src="vue.min.js"&gt;&lt;/script&gt;

&nbsp;&nbsp;&nbsp; &lt;script src="axios.min.js"&gt;&lt;/script&gt;

&nbsp;&nbsp;&nbsp; &lt;script&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; let app = new Vue({

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; el: '#app',

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data: {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; userList: []

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; created() {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.getData()

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; methods: {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; getData() {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; axios.get('data.json').then(response =&gt; {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(response)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.userList = response.data.data.items

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;})

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .catch(error =&gt; {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(error)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; })

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; })

&nbsp;&nbsp;&nbsp; &lt;/script&gt;

&lt;/body&gt;</code></pre> </td> 
 </tr> 
 </tbody> 
</table>

###### Node ######

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:426.1pt;"> 1、是什么 （1）java独立运行需要jdk，js独立运行需要node （2）web工程发布需要tomcat，js服务工程运行需要node 2、安装 （1）安装包 <img alt="" height="155" src="https://img-blog.csdnimg.cn/2d389a74aadf48d19f04452d8432846d.png" width="621"> node -v <img alt="" height="56" src="https://img-blog.csdnimg.cn/2cfd4cef6e8a45da94f885872fe1bdc2.png" width="216"> 3、独立运行js代码 （1）创建目录、创建实例 <img alt="" height="43" src="https://img-blog.csdnimg.cn/6c331cb2ac974799abb6dd08bd361c0e.png" width="104"> console.log('Hello Node.js') （2）进入命令行窗口，运行 <img alt="" height="164" src="https://img-blog.csdnimg.cn/e8002bb05e8f4ebba0af19b78e27c596.png" width="564"> （3）使用工具终端窗口 <img alt="" height="277" src="https://img-blog.csdnimg.cn/f92b314d9b3042cf9f3d32229c007b9e.png" width="393"> <img alt="" height="197" src="https://img-blog.csdnimg.cn/c7977a5bf55547d8b5a4786ddde943e9.png" width="549"> 4、js服务工程运行 （1）创建实例 const http = require('http'); http.createServer(function (request, response) { &nbsp;&nbsp;&nbsp; // 发送 HTTP 头部 &nbsp;&nbsp;&nbsp; // HTTP 状态值: 200 : OK &nbsp;&nbsp;&nbsp; // 内容类型: text/plain &nbsp;&nbsp;&nbsp; response.writeHead(200, { 'Content-Type': 'text/plain'}); &nbsp;&nbsp;&nbsp; // 发送响应数据 "Hello World" &nbsp;&nbsp;&nbsp; response.end('Hello Server'); }).listen(8888); // 终端打印如下信息 console.log('Server running at http://127.0.0.1:8888/'); （2）运行 <img alt="" height="101" src="https://img-blog.csdnimg.cn/e1ab37ccd16541bf828302d1c2778e1a.png" width="486"> <img alt="" height="132" src="https://img-blog.csdnimg.cn/7f59d954768341049e1b2a42f3a9a2cb.png" width="324"> 5、问题解决 （1）在cmd下运行node命令正常，在vscode里运行报错 *原因：vscode权限不够 *解决：调整权限 <img alt="" height="664" src="https://img-blog.csdnimg.cn/04da115dd95744b78914a5ba50ec1df3.png" width="637"> <img alt="" height="671" src="https://img-blog.csdnimg.cn/25939c03995f42428cd0d79fd2187659.png" width="734"> （2）在cmd下运行node命令报错 可以重启系统 卸载node后，重新安装 </td> 
 </tr> 
 </tbody> 
</table>

###### NPM包管理器 ######

###### Babel ######

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:426.1pt;"> 1、是什么 Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。 这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。 2、安装 npm install --global babel-cli #查看是否安装成功 babel --version <img alt="" height="56" src="https://img-blog.csdnimg.cn/c9f5dac71eec405096dc0ab9799327ec.png" width="606"> 3、使用 （1）创建新目录，npm初始化 <img alt="" height="107" src="https://img-blog.csdnimg.cn/af0028ac491f4b93bfdd0374f88fa678.png" width="161"> npm init -y （2）创建目录、创建ES6代码 <img alt="" height="52" src="https://img-blog.csdnimg.cn/d998a1074f1d42cd93eb313b63f8b5be.png" width="99"> // 转码前 // 定义数据 let input = [1, 2, 3] // 将数组的每个元素 +1 input = input.map(item =&gt; item + 1) console.log(input) （3）添加配置文件 &nbsp;.babelrc <img alt="" height="268" src="https://img-blog.csdnimg.cn/7527abb305ca49e1abee1da1a0fd5009.png" width="581"> { &nbsp;&nbsp;&nbsp; "presets": ["es2015"], &nbsp;&nbsp;&nbsp; "plugins": [] } （4）安装转码器 npm install --save-dev babel-preset-es2015 （5）创建目录，进行转码 <img alt="" height="151" src="https://img-blog.csdnimg.cn/37b57da74c78412dbcbc9c95ff3b8348.png" width="146"> *转单个文件 babel src/01.js -o dist/001.js <img alt="" height="59" src="https://img-blog.csdnimg.cn/43621e8fa03943c298d5ca258350d0b3.png" width="743"> *转整个目录 babel src -d dist <img alt="" height="55" src="https://img-blog.csdnimg.cn/33ecf2d3b0b8458cbb76cabdddb35ca7.png" width="609"> </td> 
 </tr> 
 </tbody> 
</table>

###### 模块化 ######

&nbsp;&nbsp;&nbsp; return parseInt(a) + parseInt(b)

}

const subtract = function(a,b){

&nbsp;&nbsp;&nbsp; return parseInt(a) - parseInt(b)

}

//简写

module.exports = {

&nbsp;&nbsp;&nbsp; sum,

&nbsp;&nbsp;&nbsp; subtract

}

（3）创建导入2.js

//引入模块，注意：当前路径必须写 ./

const m = require('./1.js')

console.log(m)

const result1 = m.sum(1, 2)

const result2 = m.subtract(1, 2)

console.log(result1, result2)</code></pre> （4）运行 <img alt="" height="75" src="https://img-blog.csdnimg.cn/82d8dffc338042bc958d284db395fa1e.png" width="505"> 4、实现ES6模块化方式一（函数方式） （1）创建目录es6 （2）导出文件01.js <pre><code>export function getList() {

&nbsp;&nbsp;&nbsp; console.log('获取数据列表')

}

export function save() {

&nbsp;&nbsp;&nbsp; console.log('保存数据')

}

（3）导入文件02.js

//只取需要的方法即可，多个方法用逗号分隔

import { getList, save } from "./01.js"

getList()

save()</code></pre> （4）运行测试 <img alt="" height="212" src="https://img-blog.csdnimg.cn/e464be727675445e87b0baa2b95d471b.png" width="575"> *node不支持es6 （5）借助babel转码 <img alt="" height="75" src="https://img-blog.csdnimg.cn/be8103f689b74745bf3c49f084c85cc1.png" width="658"> <img alt="" height="49" src="https://img-blog.csdnimg.cn/4b8ddc78544b44f3a253fa24e673eacd.png" width="524"> 5、实现ES6模块化方式二（方法方式） <pre><code>（1）导出文件001.js

export default {

&nbsp;&nbsp;&nbsp; getList() {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log('获取数据列表2')

&nbsp;&nbsp;&nbsp; },

&nbsp;&nbsp;&nbsp; save() {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log('保存数据2')

&nbsp;&nbsp;&nbsp; }

}

（2）导入文件002.js

import user from "./001.js"

user.getList()

user.save()</code></pre> （3）测试同上 </td> 
 </tr> 
 </tbody> 
</table>

###### Webpack ######

exports.info = function (str) {

&nbsp;&nbsp;&nbsp; document.write(str);

}

*02.js

exports.add = function (a, b) {

&nbsp;&nbsp;&nbsp; return a + b;

}

（2）src下创建main.js

const common = require('./01');

const utils = require('./02');

common.info('Hello world!' + utils.add(100, 200));

（3）webpack目录下创建配置文件webpack.config.js

const path = require("path"); //Node.js内置模块

module.exports = {

&nbsp;&nbsp;&nbsp; entry: './src/main.js', //配置入口文件

&nbsp;&nbsp;&nbsp; output: {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; filename: 'bundle.js' //输出文件

&nbsp;&nbsp;&nbsp; }

}</code></pre> （4）打包js webpack <img alt="" height="236" src="https://img-blog.csdnimg.cn/c853d72f38d5458aae1d60a0c3557f61.png" width="942"> webpack --mode=development #没有警告 <img alt="" height="116" src="https://img-blog.csdnimg.cn/1e853efeb8bb4407ab2804097ef76cb2.png" width="727"> （5）创建页面，导入js webpack目录下创建index.html <pre><code>&lt;body&gt;

&nbsp;&nbsp;&nbsp; &lt;script src="dist/bundle.js"&gt;&lt;/script&gt;

&lt;/body&gt;</code></pre> （6）发布测试 <img alt="" height="178" src="https://img-blog.csdnimg.cn/df0a7b143e624ff2ac5a2a94c2a3795b.png" width="530"> 5、打包css （1）安装style-loader和 css-loader npm install --save-dev style-loader css-loader （2）在webpack.config.js添加相关内容 <pre><code>const path = require("path"); //Node.js内置模块

module.exports = {

&nbsp;&nbsp;&nbsp; entry: './src/main.js', //配置入口文件

&nbsp;&nbsp;&nbsp; output: {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; filename: 'bundle.js' //输出文件

&nbsp;&nbsp;&nbsp; },

&nbsp;&nbsp;&nbsp; module: {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; rules: [&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; test: /\.css$/,&nbsp;&nbsp;&nbsp; //打包规则应用到以css结尾的文件上

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; use: ['style-loader', 'css-loader']

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ]&nbsp;

&nbsp;&nbsp;&nbsp; }

}

（3）在src文件夹创建style.css

body{

&nbsp;&nbsp;&nbsp; background:pink;

}</code></pre> （4）在main.js中导入样式 require('./style.css'); <img alt="" height="198" src="https://img-blog.csdnimg.cn/e3519d42831f41e0aaf13c04bcfde2f0.png" width="635"> （5）重新打包 <img alt="" height="286" src="https://img-blog.csdnimg.cn/29789fe572fe4aa8be6d6b97361d31ba.png" width="780"> <img alt="" height="274" src="https://img-blog.csdnimg.cn/fb3a58e6c79e4940a2ad964248404473.png" width="653"> </td> 
 </tr> 
 </tbody> 
</table>

###### 搭建前端工程 ######

###### 前端框架介绍 ######

###### 前端开发过程介绍 ######

###### 登录改造成本地接口 ######

&nbsp;*info（get） ：&nbsp;

{"code":20000,"data":{"roles":["admin"],

"introduction":"I am a super administrator",

"avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",

"name":"Super Admin"}}
</code></pre> 2、创建后端模拟登陆接口 <pre><code>@ApiOperation(value = "模拟登陆")

@PostMapping("login")

// {"code":20000,"data":{"token":"admin-token"}}

public R login(){

&nbsp;&nbsp;&nbsp; return R.ok().data("token","admin-token");

}

@ApiOperation(value = "模拟获取用户信息")

@GetMapping("info")

//{"code":20000,"data":{"roles":["admin"],

//"introduction":"I am a super administrator",

//"avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",

//"name":"Super Admin"}}

public R info(){

&nbsp;&nbsp;&nbsp; Map&lt;String,Object&gt; map = new HashMap&lt;&gt;();

&nbsp;&nbsp;&nbsp; map.put("roles","admin");

&nbsp;&nbsp;&nbsp; map.put("introduction","I am a super administrator");

&nbsp;&nbsp;&nbsp; map.put("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");

&nbsp;&nbsp;&nbsp; map.put("name","Super Admin");

&nbsp;&nbsp;&nbsp; return R.ok().data(map);

}</code></pre> 3、改造前端 （1）修改运行时配置 <img alt="" height="206" src="https://img-blog.csdnimg.cn/ab4cd71a3a694fd49b986071dd091879.png" width="538"> （2）修改api接口方法 <img alt="" height="86" src="https://img-blog.csdnimg.cn/8050c5faeb314432be6b1c2e85d91f82.png" width="100"> <img alt="" height="397" src="https://img-blog.csdnimg.cn/c419cf23e85949f48dc971311e731adf.png" width="616"> 4、登陆测试 （1）错误日志 <img alt="" height="119" src="https://img-blog.csdnimg.cn/2bae40851e7046e3ab92d7e12e583b25.png" width="740"> （2）错误定位 *URL错误 <img alt="" height="72" src="https://img-blog.csdnimg.cn/5d0b0702bd604c36b07ef4644dadd619.png" width="726"> *跨域问题（确认）：系统访问中协议、IP地址、端口号有一个发生变化，就会出现跨域问题 （3）解决问题 <img alt="" height="195" src="https://img-blog.csdnimg.cn/30eb94a37b83433a96fc4bbb3ee58657.png" width="555"> <img alt="" height="394" src="https://img-blog.csdnimg.cn/53e1c4da13be45ba8552d528dc5b808c.png" width="694"> </td> 
 </tr> 
 </tbody> 
</table>

[31ef1c459bb94a53be939d4c1205f837.png]: https://img-blog.csdnimg.cn/31ef1c459bb94a53be939d4c1205f837.png
[b989ae75c0fa47c8966406c280f45b89.png]: https://img-blog.csdnimg.cn/b989ae75c0fa47c8966406c280f45b89.png
[7f54eec69eb0431c98ceabb87e557658.png]: https://img-blog.csdnimg.cn/7f54eec69eb0431c98ceabb87e557658.png
[1bfb2dd9d66c4edd854967716ef1a99c.png]: https://img-blog.csdnimg.cn/1bfb2dd9d66c4edd854967716ef1a99c.png
[ffdaed7ee77d457ba6f8858545076050.png]: https://img-blog.csdnimg.cn/ffdaed7ee77d457ba6f8858545076050.png